From 3bd40bb77ff274f2a09efa07b759eebf6dc40b58 Mon Sep 17 00:00:00 2001 From: ruocaled Date: Fri, 14 Oct 2022 11:05:14 -0700 Subject: auto re-open selected image after re-generation attach an observer of gallery when generation in progress, if there was a image selected in gallery and gallery has only 1 image, auto re-select/open that image. This matches behavior of prior to Gradio 3.4.1 version bump, is a quality of life feature many people enjoyed. --- javascript/progressbar.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 4395a215..4994b476 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -1,5 +1,7 @@ // code related to showing and updating progressbar shown as the image is being made global_progressbars = {} +galleries = {} +galleryObservers = {} function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip, id_interrupt, id_preview, id_gallery){ var progressbar = gradioApp().getElementById(id_progressbar) @@ -31,6 +33,9 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip preview.style.width = gallery.clientWidth + "px" preview.style.height = gallery.clientHeight + "px" + //only watch gallery if there is a generation process going on + check_gallery(id_gallery); + var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0; if(!progressDiv){ if (skip) { @@ -38,6 +43,12 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip } interrupt.style.display = "none" } + + //disconnect observer once generation finished, so user can close selected image if they want + if (galleryObservers[id_gallery]) { + galleryObservers[id_gallery].disconnect(); + galleries[id_gallery] = null; + } } window.setTimeout(function() { requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt) }, 500) @@ -46,6 +57,27 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip } } +function check_gallery(id_gallery){ + let gallery = gradioApp().getElementById(id_gallery) + // if gallery has no change, no need to setting up observer again. + if (gallery && galleries[id_gallery] !== gallery){ + galleries[id_gallery] = gallery; + if(galleryObservers[id_gallery]){ + galleryObservers[id_gallery].disconnect(); + } + galleryObservers[id_gallery] = new MutationObserver(function (){ + let galleryButtons = gradioApp().querySelectorAll('#'+id_gallery+' .gallery-item') + let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2') + if (galleryButtons.length === 1 && !galleryBtnSelected) { + //automatically open when there is only 1 gallery btn, and was previously selected + galleryButtons[0].click(); + console.log('clicked'); + } + }) + galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false }) + } +} + onUiUpdate(function(){ check_progressbar('txt2img', 'txt2img_progressbar', 'txt2img_progress_span', 'txt2img_skip', 'txt2img_interrupt', 'txt2img_preview', 'txt2img_gallery') check_progressbar('img2img', 'img2img_progressbar', 'img2img_progress_span', 'img2img_skip', 'img2img_interrupt', 'img2img_preview', 'img2img_gallery') -- cgit v1.2.3 From 6b5c54c187796900bf677c8c14b62a166eb53b24 Mon Sep 17 00:00:00 2001 From: ruocaled Date: Fri, 14 Oct 2022 11:06:38 -0700 Subject: remove console.log --- javascript/progressbar.js | 1 - 1 file changed, 1 deletion(-) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 4994b476..b4925e99 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -71,7 +71,6 @@ function check_gallery(id_gallery){ if (galleryButtons.length === 1 && !galleryBtnSelected) { //automatically open when there is only 1 gallery btn, and was previously selected galleryButtons[0].click(); - console.log('clicked'); } }) galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false }) -- cgit v1.2.3 From c84eef8195b2bae4f4b4d1785159ae9efd937abe Mon Sep 17 00:00:00 2001 From: ruocaled Date: Fri, 14 Oct 2022 11:10:26 -0700 Subject: fix observer disconnect logic --- javascript/progressbar.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index b4925e99..196fe507 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -42,13 +42,15 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip skip.style.display = "none" } interrupt.style.display = "none" + + //disconnect observer once generation finished, so user can close selected image if they want + if (galleryObservers[id_gallery]) { + galleryObservers[id_gallery].disconnect(); + galleries[id_gallery] = null; + } } - //disconnect observer once generation finished, so user can close selected image if they want - if (galleryObservers[id_gallery]) { - galleryObservers[id_gallery].disconnect(); - galleries[id_gallery] = null; - } + } window.setTimeout(function() { requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt) }, 500) -- cgit v1.2.3 From b26efff8c496309329cd1982aee55e81bf81a655 Mon Sep 17 00:00:00 2001 From: ruocaled Date: Fri, 14 Oct 2022 17:14:59 -0700 Subject: allow re-open for multiple images gallery --- javascript/progressbar.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 196fe507..574fd549 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -67,12 +67,13 @@ function check_gallery(id_gallery){ if(galleryObservers[id_gallery]){ galleryObservers[id_gallery].disconnect(); } + let prevSelectedIndex = selected_gallery_index(); galleryObservers[id_gallery] = new MutationObserver(function (){ let galleryButtons = gradioApp().querySelectorAll('#'+id_gallery+' .gallery-item') let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2') - if (galleryButtons.length === 1 && !galleryBtnSelected) { - //automatically open when there is only 1 gallery btn, and was previously selected - galleryButtons[0].click(); + if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) { + //automatically re-open previously selected index (if exists) + galleryButtons[prevSelectedIndex].click(); } }) galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false }) -- cgit v1.2.3 From c7cd2fda5a6c9c97d5c238e0f2e1146d346e0e93 Mon Sep 17 00:00:00 2001 From: ruocaled Date: Fri, 14 Oct 2022 19:05:41 -0700 Subject: re-attach full screen zoom listeners --- javascript/progressbar.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 574fd549..35f20b15 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -74,6 +74,9 @@ function check_gallery(id_gallery){ if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) { //automatically re-open previously selected index (if exists) galleryButtons[prevSelectedIndex].click(); + setTimeout(function (){ + showGalleryImage() + },100) } }) galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false }) -- cgit v1.2.3 From 661a61985c7bee34a67390a05761e25830a6b918 Mon Sep 17 00:00:00 2001 From: ruocaled Date: Fri, 14 Oct 2022 19:25:30 -0700 Subject: remove extra 100ms timeout --- javascript/progressbar.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 35f20b15..076f0a97 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -74,9 +74,7 @@ function check_gallery(id_gallery){ if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) { //automatically re-open previously selected index (if exists) galleryButtons[prevSelectedIndex].click(); - setTimeout(function (){ - showGalleryImage() - },100) + showGalleryImage(); } }) galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false }) -- cgit v1.2.3 From db27b987a97fc8b7894a9dd34bd7641536f9c424 Mon Sep 17 00:00:00 2001 From: aoirusann Date: Sat, 15 Oct 2022 11:48:13 +0800 Subject: Add hint for `ctrl/alt enter` And duplicate implementations are removed --- javascript/ui.js | 10 ---------- modules/ui.py | 10 ++++++++-- script.js | 4 ++-- 3 files changed, 10 insertions(+), 14 deletions(-) (limited to 'javascript') diff --git a/javascript/ui.js b/javascript/ui.js index 0f8fe68e..56f4216f 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -187,12 +187,10 @@ onUiUpdate(function(){ if (!txt2img_textarea) { txt2img_textarea = gradioApp().querySelector("#txt2img_prompt > label > textarea"); txt2img_textarea?.addEventListener("input", () => update_token_counter("txt2img_token_button")); - txt2img_textarea?.addEventListener("keyup", (event) => submit_prompt(event, "txt2img_generate")); } if (!img2img_textarea) { img2img_textarea = gradioApp().querySelector("#img2img_prompt > label > textarea"); img2img_textarea?.addEventListener("input", () => update_token_counter("img2img_token_button")); - img2img_textarea?.addEventListener("keyup", (event) => submit_prompt(event, "img2img_generate")); } }) @@ -220,14 +218,6 @@ function update_token_counter(button_id) { token_timeout = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time); } -function submit_prompt(event, generate_button_id) { - if (event.altKey && event.keyCode === 13) { - event.preventDefault(); - gradioApp().getElementById(generate_button_id).click(); - return; - } -} - function restart_reload(){ document.body.innerHTML='

