From 528bfcea4c0c494b6f885729a2927e359a1e780a Mon Sep 17 00:00:00 2001 From: "ilian.iliev" Date: Wed, 22 Mar 2023 17:13:50 +0200 Subject: [PATCH] Multi ControlNet support implemented --- javascript/state.ext.control-net.js | 122 +++++++++++++++++----------- javascript/state.utils.js | 3 +- 2 files changed, 77 insertions(+), 48 deletions(-) diff --git a/javascript/state.ext.control-net.js b/javascript/state.ext.control-net.js index ec07880..ff2096d 100644 --- a/javascript/state.ext.control-net.js +++ b/javascript/state.ext.control-net.js @@ -5,6 +5,7 @@ state.extensions['control-net'] = (function () { let container = null; let store = null; + let cnTabs = []; function handleToggle() { let value = store.get('toggled'); @@ -46,68 +47,76 @@ state.extensions['control-net'] = (function () { } function handleCheckboxes() { - let checkboxes = container.querySelectorAll('input[type="checkbox"]'); - checkboxes.forEach(function (checkbox) { - let label = checkbox.nextElementSibling; - let id = state.utils.txtToId(label.textContent); - let value = store.get(id); - if (value) { - state.utils.setValue(checkbox, value, 'change'); - } - checkbox.addEventListener('change', function () { - store.set(id, this.checked); - }); + cnTabs.forEach(({ container, store }) => { + let checkboxes = container.querySelectorAll('input[type="checkbox"]'); + checkboxes.forEach(function (checkbox) { + let label = checkbox.nextElementSibling; + let id = state.utils.txtToId(label.textContent); + let value = store.get(id); + if (value) { + state.utils.setValue(checkbox, value, 'change'); + } + checkbox.addEventListener('change', function () { + store.set(id, this.checked); + }); + }); }); } function handleSelects() { - let selects = container.querySelectorAll('select'); - selects.forEach(function (select) { - let label = select.previousElementSibling; - let id = state.utils.txtToId(label.textContent); - let value = store.get(id); - if (value) { - state.utils.setValue(select, value, 'change'); - } - select.addEventListener('change', function () { - store.set(id, this.value); + cnTabs.forEach(({ container, store }) => { + let selects = container.querySelectorAll('select'); + selects.forEach(function (select) { + let label = select.previousElementSibling; + let id = state.utils.txtToId(label.textContent); + let value = store.get(id); + if (value) { + state.utils.setValue(select, value, 'change'); + } + select.addEventListener('change', function () { + store.set(id, this.value); + }); + if (id === 'preprocessor' && value && value !== 'none') { + state.utils.onNextUiUpdates(handleSliders); // update new sliders if needed + } }); - if (id === 'preprocessor' && value && value !== 'none') { - state.utils.onNextUiUpdates(handleSliders); // update new sliders if needed - } }); } function handleSliders() { - let sliders = container.querySelectorAll('input[type="range"]'); - sliders.forEach(function (slider) { - let label = slider.previousElementSibling.querySelector('label span'); - let id = state.utils.txtToId(label.textContent); - let value = store.get(id); - if (value) { - state.utils.setValue(slider, value, 'change'); - } - slider.addEventListener('change', function () { - store.set(id, this.value); + cnTabs.forEach(({ container, store }) => { + let sliders = container.querySelectorAll('input[type="range"]'); + sliders.forEach(function (slider) { + let label = slider.previousElementSibling.querySelector('label span'); + let id = state.utils.txtToId(label.textContent); + let value = store.get(id); + if (value) { + state.utils.setValue(slider, value, 'change'); + } + slider.addEventListener('change', function () { + store.set(id, this.value); + }); }); }); } function handleRadioButtons() { - let fieldsets = container.querySelectorAll('fieldset'); - fieldsets.forEach(function (fieldset) { - let label = fieldset.firstChild.nextElementSibling; - let radios = fieldset.querySelectorAll('input[type="radio"]'); - let id = state.utils.txtToId(label.textContent); - let value = store.get(id); - if (value) { + cnTabs.forEach(({ container, store }) => { + let fieldsets = container.querySelectorAll('fieldset'); + fieldsets.forEach(function (fieldset) { + let label = fieldset.firstChild.nextElementSibling; + let radios = fieldset.querySelectorAll('input[type="radio"]'); + let id = state.utils.txtToId(label.textContent); + let value = store.get(id); + if (value) { + radios.forEach(function (radio) { + state.utils.setValue(radio, value, 'change'); + }); + } radios.forEach(function (radio) { - state.utils.setValue(radio, value, 'change'); - }); - } - radios.forEach(function (radio) { - radio.addEventListener('change', function () { - store.set(id, this.value); + radio.addEventListener('change', function () { + store.set(id, this.value); + }); }); }); }); @@ -123,8 +132,27 @@ state.extensions['control-net'] = (function () { } function init() { + container = gradioApp().getElementById('controlnet'); store = new state.Store('ext-control-net'); + + let tabs = container.querySelectorAll('.tabitem'); + + if (tabs.length) { + cnTabs = []; + tabs.forEach((tabContainer, i) => { + cnTabs.push({ + container: tabContainer, + store: new state.Store('ext-control-net-' + i) + }); + }); + } else { + cnTabs = [{ + container: container, + store: new state.Store('ext-control-net-0') + }]; + } + load(); } diff --git a/javascript/state.utils.js b/javascript/state.utils.js index 237ec79..2a1d1aa 100644 --- a/javascript/state.utils.js +++ b/javascript/state.utils.js @@ -50,6 +50,7 @@ state.utils = { } }, onNextUiUpdates: function (func) { - onUiUpdate(this.callXTimes(this.debounce(func, 50), 10)); + // brute force this to to ensure that the method is called after next few updates + onUiUpdate(this.callXTimes(function () { setTimeout(func, 10); }, 50)); } };