Merge pull request #30 from ilian6806/develop

-  Import and export options added in quicksettings
- New gradio selects handled
- Script selections saved

javascript/state.core.js

@@ -32,6 +32,7 @@ state.core = (function () {
     const SELECTS = {
         'sampling': 'sampling',
         'hires_upscaler': 'hr_upscaler',
+        'script': '#script_list',
     };
 
     const MULTI_SELECTS = {
@@ -104,13 +105,61 @@ state.core = (function () {
         handleSettingsPage();
     }
 
+    function createHeaderButton(title, text, className, style, action) {
+
+        const button = state.utils.html.create('button', {
+            title: title,
+            innerHTML: text,
+            className: className,
+        }, style);
+
+        if (action) {
+            button.addEventListener('click', action);
+        }
+
+        return button;
+    }
+
+    function createHeaderFileInput(title, text, className) {
+
+        let inputId = 'state-import-file-inline';
+
+        let importBtn = createHeaderButton(title,text, className, {
+            display: 'none'
+        }, () => {
+            actions.importState(inputId);
+        });
+
+        let label = state.utils.html.create('label', {}, { cursor: 'pointer' });
+        label.appendChild(state.utils.html.create('input', {
+            type: 'file',
+            id: inputId,
+            accept: 'application/json',
+        }, {
+            display: 'none'
+        }));
+        label.appendChild(document.createTextNode(text));
+        label.addEventListener('change', () => {
+            importBtn.dispatchEvent(new Event('click'));
+        });
+
+        let button = createHeaderButton(title, '', className, {});
+        button.appendChild(label);
+
+        return {
+            hiddenButton: importBtn,
+            button: button
+        };
+    }
+
     function loadUI() {
-        let resetBtn = document.createElement("button");
-        resetBtn.innerHTML = "*️⃣";
-        resetBtn.addEventListener('click', actions.resetAll);
         let quickSettings = gradioApp().getElementById("quicksettings");
-        resetBtn.className = quickSettings.querySelector('button').className;
-        quickSettings.appendChild(resetBtn);
+        let className = quickSettings.querySelector('button').className;
+        quickSettings.appendChild(createHeaderButton('State: Reset', "*️⃣", className, {}, actions.resetAll));
+        quickSettings.appendChild(createHeaderButton('State: Export',"📤", className, {}, actions.exportState));
+        let fileInput = createHeaderFileInput('State: Import',"📥", className);
+        quickSettings.appendChild(fileInput.hiddenButton);
+        quickSettings.appendChild(fileInput.button);
     }
 
 
@@ -150,6 +199,16 @@ state.core = (function () {
         bindTabClickEvents(); // dirty hack here...
     }
 
+    function getElement(id) {
+        for (let i = 0; i < TABS.length; i++) {
+            if (id.startsWith(`${TABS[i]}_#`)) {
+                // handle elements with same ids in different tabs...
+                return gradioApp().querySelector('#tab_' + id.replace(`${TABS[i]}_#`, `${TABS[i]} #`));
+            }
+        }
+        return gradioApp().getElementById(id);
+    }
+
     function handleSavedInput(id) {
 
         const elements = gradioApp().querySelectorAll(`#${id} textarea, #${id} input`);
@@ -201,8 +260,7 @@ state.core = (function () {
     }
 
     function handleSavedSelects(id) {
-        const select = gradioApp().getElementById(`${id}`);
-        state.utils.handleSelect(select, id, store);
+        state.utils.handleSelect(getElement(id), id, store);
     }
 
     function handleSavedMultiSelects(id) {
@@ -254,7 +312,7 @@ state.core = (function () {
                         el.checked = value;
                         state.utils.triggerEvent(el, 'change');
                     }
-                } else  if (el.checked === value) {
+                } else if (el.checked === value) {
                     el.checked = !value;
                     state.utils.triggerEvent(el, 'change');
                 }
@@ -297,8 +355,8 @@ state.core = (function () {
         exportState: function () {
             state.utils.saveFile('sd-webui-state', store.getAll());
         },
-        importState: function () {
-            const fileInput = gradioApp().getElementById('state-import-file');
+        importState: function (id) {
+            const fileInput = gradioApp().getElementById(id || 'state-import-file');
             if (! fileInput.files || ! fileInput.files[0]) {
                 alert('Please select a JSON file!');
                 return;

javascript/state.utils.js

@@ -77,9 +77,15 @@ state.utils = {
 
             setTimeout(() => {
                 state.utils.onContentChange(select, function (el) {
-                    const selected = el.querySelector('span.single-select');
+                    let selected = el.querySelector('span.single-select');
                     if (selected) {
                         store.set(id, selected.textContent);
+                    } else {
+                        // new gradio version...
+                        let input = select.querySelector('input');
+                        if (input) {
+                            store.set(id, input.value);
+                        }
                     }
                 });
             }, 150);

scripts/state_settings.py

@@ -36,6 +36,7 @@ def on_ui_settings():
             "hires_resize_x",
             "hires_resize_y",
             "hires_denoising_strength",
+            "script"
         ]
     }, section=section))
 
@@ -56,7 +57,8 @@ def on_ui_settings():
             "batch_size",
             "cfg_scale",
             "denoising_strength",
-            "seed"
+            "seed",
+            "script"
         ]
     }, section=section))