Reloading...

'; setTimeout(function(){location.reload()},2000) diff --git a/modules/ui.py b/modules/ui.py index 45550ea8..baf4c397 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -433,7 +433,10 @@ def create_toprow(is_img2img): with gr.Row(): with gr.Column(scale=80): with gr.Row(): - prompt = gr.Textbox(label="Prompt", elem_id=f"{id_part}_prompt", show_label=False, placeholder="Prompt", lines=2) + prompt = gr.Textbox(label="Prompt", elem_id=f"{id_part}_prompt", show_label=False, lines=2, + 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") @@ -446,7 +449,10 @@ def create_toprow(is_img2img): with gr.Row(): with gr.Column(scale=8): with gr.Row(): - negative_prompt = gr.Textbox(label="Negative prompt", elem_id="negative_prompt", show_label=False, placeholder="Negative prompt", lines=2) + 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) diff --git a/script.js b/script.js index 9543cbe6..88f2c839 100644 --- a/script.js +++ b/script.js @@ -50,9 +50,9 @@ document.addEventListener("DOMContentLoaded", function() { document.addEventListener('keydown', function(e) { var handled = false; if (e.key !== undefined) { - if((e.key == "Enter" && (e.metaKey || e.ctrlKey))) handled = true; + if((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true; } else if (e.keyCode !== undefined) { - if((e.keyCode == 13 && (e.metaKey || e.ctrlKey))) handled = true; + if((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true; } if (handled) { button = get_uiCurrentTabContent().querySelector('button[id$=_generate]'); -- cgit v1.2.3 From 3631adfe96dd7746f7e23a3cf5802d8f4a95a532 Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Sat, 15 Oct 2022 12:58:53 +0300 Subject: make dragging to prompt work again --- javascript/dragdrop.js | 4 ++-- javascript/imageParams.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'javascript') diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index fe0185a5..070cf255 100644 --- a/javascript/dragdrop.js +++ b/javascript/dragdrop.js @@ -43,7 +43,7 @@ function dropReplaceImage( imgWrap, files ) { window.document.addEventListener('dragover', e => { const target = e.composedPath()[0]; const imgWrap = target.closest('[data-testid="image"]'); - if ( !imgWrap && target.placeholder != "Prompt") { + if ( !imgWrap && target.placeholder.indexOf("Prompt") == -1) { return; } e.stopPropagation(); @@ -53,7 +53,7 @@ window.document.addEventListener('dragover', e => { window.document.addEventListener('drop', e => { const target = e.composedPath()[0]; - if (target.placeholder === "Prompt") { + if (target.placeholder.indexOf("Prompt") == -1) { return; } const imgWrap = target.closest('[data-testid="image"]'); diff --git a/javascript/imageParams.js b/javascript/imageParams.js index 4a7b0900..67404a89 100644 --- a/javascript/imageParams.js +++ b/javascript/imageParams.js @@ -2,7 +2,7 @@ window.onload = (function(){ window.addEventListener('drop', e => { const target = e.composedPath()[0]; const idx = selected_gallery_index(); - if (target.placeholder != "Prompt") return; + if (target.placeholder.indexOf("Prompt") == -1) return; let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image"; -- 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 'javascript') 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 73901c3f011a2510d65de1c99b4958cd9b559264 Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Sat, 15 Oct 2022 15:51:57 +0300 Subject: make attention edit only work with ctrl as was initially intended --- javascript/edit-attention.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'javascript') diff --git a/javascript/edit-attention.js b/javascript/edit-attention.js index 3f1d2fbb..67084e7a 100644 --- a/javascript/edit-attention.js +++ b/javascript/edit-attention.js @@ -2,6 +2,8 @@ addEventListener('keydown', (event) => { let target = event.originalTarget || event.composedPath()[0]; if (!target.hasAttribute("placeholder")) return; if (!target.placeholder.toLowerCase().includes("prompt")) return; + if (! (event.metaKey || event.ctrlKey)) return; + let plus = "ArrowUp" let minus = "ArrowDown" -- cgit v1.2.3