From a920453c9dd2fd43b477ef053827adff7d668abc Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Sun, 26 Feb 2023 19:36:02 +0200 Subject: [PATCH] add or remove ops to quick settings on the fly no need to reload the ui --- html/svg/close-circle-line.svg | 1 + html/svg/close-line.svg | 1 + javascript/ui.js | 31 +++++++++++++++++------ modules/ui.py | 26 ++++++++++---------- style.css | 45 ++++++++++++++++++++-------------- 5 files changed, 65 insertions(+), 39 deletions(-) create mode 100644 html/svg/close-circle-line.svg create mode 100644 html/svg/close-line.svg diff --git a/html/svg/close-circle-line.svg b/html/svg/close-circle-line.svg new file mode 100644 index 00000000..90477e5f --- /dev/null +++ b/html/svg/close-circle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/svg/close-line.svg b/html/svg/close-line.svg new file mode 100644 index 00000000..e39564d9 --- /dev/null +++ b/html/svg/close-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/javascript/ui.js b/javascript/ui.js index ac1a6342..a293ad89 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -592,18 +592,31 @@ onUiUpdate(function(){ const settings_submit = gradioApp().querySelector('#settings_submit'); + const quick_parent = gradioApp().querySelector("#quicksettings_overflow"); - function add2quickSettings(id, checked){ + function add2quickSettings(id, section, checked){ const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea'); let field_settings = setting_quicksettings.value.replace(" ", ""); if(checked){ field_settings += ","+id; - }else{ + + let setting_row = gradioApp().querySelector('#row_setting_'+id); + //setting_row.id = setting_row.id.replace("row_setting", "quick_row"); + quick_parent.append(setting_row); + + }else{ field_settings = field_settings.replaceAll(id, ","); + + const setting_parent = gradioApp().querySelector("#"+section+"_settings_2img_settings"); + let quick_row = gradioApp().querySelector('#row_setting_'+id); + console.log(quick_row); + //quick_row.id = quick_row.id.replace("quick_row","row_setting"); + setting_parent.append(quick_row); + } field_settings = field_settings.replace(/,{2,}/g, ','); setting_quicksettings.value = field_settings; - + const iEvent = new Event("input"); Object.defineProperty(iEvent, "target", {value: setting_quicksettings}) setting_quicksettings.dispatchEvent(iEvent); @@ -612,14 +625,18 @@ onUiUpdate(function(){ Object.defineProperty(cEvent, "target", {value: settings_submit}) settings_submit.dispatchEvent(cEvent); //settings_submit.click(); - //console.log(id + " - " + checked); + + console.log(section + " - "+ id + " - " + checked); + } - gradioApp().querySelectorAll('[id^="add2quick_"]').forEach(function (elem){ - let tid = elem.id.split('add2quick_setting_')[1]; + gradioApp().querySelectorAll('[id*="add2quick_"]').forEach(function (elem){ + let trg = elem.id.split('_add2quick_setting_'); + let sid = trg[0]; + let tid = trg[1]; let elem_input = gradioApp().querySelector('#'+elem.id+' input'); elem_input.addEventListener('click', function (e) { - add2quickSettings(tid, e.target.checked); + add2quickSettings(tid, sid, e.target.checked); }) }) diff --git a/modules/ui.py b/modules/ui.py index 13a71bfb..74aef17f 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -1495,7 +1495,7 @@ def create_ui(): outputs=[], ) - def create_setting_component(key, is_quicksettings=False): + def create_setting_component(key, section, is_quicksettings=False): def fun(): return opts.data[key] if key in opts.data else opts.data_labels[key].default @@ -1519,25 +1519,25 @@ def create_ui(): if info.refresh is not None: if is_quicksettings: - with FormRow(): + with FormRow(elem_id=f'row_{elem_id}'): with gr.Box(): with gr.Row(elem_id=f'{elem_id}_row-collapse-one'): res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {})) create_refresh_button(res, info.refresh, info.component_args, "refresh_" + key) with FormRow(): - gr.Checkbox(label='', elem_id=f'add2quick_{elem_id}', value=True, interactive=True) + gr.Checkbox(label='', elem_id=f'{section}_add2quick_{elem_id}', value=True, interactive=True) else: - with FormRow(): + with FormRow(elem_id=f'row_{elem_id}'): with gr.Box(): with gr.Row(elem_id=f'{elem_id}_row-collapse-one'): res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {})) create_refresh_button(res, info.refresh, info.component_args, "refresh_" + key) with FormRow(): - gr.Checkbox(label='', elem_id=f'add2quick_{elem_id}', value=False, interactive=True) + gr.Checkbox(label='', elem_id=f'{section}_add2quick_{elem_id}', value=False, interactive=True) else: - with FormRow(): + with FormRow(elem_id=f'row_{elem_id}'): res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {})) - gr.Checkbox(label='', elem_id=f'add2quick_{elem_id}', value=is_quicksettings, interactive=True) + gr.Checkbox(label='', elem_id=f'{section}_add2quick_{elem_id}', value=is_quicksettings, interactive=True) return res @@ -1622,7 +1622,7 @@ def create_ui(): elif section_must_be_skipped: components.append(dummy_component) else: - component = create_setting_component(k) + component = create_setting_component(k, elem_id) component_dict[k] = component components.append(component) @@ -1708,16 +1708,16 @@ def create_ui(): with gr.Blocks(css=css, analytics_enabled=False, title="Stable Diffusion") as demo: with gr.Row(elem_id="quicksettings"): - with gr.Row(elem_id="quick_row_sd_model_checkpoint") as qsettings_row: - component = create_setting_component("sd_model_checkpoint", is_quicksettings=True) + with gr.Row(elem_id="top_row_sd_model_checkpoint") as qsettings_row: + component = create_setting_component("sd_model_checkpoint", "sd", is_quicksettings=True) component_dict["sd_model_checkpoint"] = component with gr.Column(elem_id="quicksettings_overflow"): for i, k, item in sorted(quicksettings_list, key=lambda x: quicksettings_names.get(x[1], x[0])): if( k != "sd_model_checkpoint"): - with gr.Row(elem_id=f"quick_row_{k}") as qsettings_row: - component = create_setting_component(k, is_quicksettings=True) - component_dict[k] = component + #with gr.Row(elem_id=f"quick_row_{k}") as qsettings_row: + component = create_setting_component(k, item.section[0], is_quicksettings=True) + component_dict[k] = component gr.Row(elem_id="quick_menu") parameters_copypaste.connect_paste_params_buttons() diff --git a/style.css b/style.css index c9566a9a..cf74a0e0 100644 --- a/style.css +++ b/style.css @@ -113,12 +113,12 @@ body { color: inherit; } -[id^="add2quick_"] { +[id*="add2quick_"] { min-width: unset !important; max-width: 42px; } -[id^="add2quick_"] label { +[id*="add2quick_"] label { display: block; position: relative; cursor: pointer; @@ -132,7 +132,7 @@ body { } /* Hide the browser's default checkbox */ -[id^="add2quick_"] input { +[id*="add2quick_"] input { position: absolute; opacity: 0; cursor: pointer; @@ -141,7 +141,7 @@ body { } /* Create a custom checkbox */ -[id^="add2quick_"] span { +[id*="add2quick_"] span { position: absolute; top: 0; left: 0; @@ -157,31 +157,37 @@ body { /* On mouse-over, add a grey background color */ -[id^="add2quick_"] label:hover input ~ span { +[id*="add2quick_"] label:hover input ~ span { background-color: var(--icon-color); + opacity:1.0; } /* When the checkbox is checked, add a blue background */ -[id^="add2quick_"] label input:checked ~ span { - -webkit-mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%; +[id*="add2quick_"] label input:checked ~ span { + -webkit-mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%; + background-color: var(--input-color); + opacity:0.5; +} + +[id*="add2quick_"] label:hover input:checked ~ span { background-color: var(--icon-color); opacity:1.0; } /* Create the checkmark/indicator (hidden when not checked) */ -[id^="add2quick_"] label span:after { +[id*="add2quick_"] label span:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ -[id^="add2quick_"] label input:checked ~ span:after { +[id*="add2quick_"] label input:checked ~ span:after { display: block; } -#add2quick_setting_quicksettings{ +[id*="add2quick_setting_quicksettings"]{ display:none; } @@ -621,7 +627,7 @@ body { padding: 0; } -#quick_row_sd_model_checkpoint { +#top_row_sd_model_checkpoint { margin-right:50px; margin-left:50px; position:relative; @@ -629,7 +635,7 @@ body { } -#quick_row_sd_model_checkpoint div { +#top_row_sd_model_checkpoint div { border: 0; background: 0; padding: 0 !important; @@ -637,11 +643,11 @@ body { -#quick_row_sd_model_checkpoint span { +#top_row_sd_model_checkpoint span { display:none; } -#quick_row_sd_model_checkpoint .gr-input { +#top_row_sd_model_checkpoint .gr-input { padding-right: 37px; min-height: 34px; } @@ -1686,7 +1692,7 @@ canvas[key=mask] { margin-right:8px; } -#quicksettings_overflow > div > div > div:nth-child(2), +#quicksettings_overflow > div > div:nth-child(2), [id$="settings_2img_settings"] > div > div:nth-child(2) { flex-shrink: 1 !important; @@ -1697,17 +1703,18 @@ canvas[key=mask] { margin-left: -1px; } -#quicksettings_overflow > div > div > div:nth-child(2) > div, +#quicksettings_overflow > div > div:nth-child(2) > div, [id$="settings_2img_settings"] > div > div:nth-child(2) > div{ min-width:unset !important; } -#quicksettings_overflow > div > div, +#quicksettings_overflow > div, [id$="settings_2img_settings"] > div{ gap:0 !important; } -#quick_row_sd_model_checkpoint > div > div:nth-child(2){ +#row_setting_sd_model_checkpoint, +#top_row_sd_model_checkpoint > div > div:nth-child(2){ display:none; }