Dont work preview overlay for styles

[Irmagon]

Read Troubleshoot

[x] I admit that I have read the Troubleshoot before making this issue.

Describe the problem
Styles preview generated empty overlay and many errors in browser console (with wrong addresses to style preview images).

GET http://127.0.0.1:7865/file=z:%0Fooocus%0Fooocussdxl_stylessamples%0Fooocus_v2.jpg?1704714217.6107707 404 (Not Found)
{"detail":"File not found: z:\u000fooocus\u000fooocussdxl_stylessamples\u000fooocus_v2.jpg."}

Full Console Log
Fooocus started with .\python_embeded\python.exe -s Fooocus\entry_with_update.py --theme dark

I make print variables from ui_gradio_extensions.py and see correct path in head:

Fooocus version: 2.1.861
samples_path
file=z:\Fooocus\Fooocus\sdxl_styles\samples\fooocus_v2.jpg?1704714217.6107707
head
<script type="text/javascript">window.localization = {}</script>
<script type="text/javascript" src="file=z:\Fooocus\Fooocus\javascript\script.js?1704714217.9068532"></script>
<script type="text/javascript" src="file=z:\Fooocus\Fooocus\javascript\contextMenus.js?1698535460.3770072"></script>
<script type="text/javascript" src="file=z:\Fooocus\Fooocus\javascript\localization.js?1704714217.9068532"></script>
<script type="text/javascript" src="file=z:\Fooocus\Fooocus\javascript\zoom.js?1702926353.1092124"></script>
<script type="text/javascript" src="file=z:\Fooocus\Fooocus\javascript\edit-attention.js?1699772791.0943055"></script>
<script type="text/javascript" src="file=z:\Fooocus\Fooocus\javascript\viewer.js?1700072679.700241"></script>
<script type="text/javascript" src="file=z:\Fooocus\Fooocus\javascript\imageviewer.js?1700072679.6992412"></script>
<meta name="samples-path" content="file=z:\Fooocus\Fooocus\sdxl_styles\samples\fooocus_v2.jpg?1704714217.6107707"></meta>
<script type="text/javascript">set_theme("dark");</script>

[mashb1t]

Checked it just now on Windows, MacOS and Colab, all working fine.

Please check if the files do exist on your drive and provide more insights.. Are you using Fooocus in a virtual environment (WSL/Docker or similar)?

[ttosha33]

Found a temporary solution.
In javascript/script.js file, lines 164-167.

overlay.style.backgroundImage = `url("${samplesPath.replace(
    "fooocus_v2",
    name.toLowerCase().replaceAll(" ", "_")
).replaceAll("\\", "\\\\")}")`; // <--- replaces backslashes in url

It seems that, when the app sends requests, it somehow escapes the letter 's'.

[Irmagon]

Checked it just now on Windows, MacOS and Colab, all working fine.

Please check if the files do exist on your drive and provide more insights.. Are you using Fooocus in a virtual environment (WSL/Docker or similar)?

Fooocus installed in Win native mode.

[Irmagon]

Found a temporary solution. In javascript/script.js file, lines 164-167.

overlay.style.backgroundImage = `url("${samplesPath.replace(
    "fooocus_v2",
    name.toLowerCase().replaceAll(" ", "_")
).replaceAll("\\", "\\\\")}")`; // <--- replaces backslashes in url

It seems that, when the app sends requests, it somehow escapes the letter 's'.

Thx, this WA is works fine )

[lllyasviel]

can someone tell me what happens

[mashb1t]

It seems that, when the app sends requests, it somehow escapes the letter 's'.

@ttosha33 this sounds like a very special individual problem.
@ttosha33 @Irmagon Please let us know more about the circumstances to provide a sufficient fix for all users if necessary.

[N1PC]

861 didn't work for me either, but 862 displays the thumbnails nice and correctly :-)

[ttosha33]

@mashb1t I cannot really explain why it does this, all I can say is that in 861 when the app sends a request for the picture on the server, the URL is missing a few backslashes (saw it in dev tools). I am guessing that it somehow escaped a few characters instead of being encoded properly. I suspect two reasons for this to happen: browser and OS. I use Chromium-based browser on Windows.

So my solution was to replace a single backslash with two backslashes, so when browser is parsing it, it keeps the backslash.

[mashb1t]

Anyways, this is fixed now and we at least have the fallback in place even if this only happens for some few individual users.