diff --git a/javascript/progressbar.js b/javascript/progressbar.js index a7c69937d..4a95077ea 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 4166a3df1..cb12e036b 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) */