Fix img2img aspect ratio overlay in Gradio 3.23.0

2 files changed, 37 insertions, 23 deletions

diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js
index 0f164b82..a8278cca 100644
--- 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,7 +22,7 @@ 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

@@ -30,7 +30,7 @@ function dimensionChange(e, is_width, is_height){
 	} else if(tabIndex == 3){ // Inpaint sketch

 		targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');

 	}

-	

+

 

 	if(targetElement){

 

@@ -38,7 +38,7 @@ function dimensionChange(e, is_width, is_height){
 		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
index 0dcc3e25..b252e64d 100644
--- a/style.css
+++ b/style.css
@@ -507,6 +507,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{