Merge pull request #339 from Sean-fn/f/nodes_download_status

Display download progress for all nodes in tinychat

exo/tinychat/index.css

@@ -164,13 +164,32 @@ main {
   border-right: 2px solid var(--secondary-color);
   box-shadow: 10px 10px 20px 2px var(--secondary-color-transparent);
 }
-.download-progress{
-  margin-bottom: 20em;
+.download-progress {
+  margin-bottom: 12em;
+  overflow-y: auto;
 }
 .message > pre {
   white-space: pre-wrap;
 }
 
+.progress-bar-container {
+  width: 100%;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  margin: 10px 0;
+}
+.progress-bar {
+  height: 20px;
+  border-radius: 4px;
+  transition: width 0.5s ease-in-out;
+}
+.progress-bar.complete {
+  background-color: #4CAF50;
+}
+.progress-bar.in-progress {
+  background-color: #2196F3;
+}
+
 .toast {
     width: 100%; /* Take up the full width of the page */
     background-color: #fc2a2a; /* Dark background color */

exo/tinychat/index.html

@@ -151,16 +151,32 @@
 </div>
 
 <!-- Download Progress Section -->
-<template x-if="downloadProgress">
-<div class="download-progress message message-role-assistant">
-  <h2>Download Progress</h2>
-  <div class="download-progress-node">
-    <p><strong>Model:</strong> <span x-text="downloadProgress.repo_id + '@' + downloadProgress.repo_revision"></span></p>
-    <p><strong>Progress:</strong> <span x-text="`${downloadProgress.downloaded_bytes_display} / ${downloadProgress.total_bytes_display} (${downloadProgress.percentage}%)`"></span></p>
-    <p><strong>Speed:</strong> <span x-text="downloadProgress.overall_speed_display || 'N/A'"></span></p>
-    <p><strong>ETA:</strong> <span x-text="downloadProgress.overall_eta_display || 'N/A'"></span></p>
+<template x-if="downloadProgress && downloadProgress.length > 0">
+  <div class="download-progress message message-role-assistant">
+    <h2>Download Progress</h2>
+    <br>
+    <template x-for="(progress, index) in downloadProgress" :key="index">
+      <div class="download-progress-node">
+        <br>
+        <h3 x-text="`Download ${index + 1}`"></h3>
+        <p><strong>Model:</strong> <span x-text="progress.repo_id + '@' + progress.repo_revision"></span></p>
+        <p><strong>Status:</strong> <span x-text="progress.status"></span></p>
+        <div class="progress-bar-container">
+          <div class="progress-bar" 
+               :class="progress.isComplete ? 'complete' : 'in-progress'"
+               :style="`width: ${progress.percentage}%;`">
+          </div>
+        </div>
+        <template x-if="!progress.isComplete">
+          <div>
+            <p><strong>Progress:</strong> <span x-text="`${progress.downloaded_bytes_display} / ${progress.total_bytes_display} (${progress.percentage}%)`"></span></p>
+            <p><strong>Speed:</strong> <span x-text="progress.overall_speed_display || 'N/A'"></span></p>
+            <p><strong>ETA:</strong> <span x-text="progress.overall_eta_display || 'N/A'"></span></p>
+          </div>
+        </template>
+      </div>
+    </template>
   </div>
-</div>
 </template>
 
 

exo/tinychat/index.js

@@ -311,34 +311,45 @@ document.addEventListener("alpine:init", () => {
           const data = await response.json();
           const progressArray = Object.values(data);
           if (progressArray.length > 0) {
-            const progress = progressArray[0];
-            // Check if download is complete
-            if (progress.status === "complete" || progress.status === "failed") {
-              this.downloadProgress = null; // Hide the progress section
-
+            this.downloadProgress = progressArray.map(progress => {
+              // Check if download is complete
               if (progress.status === "complete") {
-                // Download is complete
-                // Check for pendingMessage
-                const savedMessage = localStorage.getItem("pendingMessage");
-                if (savedMessage) {
-                  // Clear pendingMessage
-                  localStorage.removeItem("pendingMessage");
-                  // Call processMessage() with savedMessage
-                  if (this.lastErrorMessage) {
-                    await this.processMessage(savedMessage);
-                  }
+                return {
+                  ...progress,
+                  isComplete: true,
+                  percentage: 100
+                };
+              } else if (progress.status === "failed") {
+                return {
+                  ...progress,
+                  isComplete: false,
+                  errorMessage: "Download failed"
+                };
+              } else {
+                return {
+                  ...progress,
+                  isComplete: false,
+                  downloaded_bytes_display: this.formatBytes(progress.downloaded_bytes),
+                  total_bytes_display: this.formatBytes(progress.total_bytes),
+                  overall_speed_display: progress.overall_speed ? this.formatBytes(progress.overall_speed) + '/s' : '',
+                  overall_eta_display: progress.overall_eta ? this.formatDuration(progress.overall_eta) : '',
+                  percentage: ((progress.downloaded_bytes / progress.total_bytes) * 100).toFixed(2)
+                };
+              }
+            });
+            const allComplete = this.downloadProgress.every(progress => progress.isComplete);
+            if (allComplete) {
+              // Check for pendingMessage
+              const savedMessage = localStorage.getItem("pendingMessage");
+              if (savedMessage) {
+                // Clear pendingMessage
+                localStorage.removeItem("pendingMessage");
+                // Call processMessage() with savedMessage
+                if (this.lastErrorMessage) {
+                  await this.processMessage(savedMessage);
                 }
-                this.lastErrorMessage = null;
               }
-            } else {
-              // Compute human-readable strings
-              progress.downloaded_bytes_display = this.formatBytes(progress.downloaded_bytes);
-              progress.total_bytes_display = this.formatBytes(progress.total_bytes);
-              progress.overall_speed_display = progress.overall_speed ? this.formatBytes(progress.overall_speed) + '/s' : '';
-              progress.overall_eta_display = progress.overall_eta ? this.formatDuration(progress.overall_eta) : '';
-              progress.percentage = ((progress.downloaded_bytes / progress.total_bytes) * 100).toFixed(2);
-
-              this.downloadProgress = progress;
+              this.lastErrorMessage = null;
             }
           } else {
             // No ongoing download