Update index.html

Fix Qwen3 load error by forcing Transformers.js to use Qwen2 class

- Switched Qwen3-0.6B to remote-only (onnx-community/Qwen3-0.6B-ONNX)
- Added config override (model_type=qwen2, Qwen2ForCausalLM) to bypass
"Unsupported model type: qwen3" error

index.html

@@ -10,7 +10,7 @@
     header { position:sticky; top:0; z-index:5; display:flex; gap:12px; align-items:center; padding:12px 16px; background:#0e1629; border-bottom:1px solid #1c2945; }
     h1 { font-size:16px; font-weight:600; margin:0; letter-spacing:.2px; }
     main { padding:14px; }
-    .grid { display:grid; gap:14px; grid-template-columns: 0.35fr 0.65fr; }
+    .grid { display:grid; gap:14px; grid-template-columns: 0.35fr 0.65fr; }  /* fixed 'fr' spacing */
     @media (max-width: 1000px){ .grid { grid-template-columns:1fr; } }
 
     .card { background:#0e162b; border:1px solid #1c2945; border-radius:14px; padding:12px; }
@@ -40,7 +40,7 @@
     .small { font-size:12px; }
   </style>
 
-  <!-- Transformers.js for browsers (CDN). The npm snippet in your screenshot is for bundlers; this is correct for Spaces. -->
+  <!-- Transformers.js for browsers (CDN). The npm snippet is for bundlers; this is correct for Spaces. -->
   <script type="module">
     import {
       env,
@@ -68,7 +68,7 @@
           <div class="inline">
             <span class="muted small">Model:</span>
             <select id="model" class="select">
-              <option value="qwen" selected>Qwen3-0.6B (local int8 → Hub fallback)</option>
+              <option value="qwen" selected>Qwen3-0.6B (Hub, int8)</option>
               <option value="distilgpt2">distilgpt2 (local → Hub fallback)</option>
             </select>
           </div>
@@ -116,14 +116,14 @@
   <script type="module">
     const { env, AutoTokenizer, AutoModelForCausalLM } = window.HF;
 
-    // Env tuning
+    /* ---------- Environment tuning ---------- */
     env.useBrowserCache = true;
     env.backends.onnx.wasm.proxy = true;
     env.backends.onnx.wasm.numThreads = Math.min(
       4, Math.max(1, Math.floor((navigator.hardwareConcurrency || 4)/2))
     );
 
-    // DOM
+    /* ---------- DOM ---------- */
     const $ = (s) => document.querySelector(s);
     const statusEl = $('#status'), barEl = $('#bar'), errEl = $('#error');
     const textEl = $('#text'), klistEl = $('#klist'), timeEl = $('#time');
@@ -132,6 +132,7 @@
     const embCanvas = $('#embCanvas'), embCtx = embCanvas.getContext('2d');
     const embStatus = $('#embStatus');
 
+    /* ---------- Progress ---------- */
     function setStatus(t){ if(statusEl) statusEl.textContent = t; }
     function onProgress(evt){
       if (!barEl) return;
@@ -148,38 +149,36 @@
     function showToken(s){ if (s === "\n") return "⏎"; if (s.trim() === "") return `␣${s.length>1 ? "×"+s.length : ""}`; return s; }
     const PUNC_ONLY = /^[\s.,;:!?—-]+$/;
 
-    // IMPORTANT: force same-origin absolute URLs for "local" to avoid CORS/404
-    const LOCAL = (p) => new URL(p, window.location.href).href;
-
+    /* ---------- Model registry (Qwen = remote-only) ---------- */
     const MODELS = {
       qwen: {
         remote: "onnx-community/Qwen3-0.6B-ONNX",
         dtype: "int8",
         emb: {
-          coords: LOCAL("./assets/embeddings/qwen_pca_top5k_coords.json"),
-          nbrs:   LOCAL("./assets/embeddings/qwen_neighbors_top5k_k40.json")
+          coords: "assets/embeddings/qwen_pca_top5k_coords.json",
+          nbrs:   "assets/embeddings/qwen_neighbors_top5k_k40.json"
         }
       },
       distilgpt2: {
-        local: LOCAL("./assets/models/distilgpt2/"),
+        local: new URL("./assets/models/distilgpt2/", window.location.href).href,
         remote: "Xenova/distilgpt2",
         dtype: undefined,
         emb: {
-          coords: LOCAL("./assets/embeddings/pca_top5k_coords.json"),
-          nbrs:   LOCAL("./assets/embeddings/neighbors_top5k_k40.json")
+          coords: "assets/embeddings/pca_top5k_coords.json",
+          nbrs:   "assets/embeddings/neighbors_top5k_k40.json"
         }
       }
     };
 
-    // Embedding viewer
+    /* ---------- Embedding viewer ---------- */
     const Emb = (() => {
       let coordsPath = "", nbrsPath = "";
       let points = [], index = new Map(), neighbors = new Map();
       let baseDrawn = false;
 
       function setSources(modelKey){
-        coordsPath = MODELS.modelKey ? MODELS.modelKey.emb.coords : MODELS[modelKey].emb.coords;
-        nbrsPath   = MODELS.modelKey ? MODELS.modelKey.emb.nbrs   : MODELS[modelKey].emb.nbrs;
+        coordsPath = MODELS[modelKey].emb.coords;
+        nbrsPath   = MODELS[modelKey].emb.nbrs;
       }
       async function load(){
         baseDrawn = false; index.clear(); points = []; neighbors.clear();
@@ -209,34 +208,51 @@
       return { setSources, load, drawBase, highlight };
     })();
 
-    // Model state
+    /* ---------- Core model state ---------- */
     let tokenizer=null, model=null;
 
+    // Small config shim: tell Transformers.js to treat Qwen3 as Qwen2
+    const QWEN3_CONFIG_FIX = {
+      model_type: "qwen2",
+      architectures: ["Qwen2ForCausalLM"]
+    };
+
     async function loadModel(key){
       const cfg = MODELS[key];
 
+      // Load embeddings for this model
       Emb.setSources(key);
       try { await Emb.load(); } catch { embStatus.textContent = "Map failed to load"; }
 
-      setErr(""); setStatus("Loading tokenizer…"); barEl.style.width = "0%";
-      try {
-        tokenizer = await AutoTokenizer.from_pretrained(MODELS.qwen.remote, { progress_callback: onProgress });
-      } catch (e1) {
-        console.warn("Local tokenizer failed; falling back to Hub", e1);
-        tokenizer = await AutoTokenizer.from_pretrained(cfg.remote, { progress_callback: onProgress });
-      }
+      setErr(""); setStatus("Loading tokenizer…"); if (barEl) barEl.style.width = "0%";
 
-      setStatus("Loading model…");
-      try {
-        model = await AutoModelForCausalLM.from_pretrained(MODELS.qwen.remote, { dtype: cfg.dtype, progress_callback: onProgress });
-      } catch (e2) {
-        console.warn("Local model failed; falling back to Hub", e2);
-        model = await AutoModelForCausalLM.from_pretrained(MODELS.qwen.remote, { dtype: cfg.dtype, progress_callback: onProgress });
+      if (key === "qwen") {
+        // --- Remote-only for Qwen (Hub) ---
+        tokenizer = await AutoTokenizer.from_pretrained(cfg.remote, { progress_callback: onProgress });
+        setStatus("Loading model…");
+        model = await AutoModelForCausalLM.from_pretrained(cfg.remote, {
+          dtype: cfg.dtype,
+          progress_callback: onProgress,
+          config: QWEN3_CONFIG_FIX    // <-- the crucial override
+        });
+      } else {
+        // --- distilgpt2: prefer local, fallback to Hub ---
+        try {
+          tokenizer = await AutoTokenizer.from_pretrained(cfg.local, { progress_callback: onProgress });
+        } catch {
+          tokenizer = await AutoTokenizer.from_pretrained(cfg.remote, { progress_callback: onProgress });
+        }
+        setStatus("Loading model…");
+        try {
+          model = await AutoModelForCausalLM.from_pretrained(cfg.local, { dtype: cfg.dtype, progress_callback: onProgress });
+        } catch {
+          model = await AutoModelForCausalLM.from_pretrained(cfg.remote, { dtype: cfg.dtype, progress_callback: onProgress });
+        }
       }
 
-      if (!tokenizer || !model) {MODELS.qwen.remote,
+      if (!tokenizer || !model) {
         setStatus("Load failed");
-        setErr("Couldn’t load model. Check config.json (model_type) and local paths.");
+        setErr("Couldn’t load model. Check console for details.");
         return;
       }
 
@@ -246,8 +262,9 @@
       setStatus("Ready");
     }
 
+    /* ---------- Next-token logic ---------- */
     async function greedyNext(text, topK=10){
-      if (!tokenizer || !model) { setErr("Model not loaded yet — check the status bar for load errors."); return {rows:[],dt:0}; }
+      if (!tokenizer || !model) { setErr("Model not loaded yet — check the status bar."); return {rows:[],dt:0}; }
       const enc = await tokenizer(text || " ", { add_special_tokens:false });
       const t0 = performance.now();
       const out = await model(enc.input_ids, { attention_mask: enc.attention_mask });
@@ -269,8 +286,8 @@
     }
 
     function renderRows(rows){
-      klistEl.innerHTML = "";
       const hide = hidePunc.checked;
+      klistEl.innerHTML = "";
       for (const r of rows){
         if (hide && PUNC_ONLY.test(r.token)) continue;
         const row = document.createElement('div'); row.className='tokrow';
@@ -297,7 +314,7 @@
       }
     }
 
-    // UI
+    /* ---------- UI ---------- */
     predictBtn.addEventListener('click', predict);
     textEl.addEventListener('input', (() => { let to; return () => { clearTimeout(to); to = setTimeout(predict, 250); }; })());
     hidePunc.addEventListener('change', predict);
@@ -305,12 +322,12 @@
     demoBtn.addEventListener('click', () => { textEl.value = "Twinkle, twinkle, little "; predict(); });
     modelSel.addEventListener('change', async (e) => { await loadModel(e.target.value); predict(); });
 
-    // Boot
+    /* ---------- Boot ---------- */
     (async function init(){
-      await loadModel(modelSel.value);     // defaults to 'qwen'
+      await loadModel(modelSel.value);      // defaults to 'qwen' (remote-only + config override)
       if (!textEl.value) textEl.value = "Twinkle, twinkle, little ";
       await predict();
     })();
   </script>
 </body>
-</html>
+</html>