Upload index.html

index.html

@@ -265,6 +265,18 @@
 
     #model-progress-bar { transition: width 0.4s ease; }
 
+    /* Model switcher pills */
+    .model-pill {
+      background: #1c2128; border: 1px solid #30363d; border-radius: 20px;
+      padding: 3px 11px; font-size: 0.7rem; color: #8b949e; font-family: inherit;
+      cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap;
+    }
+    .model-pill:hover:not(:disabled) { border-color: #58a6ff; color: #58a6ff; }
+    .model-pill.active {
+      background: rgba(56,139,253,0.12); border-color: #388bfd; color: #58a6ff; font-weight: 500;
+    }
+    .model-pill:disabled { opacity: 0.45; cursor: not-allowed; }
+
     .chip {
       display: inline-flex; align-items: center; gap: 6px;
       background: #1c2128; border: 1px solid #30363d; border-radius: 20px;
@@ -297,6 +309,16 @@
       <div class="text-xs" style="color:#8b949e">IT Support Assistant</div>
     </div>
   </div>
+  <!-- Model switcher -->
+  <div id="model-switcher" class="flex items-center gap-1.5 ml-4">
+    <button class="model-pill active"
+      data-model-id="HuggingFaceTB/SmolLM2-360M-Instruct"
+      data-model-label="SmolLM2-360M">SmolLM2</button>
+    <button class="model-pill"
+      data-model-id="LiquidAI/LFM2.5-350M-ONNX"
+      data-model-label="LFM2.5-350M">LFM2.5</button>
+  </div>
+
   <div id="model-status-wrap" class="ml-auto flex items-center gap-3">
     <div id="model-progress-wrap" class="w-36 h-1 rounded-full hidden" style="background:#21262d">
       <div id="model-progress-bar" class="h-1 rounded-full" style="width:0%;background:#388bfd"></div>
@@ -1469,12 +1491,32 @@ document.querySelectorAll('.chip').forEach(chip => {
     sendMessage();
   });
 });
+
+// ── Model switcher ────────────────────────────────────────────────────────── //
+document.querySelectorAll('.model-pill').forEach(pill => {
+  pill.addEventListener('click', () => {
+    if (pill.classList.contains('active')) return;
+    if (typeof window._llmSwitchModel !== 'function') return;
+
+    document.querySelectorAll('.model-pill').forEach(p => {
+      p.classList.remove('active');
+      p.disabled = true;
+    });
+    pill.classList.add('active');
+
+    window._llmSwitchModel(
+      pill.dataset.modelId,
+      pill.dataset.modelLabel,
+      () => document.querySelectorAll('.model-pill').forEach(p => { p.disabled = false; }),
+    );
+  });
+});
 </script>
 
 <!-- ── WebGPU / LLM module ───────────────────────────────────────────────── -->
 <script type="module">
 import { pipeline, TextStreamer, env }
-  from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.5.0/dist/transformers.min.js';
+  from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3/dist/transformers.min.js';
 
 env.allowLocalModels = false;
 if (env.backends?.onnx?.wasm) {
@@ -1482,7 +1524,6 @@ if (env.backends?.onnx?.wasm) {
   env.backends.onnx.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/';
 }
 
-const MODEL_ID    = 'HuggingFaceTB/SmolLM2-360M-Instruct';
 const statusEl    = document.getElementById('model-status');
 const progressWrap= document.getElementById('model-progress-wrap');
 const progressBar = document.getElementById('model-progress-bar');
@@ -1499,36 +1540,7 @@ function setStatusUI(text, color, pct) {
   }
 }
 
-if (!navigator.gpu) {
-  window._llm.status = 'unavailable';
-  setStatusUI('⚠️ Templates only (no WebGPU)', '#d29922', null);
-  setTimeout(() => statusWrap.classList.add('hidden'), 4000);
-} else {
-  setStatusUI('⏳ Loading AI…', '#d29922', 0);
-  progressWrap.classList.remove('hidden');
-
-  (async () => {
-    window._llm.status = 'loading';
-    try {
-      window._llm.generator = await pipeline('text-generation', MODEL_ID, {
-        dtype: 'q4',
-        device: 'webgpu',
-        progress_callback: (p) => {
-          if (p.status !== 'progress') return;
-          setStatusUI(`⏳ Loading AI… ${Math.round(p.progress ?? 0)}%`, '#d29922', p.progress ?? 0);
-        },
-      });
-      window._llm.status = 'ready';
-      setStatusUI('✅ AI model ready', '#3fb950', null);
-      setTimeout(() => statusWrap.classList.add('hidden'), 3000);
-    } catch (err) {
-      console.error('[DeskFlow] Model load failed:', err);
-      window._llm.status = 'error';
-      setStatusUI('⚠️ Templates only (AI unavailable)', '#d29922', null);
-      setTimeout(() => statusWrap.classList.add('hidden'), 5000);
-    }
-  })();
-
+function bindGenerate() {
   window._llmGenerate = async function(systemPrompt, userPrompt, templateFallback, onToken, onDone, onFallback) {
     if (!window._llm.generator) { onFallback(templateFallback); return; }
     try {
@@ -1539,10 +1551,7 @@ if (!navigator.gpu) {
       let accumulated = '';
       const streamer = new TextStreamer(window._llm.generator.tokenizer, {
         skip_prompt: true,
-        callback_function: (token) => {
-          accumulated += token;
-          onToken(accumulated);
-        },
+        callback_function: (token) => { accumulated += token; onToken(accumulated); },
       });
       const result = await window._llm.generator(messages, {
         max_new_tokens: 512,
@@ -1558,6 +1567,52 @@ if (!navigator.gpu) {
     }
   };
 }
+
+async function loadModel(modelId, label, onComplete) {
+  window._llmGenerate = null;
+  window._llm.status  = 'loading';
+
+  if (window._llm.generator) {
+    try { await window._llm.generator.dispose(); } catch {}
+    window._llm.generator = null;
+  }
+
+  statusWrap.classList.remove('hidden');
+  setStatusUI(`⏳ Loading ${label}…`, '#d29922', 0);
+  progressWrap.classList.remove('hidden');
+
+  try {
+    window._llm.generator = await pipeline('text-generation', modelId, {
+      dtype: 'q4',
+      device: 'webgpu',
+      progress_callback: (p) => {
+        if (p.status !== 'progress') return;
+        setStatusUI(`⏳ ${label} ${Math.round(p.progress ?? 0)}%`, '#d29922', p.progress ?? 0);
+      },
+    });
+    window._llm.status = 'ready';
+    bindGenerate();
+    setStatusUI(`✅ ${label} ready`, '#3fb950', null);
+    setTimeout(() => statusWrap.classList.add('hidden'), 3000);
+  } catch (err) {
+    console.error('[DeskFlow] Model load failed:', err);
+    window._llm.status = 'error';
+    setStatusUI(`⚠️ ${label} unavailable — using templates`, '#d29922', null);
+    setTimeout(() => statusWrap.classList.add('hidden'), 5000);
+  }
+
+  onComplete?.();
+}
+
+window._llmSwitchModel = loadModel;
+
+if (!navigator.gpu) {
+  window._llm.status = 'unavailable';
+  setStatusUI('⚠️ Templates only (no WebGPU)', '#d29922', null);
+  setTimeout(() => statusWrap.classList.add('hidden'), 4000);
+} else {
+  loadModel('HuggingFaceTB/SmolLM2-360M-Instruct', 'SmolLM2-360M', null);
+}
 </script>
 
 </body>