1580158
/
stable-diffusion-webui-state
mirror of https://github.com/ilian6806/stable-diffusion-webui-state.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #43 from Fxvoid/main 

Added support for 3 extensions
pull/62/head
Ilian Iliev 2023-07-20 08:12:49 +02:00 committed by GitHub
parent 85d8ef191d da38b5fd04
commit f2bb3809aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 445 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -14,6 +14,9 @@ This extension is for AUTOMATIC1111's [Stable Diffusion web UI](https://github.c
* Import / Export and Reset state options
* Supported extensions:
- Control Net
- ADetailer
- Dynamic Prompting
- Multidiffusion upscale/Tiled Diffusion & VAE
### Usage

173
javascript/state.ext.adetailer.js Normal file
View File

@ -0,0 +1,173 @@
window.state = window.state || {};
window.state.extensions = window.state.extensions || {};
state = window.state;
state.extensions['adetailer'] = (function () {
let container = null;
let store = null;
let cnTabs = [];
function bindTabEvents() {
const tabs = container.querySelectorAll('.tabs > div > button');
tabs.forEach(tab => { // dirty hack here
tab.removeEventListener('click', onTabClick);
tab.addEventListener('click', onTabClick);
});
return tabs;
}
function handleTabs() {
let tabs = bindTabEvents();
let value = store.get('tab');
if (value) {
for (var i = 0; i < tabs.length; i++) {
if (tabs[i].textContent === value) {
state.utils.triggerEvent(tabs[i], 'click');
break;
}
}
}
}
function onTabClick() {
store.set('tab', this.textContent);
bindTabEvents();
}
function handleCheckbox(checkbox, id) {
let value = store.get(id);
if (value) {
state.utils.setValue(checkbox, value, 'change');
}
checkbox.addEventListener('change', function () {
store.set(id, this.checked);
});
}
function handleCheckboxes(container, container_idx) {
let checkboxes = container.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function checkbox(checkbox, idx) {
handleCheckbox(checkbox, `ad-tab-${container_idx}-checkbox-${idx}`)
});
}
function handleSliders(container, container_idx) {
let sliders = container.querySelectorAll('input[type="range"]');
sliders.forEach(function (slider, idx) {
let id = `ad-tab-${container_idx}-slider-${idx}`;
let value = store.get(id);
if (value) {
state.utils.setValue(slider, value, 'change');
}
slider.addEventListener('change', function () {
store.set(id, this.value);
});
});
}
function handleTextboxes(container, container_idx) {
let textboxes = container.querySelectorAll('textarea');
textboxes.forEach(function (textbox, idx) {
let id = `ad-tab-${container_idx}-textbox-${idx}`;
let value = store.get(id);
if (value) {
state.utils.setValue(textbox, value, 'change');
}
textbox.addEventListener('change', function () {
store.set(id, this.value);
});
});
}
function handleSelects(container, container_idx) {
let selects = container.querySelectorAll('.gradio-dropdown')
selects.forEach(function (select, idx) {
state.utils.handleSelect(select, `ad-tab-${container_idx}-select-${idx}`, store);
});
}
function handleRadioButtons(container, container_idx) {
let fieldsets = container.querySelectorAll('fieldset');
fieldsets.forEach(function (fieldset, idx) {
let radios = fieldset.querySelectorAll('input[type="radio"]');
let id = `ad-tab-${container_idx}-fieldset-${idx}`;
let value = store.get(id);
if (value) {
radios.forEach(function (radio) {
state.utils.setValue(radio, value, 'change');
});
}
radios.forEach(function (radio) {
radio.addEventListener('change', function () {
store.set(id, this.value);
});
});
});
}
function handleDropdown(dropdown, id) {
let value = store.get(id);
if (value && value === 'true') {
state.utils.triggerEvent(dropdown, 'click');
}
dropdown.addEventListener('click', function () {
let span = this.querySelector('.transition, .icon');
store.set(id, span.style.transform !== 'rotate(90deg)');
});
}
function handleDropdowns(container, container_idx) {
let dropdowns = container.querySelectorAll('.gradio-accordion .label-wrap');
dropdowns.forEach(function (dropdown, idx) {
handleDropdown(dropdown, `ad-tab-${container_idx}-dropdown-${idx}`);
});
}
function load() {
setTimeout(function () {
handleDropdown(container.querySelector('#script_txt2img_adetailer_ad_main_accordion > .label-wrap'), 'ad-dropdown-main');
handleCheckbox(container.querySelector('#script_txt2img_adetailer_ad_enable > label > input'), 'ad-checkbox-enable');
cnTabs.forEach(({ container, container_idx }) => {
handleTabs(container, container_idx);
handleTextboxes(container, container_idx);
handleCheckboxes(container, container_idx);
handleSliders(container, container_idx);
handleRadioButtons(container, container_idx);
handleSelects(container, container_idx);
handleDropdowns(container, container_idx);
});
}, 500);
}
function init() {
container = gradioApp().getElementById('script_txt2img_adetailer_ad_main_accordion');
store = new state.Store('ext-adetailerr');
if (! container) {
return;
}
let tabs = container.querySelectorAll('.tabitem');
if (tabs.length) {
cnTabs = [];
tabs.forEach((tabContainer, i) => {
cnTabs.push({
container: tabContainer,
container_idx: i
});
});
} else {
cnTabs = [{
container: container
}];
}
load();
}
return { init };
}());

