From acc460f8e175196181d1ff57a2df3c0d26ab9ee4 Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Mon, 13 Mar 2023 18:03:00 +0200 Subject: [PATCH] Proper fix for img2img mask and sketch etc. remove all resize event listeners that are expensive on draw calls --- javascript/imageMaskFix.js | 27 +++++++++++++++++++++++++++ javascript/ui.js | 4 ++-- modules/ui.py | 9 +++++---- style.css | 33 +++++++++++++++++++++++++++++++-- 4 files changed, 65 insertions(+), 8 deletions(-) diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js index 9fe7a603..0ec66e58 100644 --- a/javascript/imageMaskFix.js +++ b/javascript/imageMaskFix.js @@ -2,6 +2,7 @@ * temporary fix for https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/668 * @see https://github.com/gradio-app/gradio/issues/1721 */ + /* window.addEventListener( 'resize', () => imageMaskResize()); function imageMaskResize() { const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas'); @@ -43,3 +44,29 @@ function imageMaskResize() { } onUiUpdate(() => imageMaskResize()); + */ + +let img2img_tab_index = 0; +onUiUpdate(function() { + const img2img_tab = gradioApp().querySelector('#img2img_img2img_tab'); + if(img2img_tab){ + const current_img2img_tab_index = get_img2img_tab_index()[0]; + //if(img2img_tab_index != current_img2img_tab_index){ + //console.log(current_img2img_tab_index); + img2img_tab_index = current_img2img_tab_index; + const parent_img2img_tab_img = gradioApp().querySelector('#mode_img2img > div:nth-child('+(img2img_tab_index+2)+') div[data-testid="image"] > div'); + const img2img_tab_img = parent_img2img_tab_img.querySelector('img'); + if(img2img_tab_img){ + parent_img2img_tab_img.style.flexGrow = "0"; + img2img_tab_img.onload = function() { + let w = this.naturalWidth; + let h = this.naturalHeight; + parent_img2img_tab_img.style.width = `${w}px`; + parent_img2img_tab_img.style.height = `${h}px`; + } + }else{ + parent_img2img_tab_img.style.flexGrow = "1"; + } + //} + } +}) diff --git a/javascript/ui.js b/javascript/ui.js index 9dea5181..434ed525 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -353,7 +353,7 @@ onUiUpdate(function(){ leftSide.style.pointerEvents = 'none'; rightSide.style.userSelect = 'none'; rightSide.style.pointerEvents = 'none'; - window.dispatchEvent(resizeEvent); + //window.dispatchEvent(resizeEvent); } function mouseUpHandler() { @@ -365,7 +365,7 @@ onUiUpdate(function(){ rightSide.style.removeProperty('pointer-events'); container.removeEventListener('mousemove', mouseMoveHandler); container.removeEventListener('mouseup', mouseUpHandler); - window.dispatchEvent(resizeEvent); + //window.dispatchEvent(resizeEvent); } container.addEventListener('mousemove', mouseMoveHandler); diff --git a/modules/ui.py b/modules/ui.py index 83300e93..d9f2ff4a 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -761,19 +761,19 @@ def create_ui(): with gr.Accordion("Image Source", open=True): with gr.Tabs(elem_id="mode_img2img"): with gr.TabItem('img2img', id='img2img', elem_id="img2img_img2img_tab") as tab_img2img: - init_img = gr.Image(label="Image for img2img", elem_id="img2img_image", show_label=False, source="upload", interactive=True, type="pil", tool="editor", image_mode="RGBA").style(height=480) + init_img = gr.Image(label="Image for img2img", elem_id="img2img_image", show_label=False, source="upload", interactive=True, type="pil", tool="editor", image_mode="RGBA") add_copy_image_controls('img2img', init_img) with gr.TabItem('Sketch', id='img2img_sketch', elem_id="img2img_img2img_sketch_tab") as tab_sketch: - sketch = gr.Image(label="Image for img2img", elem_id="img2img_sketch", show_label=False, source="upload", interactive=True, type="pil", tool="color-sketch", image_mode="RGBA").style(height=480) + sketch = gr.Image(label="Image for img2img", elem_id="img2img_sketch", show_label=False, source="upload", interactive=True, type="pil", tool="color-sketch", image_mode="RGBA") add_copy_image_controls('sketch', sketch) with gr.TabItem('Inpaint', id='inpaint', elem_id="img2img_inpaint_tab") as tab_inpaint: - init_img_with_mask = gr.Image(label="Image for inpainting with mask", show_label=False, elem_id="img2maskimg", source="upload", interactive=True, type="pil", tool="sketch", image_mode="RGBA").style(height=480) + init_img_with_mask = gr.Image(label="Image for inpainting with mask", show_label=False, elem_id="img2maskimg", source="upload", interactive=True, type="pil", tool="sketch", image_mode="RGBA") add_copy_image_controls('inpaint', init_img_with_mask) with gr.TabItem('Inpaint sketch', id='inpaint_sketch', elem_id="img2img_inpaint_sketch_tab") as tab_inpaint_color: - inpaint_color_sketch = gr.Image(label="Color sketch inpainting", show_label=False, elem_id="inpaint_sketch", source="upload", interactive=True, type="pil", tool="color-sketch", image_mode="RGBA").style(height=480) + inpaint_color_sketch = gr.Image(label="Color sketch inpainting", show_label=False, elem_id="inpaint_sketch", source="upload", interactive=True, type="pil", tool="color-sketch", image_mode="RGBA") inpaint_color_sketch_orig = gr.State(None) add_copy_image_controls('inpaint_sketch', inpaint_color_sketch) @@ -849,6 +849,7 @@ def create_ui(): return img for button, name, elem in copy_image_buttons: + button.click( fn=copy_image, inputs=[elem], diff --git a/style.css b/style.css index 3748b520..cff572da 100644 --- a/style.css +++ b/style.css @@ -1664,9 +1664,10 @@ div[data-testid="image"]{ position: relative; max-height: 50vh; height:auto; - background-color: var(--main-bg-color); + background-color: var(--main-bg-color) !important; + display: flex; } - +/* div[data-testid="image"] > div { position: relative; @@ -1674,6 +1675,17 @@ div[data-testid="image"] > div height:auto; background-color: var(--main-bg-color); } +*/ +div[data-testid="image"] > div { + position: relative; + max-height: 50vh; + background-color: var(--main-bg-color); + object-fit: contain; + width: fit-content!important; + height: fit-content !important; + margin: auto; + flex-grow:1; +} div[data-testid="image"] img { @@ -1682,23 +1694,40 @@ div[data-testid="image"] img background-color: var(--main-bg-color); } +/* div[data-testid="image"] .touch-none { width: 100% !important; height: auto !important; position: absolute !important; top: unset !important; left: unset !important; +}*/ +div[data-testid="image"] .touch-none { + position: absolute !important; } +/* canvas { object-fit: contain !important; max-height: 50vh !important; width: 100% !important; + height: auto !important; position: absolute !important; top: 0 !important; left: 0 !important; } +*/ + +canvas { + width: 100% !important; + height: 100% !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; +} + + #dim_controls > div:last-child{