From a0d721e109d7c7b75aefaf3853f7bf58da43847b Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 20 Aug 2023 13:00:59 +0300 Subject: make live preview display work independently from progress bar --- javascript/progressbar.js | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) (limited to 'javascript/progressbar.js') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 29299787..8a339982 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -93,8 +93,8 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre atEnd(); }; - var fun = function(id_task, id_live_preview) { - request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) { + var funProgress = function(id_task) { + request("./internal/progress", {id_task: id_task, live_preview: false}, function(res) { if (res.completed) { removeProgressBar(); return; @@ -119,7 +119,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre progressText += " ETA: " + formatTime(res.eta); } - setTitle(progressText); if (res.textinfo && res.textinfo.indexOf("\n") == -1) { @@ -142,7 +141,20 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre return; } + if (onProgress) { + onProgress(res); + } + + setTimeout(() => { + funProgress(id_task, res.id_live_preview); + }, opts.live_preview_refresh_period || 500); + }, function() { + removeProgressBar(); + }); + } + var funLivePreview = function(id_task, id_live_preview) { + request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) { if (res.live_preview && gallery) { rect = gallery.getBoundingClientRect(); if (rect.width) { @@ -160,18 +172,14 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre img.src = res.live_preview; } - - if (onProgress) { - onProgress(res); - } - setTimeout(() => { - fun(id_task, res.id_live_preview); + funLivePreview(id_task, res.id_live_preview); }, opts.live_preview_refresh_period || 500); }, function() { removeProgressBar(); }); }; - fun(id_task, 0); + funProgress(id_task, 0); + funLivePreview(id_task, 0); } -- cgit v1.2.3 From db5c304e2968b5c16810900b9a63cfcf7e205e20 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 20 Aug 2023 13:38:35 +0300 Subject: make live previews play nice with window/slider resizes --- extensions-builtin/mobile/javascript/mobile.js | 2 ++ javascript/progressbar.js | 21 ++++----------------- style.css | 17 +++++++++-------- 3 files changed, 15 insertions(+), 25 deletions(-) (limited to 'javascript/progressbar.js') diff --git a/extensions-builtin/mobile/javascript/mobile.js b/extensions-builtin/mobile/javascript/mobile.js index 12cae4b7..1b835a51 100644 --- a/extensions-builtin/mobile/javascript/mobile.js +++ b/extensions-builtin/mobile/javascript/mobile.js @@ -20,6 +20,8 @@ function reportWindowSize() { var button = gradioApp().getElementById(tab + '_generate_box'); var target = gradioApp().getElementById(currentlyMobile ? tab + '_results' : tab + '_actions_column'); target.insertBefore(button, target.firstElementChild); + + gradioApp().getElementById(tab + '_results').classList.toggle('mobile', currentlyMobile); } } diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 8a339982..a7c69937 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -69,7 +69,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre var dateStart = new Date(); var wasEverActive = false; var parentProgressbar = progressbarContainer.parentNode; - var parentGallery = gallery ? gallery.parentNode : null; var divProgress = document.createElement('div'); divProgress.className = 'progressDiv'; @@ -80,16 +79,16 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre divProgress.appendChild(divInner); parentProgressbar.insertBefore(divProgress, progressbarContainer); - if (parentGallery) { + if (gallery) { var livePreview = document.createElement('div'); livePreview.className = 'livePreview'; - parentGallery.insertBefore(livePreview, gallery); + gallery.insertBefore(livePreview, gallery.firstElementChild); } var removeProgressBar = function() { setTitle(""); parentProgressbar.removeChild(divProgress); - if (parentGallery) parentGallery.removeChild(livePreview); + if (gallery) gallery.removeChild(livePreview); atEnd(); }; @@ -100,12 +99,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre return; } - var rect = progressbarContainer.getBoundingClientRect(); - - if (rect.width) { - divProgress.style.width = rect.width + "px"; - } - let progressText = ""; divInner.style.width = ((res.progress || 0) * 100.0) + '%'; @@ -151,17 +144,11 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre }, function() { removeProgressBar(); }); - } + }; var funLivePreview = function(id_task, id_live_preview) { request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) { if (res.live_preview && gallery) { - rect = gallery.getBoundingClientRect(); - if (rect.width) { - livePreview.style.width = rect.width + "px"; - livePreview.style.height = rect.height + "px"; - } - var img = new Image(); img.onload = function() { livePreview.appendChild(img); diff --git a/style.css b/style.css index 38a01e72..5cd9f9c2 100644 --- a/style.css +++ b/style.css @@ -499,11 +499,15 @@ table.popup-table .link{ /* live preview */ .progressDiv{ - position: relative; + position: absolute; height: 20px; background: #b4c0cc; border-radius: 3px !important; - margin-bottom: -3px; + top: -20px; +} + +[id$=_results].mobile{ + margin-top: 28px; } .dark .progressDiv{ @@ -528,12 +532,9 @@ table.popup-table .link{ .livePreview{ position: absolute; z-index: 300; - background-color: white; - margin: -4px; -} - -.dark .livePreview{ - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); + background: var(--background-fill-primary); + width: 100%; + height: 100%; } .livePreview img{ -- cgit v1.2.3 From f6c52f4f41f4afe306b5adc90ba81feeca238e1a Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Tue, 22 Aug 2023 11:02:14 +0300 Subject: for live previews, only hide gallery after at least one live previews pic has been received fix blinking for live previews fix a clientside live previews exception that happens when you kill serverside during sampling match the size of live preview image to gallery image --- javascript/progressbar.js | 24 ++++++++++++++++++------ style.css | 2 +- 2 files changed, 19 insertions(+), 7 deletions(-) (limited to 'javascript/progressbar.js') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index a7c69937..4a95077e 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -79,17 +79,17 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre divProgress.appendChild(divInner); parentProgressbar.insertBefore(divProgress, progressbarContainer); - if (gallery) { - var livePreview = document.createElement('div'); - livePreview.className = 'livePreview'; - gallery.insertBefore(livePreview, gallery.firstElementChild); - } + var livePreview = null; var removeProgressBar = function() { + if(! divProgress) return; + setTitle(""); parentProgressbar.removeChild(divProgress); if (gallery) gallery.removeChild(livePreview); atEnd(); + + divProgress = null; }; var funProgress = function(id_task) { @@ -149,8 +149,16 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre var funLivePreview = function(id_task, id_live_preview) { request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) { if (res.live_preview && gallery) { + + var img = new Image(); img.onload = function() { + if(!livePreview){ + livePreview = document.createElement('div'); + livePreview.className = 'livePreview'; + gallery.insertBefore(livePreview, gallery.firstElementChild); + } + livePreview.appendChild(img); if (livePreview.childElementCount > 2) { livePreview.removeChild(livePreview.firstElementChild); @@ -168,5 +176,9 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre }; funProgress(id_task, 0); - funLivePreview(id_task, 0); + + if(gallery){ + funLivePreview(id_task, 0); + } + } diff --git a/style.css b/style.css index 4166a3df..cb12e036 100644 --- a/style.css +++ b/style.css @@ -541,7 +541,7 @@ table.popup-table .link{ position: absolute; object-fit: contain; width: 100%; - height: 100%; + height: calc(100% - 60px); /* to match gradio's height */ } /* fullscreen popup (ie in Lora's (i) button) */ -- cgit v1.2.3 From 9158d0fd1215bb93358e6c58395c08d4ffe011f2 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Tue, 22 Aug 2023 13:54:45 +0300 Subject: fix broken generate button if not using live previews --- javascript/progressbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript/progressbar.js') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 4a95077e..160813fc 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -86,7 +86,7 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre setTitle(""); parentProgressbar.removeChild(divProgress); - if (gallery) gallery.removeChild(livePreview); + if (gallery && livePreview) gallery.removeChild(livePreview); atEnd(); divProgress = null; -- cgit v1.2.3 From 0d90064e9e00612b1e065eba4e7b394e7892af34 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Tue, 22 Aug 2023 13:57:05 +0300 Subject: eslint --- javascript/localization.js | 25 ++++++++++--------------- javascript/progressbar.js | 6 +++--- 2 files changed, 13 insertions(+), 18 deletions(-) (limited to 'javascript/progressbar.js') diff --git a/javascript/localization.js b/javascript/localization.js index 26f21bcf..8f00c186 100644 --- a/javascript/localization.js +++ b/javascript/localization.js @@ -107,33 +107,28 @@ function processNode(node) { }); } -function localizeWholePage(){ +function localizeWholePage() { processNode(gradioApp()); function elem(comp) { - if(comp.props.elem_id) { - elem_id = comp.props.elem_id; - } else{ - elem_id = "component-" + comp.id; - } - + var elem_id = comp.props.elem_id ? comp.props.elem_id : "component-" + comp.id; return gradioApp().getElementById(elem_id); } - for(comp of window.gradio_config.components) { - if(comp.props.webui_tooltip) { - var e = elem(comp); + for (var comp of window.gradio_config.components) { + if (comp.props.webui_tooltip) { + let e = elem(comp); - var tl = e ? getTranslation(e.title) : undefined; + let tl = e ? getTranslation(e.title) : undefined; if (tl !== undefined) { e.title = tl; } } - if(comp.props.placeholder) { - var e = elem(comp); - var textbox = e ? e.querySelector('[placeholder]') : null; + if (comp.props.placeholder) { + let e = elem(comp); + let textbox = e ? e.querySelector('[placeholder]') : null; - var tl = textbox ? getTranslation(textbox.placeholder) : undefined; + let tl = textbox ? getTranslation(textbox.placeholder) : undefined; if (tl !== undefined) { textbox.placeholder = tl; } diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 160813fc..531ac831 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -82,7 +82,7 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre var livePreview = null; var removeProgressBar = function() { - if(! divProgress) return; + if (!divProgress) return; setTitle(""); parentProgressbar.removeChild(divProgress); @@ -153,7 +153,7 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre var img = new Image(); img.onload = function() { - if(!livePreview){ + if (!livePreview) { livePreview = document.createElement('div'); livePreview.className = 'livePreview'; gallery.insertBefore(livePreview, gallery.firstElementChild); @@ -177,7 +177,7 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre funProgress(id_task, 0); - if(gallery){ + if (gallery) { funLivePreview(id_task, 0); } -- cgit v1.2.3 From 04cfcf91d9a53332b97ba512e86259a59ab4182f Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Tue, 22 Aug 2023 21:05:25 +0300 Subject: fix endless progress requests --- javascript/progressbar.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'javascript/progressbar.js') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 531ac831..77761495 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -148,9 +148,11 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre var funLivePreview = function(id_task, id_live_preview) { request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) { - if (res.live_preview && gallery) { - + if (!divProgress) { + return; + } + if (res.live_preview && gallery) { var img = new Image(); img.onload = function() { if (!livePreview) { -- cgit v1.2.3