118
javascript/state.ext.dynamic-prompting.js Normal file
View File

@ -0,0 +1,118 @@
window.state = window.state || {};
window.state.extensions = window.state.extensions || {};
state = window.state;
state.extensions['dynamic prompting'] = (function () {
let container = null;
let store = null;
function handleCheckboxes() {
let checkboxes = container.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function (checkbox, idx) {
let id = `dp-checkbox-${idx}`;
let value = store.get(id);
if (value) {
state.utils.setValue(checkbox, value, 'change');
}
checkbox.addEventListener('change', function () {
store.set(id, this.checked);
});
});
}
function handleSliders() {
let sliders = container.querySelectorAll('input[type="range"]');
sliders.forEach(function (slider, idx) {
let id = `dp-slider-${idx}`;
let value = store.get(id);
if (value) {
state.utils.setValue(slider, value, 'change');
}
slider.addEventListener('change', function () {
store.set(id, this.value);
});
});
}
function handleTextboxes() {
let textboxes = container.querySelectorAll('textarea');
textboxes.forEach(function (textbox, idx) {
let id = `dp-textbox-${idx}`;
let value = store.get(id);
if (value) {
state.utils.setValue(textbox, value, 'change');
}
textbox.addEventListener('change', function () {
store.set(id, this.value);
});
});
}
function handleSelects() {
let selects = container.querySelectorAll('.gradio-dropdown')
selects.forEach(function (select, idx) {
state.utils.handleSelect(select, `dp-select-${idx}`, store);
});
}
function handleRadioButtons() {
let fieldsets = container.querySelectorAll('fieldset');
fieldsets.forEach(function (fieldset, idx) {
let radios = fieldset.querySelectorAll('input[type="radio"]');
let id = `dp-fieldset-${idx}`
let value = store.get(id);
if (value) {
radios.forEach(function (radio) {
state.utils.setValue(radio, value, 'change');
});
}
radios.forEach(function (radio) {
radio.addEventListener('change', function () {
store.set(id, this.value);
});
});
});
}
function handleDropdowns() {
let dropdowns = container.querySelectorAll('.gradio-accordion .label-wrap');
dropdowns.forEach(function (dropdown, idx) {
let id = `dp-dropdown-${idx}`;
let value = store.get(id);
if (value && value === 'true') {
state.utils.triggerEvent(dropdown, 'click');
}
dropdown.addEventListener('click', function () {
let span = this.querySelector('.transition, .icon');
store.set(id, span.style.transform !== 'rotate(90deg)');
});
});
}
function load() {
setTimeout(function () {
handleCheckboxes();
handleSliders();
handleTextboxes();
handleSelects();
handleRadioButtons();
handleDropdowns();
}, 500);
}
function init() {
container = gradioApp().getElementById('sddp-dynamic-prompting');
store = new state.Store('ext-dynamic-prompting');
if (! container) {
return;
}
load();
}
return { init };
}());

130
javascript/state.ext.multidiffusion.js Normal file
View File

