QuintW's picture
Upload 1350 files
3f9c56c
raw
history blame
12.8 kB
/**
* Give a badge on ControlNet Accordion indicating total number of active
* units.
* Make active unit's tab name green.
* Append control type to tab name.
* Disable resize mode selection when A1111 img2img input is used.
*/
(function () {
const cnetAllAccordions = new Set();
onUiUpdate(() => {
const ImgChangeType = {
NO_CHANGE: 0,
REMOVE: 1,
ADD: 2,
SRC_CHANGE: 3,
};
function imgChangeObserved(mutationsList) {
// Iterate over all mutations that just occured
for (let mutation of mutationsList) {
// Check if the mutation is an addition or removal of a node
if (mutation.type === 'childList') {
// Check if nodes were added
if (mutation.addedNodes.length > 0) {
for (const node of mutation.addedNodes) {
if (node.tagName === 'IMG') {
return ImgChangeType.ADD;
}
}
}
// Check if nodes were removed
if (mutation.removedNodes.length > 0) {
for (const node of mutation.removedNodes) {
if (node.tagName === 'IMG') {
return ImgChangeType.REMOVE;
}
}
}
}
// Check if the mutation is a change of an attribute
else if (mutation.type === 'attributes') {
if (mutation.target.tagName === 'IMG' && mutation.attributeName === 'src') {
return ImgChangeType.SRC_CHANGE;
}
}
}
return ImgChangeType.NO_CHANGE;
}
function childIndex(element) {
// Get all child nodes of the parent
let children = Array.from(element.parentNode.childNodes);
// Filter out non-element nodes (like text nodes and comments)
children = children.filter(child => child.nodeType === Node.ELEMENT_NODE);
return children.indexOf(element);
}
function imageInputDisabledAlert() {
alert('Inpaint control type must use a1111 input in img2img mode.');
}
class ControlNetUnitTab {
constructor(tab, accordion) {
this.tab = tab;
this.accordion = accordion;
this.isImg2Img = tab.querySelector('.cnet-unit-enabled').id.includes('img2img');
this.enabledCheckbox = tab.querySelector('.cnet-unit-enabled input');
this.inputImage = tab.querySelector('.cnet-input-image-group .cnet-image input[type="file"]');
this.inputImageContainer = tab.querySelector('.cnet-input-image-group .cnet-image');
this.controlTypeRadios = tab.querySelectorAll('.controlnet_control_type_filter_group input[type="radio"]');
this.resizeModeRadios = tab.querySelectorAll('.controlnet_resize_mode_radio input[type="radio"]');
this.runPreprocessorButton = tab.querySelector('.cnet-run-preprocessor');
const tabs = tab.parentNode;
this.tabNav = tabs.querySelector('.tab-nav');
this.tabIndex = childIndex(tab) - 1; // -1 because tab-nav is also at the same level.
this.attachEnabledButtonListener();
this.attachControlTypeRadioListener();
this.attachTabNavChangeObserver();
this.attachImageUploadListener();
this.attachImageStateChangeObserver();
this.attachA1111SendInfoObserver();
this.attachPresetDropdownObserver();
}
getTabNavButton() {
return this.tabNav.querySelector(`:nth-child(${this.tabIndex + 1})`);
}
getActiveControlType() {
for (let radio of this.controlTypeRadios) {
if (radio.checked) {
return radio.value;
}
}
return undefined;
}
updateActiveState() {
const tabNavButton = this.getTabNavButton();
if (!tabNavButton) return;
if (this.enabledCheckbox.checked) {
tabNavButton.classList.add('cnet-unit-active');
} else {
tabNavButton.classList.remove('cnet-unit-active');
}
}
updateActiveUnitCount() {
function getActiveUnitCount(checkboxes) {
let activeUnitCount = 0;
for (const checkbox of checkboxes) {
if (checkbox.checked)
activeUnitCount++;
}
return activeUnitCount;
}
const checkboxes = this.accordion.querySelectorAll('.cnet-unit-enabled input');
const span = this.accordion.querySelector('.label-wrap span');
// Remove existing badge.
if (span.childNodes.length !== 1) {
span.removeChild(span.lastChild);
}
// Add new badge if necessary.
const activeUnitCount = getActiveUnitCount(checkboxes);
if (activeUnitCount > 0) {
const div = document.createElement('div');
div.classList.add('cnet-badge');
div.classList.add('primary');
div.innerHTML = `${activeUnitCount} unit${activeUnitCount > 1 ? 's' : ''}`;
span.appendChild(div);
}
}
/**
* Add the active control type to tab displayed text.
*/
updateActiveControlType() {
const tabNavButton = this.getTabNavButton();
if (!tabNavButton) return;
// Remove the control if exists
const controlTypeSuffix = tabNavButton.querySelector('.control-type-suffix');
if (controlTypeSuffix) controlTypeSuffix.remove();
// Add new suffix.
const controlType = this.getActiveControlType();
if (controlType === 'All') return;
const span = document.createElement('span');
span.innerHTML = `[${controlType}]`;
span.classList.add('control-type-suffix');
tabNavButton.appendChild(span);
}
/**
* When 'Inpaint' control type is selected in img2img:
* - Make image input disabled
* - Clear existing image input
*/
updateImageInputState() {
if (!this.isImg2Img) return;
const tabNavButton = this.getTabNavButton();
if (!tabNavButton) return;
const controlType = this.getActiveControlType();
if (controlType.toLowerCase() === 'inpaint') {
this.inputImage.disabled = true;
this.inputImage.parentNode.addEventListener('click', imageInputDisabledAlert);
const removeButton = this.tab.querySelector(
'.cnet-input-image-group .cnet-image button[aria-label="Remove Image"]');
if (removeButton) removeButton.click();
} else {
this.inputImage.disabled = false;
this.inputImage.parentNode.removeEventListener('click', imageInputDisabledAlert);
}
}
attachEnabledButtonListener() {
this.enabledCheckbox.addEventListener('change', () => {
this.updateActiveState();
this.updateActiveUnitCount();
});
}
attachControlTypeRadioListener() {
for (const radio of this.controlTypeRadios) {
radio.addEventListener('change', () => {
this.updateActiveControlType();
});
}
}
/**
* Each time the active tab change, all tab nav buttons are cleared and
* regenerated by gradio. So we need to reapply the active states on
* them.
*/
attachTabNavChangeObserver() {
new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
this.updateActiveState();
this.updateActiveControlType();
}
}
}).observe(this.tabNav, { childList: true });
}
attachImageUploadListener() {
// Automatically check `enable` checkbox when image is uploaded.
this.inputImage.addEventListener('change', (event) => {
if (!event.target.files) return;
if (!this.enabledCheckbox.checked)
this.enabledCheckbox.click();
});
}
attachImageStateChangeObserver() {
new MutationObserver((mutationsList) => {
const changeObserved = imgChangeObserved(mutationsList);
if (changeObserved === ImgChangeType.ADD) {
// enabling the run preprocessor button
this.runPreprocessorButton.removeAttribute("disabled");
this.runPreprocessorButton.title = 'Run preprocessor';
}
if (changeObserved === ImgChangeType.REMOVE) {
// disabling the run preprocessor button
this.runPreprocessorButton.setAttribute("disabled", true);
this.runPreprocessorButton.title = "No ControlNet input image available";
}
}).observe(this.inputImageContainer, {
childList: true,
subtree: true,
});
}
/**
* Observe send PNG info buttons in A1111, as they can also directly
* set states of ControlNetUnit.
*/
attachA1111SendInfoObserver() {
const pasteButtons = gradioApp().querySelectorAll('#paste');
const pngButtons = gradioApp().querySelectorAll(
this.isImg2Img ?
'#img2img_tab, #inpaint_tab' :
'#txt2img_tab'
);
for (const button of [...pasteButtons, ...pngButtons]) {
button.addEventListener('click', () => {
// The paste/send img generation info feature goes
// though gradio, which is pretty slow. Ideally we should
// observe the event when gradio has done the job, but
// that is not an easy task.
// Here we just do a 2 second delay until the refresh.
setTimeout(() => {
this.updateActiveState();
this.updateActiveUnitCount();
}, 2000);
});
}
}
attachPresetDropdownObserver() {
const presetDropDown = this.tab.querySelector('.cnet-preset-dropdown');
new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.removedNodes.length > 0) {
setTimeout(() => {
this.updateActiveState();
this.updateActiveUnitCount();
this.updateActiveControlType();
}, 1000);
return;
}
}
}).observe(presetDropDown, {
childList: true,
subtree: true,
});
}
}
gradioApp().querySelectorAll('#controlnet').forEach(accordion => {
if (cnetAllAccordions.has(accordion)) return;
accordion.querySelectorAll('.cnet-unit-tab')
.forEach(tab => new ControlNetUnitTab(tab, accordion));
cnetAllAccordions.add(accordion);
});
});
})();