Update 1.20.2

Author: anapnoe

extensions-builtin/sd-webui-ux/javascript/dist/index.js

@@ -120,7 +120,51 @@ window.onAfterUiUpdate(() => {
         }
 
     };
-    
 
+    window.restart_reload = function() {
+        const messageElement = document.createElement('p');
+        messageElement.style.cssText = `
+            font-family: monospace;
+            position: absolute;
+            top: calc(40% + 110px);
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding-left: 20px;
+            text-align: center;
+            width: max-content;
+            white-space: pre;
+        `;
+        document.body.innerHTML = '';
+        document.body.appendChild(messageElement);
+        
+        const animationFrames = [
+            "   ",
+            ".  ",
+            ".. ",
+            "...",
+        ];
+
+        let frameIndex = 0;
+        function updateMessage() {
+            const animation = animationFrames[frameIndex % animationFrames.length];
+            messageElement.innerHTML = `Server is restarting please wait${animation} `;
+            frameIndex++;
+        }
+
+        const requestPing = function() {
+            updateMessage();
+            requestGet("./internal/ping", {}, function(data) {
+                location.reload();
+            }, function() {
+                setTimeout(requestPing, 500);
+            });
+        };
+
+        updateMessage();
+        setTimeout(requestPing, 1000);
+
+        return [];
+    };
+    
 
 });

extensions-builtin/sd-webui-ux/javascript/overrides.js

@@ -8,7 +8,7 @@ import {showContributors, showMembers} from './utils/api_external.js';
 import {switchMobile} from './utils/mobile.js';
 import {uiuxOptionSettings} from './components/settings.js';
 import {localStorageWrapper, onLocalStorageChange} from './utils/storage.js';
-import {setupGenerateObservers, setupCheckpointChangeObserver} from './utils/observers.js';
+import {setupGenerateObservers, setupCheckpointChangeObserver, setReloadBackgroundColor} from './utils/observers.js';
 import {createTabsForExtensions, injectStylesToIframe, injectStylesAfterUIUX, replaceStylesheet} from './components/extensions.js';
 import {setupThemeEditor} from './components/theme_editor.js';
 import {UIUX} from './utils/module.js';
@@ -130,7 +130,7 @@ function onUiUxReady(content_div) {
         document.querySelector("#github-project-link").href = "https://github.com/anapnoe/sd-webui-ux"
     }
 
-   
+    setReloadBackgroundColor();
 
     //const totalListeners = countEventListeners(document.body);
     //console.warn(`Total event listeners: ${totalListeners}`);

extensions-builtin/sd-webui-ux/javascript/src/index.js

