From 4e0d496540eb4a4b8b20c011e3c348903ad7a797 Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Fri, 24 Feb 2023 16:29:36 +0200 Subject: [PATCH] Extra Networks accordion and settings default visibility --- javascript/ui.js | 18 ++++++++++++++++-- modules/shared.py | 2 ++ modules/ui.py | 17 +++++++++-------- modules/ui_extra_networks.py | 24 ++++++++++++------------ style.css | 14 ++++++++++---- 5 files changed, 49 insertions(+), 26 deletions(-) diff --git a/javascript/ui.js b/javascript/ui.js index b1b23c43..7f2cc504 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -493,7 +493,21 @@ onUiUpdate(function(){ sdMaxOutputResolution(opts.sd_max_resolution); - + function extra_networks_visibility(value){ + gradioApp().querySelectorAll('[id$="2img_extra_networks_row"]').forEach((elem) => { + if(value){ + elem.classList.remove("!hidden"); + }else{ + elem.classList.add("!hidden"); + } + }) + } + gradioApp().querySelector("#setting_extra_networks_default_visibility input").addEventListener('click', function (e) { + //console.log(e.target.checked); + extra_networks_visibility(e.target.checked); + }) + extra_networks_visibility(opts.extra_networks_default_visibility); + //hidden ui tabs let radio_html=""; @@ -551,7 +565,7 @@ onUiUpdate(function(){ } }) - + /* anapnoe ui end */ diff --git a/modules/shared.py b/modules/shared.py index 9e10838b..429477d0 100644 --- a/modules/shared.py +++ b/modules/shared.py @@ -442,6 +442,8 @@ options_templates.update(options_section(('extra_networks', "Extra Networks"), { "extra_networks_default_view": OptionInfo("cards", "Default view for Extra Networks", gr.Dropdown, {"choices": ["cards", "thumbs"]}), "extra_networks_default_multiplier": OptionInfo(1.0, "Multiplier for extra networks", gr.Slider, {"minimum": 0.0, "maximum": 1.0, "step": 0.01}), "sd_hypernetwork": OptionInfo("None", "Add hypernetwork to prompt", gr.Dropdown, lambda: {"choices": [""] + [x for x in hypernetworks.keys()]}, refresh=reload_hypernetworks), + "extra_networks_default_visibility": OptionInfo(True, "Extra Networks default visibility"), + })) options_templates.update(options_section(('ui', "User interface"), { diff --git a/modules/ui.py b/modules/ui.py index e9a10680..d0c87897 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -514,10 +514,11 @@ def create_ui(): with gr.Column(elem_id="txt2img_settings_scroll"): with gr.Accordion("Prompt", open=True): txt2img_prompt, txt2img_prompt_styles, txt2img_negative_prompt, _, _, txt2img_prompt_style_apply, txt2img_save_style, txt2img_paste, extra_networks_button, token_counter, token_button, negative_token_counter, negative_token_button = create_toprow(is_img2img=False) + - with FormRow(variant='compact', elem_id="txt2img_extra_networks_row", visible=False) as extra_networks: - from modules import ui_extra_networks - extra_networks_ui = ui_extra_networks.create_ui(extra_networks, extra_networks_button, 'txt2img') + with gr.Row(elem_id="txt2img_extra_networks_row", visible=True) as extra_networks: + from modules import ui_extra_networks + extra_networks_ui = ui_extra_networks.create_ui(extra_networks, extra_networks_button, 'txt2img') #with gr.Accordion("Parameters", open=True): for category in ordered_ui_categories(): @@ -735,10 +736,10 @@ def create_ui(): with gr.Row(): with gr.Accordion("Prompt", open=True): img2img_prompt, img2img_prompt_styles, img2img_negative_prompt, img2img_interrogate, img2img_deepbooru, img2img_prompt_style_apply, img2img_save_style, img2img_paste, extra_networks_button, token_counter, token_button, negative_token_counter, negative_token_button = create_toprow(is_img2img=True) - - with FormRow(variant='compact', elem_id="img2img_extra_networks_row", visible=False) as extra_networks: - from modules import ui_extra_networks - extra_networks_ui_img2img = ui_extra_networks.create_ui(extra_networks, extra_networks_button, 'img2img') + + with gr.Row(elem_id="img2img_extra_networks_row", visible=True) as extra_networks: + from modules import ui_extra_networks + extra_networks_ui_img2img = ui_extra_networks.create_ui(extra_networks, extra_networks_button, 'img2img') copy_image_buttons = [] @@ -1147,7 +1148,7 @@ def create_ui(): with gr.Box(): with gr.Row(elem_id="modelmerger_bake_in_vae_row-collapse-all"): bake_in_vae = gr.Dropdown(choices=["None"] + list(sd_vae.vae_dict), value="None", label="Bake in VAE", elem_id="modelmerger_bake_in_vae") - create_refresh_button(bake_in_vae, sd_vae.refresh_vae_list, lambda: {"choices": ["None"] + list(sd_vae.vae_dict)}, "modelmerger_refresh_bake_in_vae") + create_refresh_button(bake_in_vae, sd_vae.refresh_vae_list, lambda: {"choices": ["None"] + list(sd_vae.vae_dict)}, "refresh_modelmerger_bake_in_vae") with FormRow(): discard_weights = gr.Textbox(value="", label="Discard weights with matching name", elem_id="modelmerger_discard_weights") diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index 71f1d81f..f90300e6 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -174,25 +174,25 @@ def create_ui(container, button, tabname): ui.pages = [] ui.stored_extra_pages = pages_in_preferred_order(extra_pages.copy()) ui.tabname = tabname + with gr.Accordion("Extra Networks", open=False): + with gr.Tabs(elem_id=tabname+"_extra_tabs") as tabs: + for page in ui.stored_extra_pages: + with gr.Tab(page.title): + page_elem = gr.HTML(page.create_html(ui.tabname)) + ui.pages.append(page_elem) - with gr.Tabs(elem_id=tabname+"_extra_tabs") as tabs: - for page in ui.stored_extra_pages: - with gr.Tab(page.title): - page_elem = gr.HTML(page.create_html(ui.tabname)) - ui.pages.append(page_elem) + filter = gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", placeholder="Search...", visible=False) + button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh") + button_close = gr.Button('Close', elem_id=tabname+"_extra_close") - filter = gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", placeholder="Search...", visible=False) - button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh") - button_close = gr.Button('Close', elem_id=tabname+"_extra_close") - - ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False) - ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False) + ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False) + ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False) def toggle_visibility(is_visible): is_visible = not is_visible return is_visible, gr.update(visible=is_visible) - state_visible = gr.State(value=False) + state_visible = gr.State(value=True) button.click(fn=toggle_visibility, inputs=[state_visible], outputs=[state_visible, container]) button_close.click(fn=toggle_visibility, inputs=[state_visible], outputs=[state_visible, container]) diff --git a/style.css b/style.css index 12b37d42..b55e40db 100644 --- a/style.css +++ b/style.css @@ -96,7 +96,7 @@ body { /* icons */ -[id*="refresh_"], +[id^="refresh_"], [id$="_clear_prompt"], [id$="2img_style_create"], [id$="2img_style_apply"], @@ -122,7 +122,7 @@ body { -[id*="refresh_"]::before, +[id^="refresh_"]::before, [id$="_clear_prompt"]::before, [id$="2img_style_create"]::before, [id$="2img_style_apply"]::before, @@ -156,7 +156,7 @@ body { background-color: var(--primary-color); } -[id*="refresh_"]:hover::before, +[id^="refresh_"]:hover::before, [id$="_clear_prompt"]:hover::before, [id$="2img_style_create"]:hover::before, [id$="2img_style_apply"]:hover::before, @@ -177,7 +177,8 @@ body { background-color: var(--icon-hover-color); } -[id*="refresh_"]::before + +[id^="refresh_"]::before { -webkit-mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%; mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%; @@ -1560,6 +1561,11 @@ canvas[key=mask] { .p-2 { padding: var(--outside-gap-size); } + +[id$="2img_extra_tabs"] ~ * { + display:none; +} + /****************/ /* Results View */ /****************/