Fixed hires state with latest sd and gradio versions

javascript/state.core.js

@@ -10,7 +10,6 @@ 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',
@@ -42,6 +41,7 @@ state.core = (function () {
 
     const TOGGLE_BUTTONS = {
         'extra_networks': 'extra_networks',
+        'hires_fix': 'hr'
     };
 
     let store = null;
@@ -216,6 +216,7 @@ state.core = (function () {
         const events = ['change', 'input'];
 
         if (! elements || ! elements.length) {
+            state.logging.warn(`Input not found: ${id}`);
             return;
         }
 
@@ -270,13 +271,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.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':