@ -0,0 +1,130 @@
window.state = window.state || {};
window.state.extensions = window.state.extensions || {};
state = window.state;
state.extensions['multidiffusion'] = (function () {
let containers = [];
let store = null;
function handleCheckboxes(container, name) {
let checkboxes = container.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function (checkbox, idx) {
let id = `md-${name}-checkbox-${idx}`;
let value = store.get(id);
if (value) {
state.utils.setValue(checkbox, value, 'change');
}
checkbox.addEventListener('change', function () {
store.set(id, this.checked);
});
});
}
function handleSliders(container, name) {
let sliders = container.querySelectorAll('input[type="range"]');
sliders.forEach(function (slider, idx) {
let id = `md-${name}-slider-${idx}`;
let value = store.get(id);
if (value) {
state.utils.setValue(slider, value, 'change');
}
slider.addEventListener('change', function () {
store.set(id, this.value);
});
});
}
function handleTextboxes(container, name) {
let textboxes = container.querySelectorAll('textarea');
textboxes.forEach(function (textbox, idx) {
let id = `md-${name}-textbox-${idx}`;
let value = store.get(id);
if (value) {
state.utils.setValue(textbox, value, 'change');
}
textbox.addEventListener('change', function () {
store.set(id, this.value);
});
});
}
function handleSelects(container, name) {
let selects = container.querySelectorAll('.gradio-dropdown')
selects.forEach(function (select, idx) {
state.utils.handleSelect(select, `md-${name}-select-${idx}`, store);
});
}
function handleRadioButtons(container, name) {
let fieldsets = container.querySelectorAll('fieldset');
fieldsets.forEach(function (fieldset, idx) {
let radios = fieldset.querySelectorAll('input[type="radio"]');
let id = `md-${name}-fieldset-${idx}`;
let value = store.get(id);
if (value) {
radios.forEach(function (radio) {
state.utils.setValue(radio, value, 'change');
});
}
radios.forEach(function (radio) {
radio.addEventListener('change', function () {
store.set(id, this.value);
});
});
});
}
function handleDropdowns(container, name) {
let dropdowns = container.querySelectorAll('.gradio-accordion .label-wrap');
dropdowns.forEach(function (dropdown, idx) {
let id = `md-${name}-dropdown-${idx}`;
let value = store.get(id);
if (value && value === 'true') {
state.utils.triggerEvent(dropdown, 'click');
}
dropdown.addEventListener('click', function () {
let span = this.querySelector('.transition, .icon');
store.set(id, span.style.transform !== 'rotate(90deg)');
});
});
}
function load() {
setTimeout(function () {
containers.forEach(({container, name}) => {
handleCheckboxes(container, name);
handleSliders(container, name);
handleTextboxes(container, name);
handleSelects(container, name);
handleRadioButtons(container, name);
handleDropdowns(container, name);
});
}, 500);
}
function init() {
let spanTags = gradioApp().getElementsByTagName("span");
for (var i = 0; i < spanTags.length; i++) {
if (spanTags[i].textContent == 'Tiled Diffusion') {
containers.push({container: spanTags[i].parentElement.parentElement,name: 'diffusion'});
}
if (spanTags[i].textContent == 'Tiled VAE') {
containers.push({container: spanTags[i].parentElement.parentElement,name: 'vae'});
break;
}
};
store = new state.Store('ext-multidiffusion');
if (! containers.length) {
return;
}
load();
}
return { init };
}());

30
javascript/state.utils.js
View File

@ -1,5 +1,6 @@
window.state = window.state || {};
state = window.state;
let selectingQueue = -1;
state.utils = {
triggerEvent: function triggerEvent(element, event) {
@ -59,20 +60,23 @@ state.utils = {
let value = store.get(id);
if (value) {
let input = select.querySelector('input');
state.utils.triggerMouseEvent(input, 'focus');
selectingQueue += 1;
setTimeout(() => {
let items = Array.from(select.querySelectorAll('ul li'));
items.forEach(li => {
if (li.lastChild.wholeText.trim() === value) {
state.utils.triggerMouseEvent(li, 'mousedown');
return false;
}
});
state.utils.triggerMouseEvent(input, 'blur');
}, 100);
let input = select.querySelector('input');
state.utils.triggerMouseEvent(input, 'focus');
setTimeout(() => {
let items = Array.from(select.querySelectorAll('ul li'));
items.forEach(li => {
if (li.lastChild.wholeText.trim() === value) {
state.utils.triggerMouseEvent(li, 'mousedown');
return false;
}
});
state.utils.triggerMouseEvent(input, 'blur');
selectingQueue -= 1;
}, 100);
}, selectingQueue * 200)
}
setTimeout(() => {

5
scripts/state_settings.py
View File

@ -64,7 +64,10 @@ def on_ui_settings():
shared.opts.add_option("state_extensions", shared.OptionInfo([], "Saved elements from extensions", gr.CheckboxGroup, lambda: {
"choices": [
"control-net"
"control-net",
"adetailer",
"multidiffusion",
"dynamic prompting"
]
}, section=section))