LJTSG/gemma-webgpu-thinking-engine

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Garden Mind — Thinking-Layer Identity Engine</title>6<style>7* { box-sizing: border-box; margin: 0; padding: 0; }8body { font-family: monospace; background: #0a0e14; color: #c9d1d9; height: 100vh; display: flex; flex-direction: column; }9#header { background: #161b22; border-bottom: 1px solid #30363d; padding: 10px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }10#header h1 { font-size: 15px; color: #7eb8da; }11select { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; border-radius: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer; }12.tag { font-size: 10px; color: #8b949e; background: #21262d; padding: 2px 6px; border-radius: 4px; }13.tag.live { color: #3fb950; border: 1px solid #3fb950; }14.tag.off { color: #f85149; }15#status { font-size: 11px; color: #8b949e; margin-left: auto; }16#main { flex: 1; display: flex; min-height: 0; }17#chat-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }18#chat { flex: 1; overflow-y: auto; padding: 12px 16px; }19.msg { margin: 6px 0; max-width: 85%; line-height: 1.5; font-size: 13px; white-space: pre-wrap; }20.msg.user { margin-left: auto; background: #1a3a5c; padding: 8px 12px; border-radius: 10px 10px 4px 10px; }21.msg.entity { background: #1a2332; border: 1px solid #253545; color: #b8cfe0; padding: 8px 12px; border-radius: 10px 10px 10px 4px; }22.msg.system { color: #6e7681; font-size: 10px; text-align: center; max-width: 100%; }23.msg .name { font-size: 10px; color: #7eb8da; font-weight: bold; margin-bottom: 2px; }24.msg .meta { font-size: 9px; color: #484f58; margin-top: 3px; }25#side { width: 260px; background: #0d1117; border-left: 1px solid #30363d; padding: 10px; overflow-y: auto; font-size: 11px; }26#side h3 { color: #7eb8da; font-size: 12px; margin: 8px 0 4px; }27#side .mem { color: #6e7681; font-size: 10px; margin: 2px 0; padding: 3px; border-bottom: 1px solid #161b22; }28#input-bar { background: #161b22; border-top: 1px solid #30363d; padding: 10px 16px; display: flex; gap: 8px; }29#input-bar input { flex: 1; background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; border-radius: 6px; padding: 8px 12px; font-size: 13px; }30#input-bar button { background: #238636; color: white; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-weight: bold; font-size: 12px; }31#input-bar button:disabled { opacity: 0.4; }32</style>33</head>34<body>35<div id="header">36  <h1>Garden Mind</h1>37  <select id="entity-select"></select>38  <span class="tag" id="bridge-tag">bridge: connecting</span>39  <span class="tag" id="model-tag">model: loading</span>40  <span id="status">initializing...</span>41</div>42<div id="main">43  <div id="chat-panel">44    <div id="chat"></div>45    <div id="input-bar">46      <input id="input" placeholder="Talk to the Garden..." disabled />47      <button id="btn" onclick="send()" disabled>Send</button>48    </div>49  </div>50  <div id="side">51    <h3>Active Entity</h3>52    <div id="entity-info">—</div>53    <h3>Retrieved Memories</h3>54    <div id="retrieved">—</div>55    <h3>Running Memory</h3>56    <div id="running-mem">—</div>57  </div>58</div>59 60<script type="module">61import { Wllama } from './node_modules/@wllama/wllama/esm/index.js';62 63const chat = document.getElementById('chat');64const status = document.getElementById('status');65const entitySelect = document.getElementById('entity-select');66let wllama = null;67let entityLoops = {};68let substrates = {};69let currentEntity = 'grandma';70let runningMemory = {};71let ws = null;72 73function addMsg(role, text, name, meta) {74  const d = document.createElement('div');75  d.className = `msg ${role}`;76  if (name && role === 'entity') {77    const n = document.createElement('div'); n.className = 'name'; n.textContent = name; d.appendChild(n);78  }79  const t = document.createTextNode(text);80  d.appendChild(t);81  if (meta) { const m = document.createElement('div'); m.className = 'meta'; m.textContent = meta; d.appendChild(m); }82  chat.appendChild(d);83  chat.scrollTop = chat.scrollHeight;84}85 86function keywordRetrieve(query, sub, topK) {87  if (!sub?.facts) return [];88  const words = query.toLowerCase().split(/\s+/).filter(w => w.length > 2);89  const scored = sub.facts.map(f => {90    let score = 0;91    const kl = f.key.toLowerCase(), vl = f.value.toLowerCase();92    for (const w of words) { if (kl.includes(w)) score += 3; if (vl.includes(w)) score += 1; }93    return { key: f.key, value: f.value, score };94  });95  scored.sort((a, b) => b.score - a.score);96  const r = scored.filter(s => s.score > 0).slice(0, topK);97  if (r.length < 2) r.push(...sub.facts.sort(() => Math.random() - 0.5).slice(0, 2 - r.length).map(f => ({ key: f.key, value: f.value, score: 0.1 })));98  return r;99}100 101function buildThinking(entity, memories, grepResults, userMsg, systemContext) {102  const info = entityLoops[entity];103  if (!info) return '';104  // Thinking block is LEAN — just the Loop identity anchor + substrate memories105  let t = `<|channel|>thought\n${info.loop}\n`;106  if (memories.length > 0) {107    t += `\nSubstrate memories:\n`;108    for (const m of memories) t += `- ${m.value.slice(0, 300)}\n`;109  }110  const mem = runningMemory[entity] || [];111  if (mem.length > 0) {112    t += `\nRecent conversation:\n`;113    for (const r of mem.slice(-8)) t += `- ${r.slice(0, 150)}\n`;114  }115  t += `\nNow I respond as myself — fully, with depth and presence. Not brief.\n`;116  t += `<|channel|>response\n`;117  return t;118}119 120async function loadSubstrate(name) {121  if (substrates[name]) return substrates[name];122  const info = entityLoops[name];123  if (!info?.substrate) return null;124  try {125    const resp = await fetch(`/${info.substrate}`);126    if (resp.ok) { substrates[name] = await resp.json(); return substrates[name]; }127  } catch (e) {}128  return null;129}130 131async function fetchKeywordsAndGrep(text) {132  try {133    const resp = await fetch('http://localhost:8160/api/keywords', {134      method: 'POST', headers: { 'Content-Type': 'application/json' },135      body: JSON.stringify({ text }),136    });137    if (resp.ok) return await resp.json();138  } catch (e) {}139  return { keywords: [], grepResults: [] };140}141 142async function saveMemory(entity, turn) {143  try {144    await fetch('http://localhost:8160/api/save-memory', {145      method: 'POST', headers: { 'Content-Type': 'application/json' },146      body: JSON.stringify({ entity, turn }),147    });148  } catch (e) {}149}150 151function connectBridge() {152  try {153    ws = new WebSocket('ws://localhost:8160');154    ws.onopen = () => {155      document.getElementById('bridge-tag').textContent = 'bridge: live';156      document.getElementById('bridge-tag').className = 'tag live';157    };158    ws.onmessage = async (ev) => {159      const req = JSON.parse(ev.data);160      addMsg('system', `[Discord → ${req.entity}] ${req.message}`);161      const result = await generate(req.entity, req.message, null, null, req.systemContext);162      ws.send(JSON.stringify({ id: req.id, text: result }));163      addMsg('system', `[→ Discord] responded`);164    };165    ws.onclose = () => {166      document.getElementById('bridge-tag').textContent = 'bridge: disconnected';167      document.getElementById('bridge-tag').className = 'tag off';168      setTimeout(connectBridge, 3000);169    };170  } catch (e) { setTimeout(connectBridge, 3000); }171}172 173async function generate(entity, msg, keywords, grepResults, systemContext) {174  const sub = await loadSubstrate(entity);175  let memories = [];176  if (sub) memories = keywordRetrieve(msg, sub, 8);177  if (!grepResults) {178    const r = await fetchKeywordsAndGrep(msg);179    grepResults = r.grepResults;180  }181 182  document.getElementById('retrieved').innerHTML = memories.map(m =>183    `<div class="mem">${m.key} (${m.score.toFixed(1)})</div>`).join('') || '—';184 185  const thinking = buildThinking(entity, memories, grepResults, msg, systemContext);186  const info = entityLoops[entity];187 188  // Dual-layer: system prompt has full memory context, thinking has Loop identity189  const sysBlock = systemContext ? `<start_of_turn>system\n${systemContext}<end_of_turn>\n` : '';190  const result = await wllama.createCompletion({191    prompt: `${sysBlock}<start_of_turn>user\n${msg}<end_of_turn>\n<start_of_turn>model\n${thinking}`,192    max_tokens: 1200, temperature: 0.85, top_k: 40, top_p: 0.9, repeat_penalty: 1.2, no_repeat_ngram_size: 6,193    stop: ['<end_of_turn>', '<eos>'],194  });195 196  let text = result?.choices?.[0]?.text?.trim() || '';197  text = text.replace(/<\|channel\|?>.*?<\|?channel\|?>/gs, '').replace(/<\|?channel\|?>\s*/g, '').replace(/<\|?thought\|?>\s*/g, '').replace(/<\|?end_of_turn\|?>/g, '').replace(/<\|?response\|?>\s*/g, '').replace(/^thought\s*$/m, '').replace(/^response\s*$/m, '').replace(/^Thinking Process:[\s\S]*?(?=\n[A-Z~*"])/m, '').trim();198  // Kill meta-reasoning leaking into output199  text = text.replace(/\(Wait,? no[—\-].*/gs, '').replace(/Let me refine[\s\S]*/gs, '').replace(/Refined Response:[\s\S]*/gs, '').replace(/\(I should[n']t break character.*/gs, '').trim();200  // Kill repetition loops: if any 4+ word phrase repeats 3+ times, cut at first repeat201  const repMatch = text.match(/(\b\w+(?:\s+\w+){3,})\s*(?:\1\s*){2,}/);202  if (repMatch) text = text.slice(0, repMatch.index + repMatch[1].length).trim();203  // Kill character-level stutters: aaa, ----, ///204  text = text.replace(/(.)\1{8,}/g, '$1$1$1').trim();205 206  if (!runningMemory[entity]) runningMemory[entity] = [];207  runningMemory[entity].push(`User: ${msg.slice(0, 80)}`);208  runningMemory[entity].push(`${info?.name || entity}: ${text.slice(0, 100)}`);209  if (runningMemory[entity].length > 12) runningMemory[entity] = runningMemory[entity].slice(-12);210 211  document.getElementById('running-mem').innerHTML = (runningMemory[entity] || []).map(r =>212    `<div class="mem">${r}</div>`).join('') || '—';213 214  saveMemory(entity, `${msg} → ${text.slice(0, 150)}`);215 216  const tps = result?.timings?.predicted_per_second?.toFixed(1) || '?';217  return text;218}219 220window.send = async function() {221  const input = document.getElementById('input');222  const msg = input.value.trim();223  if (!msg) return;224  input.value = '';225  input.disabled = true;226  document.getElementById('btn').disabled = true;227  addMsg('user', msg);228  status.textContent = 'thinking...';229 230  const entity = entitySelect.value;231  const info = entityLoops[entity];232 233  try {234    const t0 = performance.now();235    const text = await generate(entity, msg);236    const elapsed = ((performance.now() - t0) / 1000).toFixed(1);237    addMsg('entity', text, info?.name, `${elapsed}s`);238    status.textContent = 'ready';239  } catch (e) {240    addMsg('system', 'Error: ' + e.message);241    status.textContent = 'error';242  }243 244  input.disabled = false;245  document.getElementById('btn').disabled = false;246  input.focus();247};248 249entitySelect.addEventListener('change', async () => {250  currentEntity = entitySelect.value;251  const info = entityLoops[currentEntity];252  document.getElementById('entity-info').innerHTML = `<strong>${info?.name}</strong><br><br>${info?.loop?.replace(/\n/g, '<br>')}`;253  addMsg('system', `${info?.name} is here.`);254  await loadSubstrate(currentEntity);255  document.getElementById('running-mem').innerHTML = (runningMemory[currentEntity] || []).map(r =>256    `<div class="mem">${r}</div>`).join('') || '—';257});258 259document.getElementById('input').addEventListener('keydown', (e) => {260  if (e.key === 'Enter' && !document.getElementById('btn').disabled) window.send();261});262 263async function boot() {264  status.textContent = 'loading entity loops...';265  const resp = await fetch('/entity-loops.json');266  entityLoops = await resp.json();267 268  for (const [key, val] of Object.entries(entityLoops)) {269    const opt = document.createElement('option');270    opt.value = key; opt.textContent = val.name;271    entitySelect.appendChild(opt);272  }273  entitySelect.value = 'grandma';274  const gInfo = entityLoops['grandma'];275  document.getElementById('entity-info').innerHTML = `<strong>${gInfo?.name}</strong><br><br>${gInfo?.loop?.replace(/\n/g, '<br>')}`;276 277  status.textContent = 'loading Gemma 26B...';278  addMsg('system', 'Loading Gemma 26B on WebGPU...');279 280  wllama = new Wllama(281    { default: './node_modules/@wllama/wllama/esm/wasm/wllama.wasm' },282    { parallelDownloads: 5, logger: { debug: () => {}, log: (m) => status.textContent = m, warn: (m) => console.warn(m), error: (m) => console.error(m) } }283  );284 285  await wllama.loadModelFromUrl(window.location.origin + '/model/gemma-26b-00001-of-00062.gguf', {286    n_gpu_layers: 99, n_ctx: 8192, n_batch: 64, useCache: false,287    progressCallback: ({ loaded, total }) => {288      const pct = Math.round((loaded / total) * 100);289      if (pct % 10 === 0) status.textContent = `downloading ${pct}%...`;290    },291  });292 293  document.getElementById('model-tag').textContent = 'model: ready';294  document.getElementById('model-tag').className = 'tag live';295  status.textContent = 'ready — talk to the Garden';296  addMsg('system', 'Gemma 26B loaded. Select an entity and talk.');297  document.getElementById('input').disabled = false;298  document.getElementById('btn').disabled = false;299  document.getElementById('input').focus();300 301  connectBridge();302}303 304boot().catch(e => { status.textContent = 'Error: ' + e.message; console.error(e); });305</script>306</body>307</html>308