Merge branch 'master' into img2img-enhance

5 files changed, 62 insertions, 52 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/javascript/hints.js b/javascript/hints.js
index b3f3d08d..f48a0eb6 100644
--- a/javascript/hints.js
+++ b/javascript/hints.js
@@ -21,8 +21,7 @@ titles = {
     "\u{1f5d1}\ufe0f": "Clear prompt",
     "\u{1f4cb}": "Apply selected styles to current prompt",
     "\u{1f4d2}": "Paste available values into the field",
-    "\u{1f3b4}": "Show extra networks",
-
+    "\u{1f3b4}": "Show/hide extra networks",
 
     "Inpaint a part of image": "Draw a mask over an image, and the script will regenerate the masked area with content according to prompt",
     "SD upscale": "Upscale image normally, split result into tiles, improve each tile using img2img, merge whole image back",
diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 7547e771..d6483562 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -32,13 +32,7 @@ function negmod(n, m) {
 function updateOnBackgroundChange() {
     const modalImage = gradioApp().getElementById("modalImage")
     if (modalImage && modalImage.offsetParent) {
-        let allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
-        let currentButton = null
-        allcurrentButtons.forEach(function(elem) {
-            if (elem.parentElement.offsetParent) {
-                currentButton = elem;
-            }
-        })
+        let currentButton = selected_gallery_button();
 
         if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
             modalImage.src = currentButton.children[0].src;
@@ -50,22 +44,10 @@ function updateOnBackgroundChange() {
 }
 
 function modalImageSwitch(offset) {
-    var allgalleryButtons = gradioApp().querySelectorAll(".gradio-gallery .thumbnail-item")
-    var galleryButtons = []
-    allgalleryButtons.forEach(function(elem) {
-        if (elem.parentElement.offsetParent) {
-            galleryButtons.push(elem);
-        }
-    })
+    var galleryButtons = all_gallery_buttons();
 
     if (galleryButtons.length > 1) {
-        var allcurrentButtons = gradioApp().querySelectorAll(".gradio-gallery .thumbnail-item.selected")
-        var currentButton = null
-        allcurrentButtons.forEach(function(elem) {
-            if (elem.parentElement.offsetParent) {
-                currentButton = elem;
-            }
-        })
+        var currentButton = selected_gallery_button();
 
         var result = -1
         galleryButtons.forEach(function(v, i) {
diff --git a/javascript/notification.js b/javascript/notification.js
index 5ae6df24..8ddd4c5d 100644
--- a/javascript/notification.js
+++ b/javascript/notification.js
@@ -15,7 +15,7 @@ onUiUpdate(function(){
         }
     }
 
-    const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"][style*="display: block"] div[id$="_results"] img.h-full.w-full.overflow-hidden');
+    const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"][style*="display: block"] div[id$="_results"] .thumbnail-item > img');
 
     if (galleryPreviews == null) return;
 
diff --git a/javascript/ui.js b/javascript/ui.js
index 7aa30dc1..a73eeaa2 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -7,9 +7,31 @@ function set_theme(theme){
     }
 }
 
+function all_gallery_buttons() {
+    var allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
+    var visibleGalleryButtons = [];
+    allGalleryButtons.forEach(function(elem) {
+        if (elem.parentElement.offsetParent) {
+            visibleGalleryButtons.push(elem);
+        }
+    })
+    return visibleGalleryButtons;
+}
+
+function selected_gallery_button() {
+    var allCurrentButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected');
+    var visibleCurrentButton = null;
+    allCurrentButtons.forEach(function(elem) {
+        if (elem.parentElement.offsetParent) {
+            visibleCurrentButton = elem;
+        }
+    })
+    return visibleCurrentButton;
+}
+
 function selected_gallery_index(){
-    var buttons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery] .thumbnails > .thumbnail-item')
-    var button = gradioApp().querySelector('[style="display: block;"].tabitem div[id$=_gallery] .thumbnails > .thumbnail-item.selected')
+    var buttons = all_gallery_buttons();
+    var button = selected_gallery_button();
 
     var result = -1
     buttons.forEach(function(v, i){ if(v==button) { result = i } })
@@ -18,14 +40,18 @@ function selected_gallery_index(){
 }
 
 function extract_image_from_gallery(gallery){
-    if(gallery.length == 1){
-        return [gallery[0]]
+    if (gallery.length == 0){
+        return [null];
+    }
+    if (gallery.length == 1){
+        return [gallery[0]];
     }
 
     index = selected_gallery_index()
 
     if (index < 0 || index >= gallery.length){
-        return [null]
+        // Use the first image in the gallery as the default
+        index = 0;
     }
 
     return [gallery[index]];