redo progressbar

javascript/black-orange.css

@@ -75,7 +75,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 #txt2img_prompt, #txt2img_neg_prompt, #img2img_prompt, #img2img_neg_prompt { background-color: black; box-shadow: 4px 4px 4px 0px #333333  !important; }
 #txt2img_prompt > label > textarea, #txt2img_neg_prompt > label > textarea, #img2img_prompt > label > textarea, #img2img_neg_prompt > label > textarea { font-size: 1.2rem; }
 #img2img_settings { min-width: calc(2 * var(--left-column)); max-width: calc(2 * var(--left-column)); background-color: #111111; padding-top: 16px; }
-#interrogate, #deepbooru { margin: 16px 0px 16px 0px; max-width: 100px; max-height: 74px; font-weight: normal; font-size: 14px; }
+#interrogate, #deepbooru { margin: 0 0px 10px 0px; max-width: 80px; max-height: 80px; font-weight: normal; font-size: 0.95em; }
 #lightboxModal { background-color: rgba(20, 20, 20, 0.8) }
 #quicksettings .gr-button-tool { font-size: 1.6rem; box-shadow: none; margin-left: -20px; margin-top: -2px; height: 2.4em; }
 #quicksettings > div, #quicksettings > fieldset { min-width: 24em; max-width: 26em; line-height: 2em; }

javascript/extensions.js

@@ -16,11 +16,7 @@ function extensions_check(info, extensions_disabled_list, search_text, sort_colu
   gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach((x) => {
     if (x.name.startsWith('enable_') && !x.checked) disable.push(x.name.substring(7));
   });
-  // gradioApp().querySelectorAll('#extensions .extension_status').forEach((x) => {
-  //    x.innerHTML = 'Loading...';
-  // });
   const id = randomId();
-  // requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, null, null, false);
   return [id, JSON.stringify(disable), search_text, sort_column];
 }
 

javascript/progressbar.js

@@ -1,4 +1,6 @@
 /* global opts */
+let lastState = {};
+
 function rememberGallerySelection(id_gallery) {}
 
 function getGallerySelectedIndex(id_gallery) {}
@@ -36,98 +38,80 @@ function formatTime(secs) {
   return `${Math.floor(secs)}s`;
 }
 
