cleanup UI (#75)

* cleanup UI

 * activate checkbox added
 * fix for more consistent ui

* hide original checkbox

javascript/active.js

@@ -0,0 +1,63 @@
+(function(){
+var accordions = {};
+var enabled = {};
+onUiUpdate(() => {
+    var accordion_id_prefix = "#dynthres_";
+    var extension_checkbox_class = ".dynthres-enabled";
+
+    function triggerEvent(element, eventName) {
+        var event = document.createEvent("HTMLEvents");
+        event.initEvent(eventName, false, true);
+        element.dispatchEvent(event);
+    }
+
+    function updateActiveState(checkbox, accordion) {
+        // change checkbox state
+        const badge = accordion.querySelector('.label-wrap span input');
+        badge.checked = checkbox.checked;
+    }
+
+    function attachEnabledButtonListener(checkbox, accordion) {
+        // add checkbox
+        const span = accordion.querySelector('.label-wrap span');
+        const badge = document.createElement('input');
+        badge.type = "checkbox";
+        badge.checked = checkbox.checked;
+        badge.addEventListener('click', (e) => {
+            checkbox.checked = !checkbox.checked;
+            triggerEvent(checkbox, 'change');
+            e.stopPropagation();
+        });
+
+        badge.className = checkbox.className;
+        badge.classList.add('primary');
+        span.insertBefore(badge, span.firstChild);
+        var space = document.createElement('span');
+        space.innerHTML = " ";
+        span.insertBefore(space, badge.nextSibling);
+
+        checkbox.addEventListener('click', () => {
+            updateActiveState(checkbox, accordion);
+        });
+        checkbox.parentNode.style.display = "none";
+    }
+
+    if (Object.keys(accordions).length < 2) {
+        var accordion = gradioApp().querySelector(accordion_id_prefix + 'txt2img');
+        if (accordion)
+            accordions.txt2img = accordion;
+        accordion = gradioApp().querySelector(accordion_id_prefix + 'img2img');
+        if (accordion)
+            accordions.img2img = accordion;
+    }
+
+    if (Object.keys(accordions).length > 0 && accordions.txt2img && !enabled.txt2img) {
+        enabled.txt2img = accordions.txt2img.querySelector(extension_checkbox_class + ' input');
+        attachEnabledButtonListener(enabled.txt2img, accordions.txt2img);
+    }
+    if (Object.keys(accordions).length > 0 && accordions.img2img && !enabled.img2img) {
+        enabled.img2img = accordions.img2img.querySelector(extension_checkbox_class + ' input');
+        attachEnabledButtonListener(enabled.img2img, accordions.img2img);
+    }
+});
+})();

scripts/dynamic_thresholding.py

@@ -41,13 +41,14 @@ class Script(scripts.Script):
     def ui(self, is_img2img):
         def vis_change(isVis):
             return {"visible": isVis, "__type__": "update"}
-        enabled = gr.Checkbox(value=False, label="Enable Dynamic Thresholding (CFG Scale Fix)")
         # "Dynamic Thresholding (CFG Scale Fix)"
-        accordion = gr.Group(visible=False)
+        with gr.Accordion("Dynamic Thresholding (CFG Scale Fix)", open=False, elem_id="dynthres_" + ("img2img" if is_img2img else "txt2img")):
-        with accordion:
+            with gr.Row():
-            gr.HTML(value=f"<br>View <a style=\"border-bottom: 1px #00ffff dotted;\" href=\"https://github.com/mcmonkeyprojects/sd-dynamic-thresholding/wiki/Usage-Tips\">the wiki for usage tips.</a><br><br>", elem_id='dynthres_wiki_link')
+                enabled = gr.Checkbox(value=False, label="Dynamic Thresholding Enable", elem_classes=["dynthres-enabled"])
-            mimic_scale = gr.Slider(minimum=1.0, maximum=30.0, step=0.5, label='Mimic CFG Scale', value=7.0, elem_id='dynthres_mimic_scale')
+            gr.HTML(value=f"View <a style=\"border-bottom: 1px #00ffff dotted;\" href=\"https://github.com/mcmonkeyprojects/sd-dynamic-thresholding/wiki/Usage-Tips\">the wiki for usage tips.</a><br><br>", elem_id='dynthres_wiki_link')
-            with gr.Accordion("Dynamic Thresholding Advanced Options", open=False, elem_id='dynthres_advanced_opts'):
+            with gr.Group(visible=False) as accordion:
+                mimic_scale = gr.Slider(minimum=1.0, maximum=30.0, step=0.5, label='Mimic CFG Scale', value=7.0, elem_id='dynthres_mimic_scale')
+            with gr.Accordion("Advanced Options", open=False, elem_id='dynthres_advanced_opts'):
                 with gr.Row():
                     threshold_percentile = gr.Slider(minimum=90.0, value=100.0, maximum=100.0, step=0.05, label='Top percentile of latents to clamp', elem_id='dynthres_threshold_percentile')
                     interpolate_phi = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, label="Interpolate Phi", value=1.0, elem_id='dynthres_interpolate_phi')