131 lines
4.4 KiB
JavaScript
131 lines
4.4 KiB
JavaScript
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 };
|
|
}());
|