diff --git a/javascript/state.core.js b/javascript/state.core.js index d09a77f..5e445f2 100644 --- a/javascript/state.core.js +++ b/javascript/state.core.js @@ -5,7 +5,7 @@ state.core = (function () { const TABS = ['txt2img', 'img2img']; - const ELEMENTS = { + const INPUTS = { // Basic input elements 'prompt': 'prompt', 'negative_prompt': 'neg_prompt', 'sampling_steps': 'steps', @@ -15,51 +15,71 @@ state.core = (function () { 'hires_resize_y': 'hr_resize_y', 'hires_denoising_strength': 'denoising_strength', 'refiner_switch': 'switch_at', + 'upscaler_2_visibility': 'extras_upscaler_2_visibility', + 'upscaler_scale_by_resize': 'extras_upscaling_resize', + 'upscaler_scale_by_max_side_length': 'extras_upscale_max_side_length', + 'upscaler_scale_to_w': 'extras_upscaling_resize_w', + 'upscaler_scale_to_h': 'extras_upscaling_resize_h', + 'upscaler_scale_to_crop': 'extras_upscaling_crop', 'width': 'width', 'height': 'height', 'batch_count': 'batch_count', 'batch_size': 'batch_size', 'cfg_scale': 'cfg_scale', 'denoising_strength': 'denoising_strength', + 'resize_mode': 'resize_mode', 'seed': 'seed', }; - const ELEMENTS_WITHOUT_PREFIX = { - 'resize_mode': 'resize_mode', - }; - - const ELEMENTS_WITH_DUPLICATE_IDS = { - INPUTS: { - 'upscaler_2_visibility': 'extras_upscaler_2_visibility', - 'upscaler_scale_by_resize': 'extras_upscaling_resize', - 'upscaler_scale_by_max_side_length': 'extras_upscale_max_side_length', - 'upscaler_scale_to_w': 'extras_upscaling_resize_w', - 'upscaler_scale_to_h': 'extras_upscaling_resize_h', - 'upscaler_scale_to_crop': 'extras_upscaling_crop', - }, - SELECTS: { - 'upscaler_1': 'extras_upscaler_1', - 'upscaler_2': 'extras_upscaler_2', - } - }; - - const SELECTS = { + const SELECTS = { // Dropdowns 'sampling': 'sampling', 'scheduler': 'scheduler', 'hires_upscaler': 'hr_upscaler', 'refiner_checkpoint': 'checkpoint', + 'upscaler_1': 'extras_upscaler_1', + 'upscaler_2': 'extras_upscaler_2', 'script': '#script_list', }; - const MULTI_SELECTS = { + const MULTI_SELECTS = { // Multi-select dropdowns 'styles': 'styles' }; - const TOGGLE_BUTTONS = { + const TOGGLE_BUTTONS = { // Toggle buttons 'hires_fix': 'hr', 'refiner': 'enable', + 'tiled_diffusion': 'MD-t2i-enabled', }; + // *** Exceptions *** // + + // Elements that don't have a tab prefix + const ELEMENTS_WITHOUT_PREFIX = [ + 'resize_mode', + 'upscaler_2_visibility', + 'upscaler_scale_by_resize', + 'upscaler_scale_by_max_side_length', + 'upscaler_scale_to_w', + 'upscaler_scale_to_h', + 'upscaler_scale_to_crop', + 'upscaler_1', + 'upscaler_2', + 'tiled_diffusion', + ]; + + // Elements that have the same id in different tabs + const ELEMENTS_WITH_DUPLICATE_IDS = [ + 'upscaler_2_visibility', + 'upscaler_scale_by_resize', + 'upscaler_scale_by_max_side_length', + 'upscaler_scale_to_w', + 'upscaler_scale_to_h', + 'upscaler_scale_to_crop', + 'upscaler_1', + 'upscaler_2', + 'tiled_diffusion', + ]; + let store = null; function hasSetting(id, tab) { @@ -75,22 +95,46 @@ state.core = (function () { config.hasSetting = hasSetting load(config); } catch (error) { - console.error('[state]: Error:', error); + state.logging.error(error); } }) - .catch(error => console.error('[state]: Error getting JSON file:', error)); + .catch(error => state.logging.error(error)); } function forEachElement(list, config, action) { - for (const [settingId, element] of Object.entries(list)) { + for (const [settingId, elementId] of Object.entries(list)) { TABS.forEach(tab => { if (config.hasSetting(settingId, tab)) { - action(element, tab); + action(settingId, elementId, tab); } }); } } + function executeElementHandler(handler, settingId, elementId, tab) { + + // Handler will use much slower '[id="elementId"]' selector if elementId is in ELEMENTS_WITH_DUPLICATE_IDS + let useDuplicateIdsSelector = ELEMENTS_WITH_DUPLICATE_IDS.indexOf(settingId) > -1; + + if (ELEMENTS_WITHOUT_PREFIX.indexOf(settingId) > -1) { + return handler(elementId, useDuplicateIdsSelector); + } else { + return handler(`${tab}_${elementId}`, useDuplicateIdsSelector); + } + } + + function getHandlerByElementId(settingId) { + if (settingId in INPUTS) { + return handleSavedInput; + } else if (settingId in SELECTS) { + return handleSavedSelects; + } else if (settingId in MULTI_SELECTS) { + return handleSavedMultiSelects; + } else if (settingId in TOGGLE_BUTTONS) { + return handleToggleButton; + } + } + function load(config) { store = new state.Store(); @@ -98,32 +142,15 @@ state.core = (function () { loadUI(config); restoreTabs(config); - forEachElement(ELEMENTS, config, (element, tab) => { - handleSavedInput(`${tab}_${element}`); - }); + const ALL_ELEMENTS = Object.assign({}, INPUTS, SELECTS, MULTI_SELECTS, TOGGLE_BUTTONS); - forEachElement(ELEMENTS_WITHOUT_PREFIX, config, (element, tab) => { - handleSavedInput(`${element}`); - }); - - forEachElement(SELECTS, config, (element, tab) => { - handleSavedSelects(`${tab}_${element}`); - }); - - forEachElement(MULTI_SELECTS, config, (element, tab) => { - handleSavedMultiSelects(`${tab}_${element}`); - }); - - forEachElement(TOGGLE_BUTTONS, config, (element, tab) => { - handleToggleButton(`${tab}_${element}`); - }); - - forEachElement(ELEMENTS_WITH_DUPLICATE_IDS.INPUTS, config, (element, tab) => { - handleSavedInput(`${element}`, true); - }); - - forEachElement(ELEMENTS_WITH_DUPLICATE_IDS.SELECTS, config, (element, tab) => { - handleSavedSelects(`${element}`, true); + forEachElement(ALL_ELEMENTS, config, (settingId, elementId, tab) => { + let method = getHandlerByElementId(settingId); + if (method) { + executeElementHandler(method, settingId, elementId, tab); + } else { + state.logging.warn(`Element handler not found for: ${elementId}`); + } }); handleExtensions(config); @@ -317,30 +344,25 @@ state.core = (function () { } } - function handleSavedMultiSelects(id) { + function handleSavedMultiSelects(id, duplicateIds) { const select = gradioApp().getElementById(`${id}`); state.utils.handleMultipleSelect(select, id, store); } - function handleToggleButton(id) { - let btn = gradioApp().querySelector(`button#${id}`); - 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.clickToggleMenu(btn); - } - btn.addEventListener('click', function () { - 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); + function handleToggleButton(id, duplicateIds) { + + let selector = duplicateIds ? `[id="${id}"]` : `#${id}`; + + elements = gradioApp().querySelectorAll(`.input-accordion${selector}>.label-wrap`); + + elements.forEach(function (element) { + if (store.get(id) === 'true') { + state.utils.clickToggleMenu(element); } + element.addEventListener('click', function () { + let classList = Array.from(this.parentNode.classList); + store.set(id, classList.indexOf('input-accordion-open') > -1); + }); }); } diff --git a/javascript/state.utils.js b/javascript/state.utils.js index 972f4d3..a2ad234 100644 --- a/javascript/state.utils.js +++ b/javascript/state.utils.js @@ -29,20 +29,7 @@ state.utils = { 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); - } + element.click(); return element; }, setValue: function setValue(element, value, event) { diff --git a/scripts/state_settings.py b/scripts/state_settings.py index 77becee..45c781a 100644 --- a/scripts/state_settings.py +++ b/scripts/state_settings.py @@ -37,14 +37,15 @@ def on_ui_settings(): "refiner", "refiner_checkpoint", "refiner_switch", - 'upscaler_scale_by_resize', - 'upscaler_scale_by_max_side_length', - 'upscaler_scale_to_w', - 'upscaler_scale_to_h', - 'upscaler_scale_to_crop', - 'upscaler_1', - 'upscaler_2', - 'upscaler_2_visibility', + "upscaler_scale_by_resize", + "upscaler_scale_by_max_side_length", + "upscaler_scale_to_w", + "upscaler_scale_to_h", + "upscaler_scale_to_crop", + "upscaler_1", + "upscaler_2", + "upscaler_2_visibility", + "tiled_diffusion", "script" ] }, section=section)) @@ -57,14 +58,14 @@ def on_ui_settings(): "refiner", "refiner_checkpoint", "refiner_switch", - 'upscaler_scale_by_resize', - 'upscaler_scale_by_max_side_length', - 'upscaler_scale_to_w', - 'upscaler_scale_to_h', - 'upscaler_scale_to_crop', - 'upscaler_1', - 'upscaler_2', - 'upscaler_2_visibility', + "upscaler_scale_by_resize", + "upscaler_scale_by_max_side_length", + "upscaler_scale_to_w", + "upscaler_scale_to_h", + "upscaler_scale_to_crop", + "upscaler_1", + "upscaler_2", + "upscaler_2_visibility", "sampling", "scheduler", "resize_mode", @@ -76,6 +77,7 @@ def on_ui_settings(): "cfg_scale", "denoising_strength", "seed", + "tiled_diffusion", "script" ] }, section=section)) @@ -101,5 +103,4 @@ def on_ui_settings(): ], }, section=section)) - scripts.script_callbacks.on_ui_settings(on_ui_settings)