From 3e80e1130907efb5e00b7251d5d644088dd9fa96 Mon Sep 17 00:00:00 2001 From: Chenlei Hu Date: Fri, 2 Feb 2024 22:57:45 +0000 Subject: [PATCH] Add back enabled checkbox and sync (#30) * Add back enabled checkbox and sync * Better state management --- .../javascript/active_units.js | 23 ++++++++++++++++--- .../controlnet_ui/controlnet_ui_group.py | 10 +++++--- .../sd_forge_controlnet/scripts/controlnet.py | 6 ++--- 3 files changed, 30 insertions(+), 9 deletions(-) diff --git a/extensions-builtin/sd_forge_controlnet/javascript/active_units.js b/extensions-builtin/sd_forge_controlnet/javascript/active_units.js index 9e3a9e72..5c0b2734 100644 --- a/extensions-builtin/sd_forge_controlnet/javascript/active_units.js +++ b/extensions-builtin/sd_forge_controlnet/javascript/active_units.js @@ -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}". */ diff --git a/extensions-builtin/sd_forge_controlnet/lib_controlnet/controlnet_ui/controlnet_ui_group.py b/extensions-builtin/sd_forge_controlnet/lib_controlnet/controlnet_ui/controlnet_ui_group.py index 497587ba..63086e81 100644 --- a/extensions-builtin/sd_forge_controlnet/lib_controlnet/controlnet_ui/controlnet_ui_group.py +++ b/extensions-builtin/sd_forge_controlnet/lib_controlnet/controlnet_ui/controlnet_ui_group.py @@ -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, diff --git a/extensions-builtin/sd_forge_controlnet/scripts/controlnet.py b/extensions-builtin/sd_forge_controlnet/scripts/controlnet.py index fd30b670..f7182c4d 100644 --- a/extensions-builtin/sd_forge_controlnet/scripts/controlnet.py +++ b/extensions-builtin/sd_forge_controlnet/scripts/controlnet.py @@ -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))