Merge pull request #12 from cadenmackenzie/downloadedModelsV2_useDownloadEndpoint

adding option to download model from sidebar

exo/tinychat/index.css

@@ -517,7 +517,13 @@ p {
   font-size: 0.9em;
   color: var(--secondary-color-transparent);
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.model-progress-info {
+  display: flex;
+  flex-direction: column;
   gap: 0.5rem;
 }
 
@@ -622,4 +628,30 @@ main {
     100% {
         transform: rotate(360deg);
     }
+}
+
+.model-download-button {
+  background: none;
+  border: none;
+  color: var(--primary-color);
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background-color: var(--primary-bg-color);
+  font-size: 0.9em;
+  width: fit-content;
+  align-self: flex-start;
+}
+
+.model-download-button:hover {
+  transform: scale(1.05);
+  background-color: var(--secondary-color-transparent);
+}
+
+.model-download-button i {
+  font-size: 0.9em;
 }

exo/tinychat/index.html

@@ -52,17 +52,27 @@
                     <template x-if="model.loading">
                         <span><i class="fas fa-spinner fa-spin"></i> Checking download status...</span>
                     </template>
-                    <template x-if="!model.loading && model.download_percentage != null">
-                        <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 class="model-progress-info">
+                        <template x-if="!model.loading && model.download_percentage != null">
+                            <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>
+                        <template x-if="!model.loading && (model.download_percentage === null || model.download_percentage < 100) && !downloadProgress?.some(p => !p.isComplete)">
+                            <button 
+                                @click.stop="handleDownload(key)"
+                                class="model-download-button">
+                                <i class="fas fa-download"></i>
+                                <span x-text="(model.download_percentage > 0 && model.download_percentage < 100) ? 'Continue Downloading' : 'Download'"></span>
+                            </button>
+                        </template>
+                    </div>
                 </div>
                 <template x-if="model.total_size">
                     <div class="model-size" x-text="model.total_downloaded ? 

exo/tinychat/index.js

@@ -511,6 +511,38 @@ document.addEventListener("alpine:init", () => {
         console.error('Error deleting model:', error);
         this.setError(error.message || 'Failed to delete model');
       }
+    },
+
+    async handleDownload(modelName) {
+      try {
+        const response = await fetch(`${window.location.origin}/download`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            model: modelName
+          })
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+          throw new Error(data.error || 'Failed to start download');
+        }
+
+        // Update the model's status immediately when download starts
+        if (this.models[modelName]) {
+          this.models[modelName] = {
+            ...this.models[modelName],
+            loading: true
+          };
+        }
+
+      } catch (error) {
+        console.error('Error starting download:', error);
+        this.setError(error);
+      }
     }
   }));
 });