switch to gradio 3.8

5 files changed, 38 insertions, 11 deletions

diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index 7a05726e..671fde34 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -3,8 +3,21 @@ global_progressbars = {}
 galleries = {}
 galleryObservers = {}
 
+// this tracks laumnches of window.setTimeout for progressbar to prevent starting a new timeout when the previous is still running
+timeoutIds = {}
+
 function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip, id_interrupt, id_preview, id_gallery){
-    var progressbar = gradioApp().getElementById(id_progressbar)
+    // gradio 3.8's enlightened approach allows them to create two nested div elements inside each other with same id
+    // every time you use gr.HTML(elem_id='xxx'), so we handle this here
+    var progressbar = gradioApp().querySelector("#"+id_progressbar+" #"+id_progressbar)
+    var progressbarParent
+    if(progressbar){
+        progressbarParent = gradioApp().querySelector("#"+id_progressbar)
+    } else{
+        progressbar = gradioApp().getElementById(id_progressbar)
+        progressbarParent = null
+    }
+
     var skip = id_skip ? gradioApp().getElementById(id_skip) : null
     var interrupt = gradioApp().getElementById(id_interrupt)
     
@@ -26,18 +39,26 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip
 	    global_progressbars[id_progressbar] = progressbar
 
         var mutationObserver = new MutationObserver(function(m){
+            if(timeoutIds[id_part]) return;
+
             preview = gradioApp().getElementById(id_preview)
             gallery = gradioApp().getElementById(id_gallery)
 
             if(preview != null && gallery != null){
                 preview.style.width = gallery.clientWidth + "px"
                 preview.style.height = gallery.clientHeight + "px"
+                if(progressbarParent) progressbar.style.width = progressbarParent.clientWidth + "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(progressDiv){
+                    timeoutIds[id_part] = window.setTimeout(function() {
+                        timeoutIds[id_part] = null
+                        requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt)
+                    }, 500)
+                } else{
                     if (skip) {
                         skip.style.display = "none"
                     }
@@ -47,13 +68,10 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip
                     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)
         });
         mutationObserver.observe( progressbar, { childList:true, subtree:true })
 	}
diff --git a/modules/ui.py b/modules/ui.py
index a94f46ea..45cd8c3f 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -1572,8 +1572,7 @@ def create_ui(wrap_gradio_gpu_call):
         reload_script_bodies.click(

             fn=reload_scripts,

             inputs=[],

-            outputs=[],

-            _js='function(){}'

+            outputs=[]

         )

 

         def request_restart():

@@ -1585,7 +1584,7 @@ def create_ui(wrap_gradio_gpu_call):
             fn=request_restart,

             inputs=[],

             outputs=[],

-            _js='function(){restart_reload()}'

+            _js='restart_reload'

         )

 

         if column is not None:

diff --git a/requirements.txt b/requirements.txt
index a53522f3..79e8b7c6 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -4,7 +4,7 @@ fairscale==0.4.4
 fonts

 font-roboto

 gfpgan

-gradio==3.5

+gradio==3.8

 invisible-watermark

 numpy

 omegaconf

diff --git a/requirements_versions.txt b/requirements_versions.txt
index 41f2501f..7bd16712 100644
--- a/requirements_versions.txt
+++ b/requirements_versions.txt
@@ -2,7 +2,7 @@ transformers==4.19.2
 diffusers==0.3.0

 basicsr==1.4.2

 gfpgan==1.3.8

-gradio==3.5

+gradio==3.8

 numpy==1.23.3

 Pillow==9.2.0

 realesrgan==0.3.0

diff --git a/style.css b/style.css
index dfef0dc5..e53079e0 100644
--- a/style.css
+++ b/style.css
@@ -260,6 +260,16 @@ input[type="range"]{
 #txt2img_negative_prompt, #img2img_negative_prompt{

 }

 

+/* gradio 3.8 adds opacity to progressbar which makes it blink; disable it here */

+.transition.opacity-20 {

+  opacity: 1 !important;

+}

+

+/* more gradio's garbage cleanup */

+.min-h-\[4rem\] {

+  min-height: unset !important;

+}

+

 #txt2img_progressbar, #img2img_progressbar, #ti_progressbar{

   position: absolute;

   z-index: 1000;