Merge pull request #65 from ilian6806/develop

FIxed Hires and Refiner state

javascript/state.core.js

@@ -10,19 +10,19 @@ state.core = (function () {
         'sampling_steps': 'steps',
         'restore_faces': 'restore_faces',
         'tiling': 'tiling',
-        'hires_fix': 'enable_hr',
         'hires_steps': 'hires_steps',
         'hires_scale': 'hr_scale',
         'hires_resize_x': 'hr_resize_x',
         'hires_resize_y': 'hr_resize_y',
         'hires_denoising_strength': 'denoising_strength',
+        'refiner_switch': 'switch_at',
         'width': 'width',
         'height': 'height',
         'batch_count': 'batch_count',
         'batch_size': 'batch_size',
         'cfg_scale': 'cfg_scale',
         'denoising_strength': 'denoising_strength',
-        'seed': 'seed'
+        'seed': 'seed',
     };
 
     const ELEMENTS_WITHOUT_PREFIX = {
@@ -33,6 +33,7 @@ state.core = (function () {
         'sampling': 'sampling',
         'scheduler': 'scheduler',
         'hires_upscaler': 'hr_upscaler',
+        'refiner_checkpoint': 'checkpoint',
         'script': '#script_list',
     };
 
@@ -42,6 +43,8 @@ state.core = (function () {
 
     const TOGGLE_BUTTONS = {
         'extra_networks': 'extra_networks',
+        'hires_fix': 'hr',
+        'refiner': 'enable',
     };
 
     let store = null;
@@ -216,6 +219,7 @@ state.core = (function () {
         const events = ['change', 'input'];
 
         if (! elements || ! elements.length) {
+            state.logging.warn(`Input not found: ${id}`);
             return;
         }
 
@@ -270,13 +274,24 @@ state.core = (function () {
     }
 
     function handleToggleButton(id) {
-        const btn = gradioApp().querySelector(`button#${id}`);
+        let btn = gradioApp().querySelector(`button#${id}`);
-        if (! btn) { return; }
+        if (! btn) { // New gradio version
+            btn = gradioApp().querySelector(`.input-accordion#${id}`);
+        }
+        if (! btn) {
+            state.logging.warn(`Button not found: ${id}`);
+            return;
+        }
         if (store.get(id) === 'true') {
-            state.utils.triggerMouseEvent(btn);
+            state.utils.clickToggleMenu(btn);
         }
         btn.addEventListener('click', function () {
-           store.set(id, Array.from(this.classList).indexOf('secondary-down') === -1);
+            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);
+            }
         });
     }
 

javascript/state.loggings.js

@@ -0,0 +1,19 @@
+window.state = window.state || {};
+state = window.state;
+
+state.logging = {
+
+    name: 'state',
+
+    log: function (message) {
+        console.log(`[${this.name}]: `, message);
+    },
+
+    error: function (message) {
+        console.error(`[${this.name}]: `, message);
+    },
+
+    warn: function (message) {
+        console.warn(`[${this.name}]: `, message);
+    }
+};

javascript/state.utils.js

@@ -5,6 +5,7 @@ let selectingQueue = -1;
 state.utils = {
     triggerEvent: function triggerEvent(element, event) {
         if (! element) {
+            state.logging.warn('Element not found');
             return;
         }
         element.dispatchEvent(new Event(event.trim()));
@@ -12,6 +13,7 @@ state.utils = {
     },
     triggerMouseEvent: function triggerMouseEvent(element, event) {
         if (! element) {
+            state.logging.warn('Element not found');
             return;
         }
         event = event || 'click';
@@ -22,6 +24,27 @@ state.utils = {
         }));
         return element;
     },
+    clickToggleMenu: function openToggleMenu(element) {
+        if (! element) {
+            state.logging.warn('Toggle button not found');
+            return;
+        }
+        let mouseEvent = new MouseEvent('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) {
         switch (element.type) {
             case 'checkbox':

scripts/state_settings.py

@@ -37,6 +37,9 @@ def on_ui_settings():
             "hires_resize_x",
             "hires_resize_y",
             "hires_denoising_strength",
+            "refiner",
+            "refiner_checkpoint",
+            "refiner_switch",
             "script"
         ]
     }, section=section))
@@ -47,6 +50,9 @@ def on_ui_settings():
             "negative_prompt",
             "extra_networks",
             "styles",
+            "refiner",
+            "refiner_checkpoint",
+            "refiner_switch",
             "sampling",
             "scheduler",
             "resize_mode",