add cashed icon to models in dropdown

Author: randomtask2000

src/lib/components/ModelDropdown.svelte

@@ -3,7 +3,9 @@
     currentModel,
     availableModels,
     isModelLoaded,
-    modelLoadingProgress
+    modelLoadingProgress,
+    cachedModels,
+    checkCachedModels
   } from '$lib/stores/models';
   import { loadModelWithChatBubble } from '$lib/utils/model-loading';
   import { isMobile, getMobileOptimizedModels, canHandleLargeModels } from '$lib/utils/mobile';
@@ -109,10 +111,21 @@
       style="z-index: 999999 !important; top: {dropdownPosition.top}px; left: {dropdownPosition.left}px;"
     >
       <div class="p-4 border-b border-surface-300-600-token">
-        <h3 class="font-semibold text-lg text-surface-700-200-token">Select LLM Model</h3>
-        <p class="text-sm text-surface-700-200-token opacity-80">
-          Choose from {$availableModels.length} available models
-        </p>
+        <div class="flex items-center justify-between">
+          <div>
+            <h3 class="font-semibold text-lg text-surface-700-200-token">Select LLM Model</h3>
+            <p class="text-sm text-surface-700-200-token opacity-80">
+              Choose from {$availableModels.length} available models
+            </p>
+          </div>
+          <button
+            class="btn btn-sm variant-ghost-surface"
+            on:click={() => checkCachedModels()}
+            title="Refresh cache status"
+          >
+            <i class="fa fa-refresh"></i>
+          </button>
+        </div>
       </div>
 
       <!-- Fast/Lightweight Models -->
@@ -151,6 +164,11 @@
                         <span class="text-xs text-yellow-400">{$modelLoadingProgress}%</span>
                       {/if}
                     </div>
+                  {:else if $cachedModels.has(model.model_id)}
+                    <div class="flex items-center space-x-1 flex-shrink-0">
+                      <i class="fa fa-download text-blue-400"></i>
+                      <span class="text-xs text-blue-400">Cached</span>
+                    </div>
                   {/if}
                 </div>
 
@@ -218,6 +236,11 @@
                         <span class="text-xs text-yellow-400">{$modelLoadingProgress}%</span>
                       {/if}
                     </div>
+                  {:else if $cachedModels.has(model.model_id)}
+                    <div class="flex items-center space-x-1 flex-shrink-0">
+                      <i class="fa fa-download text-blue-400"></i>
+                      <span class="text-xs text-blue-400">Cached</span>
+                    </div>
                   {/if}
                 </div>
 
@@ -292,6 +315,11 @@
                         <span class="text-xs text-warning-500">{$modelLoadingProgress}%</span>
                       {/if}
                     </div>
+                  {:else if $cachedModels.has(model.model_id)}
+                    <div class="flex items-center space-x-1 flex-shrink-0">
+                      <i class="fa fa-download text-blue-400"></i>
+                      <span class="text-xs text-blue-400">Cached</span>
+                    </div>
                   {/if}
                 </div>
 

src/lib/components/ModelManager.svelte

@@ -4,7 +4,8 @@
     availableModels,
     downloadProgress,
     currentModel,
-    isModelLoaded
+    isModelLoaded,
+    cachedModels
   } from '$lib/stores/models';
   import { loadModelWithChatBubble } from '$lib/utils/model-loading';
 
@@ -67,7 +68,10 @@
                   <span class="badge variant-filled-success">Active</span>
                 {:else if progress.downloading}
                   <span class="badge variant-filled-warning">Downloading</span>
-                {:else if progress.downloaded}
+                {:else if progress.downloaded || $cachedModels.has(model.model_id)}
+                  <span class="badge variant-filled-tertiary">
+                    <i class="fa fa-download mr-1"></i> Cached
+                  </span>
                   <button
                     class="btn btn-sm variant-filled-primary"
                     on:click={() => handleModelSwitch(model.model_id)}

src/lib/stores/models.ts

@@ -7,6 +7,7 @@ export const currentModel = writable<string>('TinyLlama-1.1B-Chat-v0.4-q4f16_1-M
 export const isModelLoaded = writable(false);
 export const modelLoadingProgress = writable<number>(0);
 export const modelLoadingStatus = writable<string>('');
+export const cachedModels = writable<Set<string>>(new Set());
 
 export const MODELS: ModelInfo[] = [
   // Lightweight/Fast Models
@@ -171,3 +172,29 @@ export function setModelDownloaded(modelId: string) {
     }
   }));
 }
+
+export async function checkCachedModels(): Promise<void> {
+  console.log('🔍 Checking cached models...');
+  const { webLLMService } = await import('../utils/webllm');
+  const cached = new Set<string>();
+  
+  for (const model of MODELS) {
+    try {
+      const isCached = await webLLMService.isModelAvailable(model.model_id);
+      console.log(`Model ${model.model_id}: ${isCached ? 'CACHED' : 'not cached'}`);
+      if (isCached) {
+        cached.add(model.model_id);
+      }
+    } catch (error) {
+      console.error(`Error checking cache for ${model.model_id}:`, error);
+    }
+  }
+  
+  console.log(`✅ Found ${cached.size} cached models:`, Array.from(cached));
+  cachedModels.set(cached);
+  
+  // Also update downloadProgress for cached models
+  cached.forEach(modelId => {
+    setModelDownloaded(modelId);
+  });
+}

src/lib/utils/webllm.ts

@@ -421,8 +421,11 @@ class WebLLMService {
   async isModelAvailable(modelId: string): Promise<boolean> {
     try {
       const webllm = await this.loadWebLLM();
-      return await webllm.hasModelInCache(modelId);
-    } catch {
+      const result = await webllm.hasModelInCache(modelId);
+      console.log(`Cache check for ${modelId}: ${result}`);
+      return result;
+    } catch (error) {
+      console.error(`Error checking cache for ${modelId}:`, error);
       return false;
     }
   }

src/routes/+page.svelte

@@ -9,14 +9,20 @@
   import MobileLayout from '$lib/components/MobileLayout.svelte';
   import WelcomeGuide from '$lib/components/WelcomeGuide.svelte';
   import { isMobile } from '$lib/utils/mobile';
+  import { checkCachedModels } from '$lib/stores/models';
 
   let showDocumentManager = false;
   let showSidebar = false;
   let isMobileDevice = false;
   let showWelcomeGuide = false;
 
-  onMount(() => {
+  onMount(async () => {
     isMobileDevice = isMobile();
+    // Check which models are cached on startup with a small delay
+    // to ensure WebLLM is ready
+    setTimeout(() => {
+      checkCachedModels().catch(console.error);
+    }, 1000);
   });
 </script>