From 033569cfb1f149ee219d2e6c647989c3ff15c1ce Mon Sep 17 00:00:00 2001 From: Vladimir Mandic Date: Tue, 12 Dec 2023 14:36:00 -0500 Subject: [PATCH] minor updates --- cli/image-grid.py | 2 +- javascript/black-teal.css | 4 +- javascript/light-teal.css | 2 +- javascript/sdnext.css | 86 +++++++++++++-------------------------- modules/shared.py | 1 + modules/ui.py | 9 +++- modules/ui_symbols.py | 3 ++ wiki | 2 +- 8 files changed, 44 insertions(+), 65 deletions(-) diff --git a/cli/image-grid.py b/cli/image-grid.py index a1fd12d17..743a12bdf 100755 --- a/cli/image-grid.py +++ b/cli/image-grid.py @@ -56,7 +56,7 @@ def grid(images, labels = None, width = 0, height = 0, border = 0, square = Fals for i, img in enumerate(images): # pylint: disable=redefined-outer-name x = (i % cols * w) + (i % cols * border) y = (i // cols * h) + (i // cols * border) - img.thumbnail((w, h), Image.HAMMING) + img.thumbnail((w, h), Image.Resampling.HAMMING) image.paste(img, box=(x, y)) if labels is not None and len(images) == len(labels): ctx = ImageDraw.Draw(image) diff --git a/javascript/black-teal.css b/javascript/black-teal.css index b2cd0b984..d5454360c 100644 --- a/javascript/black-teal.css +++ b/javascript/black-teal.css @@ -51,7 +51,7 @@ input[type=range]::-moz-range-thumb { box-shadow: 2px 2px 3px #111111 !important ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #333333; } ::-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; margin-bottom: 6px; } +div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; } /* gradio style classes */ fieldset .gr-block.gr-box, label.block span { padding: 0; margin-top: -4px; } @@ -78,7 +78,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } .px-4 { padding-lefT: 1rem; padding-right: 1rem; } .py-6 { padding-bottom: 0; } .tabs { background-color: var(--background-color); } -.block.token-counter span { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; } +.block.token-counter span { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.7rem; } .tab-nav { zoom: 120%; margin-top: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; } .label-wrap { margin: 8px 0px 4px 0px; } .gradio-button.tool { border: none; background: none; box-shadow: none; filter: hue-rotate(340deg) saturate(0.5); } diff --git a/javascript/light-teal.css b/javascript/light-teal.css index ae582231f..5b1aa3108 100644 --- a/javascript/light-teal.css +++ b/javascript/light-teal.css @@ -79,7 +79,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } .px-4 { padding-lefT: 1rem; padding-right: 1rem; } .py-6 { padding-bottom: 0; } .tabs { background-color: var(--background-color); } -.block.token-counter span { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; } +.block.token-counter span { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.7rem; } .tab-nav { zoom: 120%; margin-top: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; } .label-wrap { margin: 16px 0px 8px 0px; } .gradio-button.tool { border: none; background: none; box-shadow: none; filter: hue-rotate(340deg) saturate(0.5); } diff --git a/javascript/sdnext.css b/javascript/sdnext.css index 769d9da16..e02a387fd 100644 --- a/javascript/sdnext.css +++ b/javascript/sdnext.css @@ -62,7 +62,7 @@ button.custom-button{ border-radius: var(--button-large-radius); padding: var(-- .theme-preview { display: none; position: fixed; border: var(--spacing-sm) solid var(--neutral-600); box-shadow: 2px 2px 2px 2px var(--neutral-700); top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 75vw; z-index: 999; } /* txt2img/img2img specific */ -.block.token-counter{ position: absolute; display: inline-block; right: 0; min-width: 0 !important; width: auto; z-index: 100; top: -0.75em; } +.block.token-counter{ position: absolute; display: inline-block; right: 1em; min-width: 0 !important; width: auto; z-index: 100; top: -0.5em; } .block.token-counter span{ background: var(--input-background-fill) !important; box-shadow: 0 0 0.0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075); border: 2px solid rgba(192,192,192,0.4) !important; } .block.token-counter.error span{ box-shadow: 0 0 0.0 0.3em rgba(255,0,0,0.15), inset 0 0 0.6em rgba(255,0,0,0.075); border: 2px solid rgba(255,0,0,0.4) !important; } .block.token-counter div{ display: inline; } @@ -74,7 +74,7 @@ button.custom-button{ border-radius: var(--button-large-radius); padding: var(-- #txt2img_footer, #img2img_footer, #extras_footer { height: fit-content; } #txt2img_footer, #img2img_footer { height: fit-content; display: none; } #txt2img_generate_box, #img2img_generate_box { gap: 0.5em; flex-wrap: wrap-reverse; height: fit-content; } -#txt2img_actions_column, #img2img_actions_column { gap: 0.5em; height: fit-content; } +#txt2img_actions_column, #img2img_actions_column { gap: 0.3em; height: fit-content; } #txt2img_generate_box > button, #img2img_generate_box > button, #txt2img_enqueue, #img2img_enqueue { min-height: 42px; max-height: 42px; line-height: 1em; } #txt2img_generate_line2, #img2img_generate_line2, #txt2img_tools, #img2img_tools { display: flex; } #txt2img_generate_line2 > button, #img2img_generate_line2 > button, #extras_generate_box > button, #txt2img_tools > button, #img2img_tools > button { height: 2em; line-height: 0; font-size: var(--input-text-size); @@ -251,6 +251,12 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt .nvml { position: fixed; bottom: 10px; right: 10px; background: var(--background-fill-primary); border: 1px solid var(--button-primary-border-color); padding: 6px; color: var(--button-primary-text-color); font-size: 0.7em; z-index: 50; font-family: monospace; display: none; } +/* control */ +.control-button { min-height: 42px; max-height: 42px; line-height: 1em; } +.control-tabs > .tab-nav { margin-bottom: 0; margin-top: 0; } +.processor-settings { padding: 0 !important; max-width: 300px; } +.processor-group > div { flex-flow: wrap;gap: 1em; } + /* loader */ .splash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; display: block; text-align: center; } .motd { margin-top: 2em; color: var(--body-text-color-subdued); font-family: monospace; font-variant: all-petite-caps; } @@ -280,76 +286,40 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt --spacing-xxl: 6px; } -/* Apply different styles for devices with coarse pointers dependant on screen resolution */ -@media (hover: none) and (pointer: coarse) { - - /* Do not affect displays larger than 1024px wide. */ - @media (max-width: 1024px) { - - /* Screens smaller than 400px wide */ - @media (max-width: 399px) { +@media (hover: none) and (pointer: coarse) { /* Apply different styles for devices with coarse pointers dependant on screen resolution */ + @media (max-width: 1024px) { /* Do not affect displays larger than 1024px wide. */ + @media (max-width: 399px) { /* Screens smaller than 400px wide */ :root, .light, .dark { --left-column: 100%; } - - /* maintain single column for from image operations on larger mobile devices */ - #txt2img_results, #img2img_results, #extras_results { min-width: calc(min(320px, 100%)) !important;} + #txt2img_results, #img2img_results, #extras_results { min-width: calc(min(320px, 100%)) !important;} /* maintain single column for from image operations on larger mobile devices */ #txt2img_footer p { text-wrap: wrap; } - - } - - /* Screens larger than 400px wide */ - @media (min-width: 400px) { + } + @media (min-width: 400px) { /* Screens larger than 400px wide */ :root, .light, .dark {--left-column: 50%;} - - /* maintain side by side split on larger mobile displays for from text */ - #txt2img_results, #extras_results, #txt2img_footer p {text-wrap: wrap; max-width: 100% !important; } + #txt2img_results, #extras_results, #txt2im g_footer p {text-wrap: wrap; max-width: 100% !important; } /* maintain side by side split on larger mobile displays for from text */ } - #scripts_alwayson_txt2img div, #scripts_alwayson_img2img div { max-width: 100%; } #txt2img_prompt_container, #img2img_prompt_container { resize:vertical !important; } - - /* make generate and enqueue buttons take up the entire width of their rows. */ - #txt2img_generate_box, #txt2img_enqueue_wrapper { min-width: 100% !important;} - - /*make interrogate buttons take up appropriate space. */ - #img2img_toprow > div.gradio-column {flex-grow: 1 !important;} + #txt2img_generate_box, #txt2img_enqueue_wrapper { min-width: 100% !important;} /* make generate and enqueue buttons take up the entire width of their rows. */ + #img2img_toprow > div.gradio-column {flex-grow: 1 !important;} /*make interrogate buttons take up appropriate space. */ #img2img_actions_column {display: flex; min-width: fit-content !important; flex-direction: row;justify-content: space-evenly; align-items: center;} #txt2img_generate_box, #img2img_generate_box, #txt2img_enqueue_wrapper,#img2img_enqueue_wrapper {display: flex;flex-direction: column;height: 4em !important;align-items: stretch;justify-content: space-evenly;} - - /* maintain single column for from image operations on larger mobile devices */ - #img2img_interface, #img2img_results, #img2img_footer p {text-wrap: wrap; min-width: 100% !important; max-width: 100% !important;} - /* fix inpaint image display being too large for mobile displays */ - #img2img_sketch, #img2maskimg, #inpaint_sketch {display: flex; alignment-baseline:after-edge !important; overflow: auto !important; resize: none !important; } + #img2img_interface, #img2img_results, #img2img_footer p {text-wrap: wrap; min-width: 100% !important; max-width: 100% !important;} /* maintain single column for from image operations on larger mobile devices */ + #img2img_sketch, #img2maskimg, #inpaint_sketch {display: flex; alignment-baseline:after-edge !important; overflow: auto !important; resize: none !important; } /* fix inpaint image display being too large for mobile displays */ #img2maskimg canvas { width: auto !important; max-height: 100% !important; height: auto !important; } - - /* fix from text/image UI elements to prevent them from moving around within the UI */ - #txt2img_sampler, #txt2img_batch, #txt2img_seed_group, #txt2img_advanced, #txt2img_second_pass, #img2img_sampling_group, #img2img_resize_group, #img2img_batch_group, #img2img_seed_group, #img2img_denoise_group, #img2img_advanced_group { width: 100% !important; } + #txt2img_sampler, #txt2img_batch, #txt2img_seed_group, #txt2img_advanced, #txt2img_second_pass, #img2img_sampling_group, #img2img_resize_group, #img2img_batch_group, #img2img_seed_group, #img2img_denoise_group, #img2img_advanced_group { width: 100% !important; } /* fix from text/image UI elements to prevent them from moving around within the UI */ #img2img_resize_group .gradio-radio > div { display: flex; flex-direction: column; width: unset !important; } #inpaint_controls div {display:flex;flex-direction: row;} #inpaint_controls .gradio-radio > div { display: flex; flex-direction: column !important; } - - /* move image preview/output on models page to bottom of page */ - #models_tab { flex-direction: column-reverse !important; } - /* fix settings for agent scheduler */ - #enqueue_keyboard_shortcut_modifiers, #enqueue_keyboard_shortcut_key div { max-width: 40% !important;} - - /* adjust width of certain settings item to allow aligning as row, but not have it go off the screen */ - #settings { display: flex; flex-direction: row; flex-wrap: wrap; max-width: 100% !important; } + #models_tab { flex-direction: column-reverse !important; } /* move image preview/output on models page to bottom of page */ + #enqueue_keyboard_shortcut_modifiers, #enqueue_keyboard_shortcut_key div { max-width: 40% !important;} /* fix settings for agent scheduler */ + #settings { display: flex; flex-direction: row; flex-wrap: wrap; max-width: 100% !important; } /* adjust width of certain settings item to allow aligning as row, but not have it go off the screen */ #settings div.tab-content > div > div > div { max-width: 80% !important;} #settings div .gradio-radio { width: unset !important; } - - /* enable scrolling on extensions tab */ - #tab_extensions table { border-collapse: collapse; display: block; overflow-x:auto !important;} - - /* increase scrollbar size to make it finger friendly */ - ::-webkit-scrollbar { width: 25px !important; height:25px; } - - /* adjust dropdown size to make them easier to select individual items on mobile. */ - .gradio-dropdown ul.options {max-height: 41vh !important; } + #tab_extensions table { border-collapse: collapse; display: block; overflow-x:auto !important;} /* enable scrolling on extensions tab */ + ::-webkit-scrollbar { width: 25px !important; height:25px; } /* increase scrollbar size to make it finger friendly */ + .gradio-dropdown ul.options {max-height: 41vh !important; } /* adjust dropdown size to make them easier to select individual items on mobile. */ .gradio-dropdown ul.options li.item {height: 40px !important; display: flex; align-items: center;} - - /* adjust slider input fields as they were too large for mobile devices. */ - .gradio-slider input[type="number"] { width: 4em; font-size: 0.8rem; height: 16px; text-align: center; } + .gradio-slider input[type="number"] { width: 4em; font-size: 0.8rem; height: 16px; text-align: center; } /* adjust slider input fields as they were too large for mobile devices. */ #txt2img_settings .block .padded:not(.gradio-accordion) {padding: 0 !important;margin-right: 0; min-width: 100% !important; width:100% !important;} - } - + } } diff --git a/modules/shared.py b/modules/shared.py index dac16eee5..3b9e4fbd5 100644 --- a/modules/shared.py +++ b/modules/shared.py @@ -385,6 +385,7 @@ options_templates.update(options_section(('system-paths', "System Paths"), { "styles_dir": OptionInfo(os.path.join(paths.data_path, 'styles.csv'), "File or Folder with user-defined styles", folder=True), "embeddings_dir": OptionInfo(os.path.join(paths.models_path, 'embeddings'), "Folder with textual inversion embeddings", folder=True), "hypernetwork_dir": OptionInfo(os.path.join(paths.models_path, 'hypernetworks'), "Folder with Hypernetwork models", folder=True), + "control_dir": OptionInfo(os.path.join(paths.models_path, 'control'), "Folder with Control models", folder=True), "codeformer_models_path": OptionInfo(os.path.join(paths.models_path, 'Codeformer'), "Folder with codeformer models", folder=True), "gfpgan_models_path": OptionInfo(os.path.join(paths.models_path, 'GFPGAN'), "Folder with GFPGAN models", folder=True), "esrgan_models_path": OptionInfo(os.path.join(paths.models_path, 'ESRGAN'), "Folder with ESRGAN models", folder=True), diff --git a/modules/ui.py b/modules/ui.py index 39aaaf9b1..e2ad98144 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -44,6 +44,8 @@ folder_symbol = symbols.folder extra_networks_symbol = symbols.networks apply_style_symbol = symbols.apply save_style_symbol = symbols.save +txt2img_paste_fields = [] +img2img_paste_fields = [] if not cmd_opts.share and not cmd_opts.listen: @@ -234,8 +236,9 @@ def update_token_counter(text, steps): return f"{token_count}/{max_length}" -def create_toprow(is_img2img): - id_part = "img2img" if is_img2img else "txt2img" +def create_toprow(is_img2img: bool = False, id_part: str = None): + if id_part is None: + id_part = "img2img" if is_img2img else "txt2img" with gr.Row(elem_id=f"{id_part}_toprow", variant="compact"): with gr.Column(elem_id=f"{id_part}_prompt_container", scale=6): with gr.Row(): @@ -525,6 +528,7 @@ def create_ui(startup_timer = None): batch_switch_btn.click(lambda w, h: (h, w), inputs=[batch_count, batch_size], outputs=[batch_count, batch_size], show_progress=False) txt_prompt_img.change(fn=modules.images.image_data, inputs=[txt_prompt_img], outputs=[txt2img_prompt, txt_prompt_img]) + global txt2img_paste_fields # pylint: disable=global-statement txt2img_paste_fields = [ # prompt (txt2img_prompt, "Prompt"), @@ -857,6 +861,7 @@ def create_ui(startup_timer = None): negative_token_button.click(fn=wrap_queued_call(update_token_counter), inputs=[img2img_negative_prompt, steps], outputs=[negative_token_counter]) ui_extra_networks.setup_ui(extra_networks_ui_img2img, img2img_gallery) + global img2img_paste_fields # pylint: disable=global-statement img2img_paste_fields = [ # prompt (img2img_prompt, "Prompt"), diff --git a/modules/ui_symbols.py b/modules/ui_symbols.py index 0e80508ec..509df747b 100644 --- a/modules/ui_symbols.py +++ b/modules/ui_symbols.py @@ -18,6 +18,9 @@ folder = '📂' random = '🎲️' reuse = '♻️' info = 'ℹ' # noqa +reset = '🔄' +upload = '⬆️' +preview = '🔍' """ refresh = '🔄' close = '🛗' diff --git a/wiki b/wiki index 8bdd1dfb1..240a7339c 160000 --- a/wiki +++ b/wiki @@ -1 +1 @@ -Subproject commit 8bdd1dfb154a1dd4f1cbafd85a60a5135b478bb9 +Subproject commit 240a7339ca1199c7735e279e7ea4cdbac0163ec6