feat: adds preview overlay for styles (lllyasviel#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 <[email protected]> Co-authored-by: Manuel Schmid <[email protected]> Co-authored-by: lllyasviel <[email protected]>
aryan1107 · Jan 7, 2024 · f298ebc · f298ebc
1 parent 176faf6
commit f298ebc
Show file tree

Hide file tree

Showing 282 changed files with 59 additions and 1 deletion.
diff --git a/css/style.css b/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;
+}
diff --git a/fooocus_version.py b/fooocus_version.py
@@ -1 +1 @@
-version = '2.1.860'
+version = '2.1.861'
diff --git a/javascript/localization.js b/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);
+        }
     }
 }
 

diff --git a/javascript/script.js b/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
  */

diff --git a/modules/ui_gradio_extensions.py b/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'

diff --git a/sdxl_styles/samples/Academia.jpg b/sdxl_styles/samples/Academia.jpg
diff --git a/sdxl_styles/samples/Baroque.jpg b/sdxl_styles/samples/Baroque.jpg
diff --git a/sdxl_styles/samples/Caricature.jpg b/sdxl_styles/samples/Caricature.jpg
diff --git a/sdxl_styles/samples/Constructivism.jpg b/sdxl_styles/samples/Constructivism.jpg
diff --git a/sdxl_styles/samples/Cubism.jpg b/sdxl_styles/samples/Cubism.jpg
diff --git a/sdxl_styles/samples/Dadaism.jpg b/sdxl_styles/samples/Dadaism.jpg
diff --git a/sdxl_styles/samples/Expressionism.jpg b/sdxl_styles/samples/Expressionism.jpg
diff --git a/sdxl_styles/samples/Fauvism.jpg b/sdxl_styles/samples/Fauvism.jpg
diff --git a/sdxl_styles/samples/Futurism.jpg b/sdxl_styles/samples/Futurism.jpg
diff --git a/sdxl_styles/samples/Glitchcore.jpg b/sdxl_styles/samples/Glitchcore.jpg
diff --git a/sdxl_styles/samples/Idyllic.jpg b/sdxl_styles/samples/Idyllic.jpg
diff --git a/sdxl_styles/samples/Impressionism.jpg b/sdxl_styles/samples/Impressionism.jpg
diff --git a/sdxl_styles/samples/Medievalism.jpg b/sdxl_styles/samples/Medievalism.jpg
diff --git a/sdxl_styles/samples/Minimalism.jpg b/sdxl_styles/samples/Minimalism.jpg
diff --git a/sdxl_styles/samples/Neoclassicism.jpg b/sdxl_styles/samples/Neoclassicism.jpg
diff --git a/sdxl_styles/samples/Rococo.jpg b/sdxl_styles/samples/Rococo.jpg
diff --git a/sdxl_styles/samples/Sketchup.jpg b/sdxl_styles/samples/Sketchup.jpg
diff --git a/sdxl_styles/samples/Suprematism.jpg b/sdxl_styles/samples/Suprematism.jpg
diff --git a/sdxl_styles/samples/Surrealism.jpg b/sdxl_styles/samples/Surrealism.jpg
diff --git a/sdxl_styles/samples/Terragen.jpg b/sdxl_styles/samples/Terragen.jpg
diff --git a/sdxl_styles/samples/abstract_expressionism.jpg b/sdxl_styles/samples/abstract_expressionism.jpg
diff --git a/sdxl_styles/samples/action_figure.jpg b/sdxl_styles/samples/action_figure.jpg
diff --git a/sdxl_styles/samples/adorable_3d_character.jpg b/sdxl_styles/samples/adorable_3d_character.jpg
diff --git a/sdxl_styles/samples/adorable_kawaii.jpg b/sdxl_styles/samples/adorable_kawaii.jpg
diff --git a/sdxl_styles/samples/ads_advertising.jpg b/sdxl_styles/samples/ads_advertising.jpg
diff --git a/sdxl_styles/samples/ads_automotive.jpg b/sdxl_styles/samples/ads_automotive.jpg
diff --git a/sdxl_styles/samples/ads_corporate.jpg b/sdxl_styles/samples/ads_corporate.jpg
diff --git a/sdxl_styles/samples/ads_fashion_editorial.jpg b/sdxl_styles/samples/ads_fashion_editorial.jpg
diff --git a/sdxl_styles/samples/ads_food_photography.jpg b/sdxl_styles/samples/ads_food_photography.jpg
diff --git a/sdxl_styles/samples/ads_gourmet_food_photography.jpg b/sdxl_styles/samples/ads_gourmet_food_photography.jpg
diff --git a/sdxl_styles/samples/ads_luxury.jpg b/sdxl_styles/samples/ads_luxury.jpg
diff --git a/sdxl_styles/samples/ads_real_estate.jpg b/sdxl_styles/samples/ads_real_estate.jpg
diff --git a/sdxl_styles/samples/ads_retail.jpg b/sdxl_styles/samples/ads_retail.jpg
diff --git a/sdxl_styles/samples/art_deco.jpg b/sdxl_styles/samples/art_deco.jpg
diff --git a/sdxl_styles/samples/art_nouveau.jpg b/sdxl_styles/samples/art_nouveau.jpg
diff --git a/sdxl_styles/samples/artstyle_abstract.jpg b/sdxl_styles/samples/artstyle_abstract.jpg
diff --git a/sdxl_styles/samples/artstyle_abstract_expressionism.jpg b/sdxl_styles/samples/artstyle_abstract_expressionism.jpg
diff --git a/sdxl_styles/samples/artstyle_art_deco.jpg b/sdxl_styles/samples/artstyle_art_deco.jpg
diff --git a/sdxl_styles/samples/artstyle_art_nouveau.jpg b/sdxl_styles/samples/artstyle_art_nouveau.jpg
diff --git a/sdxl_styles/samples/artstyle_constructivist.jpg b/sdxl_styles/samples/artstyle_constructivist.jpg
diff --git a/sdxl_styles/samples/artstyle_cubist.jpg b/sdxl_styles/samples/artstyle_cubist.jpg
diff --git a/sdxl_styles/samples/artstyle_expressionist.jpg b/sdxl_styles/samples/artstyle_expressionist.jpg
diff --git a/sdxl_styles/samples/artstyle_graffiti.jpg b/sdxl_styles/samples/artstyle_graffiti.jpg
diff --git a/sdxl_styles/samples/artstyle_hyperrealism.jpg b/sdxl_styles/samples/artstyle_hyperrealism.jpg
diff --git a/sdxl_styles/samples/artstyle_impressionist.jpg b/sdxl_styles/samples/artstyle_impressionist.jpg
diff --git a/sdxl_styles/samples/artstyle_pointillism.jpg b/sdxl_styles/samples/artstyle_pointillism.jpg
diff --git a/sdxl_styles/samples/artstyle_pop_art.jpg b/sdxl_styles/samples/artstyle_pop_art.jpg
diff --git a/sdxl_styles/samples/artstyle_psychedelic.jpg b/sdxl_styles/samples/artstyle_psychedelic.jpg
diff --git a/sdxl_styles/samples/artstyle_renaissance.jpg b/sdxl_styles/samples/artstyle_renaissance.jpg
diff --git a/sdxl_styles/samples/artstyle_steampunk.jpg b/sdxl_styles/samples/artstyle_steampunk.jpg
diff --git a/sdxl_styles/samples/artstyle_surrealist.jpg b/sdxl_styles/samples/artstyle_surrealist.jpg
diff --git a/sdxl_styles/samples/artstyle_typography.jpg b/sdxl_styles/samples/artstyle_typography.jpg
diff --git a/sdxl_styles/samples/artstyle_watercolor.jpg b/sdxl_styles/samples/artstyle_watercolor.jpg
diff --git a/sdxl_styles/samples/astral_aura.jpg b/sdxl_styles/samples/astral_aura.jpg
diff --git a/sdxl_styles/samples/avant_garde.jpg b/sdxl_styles/samples/avant_garde.jpg
diff --git a/sdxl_styles/samples/bauhaus_style_poster.jpg b/sdxl_styles/samples/bauhaus_style_poster.jpg
diff --git a/sdxl_styles/samples/blueprint_schematic_drawing.jpg b/sdxl_styles/samples/blueprint_schematic_drawing.jpg
diff --git a/sdxl_styles/samples/cel_shaded_art.jpg b/sdxl_styles/samples/cel_shaded_art.jpg
diff --git a/sdxl_styles/samples/character_design_sheet.jpg b/sdxl_styles/samples/character_design_sheet.jpg
diff --git a/sdxl_styles/samples/cinematic_diva.jpg b/sdxl_styles/samples/cinematic_diva.jpg
diff --git a/sdxl_styles/samples/classicism_art.jpg b/sdxl_styles/samples/classicism_art.jpg
diff --git a/sdxl_styles/samples/color_field_painting.jpg b/sdxl_styles/samples/color_field_painting.jpg
diff --git a/sdxl_styles/samples/colored_pencil_art.jpg b/sdxl_styles/samples/colored_pencil_art.jpg
diff --git a/sdxl_styles/samples/conceptual_art.jpg b/sdxl_styles/samples/conceptual_art.jpg
diff --git a/sdxl_styles/samples/dark_fantasy.jpg b/sdxl_styles/samples/dark_fantasy.jpg
diff --git a/sdxl_styles/samples/dark_moody_atmosphere.jpg b/sdxl_styles/samples/dark_moody_atmosphere.jpg
diff --git a/sdxl_styles/samples/dmt_art_style.jpg b/sdxl_styles/samples/dmt_art_style.jpg
diff --git a/sdxl_styles/samples/doodle_art.jpg b/sdxl_styles/samples/doodle_art.jpg
diff --git a/sdxl_styles/samples/double_exposure.jpg b/sdxl_styles/samples/double_exposure.jpg
diff --git a/sdxl_styles/samples/dripping_paint_splatter_art.jpg b/sdxl_styles/samples/dripping_paint_splatter_art.jpg
diff --git a/sdxl_styles/samples/faded_polaroid_photo.jpg b/sdxl_styles/samples/faded_polaroid_photo.jpg
diff --git a/sdxl_styles/samples/flat_2d_art.jpg b/sdxl_styles/samples/flat_2d_art.jpg
diff --git a/sdxl_styles/samples/fooocus_cinematic.jpg b/sdxl_styles/samples/fooocus_cinematic.jpg
diff --git a/sdxl_styles/samples/fooocus_enhance.jpg b/sdxl_styles/samples/fooocus_enhance.jpg
diff --git a/sdxl_styles/samples/fooocus_masterpiece.jpg b/sdxl_styles/samples/fooocus_masterpiece.jpg
diff --git a/sdxl_styles/samples/fooocus_negative.jpg b/sdxl_styles/samples/fooocus_negative.jpg
diff --git a/sdxl_styles/samples/fooocus_photograph.jpg b/sdxl_styles/samples/fooocus_photograph.jpg
diff --git a/sdxl_styles/samples/fooocus_sharp.jpg b/sdxl_styles/samples/fooocus_sharp.jpg
diff --git a/sdxl_styles/samples/fooocus_v2.jpg b/sdxl_styles/samples/fooocus_v2.jpg
diff --git a/sdxl_styles/samples/fortnite_art_style.jpg b/sdxl_styles/samples/fortnite_art_style.jpg
diff --git a/sdxl_styles/samples/futuristic_biomechanical.jpg b/sdxl_styles/samples/futuristic_biomechanical.jpg
diff --git a/sdxl_styles/samples/futuristic_biomechanical_cyberpunk.jpg b/sdxl_styles/samples/futuristic_biomechanical_cyberpunk.jpg
diff --git a/sdxl_styles/samples/futuristic_cybernetic.jpg b/sdxl_styles/samples/futuristic_cybernetic.jpg
diff --git a/sdxl_styles/samples/futuristic_cybernetic_robot.jpg b/sdxl_styles/samples/futuristic_cybernetic_robot.jpg
diff --git a/sdxl_styles/samples/futuristic_cyberpunk_cityscape.jpg b/sdxl_styles/samples/futuristic_cyberpunk_cityscape.jpg
diff --git a/sdxl_styles/samples/futuristic_futuristic.jpg b/sdxl_styles/samples/futuristic_futuristic.jpg
diff --git a/sdxl_styles/samples/futuristic_retro_cyberpunk.jpg b/sdxl_styles/samples/futuristic_retro_cyberpunk.jpg
diff --git a/sdxl_styles/samples/futuristic_retro_futurism.jpg b/sdxl_styles/samples/futuristic_retro_futurism.jpg
diff --git a/sdxl_styles/samples/futuristic_sci_fi.jpg b/sdxl_styles/samples/futuristic_sci_fi.jpg
diff --git a/sdxl_styles/samples/futuristic_vaporwave.jpg b/sdxl_styles/samples/futuristic_vaporwave.jpg
diff --git a/sdxl_styles/samples/game_bubble_bobble.jpg b/sdxl_styles/samples/game_bubble_bobble.jpg
diff --git a/sdxl_styles/samples/game_cyberpunk_game.jpg b/sdxl_styles/samples/game_cyberpunk_game.jpg
diff --git a/sdxl_styles/samples/game_fighting_game.jpg b/sdxl_styles/samples/game_fighting_game.jpg
diff --git a/sdxl_styles/samples/game_gta.jpg b/sdxl_styles/samples/game_gta.jpg
diff --git a/sdxl_styles/samples/game_mario.jpg b/sdxl_styles/samples/game_mario.jpg
diff --git a/sdxl_styles/samples/game_minecraft.jpg b/sdxl_styles/samples/game_minecraft.jpg
diff --git a/sdxl_styles/samples/game_pokemon.jpg b/sdxl_styles/samples/game_pokemon.jpg
diff --git a/sdxl_styles/samples/game_retro_arcade.jpg b/sdxl_styles/samples/game_retro_arcade.jpg
diff --git a/sdxl_styles/samples/game_retro_game.jpg b/sdxl_styles/samples/game_retro_game.jpg
diff --git a/sdxl_styles/samples/game_rpg_fantasy_game.jpg b/sdxl_styles/samples/game_rpg_fantasy_game.jpg
diff --git a/sdxl_styles/samples/game_strategy_game.jpg b/sdxl_styles/samples/game_strategy_game.jpg
diff --git a/sdxl_styles/samples/game_streetfighter.jpg b/sdxl_styles/samples/game_streetfighter.jpg
diff --git a/sdxl_styles/samples/game_zelda.jpg b/sdxl_styles/samples/game_zelda.jpg
diff --git a/sdxl_styles/samples/glo_fi.jpg b/sdxl_styles/samples/glo_fi.jpg
diff --git a/sdxl_styles/samples/googie_art_style.jpg b/sdxl_styles/samples/googie_art_style.jpg
diff --git a/sdxl_styles/samples/graffiti_art.jpg b/sdxl_styles/samples/graffiti_art.jpg
diff --git a/sdxl_styles/samples/harlem_renaissance_art.jpg b/sdxl_styles/samples/harlem_renaissance_art.jpg
diff --git a/sdxl_styles/samples/high_fashion.jpg b/sdxl_styles/samples/high_fashion.jpg
diff --git a/sdxl_styles/samples/infographic_drawing.jpg b/sdxl_styles/samples/infographic_drawing.jpg
diff --git a/sdxl_styles/samples/ink_dripping_drawing.jpg b/sdxl_styles/samples/ink_dripping_drawing.jpg
diff --git a/sdxl_styles/samples/japanese_ink_drawing.jpg b/sdxl_styles/samples/japanese_ink_drawing.jpg
diff --git a/sdxl_styles/samples/knolling_photography.jpg b/sdxl_styles/samples/knolling_photography.jpg
diff --git a/sdxl_styles/samples/light_cheery_atmosphere.jpg b/sdxl_styles/samples/light_cheery_atmosphere.jpg
diff --git a/sdxl_styles/samples/logo_design.jpg b/sdxl_styles/samples/logo_design.jpg
diff --git a/sdxl_styles/samples/luxurious_elegance.jpg b/sdxl_styles/samples/luxurious_elegance.jpg
diff --git a/sdxl_styles/samples/macro_photography.jpg b/sdxl_styles/samples/macro_photography.jpg
diff --git a/sdxl_styles/samples/mandola_art.jpg b/sdxl_styles/samples/mandola_art.jpg
diff --git a/sdxl_styles/samples/marker_drawing.jpg b/sdxl_styles/samples/marker_drawing.jpg
diff --git a/sdxl_styles/samples/misc_architectural.jpg b/sdxl_styles/samples/misc_architectural.jpg
diff --git a/sdxl_styles/samples/misc_disco.jpg b/sdxl_styles/samples/misc_disco.jpg
diff --git a/sdxl_styles/samples/misc_dreamscape.jpg b/sdxl_styles/samples/misc_dreamscape.jpg
diff --git a/sdxl_styles/samples/misc_dystopian.jpg b/sdxl_styles/samples/misc_dystopian.jpg
diff --git a/sdxl_styles/samples/misc_fairy_tale.jpg b/sdxl_styles/samples/misc_fairy_tale.jpg
diff --git a/sdxl_styles/samples/misc_gothic.jpg b/sdxl_styles/samples/misc_gothic.jpg
diff --git a/sdxl_styles/samples/misc_grunge.jpg b/sdxl_styles/samples/misc_grunge.jpg
diff --git a/sdxl_styles/samples/misc_horror.jpg b/sdxl_styles/samples/misc_horror.jpg
diff --git a/sdxl_styles/samples/misc_kawaii.jpg b/sdxl_styles/samples/misc_kawaii.jpg
diff --git a/sdxl_styles/samples/misc_lovecraftian.jpg b/sdxl_styles/samples/misc_lovecraftian.jpg
diff --git a/sdxl_styles/samples/misc_macabre.jpg b/sdxl_styles/samples/misc_macabre.jpg
diff --git a/sdxl_styles/samples/misc_manga.jpg b/sdxl_styles/samples/misc_manga.jpg
diff --git a/sdxl_styles/samples/misc_metropolis.jpg b/sdxl_styles/samples/misc_metropolis.jpg
diff --git a/sdxl_styles/samples/misc_minimalist.jpg b/sdxl_styles/samples/misc_minimalist.jpg
diff --git a/sdxl_styles/samples/misc_monochrome.jpg b/sdxl_styles/samples/misc_monochrome.jpg
diff --git a/sdxl_styles/samples/misc_nautical.jpg b/sdxl_styles/samples/misc_nautical.jpg
diff --git a/sdxl_styles/samples/misc_space.jpg b/sdxl_styles/samples/misc_space.jpg
diff --git a/sdxl_styles/samples/misc_stained_glass.jpg b/sdxl_styles/samples/misc_stained_glass.jpg
diff --git a/sdxl_styles/samples/misc_techwear_fashion.jpg b/sdxl_styles/samples/misc_techwear_fashion.jpg
diff --git a/sdxl_styles/samples/misc_tribal.jpg b/sdxl_styles/samples/misc_tribal.jpg
diff --git a/sdxl_styles/samples/misc_zentangle.jpg b/sdxl_styles/samples/misc_zentangle.jpg
diff --git a/sdxl_styles/samples/mk_adnate_style.jpg b/sdxl_styles/samples/mk_adnate_style.jpg
diff --git a/sdxl_styles/samples/mk_afrofuturism.jpg b/sdxl_styles/samples/mk_afrofuturism.jpg
diff --git a/sdxl_styles/samples/mk_albumen_print.jpg b/sdxl_styles/samples/mk_albumen_print.jpg
diff --git a/sdxl_styles/samples/mk_alcohol_ink_art.jpg b/sdxl_styles/samples/mk_alcohol_ink_art.jpg
diff --git a/sdxl_styles/samples/mk_andy_warhol.jpg b/sdxl_styles/samples/mk_andy_warhol.jpg
diff --git a/sdxl_styles/samples/mk_anthotype_print.jpg b/sdxl_styles/samples/mk_anthotype_print.jpg
diff --git a/sdxl_styles/samples/mk_aquatint_print.jpg b/sdxl_styles/samples/mk_aquatint_print.jpg
diff --git a/sdxl_styles/samples/mk_atompunk.jpg b/sdxl_styles/samples/mk_atompunk.jpg
diff --git a/sdxl_styles/samples/mk_basquiat.jpg b/sdxl_styles/samples/mk_basquiat.jpg
diff --git a/sdxl_styles/samples/mk_bauhaus_style.jpg b/sdxl_styles/samples/mk_bauhaus_style.jpg
diff --git a/sdxl_styles/samples/mk_blacklight_paint.jpg b/sdxl_styles/samples/mk_blacklight_paint.jpg
diff --git a/sdxl_styles/samples/mk_bromoil_print.jpg b/sdxl_styles/samples/mk_bromoil_print.jpg
diff --git a/sdxl_styles/samples/mk_calotype_print.jpg b/sdxl_styles/samples/mk_calotype_print.jpg
diff --git a/sdxl_styles/samples/mk_carnival_glass.jpg b/sdxl_styles/samples/mk_carnival_glass.jpg
diff --git a/sdxl_styles/samples/mk_chicano_art.jpg b/sdxl_styles/samples/mk_chicano_art.jpg
diff --git a/sdxl_styles/samples/mk_chromolithography.jpg b/sdxl_styles/samples/mk_chromolithography.jpg
diff --git a/sdxl_styles/samples/mk_cibulak_porcelain.jpg b/sdxl_styles/samples/mk_cibulak_porcelain.jpg
diff --git a/sdxl_styles/samples/mk_color_sketchnote.jpg b/sdxl_styles/samples/mk_color_sketchnote.jpg
diff --git a/sdxl_styles/samples/mk_coloring_book.jpg b/sdxl_styles/samples/mk_coloring_book.jpg
diff --git a/sdxl_styles/samples/mk_constructivism.jpg b/sdxl_styles/samples/mk_constructivism.jpg
diff --git a/sdxl_styles/samples/mk_cross_processing_print.jpg b/sdxl_styles/samples/mk_cross_processing_print.jpg
diff --git a/sdxl_styles/samples/mk_cross_stitching.jpg b/sdxl_styles/samples/mk_cross_stitching.jpg
diff --git a/sdxl_styles/samples/mk_cyanotype_print.jpg b/sdxl_styles/samples/mk_cyanotype_print.jpg
diff --git a/sdxl_styles/samples/mk_dayak_art.jpg b/sdxl_styles/samples/mk_dayak_art.jpg
diff --git a/sdxl_styles/samples/mk_de_stijl.jpg b/sdxl_styles/samples/mk_de_stijl.jpg
diff --git a/sdxl_styles/samples/mk_dufaycolor_photograph.jpg b/sdxl_styles/samples/mk_dufaycolor_photograph.jpg
diff --git a/sdxl_styles/samples/mk_embroidery.jpg b/sdxl_styles/samples/mk_embroidery.jpg
diff --git a/sdxl_styles/samples/mk_encaustic_paint.jpg b/sdxl_styles/samples/mk_encaustic_paint.jpg
diff --git a/sdxl_styles/samples/mk_fayum_portrait.jpg b/sdxl_styles/samples/mk_fayum_portrait.jpg
diff --git a/sdxl_styles/samples/mk_gond_painting.jpg b/sdxl_styles/samples/mk_gond_painting.jpg
diff --git a/sdxl_styles/samples/mk_gyotaku.jpg b/sdxl_styles/samples/mk_gyotaku.jpg
diff --git a/sdxl_styles/samples/mk_halftone_print.jpg b/sdxl_styles/samples/mk_halftone_print.jpg
diff --git a/sdxl_styles/samples/mk_herbarium.jpg b/sdxl_styles/samples/mk_herbarium.jpg
diff --git a/sdxl_styles/samples/mk_illuminated_manuscript.jpg b/sdxl_styles/samples/mk_illuminated_manuscript.jpg
diff --git a/sdxl_styles/samples/mk_inuit_carving.jpg b/sdxl_styles/samples/mk_inuit_carving.jpg
diff --git a/sdxl_styles/samples/mk_kalighat_painting.jpg b/sdxl_styles/samples/mk_kalighat_painting.jpg
diff --git a/sdxl_styles/samples/mk_lite_brite_art.jpg b/sdxl_styles/samples/mk_lite_brite_art.jpg
diff --git a/sdxl_styles/samples/mk_luminogram.jpg b/sdxl_styles/samples/mk_luminogram.jpg
diff --git a/sdxl_styles/samples/mk_madhubani_painting.jpg b/sdxl_styles/samples/mk_madhubani_painting.jpg
diff --git a/sdxl_styles/samples/mk_mokume_gane.jpg b/sdxl_styles/samples/mk_mokume_gane.jpg
diff --git a/sdxl_styles/samples/mk_mosaic.jpg b/sdxl_styles/samples/mk_mosaic.jpg
diff --git a/sdxl_styles/samples/mk_one_line_art.jpg b/sdxl_styles/samples/mk_one_line_art.jpg
diff --git a/sdxl_styles/samples/mk_palekh.jpg b/sdxl_styles/samples/mk_palekh.jpg
diff --git a/sdxl_styles/samples/mk_patachitra_painting.jpg b/sdxl_styles/samples/mk_patachitra_painting.jpg
diff --git a/sdxl_styles/samples/mk_pichwai_painting.jpg b/sdxl_styles/samples/mk_pichwai_painting.jpg
diff --git a/sdxl_styles/samples/mk_pictorialism.jpg b/sdxl_styles/samples/mk_pictorialism.jpg
diff --git a/sdxl_styles/samples/mk_pollock.jpg b/sdxl_styles/samples/mk_pollock.jpg
diff --git a/sdxl_styles/samples/mk_punk_collage.jpg b/sdxl_styles/samples/mk_punk_collage.jpg
diff --git a/sdxl_styles/samples/mk_ron_english_style.jpg b/sdxl_styles/samples/mk_ron_english_style.jpg
diff --git a/sdxl_styles/samples/mk_samoan_art_inspired.jpg b/sdxl_styles/samples/mk_samoan_art_inspired.jpg
diff --git a/sdxl_styles/samples/mk_scrimshaw.jpg b/sdxl_styles/samples/mk_scrimshaw.jpg
diff --git a/sdxl_styles/samples/mk_shepard_fairey_style.jpg b/sdxl_styles/samples/mk_shepard_fairey_style.jpg
diff --git a/sdxl_styles/samples/mk_shibori.jpg b/sdxl_styles/samples/mk_shibori.jpg
diff --git a/sdxl_styles/samples/mk_singer_sargent.jpg b/sdxl_styles/samples/mk_singer_sargent.jpg
diff --git a/sdxl_styles/samples/mk_suminagashi.jpg b/sdxl_styles/samples/mk_suminagashi.jpg
diff --git a/sdxl_styles/samples/mk_tlingit_art.jpg b/sdxl_styles/samples/mk_tlingit_art.jpg
diff --git a/sdxl_styles/samples/mk_ukiyo_e.jpg b/sdxl_styles/samples/mk_ukiyo_e.jpg
diff --git a/sdxl_styles/samples/mk_van_gogh.jpg b/sdxl_styles/samples/mk_van_gogh.jpg
diff --git a/sdxl_styles/samples/mk_vintage_airline_poster.jpg b/sdxl_styles/samples/mk_vintage_airline_poster.jpg
diff --git a/sdxl_styles/samples/mk_vintage_travel_poster.jpg b/sdxl_styles/samples/mk_vintage_travel_poster.jpg
diff --git a/sdxl_styles/samples/mk_vitreous_enamel.jpg b/sdxl_styles/samples/mk_vitreous_enamel.jpg
diff --git a/sdxl_styles/samples/mre_ancient_illustration.jpg b/sdxl_styles/samples/mre_ancient_illustration.jpg
diff --git a/sdxl_styles/samples/mre_anime.jpg b/sdxl_styles/samples/mre_anime.jpg
diff --git a/sdxl_styles/samples/mre_artistic_vision.jpg b/sdxl_styles/samples/mre_artistic_vision.jpg
diff --git a/sdxl_styles/samples/mre_bad_dream.jpg b/sdxl_styles/samples/mre_bad_dream.jpg
diff --git a/sdxl_styles/samples/mre_brave_art.jpg b/sdxl_styles/samples/mre_brave_art.jpg
diff --git a/sdxl_styles/samples/mre_cinematic_dynamic.jpg b/sdxl_styles/samples/mre_cinematic_dynamic.jpg
diff --git a/sdxl_styles/samples/mre_comic.jpg b/sdxl_styles/samples/mre_comic.jpg
diff --git a/sdxl_styles/samples/mre_dark_cyberpunk.jpg b/sdxl_styles/samples/mre_dark_cyberpunk.jpg
diff --git a/sdxl_styles/samples/mre_dark_dream.jpg b/sdxl_styles/samples/mre_dark_dream.jpg
diff --git a/sdxl_styles/samples/mre_dynamic_illustration.jpg b/sdxl_styles/samples/mre_dynamic_illustration.jpg
diff --git a/sdxl_styles/samples/mre_elemental_art.jpg b/sdxl_styles/samples/mre_elemental_art.jpg
diff --git a/sdxl_styles/samples/mre_gloomy_art.jpg b/sdxl_styles/samples/mre_gloomy_art.jpg
diff --git a/sdxl_styles/samples/mre_heroic_fantasy.jpg b/sdxl_styles/samples/mre_heroic_fantasy.jpg
diff --git a/sdxl_styles/samples/mre_lyrical_geometry.jpg b/sdxl_styles/samples/mre_lyrical_geometry.jpg
diff --git a/sdxl_styles/samples/mre_manga.jpg b/sdxl_styles/samples/mre_manga.jpg
diff --git a/sdxl_styles/samples/mre_space_art.jpg b/sdxl_styles/samples/mre_space_art.jpg
diff --git a/sdxl_styles/samples/mre_spontaneous_picture.jpg b/sdxl_styles/samples/mre_spontaneous_picture.jpg
diff --git a/sdxl_styles/samples/mre_sumi_e_detailed.jpg b/sdxl_styles/samples/mre_sumi_e_detailed.jpg
diff --git a/sdxl_styles/samples/mre_sumi_e_symbolic.jpg b/sdxl_styles/samples/mre_sumi_e_symbolic.jpg
diff --git a/sdxl_styles/samples/mre_surreal_painting.jpg b/sdxl_styles/samples/mre_surreal_painting.jpg
diff --git a/sdxl_styles/samples/mre_undead_art.jpg b/sdxl_styles/samples/mre_undead_art.jpg
diff --git a/sdxl_styles/samples/mre_underground.jpg b/sdxl_styles/samples/mre_underground.jpg
diff --git a/sdxl_styles/samples/neo_baroque.jpg b/sdxl_styles/samples/neo_baroque.jpg
diff --git a/sdxl_styles/samples/neo_byzantine.jpg b/sdxl_styles/samples/neo_byzantine.jpg
diff --git a/sdxl_styles/samples/neo_futurism.jpg b/sdxl_styles/samples/neo_futurism.jpg
diff --git a/sdxl_styles/samples/neo_impressionism.jpg b/sdxl_styles/samples/neo_impressionism.jpg
diff --git a/sdxl_styles/samples/neo_rococo.jpg b/sdxl_styles/samples/neo_rococo.jpg
diff --git a/sdxl_styles/samples/op_art.jpg b/sdxl_styles/samples/op_art.jpg
diff --git a/sdxl_styles/samples/ornate_and_intricate.jpg b/sdxl_styles/samples/ornate_and_intricate.jpg
diff --git a/sdxl_styles/samples/papercraft_collage.jpg b/sdxl_styles/samples/papercraft_collage.jpg
diff --git a/sdxl_styles/samples/papercraft_flat_papercut.jpg b/sdxl_styles/samples/papercraft_flat_papercut.jpg
diff --git a/sdxl_styles/samples/papercraft_kirigami.jpg b/sdxl_styles/samples/papercraft_kirigami.jpg
diff --git a/sdxl_styles/samples/papercraft_paper_mache.jpg b/sdxl_styles/samples/papercraft_paper_mache.jpg
diff --git a/sdxl_styles/samples/papercraft_paper_quilling.jpg b/sdxl_styles/samples/papercraft_paper_quilling.jpg
diff --git a/sdxl_styles/samples/papercraft_papercut_collage.jpg b/sdxl_styles/samples/papercraft_papercut_collage.jpg
diff --git a/sdxl_styles/samples/papercraft_papercut_shadow_box.jpg b/sdxl_styles/samples/papercraft_papercut_shadow_box.jpg
diff --git a/sdxl_styles/samples/papercraft_stacked_papercut.jpg b/sdxl_styles/samples/papercraft_stacked_papercut.jpg
diff --git a/sdxl_styles/samples/papercraft_thick_layered_papercut.jpg b/sdxl_styles/samples/papercraft_thick_layered_papercut.jpg
diff --git a/sdxl_styles/samples/pebble_art.jpg b/sdxl_styles/samples/pebble_art.jpg
diff --git a/sdxl_styles/samples/pencil_sketch_drawing.jpg b/sdxl_styles/samples/pencil_sketch_drawing.jpg
diff --git a/sdxl_styles/samples/photo_alien.jpg b/sdxl_styles/samples/photo_alien.jpg
diff --git a/sdxl_styles/samples/photo_film_noir.jpg b/sdxl_styles/samples/photo_film_noir.jpg
diff --git a/sdxl_styles/samples/photo_glamour.jpg b/sdxl_styles/samples/photo_glamour.jpg
diff --git a/sdxl_styles/samples/photo_hdr.jpg b/sdxl_styles/samples/photo_hdr.jpg
diff --git a/sdxl_styles/samples/photo_iphone_photographic.jpg b/sdxl_styles/samples/photo_iphone_photographic.jpg
diff --git a/sdxl_styles/samples/photo_long_exposure.jpg b/sdxl_styles/samples/photo_long_exposure.jpg
diff --git a/sdxl_styles/samples/photo_neon_noir.jpg b/sdxl_styles/samples/photo_neon_noir.jpg
diff --git a/sdxl_styles/samples/photo_silhouette.jpg b/sdxl_styles/samples/photo_silhouette.jpg
diff --git a/sdxl_styles/samples/photo_tilt_shift.jpg b/sdxl_styles/samples/photo_tilt_shift.jpg
diff --git a/sdxl_styles/samples/pop_art_2.jpg b/sdxl_styles/samples/pop_art_2.jpg
diff --git a/sdxl_styles/samples/sai_3d_model.jpg b/sdxl_styles/samples/sai_3d_model.jpg
diff --git a/sdxl_styles/samples/sai_analog_film.jpg b/sdxl_styles/samples/sai_analog_film.jpg
diff --git a/sdxl_styles/samples/sai_anime.jpg b/sdxl_styles/samples/sai_anime.jpg
diff --git a/sdxl_styles/samples/sai_cinematic.jpg b/sdxl_styles/samples/sai_cinematic.jpg
diff --git a/sdxl_styles/samples/sai_comic_book.jpg b/sdxl_styles/samples/sai_comic_book.jpg
diff --git a/sdxl_styles/samples/sai_craft_clay.jpg b/sdxl_styles/samples/sai_craft_clay.jpg
diff --git a/sdxl_styles/samples/sai_digital_art.jpg b/sdxl_styles/samples/sai_digital_art.jpg
diff --git a/sdxl_styles/samples/sai_enhance.jpg b/sdxl_styles/samples/sai_enhance.jpg
diff --git a/sdxl_styles/samples/sai_fantasy_art.jpg b/sdxl_styles/samples/sai_fantasy_art.jpg
diff --git a/sdxl_styles/samples/sai_isometric.jpg b/sdxl_styles/samples/sai_isometric.jpg
diff --git a/sdxl_styles/samples/sai_line_art.jpg b/sdxl_styles/samples/sai_line_art.jpg
diff --git a/sdxl_styles/samples/sai_lowpoly.jpg b/sdxl_styles/samples/sai_lowpoly.jpg
diff --git a/sdxl_styles/samples/sai_neonpunk.jpg b/sdxl_styles/samples/sai_neonpunk.jpg
diff --git a/sdxl_styles/samples/sai_origami.jpg b/sdxl_styles/samples/sai_origami.jpg
diff --git a/sdxl_styles/samples/sai_photographic.jpg b/sdxl_styles/samples/sai_photographic.jpg
diff --git a/sdxl_styles/samples/sai_pixel_art.jpg b/sdxl_styles/samples/sai_pixel_art.jpg
diff --git a/sdxl_styles/samples/sai_texture.jpg b/sdxl_styles/samples/sai_texture.jpg
diff --git a/sdxl_styles/samples/silhouette_art.jpg b/sdxl_styles/samples/silhouette_art.jpg
diff --git a/sdxl_styles/samples/simple_vector_art.jpg b/sdxl_styles/samples/simple_vector_art.jpg
diff --git a/sdxl_styles/samples/steampunk_2.jpg b/sdxl_styles/samples/steampunk_2.jpg
diff --git a/sdxl_styles/samples/sticker_designs.jpg b/sdxl_styles/samples/sticker_designs.jpg
diff --git a/sdxl_styles/samples/tranquil_relaxing_atmosphere.jpg b/sdxl_styles/samples/tranquil_relaxing_atmosphere.jpg
diff --git a/sdxl_styles/samples/vibrant_rim_light.jpg b/sdxl_styles/samples/vibrant_rim_light.jpg
diff --git a/sdxl_styles/samples/volumetric_lighting.jpg b/sdxl_styles/samples/volumetric_lighting.jpg
diff --git a/sdxl_styles/samples/watercolor_2.jpg b/sdxl_styles/samples/watercolor_2.jpg
diff --git a/sdxl_styles/samples/whimsical_and_playful.jpg b/sdxl_styles/samples/whimsical_and_playful.jpg
diff --git a/update_log.md b/update_log.md
@@ -1,5 +1,9 @@
 **(2023 Dec 21) Hi all, the feature updating of Fooocus will be paused for about two or three weeks because we have some other workloads. See you soon and we will come back in mid or late Jan. However, you may still see updates if other collaborators are fixing bugs or solving problems.**
 
+# 2.1.861 (requested update)
+
+* Show image preview in Style when mouse hover.
+
 # 2.1.860 (requested update)
 
 * Allow upload inpaint mask in developer mode.