Add toggle to show only models downloaded locally

exo/tinychat/index.html

@@ -43,6 +43,12 @@
     </div>
 
     <h2 class="megrim-regular" style="margin-bottom: 20px;">Models</h2>
+      <div style="display: flex; align-items: center; margin-bottom: 10px;">
+          <label style="margin-right: 5px;">
+              <input type="checkbox" x-model="showDownloadedOnly" style="margin-right: 5px;">
+              Downloaded only
+          </label>
+      </div>
 
     <!-- Loading indicator -->
     <div class="loading-container" x-show="Object.keys(models).length === 0">

exo/tinychat/index.js

@@ -39,6 +39,9 @@ document.addEventListener("alpine:init", () => {
     // Add models state alongside existing state
     models: {},
 
+    // Show only models available locally
+    showDownloadedOnly: false,
+
     topology: null,
     topologyInterval: null,
 
@@ -686,7 +689,11 @@ document.addEventListener("alpine:init", () => {
     // Update the existing groupModelsByPrefix method to include counts
     groupModelsByPrefix(models) {
       const groups = {};
-      Object.entries(models).forEach(([key, model]) => {
+      const filteredModels = this.showDownloadedOnly ?
+        Object.fromEntries(Object.entries(models).filter(([, model]) => model.downloaded)) :
+        models;
+
+      Object.entries(filteredModels).forEach(([key, model]) => {
         const parts = key.split('-');
         const mainPrefix = parts[0].toUpperCase();