Merge pull request #4522 from awsr/gallery-progress

Loading progress indicator for gallery

javascript/gallery.js

@@ -107,6 +107,83 @@ function updateGalleryStyles() {
 
 // Classes
 
+class SimpleProgressBar {
+  #container = document.createElement('div');
+  #progress = document.createElement('div');
+  #textDiv = document.createElement('div');
+  #text = document.createElement('span');
+  #visible = false;
+  #hideTimeout = null;
+  #interval = null;
+  #max = 0;
+  /** @type {Set} */
+  #monitoredSet;
+
+  constructor(monitoredSet) {
+    this.#monitoredSet = monitoredSet; // This is required because incrementing a variable with a class method turned out to not be an atomic operation
+    this.#container.style.cssText = 'position:relative;overflow:hidden;border-radius:var(--sd-border-radius);width:100%;background-color:hsla(0,0%,36%,0.3);height:1.2rem;margin:0;padding:0;display:none;';
+    this.#progress.style.cssText = 'position:absolute;left:0;height:100%;width:0;transition:width 200ms;';
+    this.#progress.style.backgroundColor = 'hsla(110, 32%, 35%, 0.80)'; // alt: '#27911d'
+    this.#textDiv.style.cssText = 'position:relative;margin:auto;width:max-content;height:100%;';
+    this.#text.style.cssText = 'user-select:none;color:white;';
+
+    this.#textDiv.append(this.#text);
+    this.#container.append(this.#progress, this.#textDiv);
+  }
+
+  start(total) {
+    this.clear();
+    this.#max = total;
+    this.#interval = setInterval(() => {
+      this.#update(this.#monitoredSet.size, this.#max);
+    }, 250);
+  }
+
+  attachTo(element) {
+    if (element.hasChildNodes) {
+      element.innerHTML = '';
+    }
+    element.appendChild(this.#container);
+  }
+
+  clear() {
+    this.#stop();
+    clearTimeout(this.#hideTimeout);
+    this.#hideTimeout = null;
+    this.#container.style.display = 'none';
+    this.#visible = false;
+    this.#progress.style.width = '0';
+    this.#text.textContent = '';
+  }
+
+  #update(loaded, max) {
+    if (this.#hideTimeout) {
+      this.#hideTimeout = null;
+    }
+
+    this.#progress.style.width = `${Math.floor((loaded / max) * 100)}%`;
+    this.#text.textContent = `${loaded}/${max}`;
+
+    if (!this.#visible) {
+      this.#container.style.display = 'block';
+      this.#visible = true;
+    }
+    if (loaded >= max) {
+      this.#stop();
+      this.#hideTimeout = setTimeout(() => {
+        this.clear();
+      }, 1000);
+    }
+  }
+
+  #stop() {
+    clearInterval(this.#interval);
+    this.#interval = null;
+  }
+}
+
+const galleryProgressBar = new SimpleProgressBar(galleryHashes);
+
 /* This isn't as robust as the Web Locks API, but it will at least work if accessing a remote machine without HTTPS */
 class SimpleFunctionQueue {
   #id;
@@ -855,11 +932,13 @@ async function fetchFilesHT(evt, controller) {
     }
   }
 
+  if (controller.signal.aborted) return;
   el.files.appendChild(fragment);
 
   const t1 = performance.now();
   log(`gallery: folder=${evt.target.name} num=${numFiles} time=${Math.floor(t1 - t0)}ms`);
   updateStatusWithSort(['Folder', evt.target.name], ['Images', numFiles.toLocaleString()], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`);
+  galleryProgressBar.start(numFiles);
   addSeparators();
   thumbCacheCleanup(evt.target.name, numFiles, controller);
 }
@@ -870,6 +949,7 @@ async function fetchFilesWS(evt) { // fetch file-by-file list over websockets
   maintenanceController.abort('Gallery update'); // Abort previous controller
   maintenanceController = controller; // Point to new controller for next time
   galleryHashes.clear(); // Must happen AFTER the AbortController steps
+  galleryProgressBar.clear();
 
   el.files.innerHTML = '';
   updateGalleryStyles();
@@ -914,10 +994,12 @@ async function fetchFilesWS(evt) { // fetch file-by-file list over websockets
     }
   };
   ws.onclose = (event) => {
+    if (controller.signal.aborted) return;
     el.files.appendChild(fragment);
     // gallerySort();
     log(`gallery: folder=${evt.target.name} num=${numFiles} time=${Math.floor(t1 - t0)}ms`);
     updateStatusWithSort(['Folder', evt.target.name], ['Images', numFiles.toLocaleString()], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`);
+    galleryProgressBar.start(numFiles);
     addSeparators();
     thumbCacheCleanup(evt.target.name, numFiles, controller);
   };
@@ -990,6 +1072,12 @@ async function initGallery() { // triggered on gradio change to monitor when ui
   updateGalleryStyles();
   injectGalleryStatusCSS();
   setOverlayAnimation();
+  const progress = gradioApp().getElementById('tab-gallery-progress');
+  if (progress) {
+    galleryProgressBar.attachTo(progress);
+  } else {
+    log('initGallery', 'Failed to attach loading progress bar');
+  }
   el.search.addEventListener('input', gallerySearch);
   el.btnSend = gradioApp().getElementById('tab-gallery-send-image');
   document.getElementById('tab-gallery-files').style.height = opts.logmonitor_show ? '75vh' : '85vh';

modules/ui_gallery.py

@@ -68,6 +68,7 @@ def create_ui():
             sort_buttons.append(ToolButton(value=ui_symbols.sort_time_dsc, elem_classes=['gallery-sort']))
             gr.Textbox(show_label=False, placeholder='Search', elem_id='tab-gallery-search')
             gr.HTML('', elem_id='tab-gallery-status')
+            gr.HTML('', elem_id='tab-gallery-progress')
             for btn in sort_buttons:
                 btn.click(fn=None, _js='gallerySort', inputs=[btn], outputs=[])
         with gr.Row():