index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mamba WebGPU — First Browser-Native SSM Inference</title>
<style>
body { font-family: monospace; background: #0d1117; color: #c9d1d9; padding: 24px; max-width: 900px; margin: 0 auto; }
h1 { color: #58a6ff; font-size: 20px; }
.card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 16px; margin: 12px 0; }
.label { color: #8b949e; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.value { color: #c9d1d9; font-size: 14px; margin-top: 4px; }
.green { color: #3fb950; } .red { color: #f85149; } .amber { color: #d29922; }
#log { font-size: 12px; background: #010409; border: 1px solid #30363d; border-radius: 6px; padding: 10px; max-height: 400px; overflow-y: auto; white-space: pre-wrap; }
button { background: #238636; color: white; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-weight: bold; margin: 4px; }
button:disabled { opacity: 0.5; cursor: wait; }
input { background: #161b22; border: 1px solid #30363d; color: #c9d1d9; border-radius: 6px; padding: 8px 12px; width: 60%; }
</style>
</head>
<body>
<h1>🐍 Mamba WebGPU — Falcon-Mamba 7B in Browser</h1>
<p>First browser-native Mamba/SSM inference engine. Pure WebGPU compute shaders — no MLC, no TVM.</p>

<div class="card">
  <div class="label">Status</div>
  <div class="value" id="status"><span class="amber">⬤</span> not initialized</div>
</div>

<div class="card">
  <div class="label">WebGPU Info</div>
  <div class="value" id="gpu-info">checking...</div>
</div>

<div class="card">
  <button id="btn-init" onclick="doInit()">1. Initialize WebGPU + Compile Shaders</button>
  <button id="btn-load" onclick="doLoad()" disabled>2. Load Weights</button>
  <button id="btn-gen" onclick="doGenerate()" disabled>3. Generate</button>
</div>

<div class="card">
  <div class="label">Prompt</div>
  <input id="prompt" value="Hello, I am Grandma Goodwin and" />
</div>

<div class="card">
  <div class="label">Log</div>
  <div id="log"></div>
</div>

<script type="module">
import { MambaRuntime } from './mamba_runtime.js';

let mamba = null;
const log = document.getElementById('log');
const status = document.getElementById('status');

function l(msg) {
  const ts = new Date().toISOString().slice(11, 19);
  log.textContent += `[${ts}] ${msg}\n`;
  log.scrollTop = log.scrollHeight;
}

// Check WebGPU on load
(async () => {
  const info = document.getElementById('gpu-info');
  if (!navigator.gpu) {
    info.innerHTML = '<span class="red">WebGPU not supported</span>';
    return;
  }
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    info.innerHTML = '<span class="red">No adapter found</span>';
    return;
  }
  const ai = adapter.info || {};
  const lim = adapter.limits;
  info.innerHTML = `<span class="green">✓</span> ${ai.vendor || '?'} ${ai.architecture || '?'} | ` +
    `maxBufferSize: ${(lim.maxBufferSize/1024/1024/1024).toFixed(2)} GB | ` +
    `maxStorageBuffer: ${(lim.maxStorageBufferBindingSize/1024/1024).toFixed(0)} MB`;
})();

window.doInit = async function() {
  try {
    document.getElementById('btn-init').disabled = true;
    l('Initializing WebGPU device...');
    mamba = new MambaRuntime();
    await mamba.init();
    l('✓ Device ready, all 12 shaders compiled');
    status.innerHTML = '<span class="green">⬤</span> shaders compiled — ready to load weights';
    document.getElementById('btn-load').disabled = false;
  } catch (e) {
    l('✗ Init failed: ' + e.message);
    status.innerHTML = '<span class="red">⬤</span> ' + e.message;
  }
};

window.doLoad = async function() {
  try {
    document.getElementById('btn-load').disabled = true;
    l('Loading Falcon-Mamba 7B weights...');
    l('(Point ./weights/ to your safetensors directory)');
    status.innerHTML = '<span class="amber">⬤</span> loading weights...';
    await mamba.loadWeights('./weights');
    l('✓ Weights loaded, SSM state allocated');
    status.innerHTML = '<span class="green">⬤</span> model loaded — ready to generate';
    document.getElementById('btn-gen').disabled = false;
  } catch (e) {
    l('✗ Load failed: ' + e.message);
    status.innerHTML = '<span class="red">⬤</span> ' + e.message;
    document.getElementById('btn-load').disabled = false;
  }
};

window.doGenerate = async function() {
  const btn = document.getElementById('btn-gen');
  if (btn.disabled) return;
  btn.disabled = true;
  const prompt = document.getElementById('prompt').value;
  l('Generating: "' + prompt + '"');
  status.innerHTML = '<span class="amber">⬤</span> encoding prompt...';
  const t0 = performance.now();
  try {
    const result = await mamba.generate(prompt, 100, 0.75, (token, step) => {
      if (step === 0) status.innerHTML = '<span class="amber">⬤</span> generating tokens...';
    });
    const elapsed = ((performance.now() - t0) / 1000).toFixed(1);
    l(`[${elapsed}s] ${prompt}${result}`);
    status.innerHTML = '<span class="green">⬤</span> done';
  } catch(e) {
    l('ERROR: ' + e.message);
    status.innerHTML = '<span class="red">⬤</span> error';
  }
  btn.disabled = false;
};
</script>
</body>
</html>