Merge pull request AUTOMATIC1111#8938 from space-nuko/fix-image-ar-ov…

…erlay Fix img2img aspect ratio overlay in Gradio 3.23.0
adesanyaaa · Mar 27, 2023 · e8f34e3 · e8f34e3
2 parents c19036d + 945f6e5
commit e8f34e3
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 23 deletions.
diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js
@@ -12,7 +12,7 @@ function dimensionChange(e, is_width, is_height){
  currentHeight = e.target.value*1.0
  }
 
- var inImg2img  = Boolean(gradioApp().querySelector("button.rounded-t-lg.border-gray-200"))
+ var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";
 
  if(!inImg2img){
  return;
@@ -22,23 +22,23 @@ function dimensionChange(e, is_width, is_height){
 
  var tabIndex = get_tab_index('mode_img2img')
  if(tabIndex == 0){ // img2img
- targetElement = gradioApp().querySelector('div[data-testid=image] img');
+ targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');
  } else if(tabIndex == 1){ //Sketch
  targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');
  } else if(tabIndex == 2){ // Inpaint
  targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
  } else if(tabIndex == 3){ // Inpaint sketch
  targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');
  }
- 
+
 
  if(targetElement){
 
  var arPreviewRect = gradioApp().querySelector('#imageARPreview');
  if(!arPreviewRect){
  arPreviewRect = document.createElement('div')
  arPreviewRect.id = "imageARPreview";
- gradioApp().getRootNode().appendChild(arPreviewRect)
+ gradioApp().appendChild(arPreviewRect)
  }
 
 
@@ -91,23 +91,26 @@ onUiUpdate(function(){
  if(arPreviewRect){
  arPreviewRect.style.display = 'none';
  }
- var inImg2img = Boolean(gradioApp().querySelector("button.rounded-t-lg.border-gray-200"))
- if(inImg2img){
- let inputs = gradioApp().querySelectorAll('input');
- inputs.forEach(function(e){
- var is_width = e.parentElement.id == "img2img_width"
- var is_height = e.parentElement.id == "img2img_height"
-
- if((is_width || is_height) && !e.classList.contains('scrollwatch')){
- e.addEventListener('input', function(e){dimensionChange(e, is_width, is_height)} )
- e.classList.add('scrollwatch')
- }
- if(is_width){
- currentWidth = e.value*1.0
- }
- if(is_height){
- currentHeight = e.value*1.0
- }
- })
- }
+ var tabImg2img = gradioApp().querySelector("#tab_img2img");
+ if (tabImg2img) {
+ var inImg2img = tabImg2img.style.display == "block";
+ if(inImg2img){
+ let inputs = gradioApp().querySelectorAll('input');
+ inputs.forEach(function(e){
+ var is_width = e.parentElement.id == "img2img_width"
+ var is_height = e.parentElement.id == "img2img_height"
+
+ if((is_width || is_height) && !e.classList.contains('scrollwatch')){
+ e.addEventListener('input', function(e){dimensionChange(e, is_width, is_height)} )
+ e.classList.add('scrollwatch')
+ }
+ if(is_width){
+ currentWidth = e.value*1.0
+ }
+ if(is_height){
+ currentHeight = e.value*1.0
+ }
+ })
+ }
+ }
 });
diff --git a/style.css b/style.css
@@ -520,6 +520,17 @@ div.dimensions-tools{
  background-color: rgba(0, 0, 0, 0.8);
 }
 
+#imageARPreview {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ border: 2px solid red;
+ background: rgba(255, 0, 0, 0.3);
+ z-index: 900;
+ pointer-events: none;
+ display: none;
+}
+
 /* context menu (ie for the generate button) */
 
 #context-menu{