From 6d38f7c248c9db283fba23156871a3e9378d3acf Mon Sep 17 00:00:00 2001 From: "ilian.iliev" Date: Mon, 8 May 2023 15:04:09 +0300 Subject: [PATCH 1/2] Import and export buttons added next to checkpoint select --- javascript/state.core.js | 62 +++++++++++++++++++++++++++++++++++----- 1 file changed, 55 insertions(+), 7 deletions(-) diff --git a/javascript/state.core.js b/javascript/state.core.js index 3d9a70c..7c8cfc3 100644 --- a/javascript/state.core.js +++ b/javascript/state.core.js @@ -104,13 +104,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); } @@ -297,8 +345,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; From 2ee086c3a01771ec23b66102b9ff44c7a6adf7d6 Mon Sep 17 00:00:00 2001 From: "ilian.iliev" Date: Mon, 8 May 2023 16:22:07 +0300 Subject: [PATCH 2/2] Script selections stored. New gradio selects handled. --- javascript/state.core.js | 16 +++++++++++++--- javascript/state.utils.js | 8 +++++++- scripts/state_settings.py | 4 +++- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/javascript/state.core.js b/javascript/state.core.js index 7c8cfc3..ac2717a 100644 --- a/javascript/state.core.js +++ b/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 = { @@ -198,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`); @@ -249,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) { @@ -302,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'); } diff --git a/javascript/state.utils.js b/javascript/state.utils.js index 21d69f7..f755aca 100644 --- a/javascript/state.utils.js +++ b/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); diff --git a/scripts/state_settings.py b/scripts/state_settings.py index 7d2c77b..bb20d31 100644 --- a/scripts/state_settings.py +++ b/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))