From 13daf11d6ba83564a2c4d0b2b6f89e775815915b Mon Sep 17 00:00:00 2001 From: "ilian.iliev" Date: Wed, 22 Mar 2023 10:53:16 +0200 Subject: [PATCH] setValue method moved to utils --- javascript/state.core.js | 18 +-- javascript/state.ext.control-net.js | 2 +- javascript/state.js | 218 ---------------------------- javascript/state.utils.js | 19 +++ scripts/state_settings.py | 6 + 5 files changed, 27 insertions(+), 236 deletions(-) delete mode 100644 javascript/state.js diff --git a/javascript/state.core.js b/javascript/state.core.js index 74488b2..8927d42 100644 --- a/javascript/state.core.js +++ b/javascript/state.core.js @@ -182,23 +182,7 @@ state.core = (function () { } forEach(function (event) { - switch (this.type) { - case 'checkbox': - this.checked = value === 'true'; - state.utils.triggerEvent(this, event); - break; - case 'radio': - if (this.value === value) { - this.checked = true; - state.utils.triggerEvent(this, event); - } else { - this.checked = false; - } - break; - default: - this.value = value; - state.utils.triggerEvent(this, event); - } + state.utils.setValue(this, value, event); }); } diff --git a/javascript/state.ext.control-net.js b/javascript/state.ext.control-net.js index ddcf946..f630cfd 100644 --- a/javascript/state.ext.control-net.js +++ b/javascript/state.ext.control-net.js @@ -39,5 +39,5 @@ state.extensions['control-net'] = (function () { handleTabs(); } - return { init } + return { init }; }()); diff --git a/javascript/state.js b/javascript/state.js deleted file mode 100644 index 6772241..0000000 --- a/javascript/state.js +++ /dev/null @@ -1,218 +0,0 @@ - -document.addEventListener('DOMContentLoaded', function() { - onUiLoaded(StateController.init); -}); - - -const StateController = (function () { - - const LS_PREFIX = 'state-'; - const TABS = ['txt2img', 'img2img']; - const ELEMENTS = { - 'prompt': 'prompt', - 'negative_prompt': 'neg_prompt', - 'sampling': 'sampling', - 'sampling_steps': 'steps', - 'restore_faces': 'restore_faces', - 'tiling': 'tiling', - 'hires_fix': 'enable_hr', - 'hires_upscaler': 'hr_upscaler', - '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', - 'width': 'width', - 'height': 'height', - 'batch_count': 'batch_count', - 'batch_size': 'batch_size', - 'cfg_scale': 'cfg_scale', - 'denoising_strength': 'denoising_strength', - 'seed': 'seed' - }; - - const ELEMENTS_WITHOUT_PREFIX = { - 'resize_mode': 'resize_mode', - }; - - function triggerEvent(element, event) { - if (! element) { - return; - } - element.dispatchEvent(new Event(event.trim())); - return element; - } - - function hasSetting(id, tab) { - const suffix = tab ? `_${tab}` : ''; - return this[`state${suffix}`] && this[`state${suffix}`].indexOf(id) > -1; - } - - function init() { - fetch('/state/config.json?_=' + (+new Date())) - .then(response => response.json()) - .then(config => { - try { - config.hasSetting = hasSetting - load(config); - } catch (error) { - console.error('[state]: Error:', error); - } - }) - .catch(error => console.error('[state]: Error getting JSON file:', error)); - } - - function load(config) { - - loadUI(); - restoreTabs(config); - - for (const [settingId, element] of Object.entries(ELEMENTS)) { - TABS.forEach(tab => { - if (config.hasSetting(settingId, tab)) { - handleSavedInput(`${tab}_${element}`); - } - }); - } - - for (const [settingId, element] of Object.entries(ELEMENTS_WITHOUT_PREFIX)) { - TABS.forEach(tab => { - if (config.hasSetting(settingId, tab)) { - handleSavedInput(`${element}`); - } - }); - } - } - - function storeTab() { - localStorage.setItem(LS_PREFIX + 'tab', this.textContent); - bindTabEvents(); - } - - function bindTabEvents() { - const tabs = gradioApp().querySelectorAll('#tabs > div:first-child button'); - tabs.forEach(tab => { // dirty hack here - tab.removeEventListener('click', storeTab); - tab.addEventListener('click', storeTab); - }); - return tabs; - } - - function loadUI() { - - let toolbar = document.createElement("div"); - toolbar.style.minWidth = 0; - toolbar.className = "gr-box relative w-full border-solid border border-gray-200 gr-padded"; - - let resetBtn = document.createElement("button"); - resetBtn.innerHTML = "🔁"; - resetBtn.className = "gr-button gr-button-lg gr-button-tool"; - resetBtn.style.border = "none"; - resetBtn.title = "Reset State"; - resetBtn.addEventListener('click', function () { - let confirmed = confirm('Reset all state values?'); - if (confirmed) { - let keys = Object.keys(localStorage); - for (let i = 0; i < keys.length; i++) { - if (keys[i].startsWith('state-')) { - localStorage.removeItem(keys[i]); - } - } - alert('All state values deleted!'); - } - }); - - toolbar.appendChild(resetBtn); - - let quickSettings = gradioApp().getElementById("quicksettings"); - quickSettings.appendChild(toolbar); - } - - - function restoreTabs(config) { - - if (! config.hasSetting('tabs')) { - return; - } - - const tabs = bindTabEvents(); - const value = localStorage.getItem(LS_PREFIX + 'tab'); - - if (value) { - for (var i = 0; i < tabs.length; i++) { - if (tabs[i].textContent === value) { - triggerEvent(tabs[i], 'click'); - break; - } - } - } - } - - function handleSavedInput(id) { - - const elements = gradioApp().querySelectorAll(`#${id} textarea, #${id} select, #${id} input`); - const events = ['change', 'input']; - - if (! elements || ! elements.length) { - return; - } - - let forEach = function (action) { - events.forEach(function(event) { - elements.forEach(function (element) { - action.call(element, event); - }); - }); - }; - - forEach(function (event) { - this.addEventListener(event, function () { - let value = this.value; - if (this.type && this.type === 'checkbox') { - value = this.checked; - } - localStorage.setItem(LS_PREFIX + id, value); - }); - }); - - TABS.forEach(tab => { - const seedInput = gradioApp().querySelector(`#${tab}_seed input`); - ['random_seed', 'reuse_seed'].forEach(id => { - const btn = gradioApp().querySelector(`#${tab}_${id}`); - btn.addEventListener('click', () => { - setTimeout(() => { - triggerEvent(seedInput, 'change'); - }, 100); - }); - }); - }); - - let value = localStorage.getItem(LS_PREFIX + id); - - if (! value) { - return; - } - - forEach(function (event) { - switch (this.type) { - case 'checkbox': - this.checked = value === 'true'; - triggerEvent(this, event); - break; - case 'radio': - if (this.value === value) { - this.checked = true; - triggerEvent(this, event); - } else { - this.checked = false; - } - break; - default: - this.value = value; - triggerEvent(this, event); - } - }); - } - - return { init }; -}()); diff --git a/javascript/state.utils.js b/javascript/state.utils.js index 329e5b7..6e1a1c7 100644 --- a/javascript/state.utils.js +++ b/javascript/state.utils.js @@ -7,5 +7,24 @@ state.utils = { } element.dispatchEvent(new Event(event.trim())); return element; + }, + setValue: function setValue(element, value, event) { + switch (element.type) { + case 'checkbox': + element.checked = value === 'true'; + this.triggerEvent(element, event); + break; + case 'radio': + if (element.value === value) { + element.checked = true; + this.triggerEvent(element, event); + } else { + element.checked = false; + } + break; + default: + element.value = value; + this.triggerEvent(element, event); + } } }; diff --git a/scripts/state_settings.py b/scripts/state_settings.py index 67ab324..e333e62 100644 --- a/scripts/state_settings.py +++ b/scripts/state_settings.py @@ -56,5 +56,11 @@ def on_ui_settings(): ] }, section=section)) + shared.opts.add_option("state_extensions", shared.OptionInfo([], "Saved elements from extensions", gr.CheckboxGroup, lambda: { + "choices": [ + "control-net" + ] + }, section=section)) + scripts.script_callbacks.on_ui_settings(on_ui_settings)