@@ -1,6 +1,7 @@
 import {VERSION_DATA} from "../constants.js";
 
 export function setupGenerateObservers() {
+
     const keys = ['#txt2img', '#img2img', '#deforum'];
     keys.forEach((key) => {
         const tgb = document.querySelector(`${key}_generate`);
@@ -13,88 +14,63 @@ export function setupGenerateObservers() {
             const ts = document.querySelector(`${key}_skip`).closest('.portal');
             const loop = document.querySelector(`${key}_loop`);
 
-
-
             tib.addEventListener('click', () => {
                 loop?.classList.add('stop');
             });
-
-
+ 
             const gen_observer = new MutationObserver((mutations) => {
                 mutations.forEach((m) => {
-                    if (tib.style.display === 'none') {
-                        const progress = document.querySelector(`.progressDiv .progress`);
-                        if (progress) {
-                            ti.classList.remove('disable');
-                            setTimeout(() => tib.click(), 500);
-                        }
-                        if (loop) {
-                            if (loop.className.indexOf('stop') !== -1 || loop.className.indexOf('active') === -1) {
-                                loop.classList.remove('stop');
+                    const isNotGenerating = tib.style.display === 'none';
+                    const check = () => {
+                        const progressElExists = document.querySelector(`.progressDiv .progress`);
+                        if (isNotGenerating) {
+
+                            if (progressElExists) {
+                                setTimeout(() => {
+                                    tib.click(); //interrupt
+                                    check();
+                                }, 500); 
+                                return;
+                            }
+
+                            if (loop) {
+                                const isLoopActive = loop.classList.contains('active');
+                                const isLoopStopped = loop.classList.contains('stop');
+                                if (isLoopStopped || !isLoopActive) {
+                                    loop.classList.remove('stop');
+                                    ti.classList.add('disable');
+                                    ts?.classList.add('disable');
+                                    tg.classList.remove('active');
+                                    tgb.classList.remove('disable')
+                                } else if (isLoopActive) {
+                                    tgb.click();
+                                    tgb.classList.add('disable');
+                                }
+                            } else {
                                 ti.classList.add('disable');
-                                ts?.classList.add('disable');
                                 tg.classList.remove('active');
-                            } else if (loop.className.indexOf('active') !== -1) {
-                                tgb.click();
+                                tgb.classList.remove('disable')
                             }
+                            
                         } else {
-                            ti.classList.add('disable');
-                            tg.classList.remove('active');
+                            ti.classList.remove('disable');
+                            ts?.classList.remove('disable');
+                            tg.classList.add('active');
+                            tgb.classList.add('disable');
                         }
-                    } else {
-                        ti.classList.remove('disable');
-                        ts?.classList.remove('disable');
-                        tg.classList.add('active');
-                    }
+                    };
+
+                    check();
+
                 });
             });
+            
 
             gen_observer.observe(tib, {attributes: true, attributeFilter: ['style']});
         }
     });
 }
-/*
-export function setupCheckpointChangeObserver(vScroll, treeView) {
-
-    const ch_input = document.querySelector("#setting_sd_model_checkpoint .wrap .secondary-wrap input") || document.querySelector(".gradio-dropdown.model_selection .wrap .secondary-wrap input");
-    const ch_preload = document.querySelector("#setting_sd_model_checkpoint .wrap") || document.querySelector(".gradio-dropdown.model_selection .wrap");
 
-    const ch_footer_selected = document.querySelector("#checkpoints_main_footer_db .model-selected");
-    const ch_footer_preload = document.querySelector("#checkpoints_main_footer_db .model-preloader");
-    ch_footer_preload.append(ch_preload);
-
-    let hash_value = "";
-
-    const selectCard = (value) => {
-        if (hash_value !== value) {
-            const name = value.split('.').slice(0, -1).join();
-            vScroll.selected = new Set([name]);
-            vScroll.renderItems();
-
-            if (treeView) {
-                treeView.selected = vScroll.selected;
-                treeView.updateSelectedItems();
-            }
-            
-            ch_footer_selected.textContent = value;
-            console.log("Checkpoint:", value, name);
-            hash_value = value;
-        }
-    };
-
-    selectCard(ch_input.value);
-
-    const combinedObserver = new MutationObserver(function(mutations) {
-        mutations.forEach(function(m) {
-            setTimeout(() => selectCard(ch_input.value), 1000);
-        });
-    });
-
-    // Observe both the input and the preloaded model in one line
-    combinedObserver.observe(ch_input, {attributes: true});
-    combinedObserver.observe(ch_preload, {childList: true, subtree: true});
-}
-*/
 
 export function setupCheckpointChangeObserver(vScroll) {
     const ch_input = document.querySelector("#setting_sd_model_checkpoint .wrap .secondary-wrap input") || 
@@ -181,6 +157,8 @@ export function setupExtraNetworksAddToPromptObserver() {
 
 }
 
+
+
 export function setupInputObservers(paramsMapping, apiParams, vScroll, modifyParamsCallback = null) {
     Object.keys(paramsMapping).forEach((inputId) => {
         const inputElement = document.querySelector(`${inputId}`);
@@ -215,3 +193,27 @@ export function setupInputObservers(paramsMapping, apiParams, vScroll, modifyPar
     });
     return apiParams;
 }
+
+export function setReloadBackgroundColor() {
+    const bgcolor = getComputedStyle(document.documentElement).getPropertyValue('--ae-main-bg-color').trim();
+    const color = getComputedStyle(document.documentElement).getPropertyValue('--ae-primary-color').trim();
+    const encodedColor = color.replace(/#/g, '%23');
+    const bgsvg = `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <polygon fill="${encodedColor}" points="19.5,13.7 21.6,9.9 11.8,9.9 16.7,18.5 17.7,16.7 17.1,15.7 16.7,16.5 13.5,10.9 19.9,10.9 18.9,12.7"/>
+            <polygon fill="${encodedColor}" points="17.3,11.7 15.8,11.7 20.2,19.3 3.8,19.3 12,5.2 14.2,9 15.8,9 12,2.5 1.5,20.7 22.5,20.7"/>
+        </svg>
+        `.replace(/\n\s+/g, ' ');
+    const encodedSVG = encodeURIComponent(bgsvg);
+    const dataURI = `url("data:image/svg+xml,${encodedSVG}")`;
+
+    document.documentElement.style.cssText = `
+        background-position: 50% 40%;
+        background-size: 200px;
+        background-repeat: no-repeat;
+        background-color: ${bgcolor} !important;
+        background-image: ${dataURI} !important;
+        color: ${color};
+        height: 100%;
+    `;
+}

extensions-builtin/sd-webui-ux/javascript/src/utils/observers.js

@@ -43,7 +43,7 @@ def get_instance(cls):
         return cls._instance
 
     def allowed_directories_for_previews(self):
-        return [self.images_folder]  # Allow the styles folder
+        return [self.images_folder] 
 
     def register_page(self):
         self.allowed_dirs.update(self.allowed_directories_for_previews())

extensions-builtin/sd-webui-ux/scripts/anapnoe/db_output_images.py

@@ -116,6 +116,7 @@
             #"uiux_enable_db_extra_networks": shared.OptionInfo(True, "Enable Database for Extra Networks (Needs Restart)"),
             "uiux_enable_sd_styles": shared.OptionInfo(True, "Enable Styles (Needs Restart)"),
             "uiux_enable_sd_output_images": shared.OptionInfo(True, "Enable Image Browser (Needs Restart)"),
+            "uiux_sd_output_images_path": shared.OptionInfo("outputs", "Default base path for images"),
 
             #"uiux_enable_event_delegation": shared.OptionInfo(False, "Enable Event Delegation for Extra Networks (Needs Restart)"),
             "uiux_max_resolution_output": shared.OptionInfo(

extensions-builtin/sd-webui-ux/scripts/anapnoe_sd_uiux.py

@@ -7,6 +7,8 @@
 from modules import script_callbacks, shared, ui_extra_networks
 from fastapi import FastAPI, HTTPException, Query, Body
 from typing import Optional, List, Dict, Any
+from modules.paths_internal import default_output_dir
+from modules.shared import opts
 
 import launch
 commit = launch.commit_hash()
@@ -33,7 +35,10 @@
 webuidir = Path(basedir).parents[1]
 scriptsdir = os.path.join(basedir, "scripts")
 
-imagesdir = os.path.join(webuidir, "outputs")
+#imagesdir = os.path.join(webuidir, "outputs")
+imagesdir = opts.outdir_samples or opts.uiux_sd_output_images_path
+#print(imagesdir)
+
 stylesdir = os.path.join(basedir, "styles_data")
 
 DB_FILE = os.path.join(basedir, 'sd_webui_ux.db')