From e8729dd0511f8410db967d9ef192645cfef1be8a Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Sat, 15 Oct 2022 12:54:23 +0300 Subject: re-apply height hacks to work with new gradio --- style.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 2306c002..c27e53f8 100644 --- a/style.css +++ b/style.css @@ -167,10 +167,6 @@ button{ align-self: stretch !important; } -#img2maskimg .h-60{ - height: 30rem; -} - .overflow-hidden, .gr-panel{ overflow: visible !important; } @@ -443,10 +439,6 @@ input[type="range"]{ --tw-bg-opacity: 0 !important; } -#img2img_image div.h-60{ - height: 480px; -} - #context-menu{ z-index:9999; position:absolute; @@ -521,3 +513,11 @@ canvas[key="mask"] { .row.gr-compact{ overflow: visible; } + +#img2img_image, #img2img_image > .h-60, #img2img_image > .h-60 > div, #img2img_image > .h-60 > div > img, +img2maskimg, #img2maskimg > .h-60, #img2maskimg > .h-60 > div, #img2maskimg > .h-60 > div > img +{ + height: 480px !important; + max-height: 480px !important; + min-height: 480px !important; +} \ No newline at end of file -- cgit v1.2.3 From d3463bc59a44d62c2de8b357184c49876d84f654 Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Sat, 15 Oct 2022 14:22:30 +0300 Subject: change styling for top right corner UI made save style button not die when you cancel --- javascript/hints.js | 2 ++ javascript/ui.js | 2 +- modules/ui.py | 57 ++++++++++++++++++++++++++--------------------------- style.css | 16 +++++++-------- 4 files changed, 39 insertions(+), 38 deletions(-) (limited to 'style.css') diff --git a/javascript/hints.js b/javascript/hints.js index 8fec907d..b98012f5 100644 --- a/javascript/hints.js +++ b/javascript/hints.js @@ -16,6 +16,8 @@ titles = { "\u{1f3a8}": "Add a random artist to the prompt.", "\u2199\ufe0f": "Read generation parameters from prompt or last generation if prompt is empty into user interface.", "\u{1f4c2}": "Open images output directory", + "\u{1f4be}": "Save style", + "\u{1f4cb}": "Apply selected styles to current prompt", "Inpaint a part of image": "Draw a mask over an image, and the script will regenerate the masked area with content according to prompt", "SD upscale": "Upscale image normally, split result into tiles, improve each tile using img2img, merge whole image back", diff --git a/javascript/ui.js b/javascript/ui.js index 56f4216f..9e1bed4c 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -141,7 +141,7 @@ function submit_img2img(){ function ask_for_style_name(_, prompt_text, negative_prompt_text) { name_ = prompt('Style name:') - return name_ === null ? [null, null, null]: [name_, prompt_text, negative_prompt_text] + return [name_, prompt_text, negative_prompt_text] } diff --git a/modules/ui.py b/modules/ui.py index de5ab929..cab8ab11 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -81,6 +81,8 @@ art_symbol = '\U0001f3a8' # 🎨 paste_symbol = '\u2199\ufe0f' # ↙ folder_symbol = '\U0001f4c2' # 📂 refresh_symbol = '\U0001f504' # 🔄 +save_style_symbol = '\U0001f4be' # 💾 +apply_style_symbol = '\U0001f4cb' # 📋 def plaintext_to_html(text): @@ -322,7 +324,7 @@ def visit(x, func, path=""): def add_style(name: str, prompt: str, negative_prompt: str): if name is None: - return [gr_show(), gr_show()] + return [gr_show() for x in range(4)] style = modules.styles.PromptStyle(name, prompt, negative_prompt) shared.prompt_styles.styles[style.name] = style @@ -447,7 +449,7 @@ def create_toprow(is_img2img): id_part = "img2img" if is_img2img else "txt2img" with gr.Row(elem_id="toprow"): - with gr.Column(scale=4): + with gr.Column(scale=6): with gr.Row(): with gr.Column(scale=80): with gr.Row(): @@ -455,27 +457,30 @@ def create_toprow(is_img2img): placeholder="Prompt (press Ctrl+Enter or Alt+Enter to generate)" ) - with gr.Column(scale=1, elem_id="roll_col"): - roll = gr.Button(value=art_symbol, elem_id="roll", visible=len(shared.artist_db.artists) > 0) - paste = gr.Button(value=paste_symbol, elem_id="paste") - token_counter = gr.HTML(value="", elem_id=f"{id_part}_token_counter") - token_button = gr.Button(visible=False, elem_id=f"{id_part}_token_button") - - with gr.Column(scale=10, elem_id="style_pos_col"): - prompt_style = gr.Dropdown(label="Style 1", elem_id=f"{id_part}_style_index", choices=[k for k, v in shared.prompt_styles.styles.items()], value=next(iter(shared.prompt_styles.styles.keys())), visible=len(shared.prompt_styles.styles) > 1) - with gr.Row(): - with gr.Column(scale=8): + with gr.Column(scale=80): with gr.Row(): negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=False, lines=2, placeholder="Negative prompt (press Ctrl+Enter or Alt+Enter to generate)" ) - with gr.Column(scale=1, elem_id="roll_col"): - sh = gr.Button(elem_id="sh", visible=True) + with gr.Column(scale=1, elem_id="roll_col"): + roll = gr.Button(value=art_symbol, elem_id="roll", visible=len(shared.artist_db.artists) > 0) + paste = gr.Button(value=paste_symbol, elem_id="paste") + save_style = gr.Button(value=save_style_symbol, elem_id="style_create") + prompt_style_apply = gr.Button(value=apply_style_symbol, elem_id="style_apply") - with gr.Column(scale=1, elem_id="style_neg_col"): - prompt_style2 = gr.Dropdown(label="Style 2", elem_id=f"{id_part}_style2_index", choices=[k for k, v in shared.prompt_styles.styles.items()], value=next(iter(shared.prompt_styles.styles.keys())), visible=len(shared.prompt_styles.styles) > 1) + token_counter = gr.HTML(value="", elem_id=f"{id_part}_token_counter") + token_button = gr.Button(visible=False, elem_id=f"{id_part}_token_button") + + button_interrogate = None + button_deepbooru = None + if is_img2img: + with gr.Column(scale=1, elem_id="interrogate_col"): + button_interrogate = gr.Button('Interrogate\nCLIP', elem_id="interrogate") + + if cmd_opts.deepdanbooru: + button_deepbooru = gr.Button('Interrogate\nDeepBooru', elem_id="deepbooru") with gr.Column(scale=1): with gr.Row(): @@ -495,20 +500,14 @@ def create_toprow(is_img2img): outputs=[], ) - with gr.Row(scale=1): - if is_img2img: - interrogate = gr.Button('Interrogate\nCLIP', elem_id="interrogate") - if cmd_opts.deepdanbooru: - deepbooru = gr.Button('Interrogate\nDeepBooru', elem_id="deepbooru") - else: - deepbooru = None - else: - interrogate = None - deepbooru = None - prompt_style_apply = gr.Button('Apply style', elem_id="style_apply") - save_style = gr.Button('Create style', elem_id="style_create") + with gr.Row(): + with gr.Column(scale=1, elem_id="style_pos_col"): + prompt_style = gr.Dropdown(label="Style 1", elem_id=f"{id_part}_style_index", choices=[k for k, v in shared.prompt_styles.styles.items()], value=next(iter(shared.prompt_styles.styles.keys()))) + + with gr.Column(scale=1, elem_id="style_neg_col"): + prompt_style2 = gr.Dropdown(label="Style 2", elem_id=f"{id_part}_style2_index", choices=[k for k, v in shared.prompt_styles.styles.items()], value=next(iter(shared.prompt_styles.styles.keys()))) - return prompt, roll, prompt_style, negative_prompt, prompt_style2, submit, interrogate, deepbooru, prompt_style_apply, save_style, paste, token_counter, token_button + return prompt, roll, prompt_style, negative_prompt, prompt_style2, submit, button_interrogate, button_deepbooru, prompt_style_apply, save_style, paste, token_counter, token_button def setup_progressbar(progressbar, preview, id_part, textinfo=None): diff --git a/style.css b/style.css index c27e53f8..b534f950 100644 --- a/style.css +++ b/style.css @@ -115,7 +115,7 @@ padding: 0.4em 0; } -#roll, #paste{ +#roll, #paste, #style_create, #style_apply{ min-width: 2em; min-height: 2em; max-width: 2em; @@ -126,14 +126,14 @@ margin: 0.1em 0; } -#style_apply, #style_create, #interrogate{ - margin: 0.75em 0.25em 0.25em 0.25em; - min-width: 5em; +#interrogate_col{ + min-width: 0 !important; + max-width: 8em !important; } - -#style_apply, #style_create, #deepbooru{ - margin: 0.75em 0.25em 0.25em 0.25em; - min-width: 5em; +#interrogate, #deepbooru{ + margin: 0em 0.25em 0.9em 0.25em; + min-width: 8em; + max-width: 8em; } #style_pos_col, #style_neg_col{ -- cgit v1.2.3 From 5fd638f14d75a71a37157ded5d33c716ab9eb8ca Mon Sep 17 00:00:00 2001 From: ruocaled Date: Sat, 15 Oct 2022 02:00:46 -0700 Subject: fix download section layout --- modules/ui.py | 4 ++-- style.css | 7 ------- 2 files changed, 2 insertions(+), 9 deletions(-) (limited to 'style.css') diff --git a/modules/ui.py b/modules/ui.py index c9b53247..3206113e 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -619,7 +619,7 @@ def create_ui(wrap_gradio_gpu_call): txt2img_preview = gr.Image(elem_id='txt2img_preview', visible=False) txt2img_gallery = gr.Gallery(label='Output', show_label=False, elem_id='txt2img_gallery').style(grid=4) - with gr.Group(): + with gr.Column(): with gr.Row(): save = gr.Button('Save') send_to_img2img = gr.Button('Send to img2img') @@ -834,7 +834,7 @@ def create_ui(wrap_gradio_gpu_call): img2img_preview = gr.Image(elem_id='img2img_preview', visible=False) img2img_gallery = gr.Gallery(label='Output', show_label=False, elem_id='img2img_gallery').style(grid=4) - with gr.Group(): + with gr.Column(): with gr.Row(): save = gr.Button('Save') img2img_send_to_img2img = gr.Button('Send to img2img') diff --git a/style.css b/style.css index b534f950..920c32ab 100644 --- a/style.css +++ b/style.css @@ -237,13 +237,6 @@ fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500, label.block s margin: 0; } -.gr-panel div.flex-col div.justify-between div{ - position: absolute; - top: -0.1em; - right: 1em; - padding: 0 0.5em; -} - #settings .gr-panel div.flex-col div.justify-between div{ position: relative; z-index: 200; -- cgit v1.2.3 From 606519813dd998140a741096f9029c732ee52d2a Mon Sep 17 00:00:00 2001 From: guaneec Date: Sat, 15 Oct 2022 22:10:39 +0800 Subject: Prevent modal content from being selected --- style.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'style.css') diff --git a/style.css b/style.css index 920c32ab..33832ebf 100644 --- a/style.css +++ b/style.css @@ -309,6 +309,8 @@ input[type="range"]{ height: 100%; overflow: auto; background-color: rgba(20, 20, 20, 0.95); + user-select: none; + -webkit-user-select: none; } .modalControls { @@ -513,4 +515,4 @@ img2maskimg, #img2maskimg > .h-60, #img2maskimg > .h-60 > div, #img2maskimg > .h height: 480px !important; max-height: 480px !important; min-height: 480px !important; -} \ No newline at end of file +} -- cgit v1.2.3