[object Object]

← back to Exo

Add download progress bar in tinychat

8e3e43bb89230c280752d0b064c4502b804ff373 · 2024-10-13 15:32:00 +0800 · Sean-fn

Files touched

Diff

commit 8e3e43bb89230c280752d0b064c4502b804ff373
Author: Sean-fn <seanfang@gmail.com>
Date:   Sun Oct 13 15:32:00 2024 +0800

    Add download progress bar in tinychat
---
 exo/tinychat/index.css  | 18 ++++++++++++++++++
 exo/tinychat/index.html | 16 +++++++++++++---
 exo/tinychat/index.js   |  8 +++++++-
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/exo/tinychat/index.css b/exo/tinychat/index.css
index 54eb1979..95213929 100644
--- a/exo/tinychat/index.css
+++ b/exo/tinychat/index.css
@@ -172,6 +172,24 @@ main {
   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 */
diff --git a/exo/tinychat/index.html b/exo/tinychat/index.html
index 5dc75c5c..dd86d4f4 100644
--- a/exo/tinychat/index.html
+++ b/exo/tinychat/index.html
@@ -160,10 +160,20 @@
         <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>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>
         <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>
diff --git a/exo/tinychat/index.js b/exo/tinychat/index.js
index 0fb6d0a9..4f81d1fb 100644
--- a/exo/tinychat/index.js
+++ b/exo/tinychat/index.js
@@ -313,12 +313,18 @@ document.addEventListener("alpine:init", () => {
           if (progressArray.length > 0) {
             this.downloadProgress = progressArray.map(progress => {
               // Check if download is complete
-              if (progress.status === "complete" || progress.status === "failed") {
+              if (progress.status === "complete") {
                 return {
                   ...progress,
                   isComplete: true,
                   percentage: 100
                 };
+              } else if (progress.status === "failed") {
+                return {
+                  ...progress,
+                  isComplete: false,
+                  errorMessage: "Download failed"
+                };
               } else {
                 return {
                   ...progress,

← 1dc28e87 Fix TFLOPS on 4060 Ti  ·  back to Exo  ·  Fix TFLOPS on 4060 Ti - cabelo@opensuse.org 0dd3b2f8 →