adding loading icon to sidebar for model that is being downloaded

9b4d03060ab4dff0a9a8b3b3c3379b3111ffe727 · 2024-11-29 09:35:40 -0700 · cadenmackenzie

Files touched

M exo/tinychat/index.css
M exo/tinychat/index.html

Diff

commit 9b4d03060ab4dff0a9a8b3b3c3379b3111ffe727
Author: cadenmackenzie <cadenmackenzie@gmail.com>
Date:   Fri Nov 29 09:35:40 2024 -0700

    adding loading icon to sidebar for model that is being downloaded
---
 exo/tinychat/index.css  |  8 ++++++++
 exo/tinychat/index.html | 10 +++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/exo/tinychat/index.css b/exo/tinychat/index.css
index 3a38ce8a..d8a71c6b 100644
--- a/exo/tinychat/index.css
+++ b/exo/tinychat/index.css
@@ -516,6 +516,14 @@ p {
 .model-progress {
   font-size: 0.9em;
   color: var(--secondary-color-transparent);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.model-progress i {
+  font-size: 0.9em;
+  color: var(--primary-color);
 }
 
 /* Adjust main content to accommodate sidebar */
diff --git a/exo/tinychat/index.html b/exo/tinychat/index.html
index 6cdc80b0..6b610734 100644
--- a/exo/tinychat/index.html
+++ b/exo/tinychat/index.html
@@ -53,7 +53,15 @@
                         <span><i class="fas fa-spinner fa-spin"></i> Checking download status...</span>
                     </template>
                     <template x-if="!model.loading && model.download_percentage != null">
-                        <span x-text="model.downloaded ? 'Downloaded' : `${Math.round(model.download_percentage)}% downloaded`"></span>
+                        <span>
+                            <!-- Check if there's an active download for this model -->
+                            <template x-if="downloadProgress?.some(p => 
+                                p.repo_id && p.repo_id.toLowerCase().includes(key.toLowerCase()) && !p.isComplete
+                            )">
+                                <i class="fas fa-circle-notch fa-spin"></i>
+                            </template>
+                            <span x-text="model.downloaded ? 'Downloaded' : `${Math.round(model.download_percentage)}% downloaded`"></span>
+                        </span>
                     </template>
                 </div>
                 <template x-if="model.total_size">

← f1a2f1a1 opencv-python dep · back to Exo · new image4 2f8f4cdc →