Merge pull request #75 from ilian6806/core-refactoring

Core refactoring

javascript/state.core.js

@@ -5,7 +5,7 @@ state.core = (function () {
 
     const TABS = ['txt2img', 'img2img'];
 
-    const ELEMENTS = {
+    const INPUTS = { // Basic input elements
         'prompt': 'prompt',
         'negative_prompt': 'neg_prompt',
         'sampling_steps': 'steps',
@@ -15,51 +15,71 @@ state.core = (function () {
         'hires_resize_y': 'hr_resize_y',
         'hires_denoising_strength': 'denoising_strength',
         'refiner_switch': 'switch_at',
+        'upscaler_2_visibility': 'extras_upscaler_2_visibility',
+        'upscaler_scale_by_resize': 'extras_upscaling_resize',
+        'upscaler_scale_by_max_side_length': 'extras_upscale_max_side_length',
+        'upscaler_scale_to_w': 'extras_upscaling_resize_w',
+        'upscaler_scale_to_h': 'extras_upscaling_resize_h',
+        'upscaler_scale_to_crop': 'extras_upscaling_crop',
         'width': 'width',
         'height': 'height',
         'batch_count': 'batch_count',
         'batch_size': 'batch_size',
         'cfg_scale': 'cfg_scale',
         'denoising_strength': 'denoising_strength',
+        'resize_mode': 'resize_mode',
         'seed': 'seed',
     };
 
-    const ELEMENTS_WITHOUT_PREFIX = {
+    const SELECTS = { // Dropdowns
-        'resize_mode': 'resize_mode',
-    };
-
-    const ELEMENTS_WITH_DUPLICATE_IDS = {
-        INPUTS: {
-            'upscaler_2_visibility': 'extras_upscaler_2_visibility',
-            'upscaler_scale_by_resize': 'extras_upscaling_resize',
-            'upscaler_scale_by_max_side_length': 'extras_upscale_max_side_length',
-            'upscaler_scale_to_w': 'extras_upscaling_resize_w',
-            'upscaler_scale_to_h': 'extras_upscaling_resize_h',
-            'upscaler_scale_to_crop': 'extras_upscaling_crop',
-        },
-        SELECTS: {
-            'upscaler_1': 'extras_upscaler_1',
-            'upscaler_2': 'extras_upscaler_2',
-        }
-    };
-
-    const SELECTS = {
         'sampling': 'sampling',
         'scheduler': 'scheduler',
         'hires_upscaler': 'hr_upscaler',
         'refiner_checkpoint': 'checkpoint',
+        'upscaler_1': 'extras_upscaler_1',
+        'upscaler_2': 'extras_upscaler_2',
         'script': '#script_list',
     };
 
-    const MULTI_SELECTS = {
+    const MULTI_SELECTS = { // Multi-select dropdowns
         'styles': 'styles'
     };
 
-    const TOGGLE_BUTTONS = {
+    const TOGGLE_BUTTONS = { // Toggle buttons
         'hires_fix': 'hr',
         'refiner': 'enable',
+        'tiled_diffusion': 'MD-t2i-enabled',
     };
 
+    // *** Exceptions *** //
+
+    // Elements that don't have a tab prefix
+    const ELEMENTS_WITHOUT_PREFIX = [
+        'resize_mode',
+        'upscaler_2_visibility',
+        'upscaler_scale_by_resize',
+        'upscaler_scale_by_max_side_length',
+        'upscaler_scale_to_w',
+        'upscaler_scale_to_h',
+        'upscaler_scale_to_crop',
+        'upscaler_1',
+        'upscaler_2',
+        'tiled_diffusion',
+    ];
+
+    // Elements that have the same id in different tabs
+    const ELEMENTS_WITH_DUPLICATE_IDS = [
+        'upscaler_2_visibility',
+        'upscaler_scale_by_resize',
+        'upscaler_scale_by_max_side_length',
+        'upscaler_scale_to_w',
+        'upscaler_scale_to_h',
+        'upscaler_scale_to_crop',
+        'upscaler_1',
+        'upscaler_2',
+        'tiled_diffusion',
+    ];
+
     let store = null;
 
     function hasSetting(id, tab) {
@@ -75,22 +95,46 @@ state.core = (function () {
                     config.hasSetting = hasSetting
                     load(config);
                 } catch (error) {
-                    console.error('[state]: Error:', error);
+                    state.logging.error(error);
                 }
             })
-            .catch(error => console.error('[state]: Error getting JSON file:', error));
+            .catch(error => state.logging.error(error));
     }
 
     function forEachElement(list, config, action) {
-        for (const [settingId, element] of Object.entries(list)) {
+        for (const [settingId, elementId] of Object.entries(list)) {
             TABS.forEach(tab => {
                 if (config.hasSetting(settingId, tab)) {
-                    action(element, tab);
+                    action(settingId, elementId, tab);
                 }
             });
         }
     }
 
+    function executeElementHandler(handler, settingId, elementId, tab) {
+
+        // Handler will use much slower '[id="elementId"]' selector if elementId is in ELEMENTS_WITH_DUPLICATE_IDS
+        let useDuplicateIdsSelector = ELEMENTS_WITH_DUPLICATE_IDS.indexOf(settingId) > -1;
+
+        if (ELEMENTS_WITHOUT_PREFIX.indexOf(settingId) > -1) {
+            return handler(elementId, useDuplicateIdsSelector);
+        } else {
+            return handler(`${tab}_${elementId}`, useDuplicateIdsSelector);
+        }
+    }
+
+    function getHandlerByElementId(settingId) {
+        if (settingId in INPUTS) {
+            return handleSavedInput;
+        } else if (settingId in SELECTS) {
+            return handleSavedSelects;
+        } else if (settingId in MULTI_SELECTS) {
+            return handleSavedMultiSelects;
+        } else if (settingId in TOGGLE_BUTTONS) {
+            return handleToggleButton;
+        }
+    }
+
     function load(config) {
 
         store = new state.Store();
@@ -98,32 +142,15 @@ state.core = (function () {
         loadUI(config);
         restoreTabs(config);
 
-        forEachElement(ELEMENTS, config, (element, tab) => {
+        const ALL_ELEMENTS = Object.assign({}, INPUTS, SELECTS, MULTI_SELECTS, TOGGLE_BUTTONS);
-            handleSavedInput(`${tab}_${element}`);
-        });
 
-        forEachElement(ELEMENTS_WITHOUT_PREFIX, config, (element, tab) => {
+        forEachElement(ALL_ELEMENTS, config, (settingId, elementId, tab) => {
-            handleSavedInput(`${element}`);
+            let method = getHandlerByElementId(settingId);
-        });
+            if (method) {
-
+                executeElementHandler(method, settingId, elementId, tab);
-        forEachElement(SELECTS, config, (element, tab) => {
+            } else {
-            handleSavedSelects(`${tab}_${element}`);
+                state.logging.warn(`Element handler not found for: ${elementId}`);
-        });
+            }
-
-        forEachElement(MULTI_SELECTS, config, (element, tab) => {
-            handleSavedMultiSelects(`${tab}_${element}`);
-        });
-
-        forEachElement(TOGGLE_BUTTONS, config, (element, tab) => {
-            handleToggleButton(`${tab}_${element}`);
-        });
-
-        forEachElement(ELEMENTS_WITH_DUPLICATE_IDS.INPUTS, config, (element, tab) => {
-            handleSavedInput(`${element}`, true);
-        });
-
-        forEachElement(ELEMENTS_WITH_DUPLICATE_IDS.SELECTS, config, (element, tab) => {
-            handleSavedSelects(`${element}`, true);
         });
 
         handleExtensions(config);
@@ -317,30 +344,25 @@ state.core = (function () {
         }
     }
 
-    function handleSavedMultiSelects(id) {
+    function handleSavedMultiSelects(id, duplicateIds) {
         const select = gradioApp().getElementById(`${id}`);
         state.utils.handleMultipleSelect(select, id, store);
     }
 
-    function handleToggleButton(id) {
+    function handleToggleButton(id, duplicateIds) {
-        let btn = gradioApp().querySelector(`button#${id}`);
+
-        if (! btn) { // New gradio version
+        let selector = duplicateIds ? `[id="${id}"]` : `#${id}`;
-            btn = gradioApp().querySelector(`.input-accordion#${id}`);
+
-        }
+        elements = gradioApp().querySelectorAll(`.input-accordion${selector}>.label-wrap`);
-        if (! btn) {
+
-            state.logging.warn(`Button not found: ${id}`);
+        elements.forEach(function (element) {
-            return;
+            if (store.get(id) === 'true') {
-        }
+                state.utils.clickToggleMenu(element);
-        if (store.get(id) === 'true') {
-            state.utils.clickToggleMenu(btn);
-        }
-        btn.addEventListener('click', function () {
-            let classList = Array.from(this.classList);
-            if (btn.tagName === 'BUTTON') { // Old gradio version
-                store.set(id, classList.indexOf('secondary-down') === -1);
-            } else {
-                store.set(id, classList.indexOf('input-accordion-open') > -1);
             }
+            element.addEventListener('click', function () {
+                let classList = Array.from(this.parentNode.classList);
+                store.set(id, classList.indexOf('input-accordion-open') > -1);
+            });
         });
     }
 

javascript/state.utils.js

@@ -29,20 +29,7 @@ state.utils = {
             state.logging.warn('Toggle button not found');
             return;
         }
-        let mouseEvent = new MouseEvent('click', {
+        element.click();
-            view: window,
-            bubbles: true,
-            cancelable: true
-        });
-        element.dispatchEvent(mouseEvent);
-        let icon = element.querySelector('.icon');
-        if (icon) {
-            icon.dispatchEvent(mouseEvent);
-        }
-        let checkbox = element.querySelector('input[type="checkbox"]');
-        if (checkbox) {
-            checkbox.dispatchEvent(mouseEvent);
-        }
         return element;
     },
     setValue: function setValue(element, value, event) {

scripts/state_settings.py

@@ -37,14 +37,15 @@ def on_ui_settings():
             "refiner",
             "refiner_checkpoint",
             "refiner_switch",
-            'upscaler_scale_by_resize',
+            "upscaler_scale_by_resize",
-            'upscaler_scale_by_max_side_length',
+            "upscaler_scale_by_max_side_length",
-            'upscaler_scale_to_w',
+            "upscaler_scale_to_w",
-            'upscaler_scale_to_h',
+            "upscaler_scale_to_h",
-            'upscaler_scale_to_crop',
+            "upscaler_scale_to_crop",
-            'upscaler_1',
+            "upscaler_1",
-            'upscaler_2',
+            "upscaler_2",
-            'upscaler_2_visibility',
+            "upscaler_2_visibility",
+            "tiled_diffusion",
             "script"
         ]
     }, section=section))
@@ -57,14 +58,14 @@ def on_ui_settings():
             "refiner",
             "refiner_checkpoint",
             "refiner_switch",
-            'upscaler_scale_by_resize',
+            "upscaler_scale_by_resize",
-            'upscaler_scale_by_max_side_length',
+            "upscaler_scale_by_max_side_length",
-            'upscaler_scale_to_w',
+            "upscaler_scale_to_w",
-            'upscaler_scale_to_h',
+            "upscaler_scale_to_h",
-            'upscaler_scale_to_crop',
+            "upscaler_scale_to_crop",
-            'upscaler_1',
+            "upscaler_1",
-            'upscaler_2',
+            "upscaler_2",
-            'upscaler_2_visibility',
+            "upscaler_2_visibility",
             "sampling",
             "scheduler",
             "resize_mode",
@@ -76,6 +77,7 @@ def on_ui_settings():
             "cfg_scale",
             "denoising_strength",
             "seed",
+            "tiled_diffusion",
             "script"
         ]
     }, section=section))
@@ -101,5 +103,4 @@ def on_ui_settings():
         ],
     }, section=section))
 
-
 scripts.script_callbacks.on_ui_settings(on_ui_settings)