Fixes for new SD version

javascript/state.core.js

@@ -134,12 +134,25 @@ state.core = (function () {
                 }
             }
         }
+        // Use this when onUiTabChange is fixed
+        // onUiTabChange(function () {
+        //     store.set('tab', gradioApp().querySelector('#tabs .tab-nav button.selected').textContent);
+        // });
+        bindTabClickEvents();
+    }
 
-        onUiTabChange(function () {
-            store.set('tab', get_uiCurrentTab().textContent);
+    function bindTabClickEvents() {
+        Array.from(gradioApp().querySelectorAll('#tabs .tab-nav button')).forEach(tab => {
+            tab.removeEventListener('click', storeTab);
+            tab.addEventListener('click', storeTab);
         });
     }
 
+    function storeTab() {
+        store.set('tab', gradioApp().querySelector('#tabs .tab-nav button.selected').textContent);
+        bindTabClickEvents(); // dirty hack here...
+    }
+
     function handleSavedInput(id) {
 
         const elements = gradioApp().querySelectorAll(`#${id} textarea, #${id} select, #${id} input`);
@@ -192,7 +205,7 @@ state.core = (function () {
 
     function handleSavedMultiSelects(id) {
 
-        const select = gradioApp().querySelector(`#${id} .items-center.relative`);
+        const select = gradioApp().getElementById(`${id}`);
 
         try {
             let value = store.get(id);
@@ -206,14 +219,17 @@ state.core = (function () {
                     let input = select.querySelector('input');
 
                     let selectOption = function () {
+
                         if (! value.length) {
                             state.utils.triggerMouseEvent(input, 'blur');
                             return;
                         }
+
                         let option = value.pop();
-                        state.utils.triggerMouseEvent(input);
+                        state.utils.triggerMouseEvent(input, 'focus');
+
                         setTimeout(() => {
-                            let items = Array.from(select.parentNode.querySelectorAll('ul li'));
+                            let items = Array.from(select.querySelectorAll('ul li'));
                             items.forEach(li => {
                                 if (li.lastChild.wholeText.trim() === option) {
                                     state.utils.triggerMouseEvent(li, 'mousedown');
@@ -226,14 +242,13 @@ state.core = (function () {
                     selectOption();
                 }
             }
+            state.utils.onContentChange(select, function (el) {
+                const selected = Array.from(el.querySelectorAll('.token > span')).map(item => item.textContent);
+                store.set(id, selected);
+            });
         } catch (error) {
             console.error('[state]: Error:', error);
         }
-
-        state.utils.onContentChange(select, function (el) {
-            const selected = Array.from(el.querySelectorAll('.token > span')).map(item => item.textContent);
-            store.set(id, selected);
-        });
     }
 
     function handleExtensions(config) {

javascript/state.ext.control-net.js

@@ -10,13 +10,16 @@ state.extensions['control-net'] = (function () {
 
     function handleToggle() {
         let value = store.get('toggled');
-        let toggleBtn = container.querySelector('div.cursor-pointer');
+        let toggleBtn = container.querySelector('div.cursor-pointer, .label-wrap');
+
         if (value && value === 'true') {
             state.utils.triggerEvent(toggleBtn, 'click');
+            load();
         }
         toggleBtn.addEventListener('click', function () {
-            let span = this.querySelector('.transition');
-            store.set('toggled', !span.classList.contains('rotate-90'));
+            let span = this.querySelector('.transition, .icon');
+            store.set('toggled', span.style.transform !== 'rotate(90deg)');
+            load();
         });
     }
 
@@ -124,12 +127,13 @@ state.extensions['control-net'] = (function () {
     }
 
     function load() {
-        handleToggle();
-        handleTabs();
-        handleCheckboxes();
-        handleSelects();
-        handleSliders();
-        handleRadioButtons();
+        setTimeout(function () {
+            handleTabs();
+            handleCheckboxes();
+            handleSelects();
+            handleSliders();
+            handleRadioButtons();
+        }, 500);
     }
 
     function init() {
@@ -137,6 +141,10 @@ state.extensions['control-net'] = (function () {
         container = gradioApp().getElementById('controlnet');
         store = new state.Store('ext-control-net');
 
+        if (! container) {
+            return;
+        }
+
         let tabs = container.querySelectorAll('.tabitem');
 
         if (tabs.length) {
@@ -154,6 +162,7 @@ state.extensions['control-net'] = (function () {
             }];
         }
 
+        handleToggle();
         load();
     }
 

javascript/state.utils.js

@@ -104,10 +104,6 @@ state.utils.html = {
         btn.innerHTML = text;
         btn.onclick = onclick || function () {};
         btn.className = 'gr-button gr-button-lg gr-button-primary';
-        this.setStyle(btn, {
-            'margin-left': '5px',
-            'margin-right': '5px'
-        });
         return btn;
     }
 };

style.css

@@ -0,0 +1,10 @@
+#settings_state_buttons button {
+    color: white;
+    background: rgb(249, 115, 22);
+    border-radius: 8px;
+    padding: 5px 15px;
+    font-weight: bold;
+    font-size: 16px;
+    margin-left: 5px;
+    margin-right: 5px;
+}