Merge branch 'master' into ckpt-cache

1 files changed, 35 insertions, 0 deletions

diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index 4395a215..076f0a97 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -1,5 +1,7 @@
 // code related to showing and updating progressbar shown as the image is being made
 global_progressbars = {}
+galleries = {}
+galleryObservers = {}
 
 function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip, id_interrupt, id_preview, id_gallery){
     var progressbar = gradioApp().getElementById(id_progressbar)
@@ -31,13 +33,24 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip
                 preview.style.width = gallery.clientWidth + "px"
                 preview.style.height = gallery.clientHeight + "px"
 
+				//only watch gallery if there is a generation process going on
+                check_gallery(id_gallery);    
+
                 var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0;
                 if(!progressDiv){
                     if (skip) {
                         skip.style.display = "none"
                     }
                     interrupt.style.display = "none"
+			
+                    //disconnect observer once generation finished, so user can close selected image if they want
+                    if (galleryObservers[id_gallery]) {
+                        galleryObservers[id_gallery].disconnect();
+                        galleries[id_gallery] = null;
+                    }    
                 }
+
+
             }
 
             window.setTimeout(function() { requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt) }, 500)
@@ -46,6 +59,28 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip
 	}
 }
 
+function check_gallery(id_gallery){
+    let gallery = gradioApp().getElementById(id_gallery)
+    // if gallery has no change, no need to setting up observer again.
+    if (gallery && galleries[id_gallery] !== gallery){
+        galleries[id_gallery] = gallery;
+        if(galleryObservers[id_gallery]){
+            galleryObservers[id_gallery].disconnect();
+        }
+        let prevSelectedIndex = selected_gallery_index();
+        galleryObservers[id_gallery] = new MutationObserver(function (){
+            let galleryButtons = gradioApp().querySelectorAll('#'+id_gallery+' .gallery-item')
+            let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2')
+            if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) {
+                //automatically re-open previously selected index (if exists)
+                galleryButtons[prevSelectedIndex].click();
+		showGalleryImage();
+            }
+        })
+        galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false })
+    }
+}
+
 onUiUpdate(function(){
     check_progressbar('txt2img', 'txt2img_progressbar', 'txt2img_progress_span', 'txt2img_skip', 'txt2img_interrupt', 'txt2img_preview', 'txt2img_gallery')
     check_progressbar('img2img', 'img2img_progressbar', 'img2img_progress_span', 'img2img_skip', 'img2img_interrupt', 'img2img_preview', 'img2img_gallery')