diff options
| -rw-r--r-- | javascript/progressbar.js | 30 | ||||
| -rw-r--r-- | modules/ui.py | 5 | ||||
| -rw-r--r-- | requirements.txt | 2 | ||||
| -rw-r--r-- | requirements_versions.txt | 2 | ||||
| -rw-r--r-- | style.css | 10 |
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
@@ -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;
|