1 files changed, 28 insertions, 29 deletions

diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index ce0f0df3..afd384d3 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -1,53 +1,52 @@
 // code related to showing and updating progressbar shown as the image is being made
-global_progressbar = null
+global_progressbars = {}
 
-onUiUpdate(function(){
-    progressbar = gradioApp().getElementById('progressbar')
-    progressDiv = gradioApp().querySelectorAll('#progressSpan').length > 0;
-    interrupt = gradioApp().getElementById('interrupt')
-	if(progressbar!= null && progressbar != global_progressbar){
-	    global_progressbar = progressbar
+function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_interrupt, id_preview, id_gallery){
+    var progressbar = gradioApp().getElementById(id_progressbar)
+    var interrupt = gradioApp().getElementById(id_interrupt)
+	if(progressbar!= null && progressbar != global_progressbars[id_progressbar]){
+	    global_progressbars[id_progressbar] = progressbar
 
         var mutationObserver = new MutationObserver(function(m){
-            txt2img_preview = gradioApp().getElementById('txt2img_preview')
-            txt2img_gallery = gradioApp().getElementById('txt2img_gallery')
-            img2img_preview = gradioApp().getElementById('img2img_preview')
-            img2img_gallery = gradioApp().getElementById('img2img_gallery')
-
-            if(txt2img_preview != null && txt2img_gallery != null){
-                txt2img_preview.style.width = txt2img_gallery.clientWidth + "px"
-                txt2img_preview.style.height = txt2img_gallery.clientHeight + "px"  
-                if(!progressDiv){
-                    interrupt.style.display = "none"
-                }
-            }
+            preview = gradioApp().getElementById(id_preview)
+            gallery = gradioApp().getElementById(id_gallery)
 
-            if(img2img_preview != null && img2img_gallery != null){
-                img2img_preview.style.width = img2img_gallery.clientWidth + "px"
-                img2img_preview.style.height = img2img_gallery.clientHeight + "px" 
+            if(preview != null && gallery != null){
+                preview.style.width = gallery.clientWidth + "px"
+                preview.style.height = gallery.clientHeight + "px"
+
+                var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0;
                 if(!progressDiv){
                     interrupt.style.display = "none"
                 }
             }
 
-            window.setTimeout(requestMoreProgress, 500)
+            window.setTimeout(function(){ requestMoreProgress(id_part, id_progressbar_span, id_interrupt) }, 500)
         });
         mutationObserver.observe( progressbar, { childList:true, subtree:true })
 	}
+}
+
+onUiUpdate(function(){
+    check_progressbar('txt2img', 'txt2img_progressbar', 'txt2img_progress_span', 'txt2img_interrupt', 'txt2img_preview', 'txt2img_gallery')
+    check_progressbar('img2img', 'img2img_progressbar', 'img2img_progress_span', 'img2img_interrupt', 'img2img_preview', 'img2img_gallery')
 })
-function requestMoreProgress(){
-    btn = gradioApp().getElementById("check_progress");
+
+function requestMoreProgress(id_part, id_progressbar_span, id_interrupt){
+    btn = gradioApp().getElementById(id_part+"_check_progress");
     if(btn==null) return;
 
     btn.click();
-    progressDiv = gradioApp().querySelectorAll('#progressSpan').length > 0;
-    if(progressDiv){
+    var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0;
+    var interrupt = gradioApp().getElementById(id_interrupt)
+    console.log(progressDiv, interrupt)
+    if(progressDiv && interrupt){
         interrupt.style.display = "block"
     }
 }
 
-function requestProgress(){
-    btn = gradioApp().getElementById("check_progress_initial");
+function requestProgress(id_part){
+    btn = gradioApp().getElementById(id_part+"_check_progress_initial");
     if(btn==null) return;
 
     btn.click();