S5: WASM demo — one-click "Try Demo" with auto-download model

The WASM demo (189 KB, GitHub Pages) now has a prominent "Try Demo"
button that auto-downloads SmolLM2-135M (~135 MB) from HuggingFace
directly in the browser. No install, no API key, no server.

Flow: click → download with progress bar → load into WASM → chat.
Previously users had to find and drag-drop a GGUF file manually.

Implementation:
  - loadDemoModel(): fetch() from HuggingFace with streaming progress
  - loadModelFromBytes(): shared path for both demo and file-drop
  - loadModel(file): refactored to delegate to loadModelFromBytes

README: added "Try in your browser" link to the WASM demo page.

Strategy S5 from docs/strategy_progressive_kv.md: COMPLETE.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: unamedkr

README.md

@@ -65,6 +65,8 @@ m = Model("llama-3b.gguf", context_length=32768)  # fits in 8GB; FP32 would OOM
 
 Pre-built wheels for Linux x86_64/aarch64, macOS arm64 (Python 3.9-3.13). Other platforms compile from source automatically.
 
+**Try in your browser (no install):** [WASM Demo](https://quantumaikr.github.io/quant.cpp/) — 189 KB engine, click "Try Demo" to auto-load a model.
+
 ---
 
 ## The Problem

wasm/index.html

@@ -97,10 +97,16 @@ <h1>quant<span>.cpp</span></h1>
 </div>
 
 <div class="main">
-    <div class="dropzone" id="dropzone" onclick="document.getElementById('fileInput').click()">
-        <h2>Drop a GGUF model here</h2>
-        <p>Or click to browse. Recommended: SmolLM2-135M-Instruct (270MB) for browser use.</p>
-        <p style="margin-top:8px; color:#444">Runs entirely in your browser. Nothing uploaded to any server.</p>
+    <div class="dropzone" id="dropzone">
+        <h2>LLM in Your Browser — 189 KB</h2>
+        <p style="margin-bottom:16px; color:#6ee7b7; font-size:15px">No install. No API key. No server. Just click.</p>
+        <button id="demoBtn" onclick="loadDemoModel()" style="
+            padding: 12px 32px; font-size: 16px; font-weight: 600;
+            background: #059669; color: white; border: none; border-radius: 8px;
+            cursor: pointer; margin-bottom: 12px;
+        ">▶ Try with SmolLM2-135M (~135 MB download)</button>
+        <p style="color:#555; font-size:13px">Or <a href="#" onclick="document.getElementById('fileInput').click(); return false" style="color:#6ee7b7">drop your own GGUF</a> file.</p>
+        <p style="margin-top:8px; color:#333; font-size:12px">Runs entirely in your browser. Nothing uploaded to any server.</p>
         <input type="file" id="fileInput" accept=".gguf" style="display:none">
     </div>
 
@@ -158,6 +164,52 @@ <h2>Drop a GGUF model here</h2>
     document.getElementById('loading').classList.remove('active');
 }
 
+// Demo model auto-download from HuggingFace
+async function loadDemoModel() {
+    const url = 'https://huggingface.co/Felladrin/gguf-Q8_0-SmolLM2-135M-Instruct/resolve/main/smollm2-135m-instruct-q8_0.gguf';
+    const btn = document.getElementById('demoBtn');
+    btn.disabled = true;
+    btn.textContent = 'Downloading...';
+    showLoading('Downloading SmolLM2-135M (~135 MB)...');
+
+    try {
+        const response = await fetch(url);
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+        const total = parseInt(response.headers.get('content-length') || '0');
+        const reader = response.body.getReader();
+        const chunks = [];
+        let received = 0;
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            chunks.push(value);
+            received += value.length;
+            if (total > 0) {
+                const pct = Math.floor(received * 100 / total);
+                const mb = (received / 1048576).toFixed(0);
+                const totalMb = (total / 1048576).toFixed(0);
+                document.getElementById('loadingText').textContent =
+                    `Downloading SmolLM2-135M... ${pct}% (${mb}/${totalMb} MB)`;
+            }
+        }
+
+        // Combine chunks into a single ArrayBuffer
+        const blob = new Blob(chunks);
+        const arrayBuffer = await blob.arrayBuffer();
+        const data = new Uint8Array(arrayBuffer);
+
+        document.getElementById('loadingText').textContent = 'Loading model into WASM...';
+        loadModelFromBytes(data, 'smollm2-135m-instruct-q8_0.gguf');
+    } catch (err) {
+        hideLoading();
+        btn.disabled = false;
+        btn.textContent = '▶ Try with SmolLM2-135M (~135 MB download)';
+        alert('Download failed: ' + err.message + '\n\nTry dropping a local GGUF file instead.');
+    }
+}
+
 function addMessage(role, text) {
     const chat = document.getElementById('chat');
     const div = document.createElement('div');
@@ -176,40 +228,45 @@ <h2>Drop a GGUF model here</h2>
         .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
 }
 
-async function loadModel(file) {
-    showLoading(`Loading ${file.name} (${(file.size/1024/1024).toFixed(0)} MB)...`);
-    addMessage('system', `Loading ${file.name}...`);
-
+function loadModelFromBytes(bytes, name) {
+    // Shared model loading from Uint8Array (used by both file drop and demo download)
     try {
-        const buffer = await file.arrayBuffer();
-        const bytes = new Uint8Array(buffer);
-
-        // Write to WASM filesystem
         Module.FS.writeFile('/model.gguf', bytes);
-
         showLoading('Initializing model...');
-
-        // Call C function to load
         const rc = Module._wasm_load_model(Module.allocateUTF8('/model.gguf'));
-
         if (rc === 0) {
             modelLoaded = true;
+            const dropzone = document.getElementById('dropzone');
             dropzone.classList.add('loaded');
-            dropzone.innerHTML = `<h2>✓ ${file.name} (${(file.size/1024/1024).toFixed(0)} MB)</h2>`;
+            dropzone.innerHTML = `<h2>✓ ${name} (${(bytes.length/1048576).toFixed(0)} MB)</h2>
+                <p style="color:#6ee7b7">KV compression active — 3x longer context</p>`;
             document.getElementById('kvBadge').style.display = '';
             document.getElementById('prompt').disabled = false;
             document.getElementById('sendBtn').disabled = false;
             document.getElementById('prompt').focus();
-            addMessage('system', 'Model loaded! KV compression active (7x longer context).');
+            addMessage('system', `Model loaded! ${name} (${(bytes.length/1048576).toFixed(0)} MB). Ask anything.`);
         } else {
-            addMessage('system', 'Failed to load model. Try a smaller GGUF file.');
+            addMessage('system', 'Failed to load model.');
         }
     } catch(e) {
         addMessage('system', `Error: ${e.message}`);
     }
     hideLoading();
 }
 
+async function loadModel(file) {
+    showLoading(`Loading ${file.name} (${(file.size/1024/1024).toFixed(0)} MB)...`);
+    addMessage('system', `Loading ${file.name}...`);
+    try {
+        const buffer = await file.arrayBuffer();
+        const bytes = new Uint8Array(buffer);
+        loadModelFromBytes(bytes, file.name);
+    } catch(e) {
+        addMessage('system', `Error: ${e.message}`);
+    }
+    hideLoading();
+}
+
 async function generate() {
     if (!modelLoaded || generating) return;
     const input = document.getElementById('prompt');