-function setTitle(progress) {
-  let title = 'SD.Next';
-  if (progress) title += ` ${progress.split(' ')[0].trim()}`;
-  if (document.title != title) document.title = title;
+function checkPaused(state) {
+  lastState.paused = state ? !state : !lastState.paused;
+  document.getElementById('txt2img_pause').innerText = lastState.paused ? 'Resume' : 'Pause'
+  document.getElementById('img2img_pause').innerText = lastState.paused ? 'Resume' : 'Pause'
+}
+
+function setProgress(res) {
+  elements = ['txt2img_generate', 'img2img_generate', 'extras_generate']
+  perc = res ? `${Math.round((res?.progress || 0) * 100.0)}%` : ''
+  eta = res?.paused ? ' Paused' : ` ETA: ${Math.round(res?.eta || 0)}s`;
+  document.title = 'SD.Next ' + perc;
+  for (elId of elements) {
+    el = document.getElementById(elId);
+    el.innerText = res
+      ? perc + eta
+      : 'Generate';
+    el.style.background = res 
+      ? `linear-gradient(to right, var(--primary-500) 0%, var(--primary-800) ${perc}, var(--neutral-700) ${perc})`
+      : 'var(--button-primary-background-fill)'
+  }
 }
 
 function randomId() {
   return `task(${Math.random().toString(36).slice(2, 7)}${Math.random().toString(36).slice(2, 7)}${Math.random().toString(36).slice(2, 7)})`;
 }
 
-// starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and
-// preview inside gallery element. Cleans up all created stuff when the task is over and calls atEnd.
-// calls onProgress every time there is a progress update
-function requestProgress(id_task, progressbarContainer, gallery, atEnd = null, onProgress = null, once = false) {
+// starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and preview inside gallery element
+// Cleans up all created stuff when the task is over and calls atEnd. calls onProgress every time there is a progress update
+function requestProgress(id_task, gallery, atEnd = null, onProgress = null, once = false) {
+  localStorage.setItem('task', id_task);
   let hasStarted = false;
   const dateStart = new Date();
   const prevProgress = null;
-  const parentProgressbar = progressbarContainer.parentNode;
   const parentGallery = gallery ? gallery.parentNode : null;
-  const divProgress = document.createElement('div');
-  divProgress.className = 'progressDiv';
-  divProgress.id = 'progressbar';
-  divProgress.style.display = opts.show_progressbar ? 'block' : 'none';
-  const divInner = document.createElement('div');
-  divInner.className = 'progress';
-  divProgress.appendChild(divInner);
-  parentProgressbar.insertBefore(divProgress, progressbarContainer);
-  localStorage.setItem('task', id_task);
   let livePreview;
+  const img = new Image();
   if (parentGallery) {
     livePreview = document.createElement('div');
     livePreview.className = 'livePreview';
     parentGallery.insertBefore(livePreview, gallery);
+    const rect = gallery.getBoundingClientRect();
+    if (rect.width) {
+      livePreview.style.width = `${rect.width}px`;
+      livePreview.style.height = `${rect.height}px`;
+    }
+    img.onload = function () {
+      livePreview.appendChild(img);
+      if (livePreview.childElementCount > 2) livePreview.removeChild(livePreview.firstElementChild);
+    };
   }
 
-  const removeProgressBar = function () {
+  const done = function () {
     console.debug('task end:   ', id_task);
     localStorage.removeItem('task');
-    setTitle('');
-    if (divProgress) parentProgressbar.removeChild(divProgress);
-    if (parentGallery) parentGallery.removeChild(livePreview);
+    setProgress();
+    if (parentGallery && livePreview) parentGallery.removeChild(livePreview);
+    checkPaused(true);
     if (atEnd) atEnd();
   };
 
-  const fun = function (id_task, id_live_preview) {
+  const start = function (id_task, id_live_preview) {
     request('./internal/progress', { id_task, id_live_preview }, (res) => {
+      lastState = res;
       const elapsedFromStart = (new Date() - dateStart) / 1000;
-      if (res.completed) {
-        removeProgressBar();
-        return;
-      }
-      var rect = progressbarContainer.getBoundingClientRect();
-      if (rect.width) divProgress.style.width = `${rect.width}px`;
-      progressText = '';
-      divInner.style.width = `${(res.progress || 0) * 100.0}%`;
-      divInner.style.background = res.progress ? '' : 'transparent';
-      if (res.progress > 0) progressText = `${((res.progress || 0) * 100.0).toFixed(0)}%`;
-      if (res.eta) progressText += ` ETA: ${formatTime(res.eta)}`;
-      setTitle(progressText);
-      if (res.textinfo && res.textinfo.indexOf('\n') == -1) progressText = `${res.textinfo} ${progressText}`;
-      divInner.textContent = progressText;
       hasStarted |= res.active;
-      if (!res.active && (hasStarted || once)) {
-        removeProgressBar();
+      if (res.completed || (!res.active && (hasStarted || once)) || (elapsedFromStart > 30 && !res.queued && res.progress == prevProgress)) {
+        done();
         return;
       }
-      if (res.completed) {
-        removeProgressBar();
-        return;
-      }
-      if (elapsedFromStart > 30 && !res.queued && res.progress == prevProgress) {
-        removeProgressBar();
-        return;
-      }
-      if (res.live_preview && gallery) {
-        var rect = gallery.getBoundingClientRect();
-        if (rect.width) {
-          livePreview.style.width = `${rect.width}px`;
-          livePreview.style.height = `${rect.height}px`;
-        }
-        const img = new Image();
-        img.onload = function () {
-          livePreview.appendChild(img);
-          if (livePreview.childElementCount > 2) livePreview.removeChild(livePreview.firstElementChild);
-        };
-        img.src = res.live_preview;
-      }
+      setProgress(res);
+      if (res.live_preview && gallery) img.src = res.live_preview;
       if (onProgress) onProgress(res);
-      setTimeout(() => fun(id_task, res.id_live_preview), opts.live_preview_refresh_period || 250);
-    }, () => {
-      removeProgressBar();
-    });
+      setTimeout(() => start(id_task, res.id_live_preview), opts.live_preview_refresh_period || 250);
+    }, done);
   };
-  fun(id_task, 0);
+  start(id_task, 0);
 }

javascript/style.css

@@ -102,9 +102,9 @@ footer { display: none !important; }
 
 #txt2img_gallery img, #img2img_gallery img, #extras_gallery img { object-fit: scale-down; width: -webkit-fill-available !important; }
 #txt2img_actions_column, #img2img_actions_column { gap: 0.5em; }
-#txt2img_generate_line1 > button, #img2img_generate_line1 > button { height: 2.2em; line-height: 0; }
+#txt2img_generate_box > button, #img2img_generate_box > button { height: 2.2em; line-height: 0; }
+#txt2img_generate_line2, #img2img_generate_line2 { display: flex; }
 #txt2img_generate_line2 > button, #img2img_generate_line2 > button, #extras_generate_box > button { height: 2.2em; line-height: 0; min-width: unset; display: block !important; }
-#txt2img_generate_line2 { display: flex; }
 #txt2img_tools > div, #img2img_tools > div { justify-content: space-around; margin-top: 0.5em; margin-bottom: 0em; }
 #txt2img_tools > div > button, #img2img_tools > div > button { scale: 120%; }
 #refresh_txt2img_styles, #refresh_img2img_styles { height: 2.46em; margin-left: -8px; }

javascript/textualInversion.js

@@ -2,8 +2,7 @@ function start_training_textual_inversion() {
   gradioApp().querySelector('#ti_error').innerHTML=''
   var id = randomId()
   const onProgress = (progress) => gradioApp().getElementById('ti_progress').innerHTML = progress.textinfo;
-  // requestProgress(id_task, progressbarContainer, gallery, atEnd = null, onProgress = null, once = false) {
-  requestProgress(id, gradioApp().getElementById('ti_output'), gradioApp().getElementById('ti_gallery'), null, onProgress, false)
+  requestProgress(id, gradioApp().getElementById('ti_gallery'), null, onProgress, false)
   var res = args_to_array(arguments)
   res[0] = id
   return res

javascript/ui.js

@@ -118,20 +118,11 @@ function create_submit_args(args) {
   return res;
 }
 
-function showSubmitButtons(tabname, show) {
-  // gradioApp().getElementById(`${tabname}_interrupt`).style.display = show ? 'none' : 'block';
-  // gradioApp().getElementById(`${tabname}_skip`).style.display = show ? 'none' : 'block';
-  // gradioApp().getElementById(tabname+'_interrupt').style.display = "block"
-  // gradioApp().getElementById(tabname+'_skip').style.display = "block"
-}
-
 function submit(...args) {
   console.log('submit txt2img:', args);
   rememberGallerySelection('txt2img_gallery');
-  showSubmitButtons('txt2img', false);
   const id = randomId();
-  const atEnd = () => showSubmitButtons('txt2img', true);
-  requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), atEnd);
+  requestProgress(id, gradioApp().getElementById('txt2img_gallery'));
   const res = create_submit_args(args);
   res[0] = id;
   return res;
@@ -140,10 +131,8 @@ function submit(...args) {
 function submit_img2img(...args) {
   console.log('submit img2img:', args);
   rememberGallerySelection('img2img_gallery');
-  showSubmitButtons('img2img', false);
   const id = randomId();
-  const atEnd = () => showSubmitButtons('img2img', true);
-  requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), atEnd);
+  requestProgress(id, gradioApp().getElementById('img2img_gallery'));
   const res = create_submit_args(args);
   res[0] = id;
   res[1] = get_tab_index('mode_img2img');
@@ -152,7 +141,6 @@ function submit_img2img(...args) {
 
 function modelmerger(...args) {
   const id = randomId();
-  requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null);
   const res = create_submit_args(args);
   res[0] = id;
   return res;
@@ -429,17 +417,14 @@ function reconnect_ui() {
   const api_logo = Array.from(gradioApp().querySelectorAll('img')).filter((el) => el?.src?.endsWith('api-logo.svg'));
   if (api_logo.length > 0) api_logo[0].remove();
 
-  const el1 = gradioApp().getElementById('txt2img_gallery_container');
-  const el2 = gradioApp().getElementById('txt2img_gallery');
+  const gallery = gradioApp().getElementById('txt2img_gallery');
   const task_id = localStorage.getItem('task');
-  if (!el1 || !el2) return;
+  if (!gallery) return;
   clearInterval(start_check);
   if (task_id) {
     console.debug('task check:', task_id);
     rememberGallerySelection('txt2img_gallery');
-    showSubmitButtons('txt2img', false);
-    const atEnd = () => showSubmitButtons('txt2img', true);
-    requestProgress(task_id, el1, el2, atEnd, null, true);
+    requestProgress(task_id, gallery, null, null, true);
   }
 
   const sd_model = gradioApp().getElementById('setting_sd_model_checkpoint');