[Bug]: IMG2IMG + inpaint (changing size) no longer has red-overlay to show you how it lines up with current image.

[bbecausereasonss]

Is there an existing issue for this?

• [X] I have searched the existing issues and checked the recent builds/commits

What happened?

New update to repo broke the red overlay that used to show you how the new size will be relative to the old image size. Nothing shows up on the image when you change the size now in IMG2IMG / inpaint.

Steps to reproduce the problem

1. Go to IMG2IMG
2. Go INPAINT
3. Load image
4. Change size (sliders)
5. See no red overlay appear

What should have happened?

Red overlay should appear.

Commit where the problem happens

Latest

What platforms do you use to access UI ?

Windows

What browsers do you use to access the UI ?

Mozilla Firefox

Command Line Arguments

No response

Additional information, context and logs

No response

[mclsugi]

Yes, I can confirm this too. For temporary workaround, I'm using the one in img2img tab as it still working (make sense since it is probably the only one not altered in the code).

[mezotaken]

Broken in every tab BUT img2img, right? It still works there for me

[mclsugi]

Broken in every tab BUT img2img, right?

Yes, that was what I'm trying to say to OP.

[codemonkeynorth]

this can be fixed in javascript\aspectRatioOverlay.js https://github.com/AUTOMATIC1111/stable-diffusion-webui/blob/ce9827a7c51a9f69bf62c634e35d34fa75ee1833/javascript/aspectRatioOverlay.js#L23

the issue is the tabs have been changed

if(tabIndex == 0){
  targetElement = gradioApp().querySelector('div[data-testid=image] img');
} else if(tabIndex == 1){
  targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
}

should now be eg

if(tabIndex == 0){
  targetElement = gradioApp().querySelector('#img2img_img2img_tab div[data-testid=image] img');
} else if(tabIndex == 1){
  targetElement = gradioApp().querySelector('#img2img_img2img_sketch_tab div[data-testid=image] img');
} else if(tabIndex == 2){
  targetElement = gradioApp().querySelector('#img2img_inpaint_tab div[data-testid=image] img');
} else if(tabIndex == 3){
  targetElement = gradioApp().querySelector('#img2img_inpaint_sketch_tab div[data-testid=image] img');		
}

however this will break every time the tabs change.. suggest a more dynamic lookup. I'll have a think

[codemonkeynorth]

this should futureproof it a little, since the button index and tab index should match https://github.com/AUTOMATIC1111/stable-diffusion-webui/blob/ce9827a7c51a9f69bf62c634e35d34fa75ee1833/javascript/aspectRatioOverlay.js#L23

var tabIndex = get_tab_index('mode_img2img')

let tabs = gradioApp().getElementById('mode_img2img').querySelectorAll('div.tabitem');
let tab = tabs[tabIndex];
let id = tab.getAttribute("id");
targetElement = gradioApp().querySelector('#' + id + ' div[data-testid=image] img');

if(targetElement){....

[mclsugi]

this can be fixed in javascript\aspectRatioOverlay.js

https://github.com/AUTOMATIC1111/stable-diffusion-webui/blob/ce9827a7c51a9f69bf62c634e35d34fa75ee1833/javascript/aspectRatioOverlay.js#L23

the issue is the tabs have been changed

if(tabIndex == 0){
  targetElement = gradioApp().querySelector('div[data-testid=image] img');
} else if(tabIndex == 1){
  targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
}

should now be eg

if(tabIndex == 0){
  targetElement = gradioApp().querySelector('#img2img_img2img_tab div[data-testid=image] img');
} else if(tabIndex == 1){
  targetElement = gradioApp().querySelector('#img2img_img2img_sketch_tab div[data-testid=image] img');
} else if(tabIndex == 2){
  targetElement = gradioApp().querySelector('#img2img_inpaint_tab div[data-testid=image] img');
} else if(tabIndex == 3){
  targetElement = gradioApp().querySelector('#img2img_inpaint_sketch_tab div[data-testid=image] img');		
}

however this will break every time the tabs change.. suggest a more dynamic lookup. I'll have a think

Did exactly this for personal use before the recent auto fix as my suspicion on the index messed up was based on why the img2img first tab was still working. Did not even bother to push PR as my coding skill is stuck in 2006 and as you've said it, not futureproof. 😄

[mclsugi]

The recent merge to fix this issue done exactly 'the not futureproof' way, but I guess auto considered that it will be no more additional tab to put in there. In the contrary, I love for img2img section to go slimmer with all the sketches tab merge into the masking tab. More compact. But I guess it is going to be harder mixing the components and UI to only 3 tabs, no?

[mezotaken]

I'd love to see compact img2img too, but that would need some way to switch gradio tools inplace, in the same tab. Red overlays are fixed for now.