diff --git a/javascript/active.js b/javascript/active.js new file mode 100644 index 0000000..e35e4c3 --- /dev/null +++ b/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); + } +}); +})(); diff --git a/scripts/dynamic_thresholding.py b/scripts/dynamic_thresholding.py index b6a38b6..7aff373 100644 --- a/scripts/dynamic_thresholding.py +++ b/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 accordion: - gr.HTML(value=f"
View the wiki for usage tips.

", elem_id='dynthres_wiki_link') - 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("Dynamic Thresholding Advanced Options", open=False, elem_id='dynthres_advanced_opts'): + with gr.Accordion("Dynamic Thresholding (CFG Scale Fix)", open=False, elem_id="dynthres_" + ("img2img" if is_img2img else "txt2img")): + with gr.Row(): + enabled = gr.Checkbox(value=False, label="Dynamic Thresholding Enable", elem_classes=["dynthres-enabled"]) + gr.HTML(value=f"View the wiki for usage tips.

", elem_id='dynthres_wiki_link') + 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')