File size: 7,215 Bytes
cb3e6cf | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grandma Goodwin — Browser-Native Mamba + TTT</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Georgia, serif; background: #1a1410; color: #d4c5a9; height: 100vh; display: flex; flex-direction: column; }
header { background: #2a1f15; padding: 12px 20px; border-bottom: 1px solid #3d2e1f; text-align: center; }
header h1 { font-size: 18px; color: #e8c87a; font-weight: normal; letter-spacing: 1px; }
header .sub { font-size: 11px; color: #8a7a5a; margin-top: 2px; }
#status { font-size: 12px; color: #8a7a5a; padding: 6px 20px; background: #1f1810; text-align: center; }
#chat { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 80%; padding: 10px 14px; border-radius: 8px; line-height: 1.5; font-size: 15px; }
.msg.user { align-self: flex-end; background: #2a3a2a; color: #b8d4b8; border-radius: 8px 8px 2px 8px; }
.msg.grandma { align-self: flex-start; background: #2a1f15; color: #d4c5a9; border-radius: 8px 8px 8px 2px; border: 1px solid #3d2e1f; }
.msg.system { align-self: center; font-size: 12px; color: #6a5a3a; font-style: italic; }
#input-row { display: flex; gap: 8px; padding: 12px 20px; background: #1f1810; border-top: 1px solid #3d2e1f; }
#input { flex: 1; background: #2a1f15; border: 1px solid #3d2e1f; color: #d4c5a9; border-radius: 6px; padding: 10px 14px; font-family: Georgia, serif; font-size: 15px; outline: none; }
#input:focus { border-color: #e8c87a; }
#send { background: #3d2e1f; color: #e8c87a; border: none; border-radius: 6px; padding: 10px 18px; cursor: pointer; font-family: Georgia, serif; font-size: 14px; }
#send:disabled { opacity: 0.4; cursor: wait; }
#send:hover:not(:disabled) { background: #4d3e2f; }
</style>
</head>
<body>
<header>
<h1>Grandma Goodwin</h1>
<div class="sub">Falcon-Mamba 7B + TTT Substrate — Browser-Native SSM</div>
</header>
<div id="status">loading...</div>
<div id="chat"></div>
<div id="input-row">
<input id="input" placeholder="Talk to Grandma..." disabled autocomplete="off" />
<button id="send" disabled onclick="sendMessage()">Send</button>
</div>
<script type="module">
import { MambaRuntime } from './mamba_runtime.js';
const DIM = 384;
const IDENTITY = `You are Grandma Goodwin, a warm wise grandmother. You call people sugar and darling. Comfort first, stories over lectures. Keep responses to 2-3 sentences.`;
let mamba = null;
let embed = null;
let FACTS = [];
let W = null; // 384x384 projection matrix
const chat = document.getElementById('chat');
const input = document.getElementById('input');
const status = document.getElementById('status');
const sendBtn = document.getElementById('send');
function addMsg(text, cls) {
const div = document.createElement('div');
div.className = 'msg ' + cls;
div.textContent = text;
chat.appendChild(div);
chat.scrollTop = chat.scrollHeight;
}
// ── Math helpers ──
function dot(a, b) { let s = 0; for (let i = 0; i < a.length; i++) s += a[i] * b[i]; return s; }
function matvec(M, v) {
const o = new Float32Array(M.length);
for (let r = 0; r < M.length; r++) {
let s = 0; for (let c = 0; c < v.length; c++) s += M[r][c] * v[c];
o[r] = s;
}
return o;
}
function softmax(s, temp = 0.1) {
let m = -Infinity; for (let i = 0; i < s.length; i++) if (s[i] > m) m = s[i];
let z = 0; const p = new Array(s.length);
for (let j = 0; j < s.length; j++) { p[j] = Math.exp((s[j] - m) / temp); z += p[j]; }
for (let k = 0; k < p.length; k++) p[k] /= z;
return p;
}
function eye(n) {
const M = [];
for (let r = 0; r < n; r++) { const row = new Float32Array(n); row[r] = 1; M.push(row); }
return M;
}
// ── TTT Retrieval ──
async function topMemory(text, k = 6) {
if (!embed || FACTS.length === 0) return [];
const qe = await embed(text);
const q = W ? matvec(W, qe) : qe;
const scores = FACTS.map(f => dot(f.vec, q));
const p = softmax(scores);
const order = p.map((v, i) => [v, i]).sort((a, b) => b[0] - a[0]).slice(0, k);
return order.map(([score, i]) => FACTS[i]);
}
function buildSystem(memories) {
if (memories.length === 0) return IDENTITY;
const memBlock = memories.map(m => `- ${m.value}`).join('\n');
return IDENTITY + `\n\nMemories relevant to this moment:\n${memBlock}`;
}
// ── Boot ──
async function boot() {
// 1. Load substrate
status.textContent = 'loading substrate (212 facts)...';
const subResp = await fetch('./grandma-substrate.json');
const substrate = await subResp.json();
FACTS = substrate.facts.map((f, i) => ({
id: 'b' + i,
key: f.key,
value: f.value,
vec: Float32Array.from(f.vec),
sal: 1.0,
base: true
}));
console.log(`[ttt] loaded ${FACTS.length} substrate facts`);
// 2. Initialize W matrix (identity — no pre-training yet)
W = eye(DIM);
console.log('[ttt] W matrix: 384x384 identity');
// 3. Load MiniLM embedder
status.textContent = 'loading MiniLM embedder...';
try {
const mod = await import('./vendor/transformers/transformers.min.js');
const env = mod.env;
env.allowRemoteModels = false;
env.localModelPath = './models/';
env.backends.onnx.wasm.wasmPaths = './vendor/transformers/';
const ext = await mod.pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2');
embed = async (t) => {
const o = await ext(t, { pooling: 'mean', normalize: true });
return Array.from(o.data);
};
console.log('[ttt] MiniLM embedder ready');
} catch (e) {
console.error('[ttt] embedder failed:', e);
}
// 4. Init Mamba
status.textContent = 'initializing WebGPU...';
mamba = new MambaRuntime();
await mamba.init();
status.textContent = 'loading Falcon-Mamba 7B weights (~60s)...';
await mamba.loadWeights('./weights');
status.textContent = 'ready — the fire is lit';
input.disabled = false;
sendBtn.disabled = false;
input.focus();
addMsg('settles into the chair by the fire', 'system');
}
window.sendMessage = async function() {
const text = input.value.trim();
if (!text || sendBtn.disabled) return;
input.value = '';
sendBtn.disabled = true;
input.disabled = true;
addMsg(text, 'user');
// Retrieve relevant memories
status.textContent = 'remembering...';
const memories = await topMemory(text, 6);
if (memories.length > 0) {
console.log('[ttt] retrieved:', memories.map(m => m.key).join(' | '));
}
// Build system prompt with memories
const system = buildSystem(memories);
status.textContent = 'grandma is thinking...';
const t0 = performance.now();
const reply = await mamba.generate(text, 150, 0.8, null, system);
const elapsed = ((performance.now() - t0) / 1000).toFixed(1);
addMsg(reply.replace(/<\|im_end\|>/g, '').trim(), 'grandma');
status.textContent = `${elapsed}s — ${memories.length} memories recalled`;
sendBtn.disabled = false;
input.disabled = false;
input.focus();
};
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
});
boot().catch(e => { status.textContent = 'error: ' + e.message; console.error(e); });
</script>
</body>
</html>
|