From 23a65de846245507aa1b8392f39d4996065b9242 Mon Sep 17 00:00:00 2001 From: Vladimir Mandic Date: Sun, 21 Jan 2024 11:14:17 -0500 Subject: [PATCH] tweak theme and increse image sizes --- .../stable-diffusion-webui-rembg | 2 +- javascript/black-teal.css | 26 ++++++++++--------- javascript/sdnext.css | 11 +++++--- modules/shared.py | 1 - modules/ui_common.py | 8 ++++-- modules/ui_control.py | 26 +++++++++---------- 6 files changed, 41 insertions(+), 33 deletions(-) diff --git a/extensions-builtin/stable-diffusion-webui-rembg b/extensions-builtin/stable-diffusion-webui-rembg index 76dd8f0c8..acfca3a77 160000 --- a/extensions-builtin/stable-diffusion-webui-rembg +++ b/extensions-builtin/stable-diffusion-webui-rembg @@ -1 +1 @@ -Subproject commit 76dd8f0c8aab4fad43bc96249918b3d3559d51d8 +Subproject commit acfca3a77980ad4a9eeb39400bd4d9b4e216009f diff --git a/javascript/black-teal.css b/javascript/black-teal.css index 735f14f4b..9a786c6fb 100644 --- a/javascript/black-teal.css +++ b/javascript/black-teal.css @@ -30,26 +30,28 @@ --block-title-text-color: var(--neutral-300); --radius-sm: 2px; --radius-lg: 4px; + --line-xs: 1.0em; --line-sm: 1.2em; --line-md: 1.4em; + --line-lg: 1.5em; } html { font-size: var(--font-size); font-family: var(--font); } body, button, input, select, textarea { font-family: var(--font); } -button { max-width: 400px; } +button { max-width: 400px; white-space: nowrap; } img { background-color: var(--background-color); } -input[type=range] { height: var(--line-sm) !important; appearance: none !important; margin-top: 0 !important; min-width: max(4em, 100%) !important; +input[type=range] { height: var(--line-xs) !important; appearance: none !important; margin-top: 0 !important; min-width: max(4em, 100%) !important; background-color: var(--background-color) !important; width: 100% !important; background: transparent !important; } -input[type=range]::-webkit-slider-runnable-track { width: 100% !important; height: var(--line-sm) !important; cursor: pointer !important; box-shadow: 2px 2px 3px #111111 !important; +input[type=range]::-webkit-slider-runnable-track { width: 100% !important; height: var(--line-xs) !important; cursor: pointer !important; box-shadow: 2px 2px 3px #111111 !important; background: var(--input-background-fill) !important; border-radius: var(--radius-lg) !important; border: 0px solid #222222 !important; } -input[type=range]::-moz-range-track { width: 100% !important; height: var(--line-sm) !important; cursor: pointer !important; box-shadow: 2px 2px 3px #111111 !important; background: +input[type=range]::-moz-range-track { width: 100% !important; height: var(--line-xs) !important; cursor: pointer !important; box-shadow: 2px 2px 3px #111111 !important; background: var(--input-background-fill) !important; border-radius: var(--radius-lg) !important; border: 0px solid #222222 !important; } -input[type=range]::-webkit-slider-thumb { box-shadow: 2px 2px 3px #111111 !important; border: 0px solid #000000 !important; height: var(--line-sm) !important; width: var(--line-sm) !important; +input[type=range]::-webkit-slider-thumb { box-shadow: 2px 2px 3px #111111 !important; border: 0px solid #000000 !important; height: var(--line-xs) !important; width: var(--line-md) !important; border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: 0px !important; } -input[type=range]::-moz-range-thumb { box-shadow: 2px 2px 3px #111111 !important; border: 0px solid #000000 !important; height: var(--line-sm) !important; width: var(--line-sm) !important; +input[type=range]::-moz-range-thumb { box-shadow: 2px 2px 3px #111111 !important; border: 0px solid #000000 !important; height: var(--line-xs) !important; width: var(--line-md) !important; border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: 0px !important; } ::-webkit-scrollbar { width: 12px; } -::-webkit-scrollbar-track { background: #333333; } +::-webkit-scrollbar-track { background: #303030; } ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; box-shadow: 2px 2px 3px #111111; } div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; } @@ -64,7 +66,7 @@ fieldset .gr-block.gr-box, label.block span { padding: 0; margin-top: -4px; } .gr-check-radio:checked { background-color: var(--highlight-color); } .gr-compact { background-color: var(--background-color); } .gr-form { border-width: 0; } -.gr-input { background-color: #333333 !important; padding: 4px; margin: 4px; } +.gr-input { background-color: #303030 !important; padding: 4px; margin: 4px; } .gr-input-label { color: lightyellow; border-width: 0; background: transparent; padding: 2px !important; } .gr-panel { background-color: var(--background-color); } .eta-bar { display: none !important } @@ -103,7 +105,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } #div.gradio-container { overflow-x: hidden; } #img2img_label_copy_to_img2img { font-weight: normal; } -#txt2img_prompt, #txt2img_neg_prompt, #img2img_prompt, #img2img_neg_prompt, #control_prompt, #control_neg_prompt { background-color: var(--background-color); box-shadow: 4px 4px 4px 0px #333333 !important; } +#txt2img_prompt, #txt2img_neg_prompt, #img2img_prompt, #img2img_neg_prompt, #control_prompt, #control_neg_prompt { background-color: var(--background-color); box-shadow: 4px 4px 4px 0px #303030 !important; } #txt2img_prompt > label > textarea, #txt2img_neg_prompt > label > textarea, #img2img_prompt > label > textarea, #img2img_neg_prompt > label > textarea, #control_prompt > label > textarea, #control_neg_prompt > label > textarea { font-size: 1.0em; line-height: 1.4em; } #txt2img_styles, #img2img_styles, #control_styles { padding: 0; } #txt2img_styles_refresh, #img2img_styles_refresh, #control_styles_refresh { padding: 0; margin-top: 1em; } @@ -186,7 +188,7 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p --stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-600)); --table-border-color: var(--neutral-700); --table-even-background-fill: #222222; - --table-odd-background-fill: #333333; + --table-odd-background-fill: #303030; --table-row-focus: var(--color-accent-soft); --button-border-width: var(--input-border-width); --button-cancel-background-fill: linear-gradient(to bottom right, #dc2626, #b91c1c); @@ -223,7 +225,7 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p --neutral-500: #707070; --neutral-600: #606060; --neutral-700: #404040; - --neutral-800: #333333; + --neutral-800: #303030; --neutral-900: #111827; --neutral-950: #0b0f19; --radius-xxs: 0; @@ -288,7 +290,7 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p --button-large-radius: var(--radius-lg); --button-large-text-size: var(--text-lg); --button-large-text-weight: 400; - --button-shadow: 4px 4px 4px 0px #333333; + --button-shadow: 4px 4px 4px 0px #303030; --button-shadow-active: 1px 1px 4px 0px #555555; --button-shadow-hover: 1px 1px 4px 0px #555555; --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm)); diff --git a/javascript/sdnext.css b/javascript/sdnext.css index 0776db76f..119a7309b 100644 --- a/javascript/sdnext.css +++ b/javascript/sdnext.css @@ -2,7 +2,7 @@ :root { --left-column: 500px; } a { font-weight: bold; cursor: pointer; } h2 { margin-top: 1em !important; font-size: var(--text-xxl) !important; } -footer { display: none; } +footer { display: none; margin-top: 0 !important;} table { overflow-x: auto !important; overflow-y: auto !important; } td { border-bottom: none !important; padding: 0.1em 0.5em !important; } tr { border-bottom: none !important; padding: 0.1em 0.5em !important; } @@ -73,7 +73,10 @@ button.custom-button{ border-radius: var(--button-large-radius); padding: var(-- .performance p { display: inline-block; color: var(--body-text-color-subdued) !important } .performance .time { margin-right: 0; } .thumbnails { background: var(--body-background-fill); } -#control_gallery { height: 564px; } +.control-image { height: calc(100vw/3) !important; } +#control_results { margin: 0; padding: 0; } +#control_gallery { height: calc(100vw/3 + 60px); } +#txt2img_gallery, #img2img_gallery { height: 50vh; } #control-result { padding: 0.5em; } #control-inputs { margin-top: 1em; } #txt2img_prompt_container, #img2img_prompt_container, #control_prompt_container { margin-right: var(--layout-gap) } @@ -85,10 +88,10 @@ button.custom-button{ border-radius: var(--button-large-radius); padding: var(-- #txt2img_generate_line2>button, #img2img_generate_line2>button, #extras_generate_box>button, #control_generate_line2>button, #txt2img_tools>button, #img2img_tools>button, #control_tools>button { height: 2em; line-height: 0; font-size: var(--text-md); min-width: unset; display: block !important; } #txt2img_prompt, #txt2img_neg_prompt, #img2img_prompt, #img2img_neg_prompt, #control_prompt, #control_neg_prompt { display: contents; } -#txt2img_generate_box, #img2img_generate_box { min-width: unset; width: 48%; } +#txt2img_generate_box, #img2img_generate_box { min-width: unset; width: 66%; } #control_generate_box { min-width: unset; width: 100%; } #txt2img_actions_column, #img2img_actions_column, #control_actions { flex-flow: wrap; justify-content: space-between; } -#txt2img_enqueue_wrapper, #img2img_enqueue_wrapper, #control_enqueue_wrapper { min-width: unset !important; width: 48%; } +#txt2img_enqueue_wrapper, #img2img_enqueue_wrapper, #control_enqueue_wrapper { min-width: unset !important; width: 32%; } .interrogate-clip { position: absolute; right: 3em; top: -2.7em; max-width: fit-content; } .interrogate-blip { position: absolute; right: 1em; top: -2.7em; max-width: fit-content; } .interrogate-col{ min-width: 0 !important; max-width: fit-content; margin-right: var(--spacing-xxl); } diff --git a/modules/shared.py b/modules/shared.py index 4d7f1b8dc..409474a35 100644 --- a/modules/shared.py +++ b/modules/shared.py @@ -508,7 +508,6 @@ options_templates.update(options_section(('ui', "User Interface"), { "theme_style": OptionInfo("Auto", "Theme mode", gr.Radio, {"choices": ["Auto", "Dark", "Light"]}), "font_size": OptionInfo(14, "Font size", gr.Slider, {"minimum": 8, "maximum": 32, "step": 1, "visible": True}), "tooltips": OptionInfo("UI Tooltips", "UI tooltips", gr.Radio, {"choices": ["None", "Browser default", "UI tooltips"], "visible": False}), - "gallery_height": OptionInfo("", "Gallery height", gr.Textbox), "compact_view": OptionInfo(False, "Compact view"), "return_grid": OptionInfo(True, "Show grid in results"), "return_mask": OptionInfo(False, "Inpainting include greyscale mask in results"), diff --git a/modules/ui_common.py b/modules/ui_common.py index 634ff4e1b..46dc9e5aa 100644 --- a/modules/ui_common.py +++ b/modules/ui_common.py @@ -221,13 +221,17 @@ def interrogate_booru(image): return gr.update() if prompt is None else prompt -def create_output_panel(tabname, preview=True, prompt=None): +def create_output_panel(tabname, preview=True, prompt=None, height=None): with gr.Column(variant='panel', elem_id=f"{tabname}_results"): with gr.Group(elem_id=f"{tabname}_gallery_container"): if tabname == "txt2img": gr.HTML(value="", elem_id="main_info", visible=False, elem_classes=["main-info"]) # columns are for <576px, <768px, <992px, <1200px, <1400px, >1400px - result_gallery = gr.Gallery(value=[], label='Output', show_label=False, show_download_button=True, allow_preview=True, elem_id=f"{tabname}_gallery", container=False, preview=preview, columns=5, object_fit='scale-down', height=shared.opts.gallery_height or None) + result_gallery = gr.Gallery(value=[], + label='Output', show_label=False, show_download_button=True, allow_preview=True, container=False, preview=preview, + columns=5, object_fit='scale-down', height=height, + elem_id=f"{tabname}_gallery", + ) if prompt is not None: interrogate_clip_btn, interrogate_booru_btn = ui_sections.create_interrogate_buttons('control') interrogate_clip_btn.click(fn=interrogate_clip, inputs=[result_gallery], outputs=[prompt]) diff --git a/modules/ui_control.py b/modules/ui_control.py index 8bcdb3861..e7a6cde96 100644 --- a/modules/ui_control.py +++ b/modules/ui_control.py @@ -14,7 +14,7 @@ from scripts import ipadapter # pylint: disable=no-name-in-module from modules import errors, shared, progress, sd_samplers, ui_components, ui_symbols, ui_common, ui_sections, generation_parameters_copypaste, call_queue, scripts, masking # pylint: disable=ungrouped-imports -gr_height = 512 +gr_height = None max_units = 5 units: list[unit.Unit] = [] # main state variable input_source = None @@ -331,14 +331,14 @@ def create_ui(_blocks: gr.Blocks=None): with gr.Tabs(elem_classes=['control-tabs'], elem_id='control-tab-input'): with gr.Tab('Image', id='in-image') as tab_image: input_mode = gr.Label(value='select', visible=False) - input_image = gr.Image(label="Input", show_label=False, type="pil", source="upload", interactive=True, tool="editor", height=gr_height, visible=True, image_mode='RGB', elem_id='control_input_select') - input_resize = gr.Image(label="Input", show_label=False, type="pil", source="upload", interactive=True, tool="select", height=gr_height, visible=False, image_mode='RGB', elem_id='control_input_resize') - input_inpaint = gr.Image(label="Input", show_label=False, type="pil", source="upload", interactive=True, tool="sketch", height=gr_height, visible=False, image_mode='RGB', elem_id='control_input_inpaint', brush_radius=32, mask_opacity=0.6) + input_image = gr.Image(label="Input", show_label=False, type="pil", source="upload", interactive=True, tool="editor", height=gr_height, visible=True, image_mode='RGB', elem_id='control_input_select', elem_classes=['control-image']) + input_resize = gr.Image(label="Input", show_label=False, type="pil", source="upload", interactive=True, tool="select", height=gr_height, visible=False, image_mode='RGB', elem_id='control_input_resize', elem_classes=['control-image']) + input_inpaint = gr.Image(label="Input", show_label=False, type="pil", source="upload", interactive=True, tool="sketch", height=gr_height, visible=False, image_mode='RGB', elem_id='control_input_inpaint', brush_radius=32, mask_opacity=0.6, elem_classes=['control-image']) interrogate_clip, interrogate_booru = ui_sections.create_interrogate_buttons('control') with gr.Row(): input_buttons = [gr.Button('Select', visible=True, interactive=False), gr.Button('Inpaint', visible=True, interactive=True), gr.Button('Outpaint', visible=True, interactive=True)] with gr.Tab('Video', id='in-video') as tab_video: - input_video = gr.Video(label="Input", show_label=False, interactive=True, height=gr_height) + input_video = gr.Video(label="Input", show_label=False, interactive=True, height=gr_height, elem_classes=['control-image']) with gr.Tab('Batch', id='in-batch') as tab_batch: input_batch = gr.File(label="Input", show_label=False, file_count='multiple', file_types=['image'], type='file', interactive=True, height=gr_height) with gr.Tab('Folder', id='in-folder') as tab_folder: @@ -347,27 +347,27 @@ def create_ui(_blocks: gr.Blocks=None): gr.HTML('Init input

') with gr.Tabs(elem_classes=['control-tabs'], elem_id='control-tab-init'): with gr.Tab('Image', id='init-image') as tab_image_init: - init_image = gr.Image(label="Input", show_label=False, type="pil", source="upload", interactive=True, tool="editor", height=gr_height) + init_image = gr.Image(label="Input", show_label=False, type="pil", source="upload", interactive=True, tool="editor", height=gr_height, elem_classes=['control-image']) with gr.Tab('Video', id='init-video') as tab_video_init: - init_video = gr.Video(label="Input", show_label=False, interactive=True, height=gr_height) + init_video = gr.Video(label="Input", show_label=False, interactive=True, height=gr_height, elem_classes=['control-image']) with gr.Tab('Batch', id='init-batch') as tab_batch_init: - init_batch = gr.File(label="Input", show_label=False, file_count='multiple', file_types=['image'], type='file', interactive=True, height=gr_height) + init_batch = gr.File(label="Input", show_label=False, file_count='multiple', file_types=['image'], type='file', interactive=True, height=gr_height, elem_classes=['control-image']) with gr.Tab('Folder', id='init-folder') as tab_folder_init: - init_folder = gr.File(label="Input", show_label=False, file_count='directory', file_types=['image'], type='file', interactive=True, height=gr_height) + init_folder = gr.File(label="Input", show_label=False, file_count='directory', file_types=['image'], type='file', interactive=True, height=gr_height, elem_classes=['control-image']) with gr.Column(scale=9, elem_id='control-output-column', visible=True) as _column_output: gr.HTML('Output

') with gr.Tabs(elem_classes=['control-tabs'], elem_id='control-tab-output') as output_tabs: with gr.Tab('Gallery', id='out-gallery'): - output_gallery, _output_gen_info, _output_html_info, _output_html_info_formatted, _output_html_log = ui_common.create_output_panel("control", preview=True, prompt=prompt) + output_gallery, _output_gen_info, _output_html_info, _output_html_info_formatted, _output_html_log = ui_common.create_output_panel("control", preview=True, prompt=prompt, height=gr_height) with gr.Tab('Image', id='out-image'): - output_image = gr.Image(label="Input", show_label=False, type="pil", interactive=False, tool="editor", height=gr_height) + output_image = gr.Image(label="Output", show_label=False, type="pil", interactive=False, tool="editor", height=gr_height, elem_id='control_output_image', elem_classes=['control-image']) with gr.Tab('Video', id='out-video'): - output_video = gr.Video(label="Input", show_label=False, height=gr_height) + output_video = gr.Video(label="Output", show_label=False, height=gr_height, elem_id='control_output_video', elem_classes=['control-image']) with gr.Column(scale=9, elem_id='control-preview-column', visible=True) as column_preview: gr.HTML('Preview

') with gr.Tabs(elem_classes=['control-tabs'], elem_id='control-tab-preview'): with gr.Tab('Preview', id='preview-image') as tab_image: - preview_process = gr.Image(label="Input", show_label=False, type="pil", source="upload", interactive=False, height=gr_height, visible=True) + preview_process = gr.Image(label="Preview", show_label=False, type="pil", source="upload", interactive=False, height=gr_height, visible=True, elem_id='control_preview', elem_classes=['control-image']) with gr.Tabs(elem_id='control-tabs') as _tabs_control_type: