From 945f6e5e99413ef74c386cdb7f029d1cac93a456 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 25 Mar 2023 14:44:41 -0400
Subject: Fix img2img aspect ratio overlay in Gradio 3.23.0

---
 javascript/aspectRatioOverlay.js | 49 +++++++++++++++++++++-------------------
 1 file changed, 26 insertions(+), 23 deletions(-)

(limited to 'javascript/aspectRatioOverlay.js')

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
+                }
+            })
+        }
+    }
 });
-- 
cgit v1.2.1