feat: adds preview overlay for styles (#1762)

* feat: adds preview overlay for styles

* fix: implement correct path resolution for all OS

solves issues for Windows

* fix: makes preview overlay also work with other languages

* feat: scale down images to 258x200, fix aspect ratio in css

reduces file size from 19,6MB to 3,4MB

* fix: adjust z-index to correctly overlay gradio border pulse when generating images

* update files

* version

---------

Co-authored-by: Manuel Schmid <9307310+mashb1t@users.noreply.github.com>
Co-authored-by: Manuel Schmid <manuel.schmid@odt.net>
Co-authored-by: lllyasviel <lyuminzhang@outlook.com>

css/style.css

@@ -196,3 +196,18 @@
     pointer-events: none;
     display: none;
 }
+
+#stylePreviewOverlay {
+    display: none;
+    width: 128px;
+    height: 128px;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    border: solid 1px lightgrey;
+    transform: translate(-140px, 20px);
+    background-size: cover;
+    background-position: center;
+    border-radius: 5px;
+    z-index: 100;
+}

fooocus_version.py

@@ -1 +1 @@
-version = '2.1.860'
+version = '2.1.861'

javascript/localization.js

@@ -45,6 +45,9 @@ function processTextNode(node) {
     var tl = getTranslation(text);
     if (tl !== undefined) {
         node.textContent = tl;
+        if (text && node.parentElement) {
+          node.parentElement.setAttribute("data-original-text", text);
+        }
     }
 }
 

javascript/script.js

@@ -119,6 +119,7 @@ document.addEventListener("DOMContentLoaded", function() {
         }
     });
     mutationObserver.observe(gradioApp(), {childList: true, subtree: true});
+    initStylePreviewOverlay();
 });
 
 /**
@@ -145,6 +146,39 @@ document.addEventListener('keydown', function(e) {
     }
 });
 
+function initStylePreviewOverlay() {
+    let overlayVisible = false;
+    const samplesPath = document.querySelector("meta[name='samples-path']").getAttribute("content")
+    const overlay = document.createElement('div');
+    overlay.id = 'stylePreviewOverlay';
+    document.body.appendChild(overlay);
+    document.addEventListener('mouseover', function(e) {
+        const label = e.target.closest('.style_selections label');
+        if (!label) return;
+        label.removeEventListener("mouseout", onMouseLeave);
+        label.addEventListener("mouseout", onMouseLeave);
+        overlayVisible = true;
+        overlay.style.display = "block";
+        const originalText = label.querySelector("span").getAttribute("data-original-text");
+        const name = originalText || label.querySelector("span").textContent;
+        overlay.style.backgroundImage = `url("${samplesPath.replace(
+          "fooocus_v2",
+          name.toLowerCase().replaceAll(" ", "_")
+        )}")`;
+        function onMouseLeave() {
+            overlayVisible = false;
+            overlay.style.display = "none";
+            overlay.style.backgroundImage = "";
+            label.removeEventListener("mouseout", onMouseLeave);
+        }
+    });
+    document.addEventListener('mousemove', function(e) {
+        if(!overlayVisible) return;
+        overlay.style.left = `${e.clientX}px`;
+        overlay.style.top = `${e.clientY}px`;
+    });
+}
+
 /**
  * checks that a UI element is not in another hidden element or tab content
  */

modules/ui_gradio_extensions.py

@@ -30,6 +30,7 @@ def javascript_html():
     edit_attention_js_path = webpath('javascript/edit-attention.js')
     viewer_js_path = webpath('javascript/viewer.js')
     image_viewer_js_path = webpath('javascript/imageviewer.js')
+    samples_path = webpath(os.path.abspath('./sdxl_styles/samples/fooocus_v2.jpg'))
     head = f'<script type="text/javascript">{localization_js(args_manager.args.language)}</script>\n'
     head += f'<script type="text/javascript" src="{script_js_path}"></script>\n'
     head += f'<script type="text/javascript" src="{context_menus_js_path}"></script>\n'
@@ -38,6 +39,7 @@ def javascript_html():
     head += f'<script type="text/javascript" src="{edit_attention_js_path}"></script>\n'
     head += f'<script type="text/javascript" src="{viewer_js_path}"></script>\n'
     head += f'<script type="text/javascript" src="{image_viewer_js_path}"></script>\n'
+    head += f'<meta name="samples-path" content="{samples_path}"></meta>\n'
 
     if args_manager.args.theme:
         head += f'<script type="text/javascript">set_theme(\"{args_manager.args.theme}\");</script>\n'