From 91ae4d7fb66e1623c46951565426bfe0ffcb4563 Mon Sep 17 00:00:00 2001 From: Vladimir Mandic Date: Fri, 8 Mar 2024 08:38:10 -0500 Subject: [PATCH] extra network details styling --- CHANGELOG.md | 4 ++-- javascript/sdnext.css | 15 +++++++-------- modules/ui_extra_networks.py | 6 +++--- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index abf0c99b4..76afbab15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ - EDM samplers for Playground 2.5 - Stable Cascade -## Update for 2024-03-07 +## Update for 2024-03-08 - [Playground v2.5](https://huggingface.co/playgroundai/playground-v2.5-1024px-aesthetic) - new model version from Playground: based on SDXL, but with some cool new concepts @@ -48,7 +48,7 @@ - *DPM++ 2M EDM* and *Euler EDM* EDM is a new solver algorithm currently available for DPM++2M and Euler samplers Note that using EDM samplers with non-EDM optimized models will provide just noise and vice-versa -- **Styles** +- **Styles**: styles are not just for prompts! - new styles editor: *networks -> styles -> edit* - styles can apply generate parameters, for example to have a style that enables and configures hires: parameters=`enable_hr: True, hr_scale: 2, hr_upscaler: Latent Bilinear antialias, hr_sampler_name: DEIS, hr_second_pass_steps: 20, denoising_strength: 0.5` diff --git a/javascript/sdnext.css b/javascript/sdnext.css index f94f7281e..b6c36db51 100644 --- a/javascript/sdnext.css +++ b/javascript/sdnext.css @@ -229,15 +229,14 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt .extra-network-cards .card-list .tag { color: var(--primary-500); margin-left: 0.8em; } .extra-details-close { position: fixed; top: 0.2em; right: 0.2em; z-index: 99; background: var(--button-secondary-background-fill) !important; } .extra-details-tabs textarea, .extra-details-tabs .gradio-json { overflow-y: scroll !important; scrollbar-width: unset !important; max-height: 15vh; } - -#txt2img_description, #img2img_description, #control_description { max-height: 63px; overflow-y: auto !important; } -#txt2img_description>label>textarea, #img2img_description>label>textarea, #control_description>label>textarea { font-size: var(--text-xs); height: 6em; } - -#txt2img_extra_details>div, #img2img_extra_details>div { overflow-y: auto; min-height: 40vh; max-height: 80vh; align-self: flex-start; } -#txt2img_extra_details, #img2img_extra_details { position: fixed; bottom: 50%; left: 50%; transform: translate(-50%, 50%); padding: 0.8em; border: var(--block-border-width) solid var(--highlight-color) !important; +.extra-details-text .form { overflow-x: hidden; overflow-y: scroll; display: block; } +.extra-description { max-height: 63px; overflow-y: auto !important; } +.extra-description > label > textarea { font-size: var(--text-xs); height: 6em; } +.extra-details { position: fixed; bottom: 50%; left: 50%; transform: translate(-50%, 50%); padding: 0.8em; border: var(--block-border-width) solid var(--highlight-color) !important; z-index: 100; box-shadow: var(--button-shadow); } -#txt2img_extra_details td:first-child, #img2img_extra_details td:first-child { font-weight: bold; vertical-align: top; } -#txt2img_extra_details .gradio-image, #img2img_extra_details .gradio-image { max-height: 70vh; } +.extra-details > div { overflow-y: auto; min-height: 40vh; max-height: 80vh; align-self: flex-start; } +.extra-details td:first-child { font-weight: bold; vertical-align: top; } +.extra-details .gradio-image { max-height: 50vh; } /* specific elements */ diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index 1a8da2dd2..ead5800c7 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -480,7 +480,7 @@ def create_ui(container, button_parent, tabname, skip_indexing = False): ui.pages = [] ui.state = gr.Textbox('{}', elem_id=f"{tabname}_extra_state", visible=False) ui.visible = gr.State(value=False) # pylint: disable=abstract-class-instantiated - ui.details = gr.Group(elem_id=f"{tabname}_extra_details", visible=False) + ui.details = gr.Group(elem_id=f"{tabname}_extra_details", elem_classes=["extra-details"], visible=False) ui.tabs = gr.Tabs(elem_id=f"{tabname}_extra_tabs") ui.button_details = gr.Button('Details', elem_id=f"{tabname}_extra_details_btn", visible=False) state = {} @@ -556,7 +556,7 @@ def create_ui(container, button_parent, tabname, skip_indexing = False): with gr.Tab('Embedded metadata', elem_classes=['extra-details-tabs']): meta = gr.JSON({}, show_label=False) ui.details_components.append(meta) - with gr.Group(elem_id=f"{tabname}_extra_details_text", visible=False) as ui.details_text: + with gr.Group(elem_id=f"{tabname}_extra_details_text", elem_classes=["extra-details-text"], visible=False) as ui.details_text: description = gr.Textbox(label='Description', lines=1, placeholder="Style description...") prompt = gr.Textbox(label='Prompt', lines=2, placeholder="Prompt...") negative = gr.Textbox(label='Negative prompt', lines=2, placeholder="Negative prompt...") @@ -585,7 +585,7 @@ def create_ui(container, button_parent, tabname, skip_indexing = False): ui.button_close = ToolButton(symbols.close, elem_id=f"{tabname}_extra_close", visible=True) ui.button_model = ToolButton(symbols.refine, elem_id=f"{tabname}_extra_model", visible=True) ui.search = gr.Textbox('', show_label=False, elem_id=f"{tabname}_extra_search", placeholder="Search...", elem_classes="textbox", lines=2, container=False) - ui.description = gr.Textbox('', show_label=False, elem_id=f"{tabname}_description", elem_classes="textbox", lines=2, interactive=False, container=False) + ui.description = gr.Textbox('', show_label=False, elem_id=f"{tabname}_description", elem_classes=["textbox", "extra-description"], lines=2, interactive=False, container=False) if ui.tabname == 'txt2img': # refresh only once global refresh_time # pylint: disable=global-statement