feat: adds preview overlay for styles

[crohrer]

closes #1743

this includes sample images from #1749 and displays them in an overlay on mouseover.

[mashb1t]

lgtm, 100% implements requested enhancement in #1743 👍

[diaolulu1]

I am unable to display images here, only a transparent box is shown.

[mashb1t]

@diaolulu1 please check your network tab, this may have to do with slow internet speed between you and the server (if you're using Fooocus remotely).
If that isn't the case please check if the meta samples-path is correctly set to your project root, see screenshot attached:

[diaolulu1]

@diaolulu1 please check your network tab, this may have to do with slow internet speed between you and the server (if you're using Fooocus remotely). If that isn't the case please check if the meta samples-path is correctly set to your project root, see screenshot attached:

[mashb1t]

@diaolulu1 please check your network tab, this may have to do with slow internet speed between you and the server (if you're using Fooocus remotely). If that isn't the case please check if the meta samples-path is correctly set to your project root, see screenshot attached:

@diaolulu1 I see your code is unchanged and should work. Please check the browser network tab for any requests and the browser page source code at samples-path to help debug this.

[diaolulu1]

@diaolulu1 please check your network tab, this may have to do with slow internet speed between you and the server (if you're using Fooocus remotely). If that isn't the case please check if the meta samples-path is correctly set to your project root, see screenshot attached:

@diaolulu1 I see your code is unchanged and should work. Please check the browser network tab for any requests and the browser page source code at samples-path to help debug this.

I apologize for not understanding you earlier, but now I do. I have checked the webpage source code, and the address is correct. Using that address, I was able to successfully open the image in the file explorer.

[mashb1t]

@diaolulu1 i can confirm that it is not working on Windows as the paths are wrong.
@crohrer please ensure both Windows and Linux/MacOS paths are working correctly for preview images.

[mashb1t]

@diaolulu1 fixed & tested for both Windows and MacOS, please check again

[JulienZLQ]

After trying, it can meet the preview effect, but after using a non-native language, the inconsistent page text and the picture file name will not take effect. It cannot be automatically associated and matched from the source. I need to change the file name of the picture one by one.

[diaolulu1]

@diaolulu1 fixed & tested for both Windows and MacOS, please check again

Thank you very much for your modification; the program is now running normally, but only in English. If switched to Chinese or other languages, it cannot adapt properly. The image filenames need to be changed to the corresponding language, which cannot guarantee universality.

[crohrer]

I implemented support for other languages. I hope it works for everyone

[docppp]

Changes from this PR are now reflected in #1749

[simartem]

LEGEND!

[mashb1t]

Thank you for the adjustment, works for me on both Windows and MacOS using various different languages, incl. default.

[diaolulu1]

Great！Thanks for your job！

[docppp]

If preview overlay will be merged without log-like page, log.html should be removed.

[mashb1t]

@docppp i assume you mean that the PR #1749 can then be closed, right?

[docppp]

@mashb1t Not exactly, as per my understanding, the is no decision yet if only tooltip (this PR) or #1749 will be merged. If it happens, that this one get the green light, then sdxl_styles/samples/log.html file is useless.

[lllyasviel]

i am going to merge.
but still need to consider that increased file size of this repo since the auto update will pull all files.
i will see if i can make extra files smaller or so

[simartem]

ged without log-like

I dont if its someway technically possible (just like downloading the default model after the code is run on local) but instead of pulling all sample style images, script will download external sample/images from an external cloud link and put them in the required folder on first run, after user upgraded to new version. So that the original software size will remain same.

[mashb1t]

@lllyasviel i've scale down the images to Retina resolution (2x displayed res), fixed the aspect ratio and applied jpeg compression. This reduces the file size from 19,6MB to 3,4MB.

[xhoxye]

@lllyasviel i've scale down the images to Retina resolution (2x displayed res), fixed the aspect ratio and applied jpeg compression. This reduces the file size from 19,6MB to 3,4MB.

Is it possible to save small pictures but display large ones?
130 x100 px ,Is this size too small?

[mashb1t]

Is it possible to save small pictures but display large ones? 130 x100 px ,Is this size too small?

Yes, you can bump the css width and height e.g. x2, but keep in mind that quality will decrease from higher res. than 260x200.
In general, it's best practice to keep images with x2 resolution than displayed (retina).

I personally would really like to keep it small (current 130x100px):

• saves disk space
• is sufficient to get a preview
• great on mobile devices / viewports

[mashb1t]

@lllyasviel Is it intended that the images are now smaller in dimensions and >200% larger in file size? Did you compress the images after downscaling?

In general, it's best practice to keep images with x2 resolution than displayed (retina).

As mentioned, it is best practice to keep images x2 the display size for upscaled outputs, so 256x256 would be ideal here when displaying as 128x128px.

[mashb1t]

Some files were not correctly renamed, please merge the changes of #1809

[GoldMath]

Thanks for the addition, I just noticed that small issue reported here with the thumbnails at the bottom at the windows

Minor UI issue with image preview in Style when mouse hover at the bottom #1816

EDIT: Fixed #1829