Foreign-Mirrors/Fooocus
1
0
Fork 0
mirror of https://github.com/lllyasviel/Fooocus.git synced 2026-08-16 13:13:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: adds preview overlay for styles (#1762)

Browse Source 
* 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>
This commit is contained in:
Chris Rohrer
2024-01-07 15:10:42 -08:00
committed by GitHub
co-authored by Manuel Schmid Manuel Schmid lllyasviel
parent 176faf6f34
commit f298ebca76
282 changed files with 59 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/script.js
+34
View File
@@ -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
*/