If you don't have a lot of images, you can go over them all manually and write the "please invert me" request directly into the filename.
CSS:
img[src^="/images/invertable"] {
filter: hue-rotate(180deg) invert(1);
}
Now all image names starting with "invertable" will be inverted.Neat, as a reader, I've absolutely wanted this exact behavior many times. Do you have any examples of incorrectly classified images? As you say, the model seems quite simple, but I wonder if there are some pathological kinds of photographs that result in inversion.
I built dark mode for an email client’s (shortwave.com) HTML emails and this was the last major hurdle to solve. I wish that had existed then :)
Generally making emails dark mode is a non trivial problem, there is an hope source library that is a good start from Tempo: https://github.com/yourtempo/tempo-message-dark-mode
However there are plenty of edge cases that plugin doesn’t handle that we had to fix at Shortwave. Examples include legacy HTML4 attributes, better support for emails that are half dark mode, emails that have background images of #fff (looking at you google play reciepts), the list goes on. It’s honestly pretty solid now
Huh. This is neat.
As a side, I have a great frustration balancing dark mode with other things. I use flux on my Mac, not for color temp but strictly for the "darkroom" mode which inverts everything and makes the (inverted) brightness values into red. I only do this when coding at night, to help with my sleep... but the trouble is it's made for people who use light mode during the day. I use dark mode all day. So I have to get out of dark mode and change my vscode theme to light in order for it to work. Not a huge deal, but then I open up some web page with a black background and go blind from all the red.
Does this distinguish white backgrounds from transparent backgrounds? For example, a graph consisting of anything-on-white should probably be inverted, while a graph consisting of pure red on transparent should probably not be inverted. For the latter, increasing the luminance (i.e. make it pink on transparent) might be best, followed by leaving it as-is, followed by inverting.
But I guess with ML reinforced by human feedback, trends like this manifest without having to explicitly handle them as special cases at all...
I'm confused... has the meaning of "invert" changed since I last looked? Because the bar chart given as an example on the page isn't actually inverted (the color of the bars and as far as I can see also the text stay the same, only the background changes from light to dark). So, additionally to this API, you need another model that does the actual "inversion"? Or just good old editing?
EDIT: from another comment - actually "inverting" seems to refer to doing
hue-rotate(180deg) invert()
...which (if I read it correctly) inverts the hue of colored areas before applying the actual inversion in order to keep the colors the same (more or less - see also https://stackoverflow.com/questions/65344006/why-does-filter...) ? Not a frontend developer, so I wasn't familiar with this trick until now. TIL...How can you use or create this model for conventional non-API projects? Like to embed it within some C code?
Very cool! Nice job! Out of curiosity, how much CPU/GPU/RAM resources do you need to allocate to run something like this? Like you mention you're using small models. For example, could this run on a t2.micro on EC2? (1 vCPU + 1GB RAM)
not exactly the same but for colored pictures GPT recently suggested inverting the image and then turning the color space by 180° so that the original colors are restored... pretty genius
What I am interested in is a plugin/extension for Firefox/Chrome that can invert a video running on a page (darkreader is not doing that).
I would be interested to see more samples. Naively it seems like you could just say "isPhoto ? REDUCE_BRIGHTNESS : INVERT"
Is inverting the colors in a photo ever the right choice? People come out looking really strange.
What's your accuracy?
This is really cool! Do you have some more example images somewhere?
Pretty cool! A nice addition would be an in-browser runtime!
Dark Reader needs this! Nice work.
Semi-related - I saw this on https://v8.dev a while back, but `filter: hue-rotate(180deg) invert();` can be a neat CSS trick to 'dark mode' some kinds of graphics, while not screwing with the colours so much. The `hue-rotate` help a bit to keep 'blues blue' etc.
It's far from perfect, but it's a neat one to have in your back pocket.