Add download progress bar in tinychat

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 */

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>

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,