Spaces:

Fraser
/

web-chat

Running

App Files Files Community

Fraser commited on Aug 15

Commit

80595c2

1 Parent(s): 29464e4

CHAT

Browse files

Files changed (1) hide show

index.html +276 -17

index.html CHANGED Viewed

@@ -1,19 +1,278 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Browser LLM (WASM, mobile)</title>
+  <style>
+    :root { --bg:#0b0d10; --card:#14171b; --muted:#9aa4af; --accent:#6ee7b7; --danger:#f87171; --text:#dce3ea; }
+    * { box-sizing:border-box; }
+    body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji"; }
+    header { padding:14px 16px; border-bottom:1px solid #21262c; display:flex; gap:10px; align-items:center; }
+    header h1 { font-size:16px; margin:0; font-weight:600; }
+    header .pill { font-size:12px; color:var(--bg); background:var(--accent); padding:.2rem .55rem; border-radius:999px; font-weight:700; letter-spacing:.02em; }
+    main { display:grid; grid-template-rows:auto 1fr auto; height:calc(100dvh - 58px); }
+    .bar { display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; background:#0f1216; border-bottom:1px solid #21262c; align-items:center; }
+    select, input[type="number"] { background:var(--card); color:var(--text); border:1px solid #29313a; border-radius:10px; padding:8px 10px; }
+    button { background:#1c2128; color:var(--text); border:1px solid #2a323c; border-radius:12px; padding:10px 12px; font-weight:600; cursor:pointer; }
+    button.primary { background:var(--accent); color:#08261b; border:none; }
+    button.ghost { background:transparent; border-color:#2a323c; }
+    button:disabled { opacity:.6; cursor:not-allowed; }
+    .grow { flex:1 1 auto; }
+    .progress { width:160px; height:8px; background:#1a1f25; border-radius:999px; overflow:hidden; border:1px solid #25303a; }
+    .progress > i { display:block; height:100%; width:0%; background:linear-gradient(90deg,#34d399,#10b981); transition:width .25s ease; }
+    #stats { font-size:12px; color:var(--muted); display:flex; gap:10px; align-items:center; }
+    #chat { padding:14px; overflow:auto; background:linear-gradient(#0b0d10, #0d1117); }
+    .msg { max-width:820px; margin:0 auto 10px auto; display:flex; gap:10px; align-items:flex-start; }
+    .msg .bubble { background:var(--card); padding:12px 14px; border-radius:16px; border:1px solid #242c35; white-space:pre-wrap; }
+    .msg.user .bubble { background:#1d2330; }
+    .msg.assistant .bubble { background:#151c24; }
+    .role { font-size:12px; color:var(--muted); min-width:68px; text-transform:uppercase; letter-spacing:.04em; }
+    .inputbar { display:flex; gap:8px; padding:10px; border-top:1px solid #21262c; background:#0f1216; }
+    textarea { resize:none; height:64px; padding:10px 12px; flex:1 1 auto; border-radius:12px; border:1px solid #2a323c; background:var(--card); color:var(--text); }
+    .tiny { font-size:12px; color:var(--muted); }
+    .warn { color:var(--danger); font-weight:600; }
+    .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
+    .spacer { flex:1; }
+    a { color:#93c5fd; }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Browser LLM</h1>
+    <span class="pill">WASM • CPU-only</span>
+    <span id="isoNote" class="tiny"></span>
+  </header>
+  <main>
+    <div class="bar">
+      <label>Model:</label>
+      <select id="model">
+        <!-- Public Hugging Face GGUFs (no hosting needed) -->
+        <option value='{"id":"QuantFactory/SmolLM2-360M-GGUF","file":"SmolLM2-360M.Q4_0.gguf","label":"SmolLM2-360M Q4_0 (≈229 MB)"}'>
+          SmolLM2-360M Q4_0 (≈229 MB)
+        </option>
+        <option value='{"id":"QuantFactory/SmolLM2-360M-GGUF","file":"SmolLM2-360M.Q3_K_S.gguf","label":"SmolLM2-360M Q3_K_S (≈219 MB, faster)"}'>
+          SmolLM2-360M Q3_K_S (≈219 MB, faster)
+        </option>
+        <option value='{"id":"QuantFactory/SmolLM2-360M-GGUF","file":"SmolLM2-360M.Q2_K.gguf","label":"SmolLM2-360M Q2_K (≈~200 MB, min RAM / quality drop)"}'>
+          SmolLM2-360M Q2_K (≈~200 MB, min RAM / quality drop)
+        </option>
+      </select>
+      <div class="row">
+        <label>Max new tokens</label>
+        <input id="nPredict" type="number" min="1" max="512" step="1" value="128" />
+      </div>
+      <div class="row">
+        <label>Temp</label><input id="temp" type="number" min="0" max="2" step="0.1" value="0.7" style="width:80px" />
+        <label>Top-p</label><input id="topp" type="number" min="0" max="1" step="0.05" value="0.9" style="width:80px" />
+        <label>Top-k</label><input id="topk" type="number" min="1" max="100" step="1" value="40" style="width:80px" />
+      </div>
+      <div class="spacer"></div>
+      <button id="loadBtn" class="primary">Load model</button>
+      <button id="unloadBtn" class="ghost" disabled>Unload</button>
+      <div class="progress" title="download progress"><i id="prog"></i></div>
+      <div id="stats">idle</div>
+    </div>
+    <div id="chat" aria-live="polite"></div>
+    <form class="inputbar" id="form">
+      <textarea id="input" placeholder="Ask me anything…" required></textarea>
+      <div class="row" style="flex-direction:column; gap:6px; align-items:flex-end">
+        <button id="sendBtn" class="primary">Send</button>
+        <button id="stopBtn" type="button" class="ghost" disabled>Stop</button>
+        <div class="tiny">Context kept small for mobile perf</div>
+      </div>
+    </form>
+  </main>
+  <script type="module">
+    // ——— Fixed imports (pin version + explicit wasm paths) ———
+    import { Wllama, LoggerWithoutDebug } from "https://cdn.jsdelivr.net/npm/@wllama/wllama@2.3.1/esm/index.js";
+    // Provide the wasm URLs directly so there is no "+esm" indirection.
+    const CONFIG_PATHS = {
+      "single-thread/wllama.wasm": "https://cdn.jsdelivr.net/npm/@wllama/wllama@2.3.1/esm/single-thread/wllama.wasm",
+      "multi-thread/wllama.wasm" : "https://cdn.jsdelivr.net/npm/@wllama/wllama@2.3.1/esm/multi-thread/wllama.wasm",
+    };
+    // ——— DOM refs ———
+    const $model = document.getElementById('model');
+    const $load  = document.getElementById('loadBtn');
+    const $unload= document.getElementById('unloadBtn');
+    const $prog  = document.getElementById('prog');
+    const $stats = document.getElementById('stats');
+    const $chat  = document.getElementById('chat');
+    const $form  = document.getElementById('form');
+    const $input = document.getElementById('input');
+    const $send  = document.getElementById('sendBtn');
+    const $stop  = document.getElementById('stopBtn');
+    const $iso   = document.getElementById('isoNote');
+    // ——— State ———
+    const decoder = new TextDecoder();
+    const wllama = new Wllama(CONFIG_PATHS, { logger: LoggerWithoutDebug });
+    let aborter = null;
+    let loaded = false;
+    let eotToken = -1;
+    let sysPrompt = "You are a helpful, concise assistant. Keep answers short and clear.";
+    // Keep RAM low for mobile: small context + int4 KV cache
+    const LOAD_CONFIG = {
+      n_ctx: 768,
+      n_batch: 48,
+      cache_type_k: "q4_0",
+      cache_type_v: "f16",    // <- WASM-safe (do NOT set q4_0 here)
+      flash_attn: false,      // WASM: flash attention unavailable
+      progressCallback: ({ loaded, total }) => {
+        const pct = (total && total > 0) ? Math.round(loaded / total * 100) : 0;
+        $prog.style.width = pct + '%';
+      }
+    };
+    const messages = [ { role: "system", content: sysPrompt } ];
+    // ——— UI helpers ———
+    const ui = {
+      add(role, text) {
+        const row = document.createElement('div');
+        row.className = 'msg ' + role;
+        row.innerHTML = `
+          <div class="role">${role}</div>
+          <div class="bubble"></div>
+        `;
+        row.querySelector('.bubble').textContent = text;
+        $chat.appendChild(row);
+        $chat.scrollTop = $chat.scrollHeight;
+        return row.querySelector('.bubble');
+      },
+      setStats(txt) { $stats.textContent = txt; }
+    };
+    function noteIsolation() {
+      if (!crossOriginIsolated) {
+        $iso.innerHTML = 'Single-thread mode (serve with COOP/COEP for multithread)';
+      } else {
+        $iso.textContent = 'Cross-origin isolated: multithread on';
+      }
+    }
+    noteIsolation();
+    function truncateHistoryForMobile(maxTokensRough = 900) {
+      const maxChars = maxTokensRough * 4; // rough heuristic
+      function clip(s) { return s.length <= maxChars ? s : ('…' + s.slice(s.length - maxChars)); }
+      let kept = [messages[0]]; // keep system
+      const lastTurns = messages.slice(-8);
+      for (const m of lastTurns) kept.push({ role: m.role, content: clip(m.content) });
+      messages.length = 0; messages.push(...kept);
+    }
+    async function ensureLoaded() {
+      if (loaded) return;
+      $prog.style.width = '0%';
+      const choice = JSON.parse($model.value);
+      ui.setStats('Fetching model…');
+      await wllama.loadModelFromHF(choice.id, choice.file, LOAD_CONFIG);
+      loaded = true;
+      eotToken = wllama.getEOT();
+      const meta = await wllama.getModelMetadata();
+      const ctx = wllama.getLoadedContextInfo();
+      const thr = wllama.getNumThreads?.() ?? 1;
+      ui.setStats(`Loaded ${choice.file} • ${meta.n_params?.toLocaleString?.() || '≈360M'} params • ctx ${ctx.n_ctx} • threads ${thr}`);
+      $load.disabled = true; $unload.disabled = false;
+    }
+    async function unloadModel() {
+      try { await wllama.exit(); } catch {}
+      loaded = false;
+      $load.disabled = false; $unload.disabled = true;
+      $prog.style.width = '0%';
+      ui.setStats('idle');
+    }
+    // ——— Chat flow ———
+    document.getElementById('loadBtn').addEventListener('click', ensureLoaded);
+    document.getElementById('unloadBtn').addEventListener('click', unloadModel);
+    document.getElementById('stopBtn').addEventListener('click', () => aborter?.abort());
+    $form.addEventListener('submit', async (ev) => {
+      ev.preventDefault();
+      const text = ($input.value || '').trim();
+      if (!text) return;
+      await ensureLoaded();
+      messages.push({ role: 'user', content: text });
+      const userBubble = ui.add('user', text);
+      $input.value = '';
+      const assistantBubble = ui.add('assistant', '');
+      truncateHistoryForMobile(900);
+      $send.disabled = true; $stop.disabled = true; // will flip to true once stream starts
+      aborter = new AbortController();
+      const nPredict = parseInt(document.getElementById('nPredict').value, 10);
+      const temp = parseFloat(document.getElementById('temp').value);
+      const top_p = parseFloat(document.getElementById('topp').value);
+      const top_k = parseInt(document.getElementById('topk').value, 10);
+      const t0 = performance.now();
+      let outText = '';
+      try {
+        $stop.disabled = false;
+        const stream = await wllama.createChatCompletion(messages, {
+          stream: true,
+          useCache: true,
+          nPredict,
+          sampling: { temp, top_p, top_k },
+          stopTokens: eotToken > 0 ? [eotToken] : undefined,
+          abortSignal: aborter.signal
+        });
+        for await (const chunk of stream) {
+          const piece = new TextDecoder().decode(chunk.piece);
+          outText += piece;
+          assistantBubble.textContent = outText;
+          $chat.scrollTop = $chat.scrollHeight;
+        }
+        const dt = (performance.now() - t0) / 1000;
+        const tokSec = Math.max(1, Math.round(outText.length / 4)) / dt;
+        ui.setStats(`gen: ${tokSec.toFixed(1)} tok/s (rough)`);
+        messages.push({ role: 'assistant', content: outText });
+      } catch (err) {
+        if (err && err.name === 'AbortError') {
+          assistantBubble.textContent += '\n\n[stopped]';
+        } else {
+          console.error(err);
+          assistantBubble.innerHTML += `\n\n<span class="warn">Error: ${String(err)}</span>`;
+        }
+      } finally {
+        $send.disabled = false; $stop.disabled = true;
+        aborter = null;
+      }
+    });
+    // Enter-to-send on mobile; Shift+Enter for newline
+    $input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        $send.click();
+      }
+    });
+  </script>
+  <!--
+    Notes:
+    • Fixed the 404 by importing explicit ESM entry and pointing to the exact wasm files on jsDelivr.
+    • Runs entirely on CPU via WebAssembly (no WebGPU). Works in single-thread everywhere; for multithread,
+      serve with COOP/COEP headers so SharedArrayBuffer is available.
+    • For even lower RAM or faster sampling, pick Q3_K_S or Q2_K in the dropdown, and keep n_ctx modest.
+  -->
+</body>
 </html>