Add back enabled checkbox and sync (#30)

* Add back enabled checkbox and sync

* Better state management
This commit is contained in:
Chenlei Hu
2024-02-02 22:57:45 +00:00
committed by GitHub
parent 1b60a0f804
commit 3e80e11309
3 changed files with 30 additions and 9 deletions

View File

@@ -68,7 +68,8 @@
this.accordion = accordion;
this.isImg2Img = tab.querySelector('.cnet-mask-upload').id.includes('img2img');
this.enabledCheckbox = tab.querySelector('.input-accordion-checkbox');
this.enabledAccordionCheckbox = tab.querySelector('.input-accordion-checkbox');
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"]');
@@ -81,9 +82,10 @@
// By default the InputAccordion checkbox is linked with the state
// of accordion's open/close state. To disable this link, we can
// simulate click to check the checkbox and uncheck it.
this.enabledCheckbox.click();
this.enabledCheckbox.click();
this.enabledAccordionCheckbox.click();
this.enabledAccordionCheckbox.click();
this.sync_enabled_checkbox();
this.attachEnabledButtonListener();
this.attachControlTypeRadioListener();
this.attachImageUploadListener();
@@ -92,6 +94,21 @@
this.attachPresetDropdownObserver();
}
/**
* Sync the states of enabledCheckbox and enabledAccordionCheckbox.
*/
sync_enabled_checkbox() {
this.enabledCheckbox.addEventListener("change", () => {
if (this.enabledAccordionCheckbox.checked != this.enabledCheckbox.checked) {
this.enabledAccordionCheckbox.click();
}
});
this.enabledAccordionCheckbox.addEventListener("change", () => {
if (this.enabledCheckbox.checked != this.enabledAccordionCheckbox.checked) {
this.enabledCheckbox.click();
}
});
}
/**
* Get the span that has text "Unit {X}".
*/

View File

@@ -151,7 +151,6 @@ class ControlNetUiGroup(object):
self,
is_img2img: bool,
default_unit: external_code.ControlNetUnit,
unit_enabled: gr.Checkbox,
photopea: Optional[Photopea] = None,
):
# Whether callbacks have been registered.
@@ -165,12 +164,11 @@ class ControlNetUiGroup(object):
self.webcam_enabled = False
self.webcam_mirrored = False
# Now the enabled checkbox is moved to display on InputAccordion.
self.enabled = unit_enabled
# Note: All gradio elements declared in `render` will be defined as member variable.
# Update counter to trigger a force update of UiControlNetUnit.
# This is useful when a field with no event subscriber available changes.
# e.g. gr.Gallery, gr.State, etc.
self.enabled = None
self.update_unit_counter = None
self.upload_tab = None
self.image = None
@@ -397,6 +395,12 @@ class ControlNetUiGroup(object):
)
with FormRow(elem_classes=["controlnet_main_options"]):
self.enabled = gr.Checkbox(
label="Enable",
value=self.default_unit.enabled,
elem_id=f"{elem_id_tabname}_{tabname}_controlnet_enable_checkbox",
elem_classes=["cnet-unit-enabled"],
)
self.pixel_perfect = gr.Checkbox(
label="Pixel Perfect",
value=self.default_unit.pixel_perfect,

View File

@@ -80,9 +80,9 @@ class ControlNetForForgeOfficial(scripts.Script):
with InputAccordion(
value=False,
label=f"ControlNet Unit {i}",
elem_classes=["cnet-unit-enabled"],
) as enable_unit:
group = ControlNetUiGroup(is_img2img, default_unit, enable_unit, photopea)
elem_classes=["cnet-unit-enabled-accordion"], # Class on accordion
):
group = ControlNetUiGroup(is_img2img, default_unit, photopea)
ui_groups.append(group)
controls.append(group.render(f"ControlNet-{i}", elem_id_tabname))