diff --git a/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js b/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js index f76b313c..386edd5c 100644 --- a/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js +++ b/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js @@ -468,8 +468,7 @@ function onUiUxReady(content_div){ console.log("Finishing optimizations for Extra Networks"); - const versions = gradioApp().querySelector(".versions"); - console.log(versions.innerHTML); + setupExtraNetworksSearchSort(); @@ -519,6 +518,19 @@ function onUiUxReady(content_div){ //const sidebar_tabs = document.querySelector('#sidebar_tabs'); //main_nav_content.append(sidebar_tabs); showContributors() + + // sd max resolution output + function sdMaxOutputResolution(value) { + gradioApp().querySelectorAll('[id$="2img_width"] input,[id$="2img_height"] input').forEach((elem) => { + elem.max = value; + }) + } + gradioApp().querySelector("#setting_uiux_max_resolution_output").addEventListener('input', function (e) { + let intvalue = parseInt(e.target.value); + intvalue = Math.min(Math.max(intvalue, 512), 16384); + sdMaxOutputResolution(intvalue); + }) + sdMaxOutputResolution(window.opts.uiux_max_resolution_output); @@ -851,7 +863,7 @@ function initDefaultComponents(content_div) { }); // step ticks for performant input range - function ui_show_range_ticks(value, interactive) { + function uiux_show_input_range_ticks(value, interactive) { if (value) { const range_selectors = "input[type='range']"; //const range_selectors = "[id$='_clone']:is(input[type='range'])"; @@ -882,13 +894,65 @@ function initDefaultComponents(content_div) { }); } } - /* - gradioApp().querySelector("#setting_ui_show_range_ticks input").addEventListener("click", function (e) { - ui_show_range_ticks(e.target.checked, true); + + gradioApp().querySelector("#setting_uiux_show_input_range_ticks input").addEventListener("click", function (e) { + uiux_show_input_range_ticks(e.target.checked, true); }); - ui_show_range_ticks(opts.ui_show_range_ticks); - */ - ui_show_range_ticks(true); + uiux_show_input_range_ticks(window.opts.uiux_show_input_range_ticks); + + + /* function remove_overrides(){ + let checked_overrides = []; + gradioApp().querySelectorAll("#setting_ignore_overrides input").forEach(function (elem, i){ + if(elem.checked){ + checked_overrides[i] = elem.nextElementSibling.innerHTML; + } + }) + //console.log(checked_overrides); + gradioApp().querySelectorAll("[id$='2img_override_settings'] .token").forEach(function (token){ + let token_arr = token.querySelector("span").innerHTML.split(":"); + let token_name = token_arr[0]; + let token_value = token_arr[1]; + token_value = token_value.replaceAll(" ", ""); + + if(token_name.indexOf("Model hash") != -1){ + const info_label = gradioApp().querySelector("[id$='2img_override_settings'] label span"); + info_label.innerHTML = "Override settings MDL: unknown"; + for (let m=0; m"; + break; + } + } + } + if(checked_overrides.indexOf(token_name) != -1){ + token.querySelector(".token-remove").click(); + gradioApp().querySelector("[id$='2img_override_settings']").classList.add("show"); + }else{ + // maybe we add them again, for now we can select and add the removed tokens manually from the drop down + } + }) + } + gradioApp().querySelector("#setting_ignore_overrides").addEventListener('click', function (e) { + setTimeout(function() { remove_overrides(); }, 100); + }) */ + + function uiux_no_slider_layout(value) { + if (value) { + anapnoe_app.classList.add("no-slider-layout"); + } else { + anapnoe_app.classList.remove("no-slider-layout"); + } + } + + gradioApp().querySelector("#setting_uiux_no_slider_layout input").addEventListener("click", function (e) { + uiux_no_slider_layout(e.target.checked, true); + }); + + uiux_no_slider_layout(window.opts.uiux_no_slider_layout); + + // try to attach Logger Screen to main before full UIUXReady const asideconsole = document.querySelector("#layout-console-log"); @@ -1161,6 +1225,15 @@ function setupLogger() { console.log("Initialize Anapnoe UI/UX runtime engine version 0.0.1"); console.log(navigator.userAgent); + const versions = gradioApp().querySelector(".versions"); + console.log(versions.innerHTML); + + console.log("Console log enabled: ", window.opts.uiux_enable_console_log); + console.log("Maximum resolution output: ", window.opts.uiux_max_resolution_output); + console.log("Ignore overrides: ", window.opts.uiux_ignore_overrides); + console.log("Show ticks for input range slider: ", window.opts.uiux_show_input_range_ticks); + + const isFirefox = navigator.userAgent.toLowerCase().includes('firefox'); if(isFirefox){ diff --git a/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py b/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py index 63be267e..f509e1d0 100644 --- a/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py +++ b/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py @@ -3,11 +3,16 @@ from pathlib import Path import gradio as gr import modules.scripts as scripts from modules import script_callbacks, shared - +from modules.generation_parameters_copypaste import infotext_to_setting_name_mapping shared.options_templates.update(shared.options_section(('uiux_core', "Anapnoe UI-UX"), { - "uiux_enable_console_log": shared.OptionInfo(True, "Enable console log") + "uiux_enable_console_log": shared.OptionInfo(False, "Enable console log"), + "uiux_max_resolution_output": shared.OptionInfo(2048, "Max resolution output for txt2img and img2img"), + "uiux_show_input_range_ticks": shared.OptionInfo(True, "Show ticks for input range slider"), + "uiux_no_slider_layout": shared.OptionInfo(False, "No input range sliders"), + "uiux_ignore_overrides": shared.OptionInfo([], "Ignore Overrides", gr.CheckboxGroup, lambda: {"choices": [x[0] for x in infotext_to_setting_name_mapping]}), + })) diff --git a/extensions-builtin/anapnoe-sd-uiux/style.css b/extensions-builtin/anapnoe-sd-uiux/style.css index 8e30771d..7ec2449e 100644 --- a/extensions-builtin/anapnoe-sd-uiux/style.css +++ b/extensions-builtin/anapnoe-sd-uiux/style.css @@ -294,6 +294,26 @@ body { margin-top: calc(var(--ae-input-height) * (1 - var(--ae-input-slider-height)) * 0.5); padding: 0; } +* .no-slider-layout .gradio-slider input[type="range"] { + display:none; +} +* .no-slider-layout .gradio-slider .head { + flex-direction: column; + display: flex; +} +* .no-slider-layout .gradio-slider input[type="number"] { + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-input-padding); + margin: 0; + min-height: var(--ae-input-height); +} +/* * .no-slider-layout .min-width, +* .no-slider-layout .flexbox, +* .no-slider-layout .gradio-slider{ + min-width: unset !important; +} */ + *.gradio-dropdown label { flex-direction: column;