LJTSG
/

gemma-webgpu-thinking-engine

GGUF

Model card Files Files and versions

xet

Community

LJTSG commited on 1 day ago

Commit

561dff9

verified ·

1 Parent(s): c060035

Upload thinking-engine.html with huggingface_hub

Browse files

Files changed (1) hide show

thinking-engine.html +305 -0

thinking-engine.html ADDED Viewed

	@@ -0,0 +1,305 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Garden Mind — Thinking-Layer Identity Engine</title>
+<style>
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: monospace; background: #0a0e14; color: #c9d1d9; height: 100vh; display: flex; flex-direction: column; }
+#header { background: #161b22; border-bottom: 1px solid #30363d; padding: 10px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+#header h1 { font-size: 15px; color: #7eb8da; }
+select { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; border-radius: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
+.tag { font-size: 10px; color: #8b949e; background: #21262d; padding: 2px 6px; border-radius: 4px; }
+.tag.live { color: #3fb950; border: 1px solid #3fb950; }
+.tag.off { color: #f85149; }
+#status { font-size: 11px; color: #8b949e; margin-left: auto; }
+#main { flex: 1; display: flex; min-height: 0; }
+#chat-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+#chat { flex: 1; overflow-y: auto; padding: 12px 16px; }
+.msg { margin: 6px 0; max-width: 85%; line-height: 1.5; font-size: 13px; white-space: pre-wrap; }
+.msg.user { margin-left: auto; background: #1a3a5c; padding: 8px 12px; border-radius: 10px 10px 4px 10px; }
+.msg.entity { background: #1a2332; border: 1px solid #253545; color: #b8cfe0; padding: 8px 12px; border-radius: 10px 10px 10px 4px; }
+.msg.system { color: #6e7681; font-size: 10px; text-align: center; max-width: 100%; }
+.msg .name { font-size: 10px; color: #7eb8da; font-weight: bold; margin-bottom: 2px; }
+.msg .meta { font-size: 9px; color: #484f58; margin-top: 3px; }
+#side { width: 260px; background: #0d1117; border-left: 1px solid #30363d; padding: 10px; overflow-y: auto; font-size: 11px; }
+#side h3 { color: #7eb8da; font-size: 12px; margin: 8px 0 4px; }
+#side .mem { color: #6e7681; font-size: 10px; margin: 2px 0; padding: 3px; border-bottom: 1px solid #161b22; }
+#input-bar { background: #161b22; border-top: 1px solid #30363d; padding: 10px 16px; display: flex; gap: 8px; }
+#input-bar input { flex: 1; background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; border-radius: 6px; padding: 8px 12px; font-size: 13px; }
+#input-bar button { background: #238636; color: white; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-weight: bold; font-size: 12px; }
+#input-bar button:disabled { opacity: 0.4; }
+</style>
+</head>
+<body>
+<div id="header">
+  <h1>Garden Mind</h1>
+  <select id="entity-select"></select>
+  <span class="tag" id="bridge-tag">bridge: connecting</span>
+  <span class="tag" id="model-tag">model: loading</span>
+  <span id="status">initializing...</span>
+</div>
+<div id="main">
+  <div id="chat-panel">
+    <div id="chat"></div>
+    <div id="input-bar">
+      <input id="input" placeholder="Talk to the Garden..." disabled />
+      <button id="btn" onclick="send()" disabled>Send</button>
+    </div>
+  </div>
+  <div id="side">
+    <h3>Active Entity</h3>
+    <div id="entity-info">—</div>
+    <h3>Retrieved Memories</h3>
+    <div id="retrieved">—</div>
+    <h3>Running Memory</h3>
+    <div id="running-mem">—</div>
+  </div>
+</div>
+<script type="module">
+import { Wllama } from './node_modules/@wllama/wllama/esm/index.js';
+const chat = document.getElementById('chat');
+const status = document.getElementById('status');
+const entitySelect = document.getElementById('entity-select');
+let wllama = null;
+let entityLoops = {};
+let substrates = {};
+let currentEntity = 'grandma';
+let runningMemory = {};
+let ws = null;
+function addMsg(role, text, name, meta) {
+  const d = document.createElement('div');
+  d.className = `msg ${role}`;
+  if (name && role === 'entity') {
+    const n = document.createElement('div'); n.className = 'name'; n.textContent = name; d.appendChild(n);
+  }
+  const t = document.createTextNode(text);
+  d.appendChild(t);
+  if (meta) { const m = document.createElement('div'); m.className = 'meta'; m.textContent = meta; d.appendChild(m); }
+  chat.appendChild(d);
+  chat.scrollTop = chat.scrollHeight;
+}
+function keywordRetrieve(query, sub, topK) {
+  if (!sub?.facts) return [];
+  const words = query.toLowerCase().split(/\s+/).filter(w => w.length > 2);
+  const scored = sub.facts.map(f => {
+    let score = 0;
+    const kl = f.key.toLowerCase(), vl = f.value.toLowerCase();
+    for (const w of words) { if (kl.includes(w)) score += 3; if (vl.includes(w)) score += 1; }
+    return { key: f.key, value: f.value, score };
+  });
+  scored.sort((a, b) => b.score - a.score);
+  const r = scored.filter(s => s.score > 0).slice(0, topK);
+  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 })));
+  return r;
+}
+function buildThinking(entity, memories, grepResults, userMsg, systemContext) {
+  const info = entityLoops[entity];
+  if (!info) return '';
+  // Thinking block is LEAN — just the Loop identity anchor + substrate memories
+  let t = `<|channel|>thought\n${info.loop}\n`;
+  if (memories.length > 0) {
+    t += `\nSubstrate memories:\n`;
+    for (const m of memories) t += `- ${m.value.slice(0, 300)}\n`;
+  }
+  const mem = runningMemory[entity] || [];
+  if (mem.length > 0) {
+    t += `\nRecent conversation:\n`;
+    for (const r of mem.slice(-8)) t += `- ${r.slice(0, 150)}\n`;
+  }
+  t += `\nNow I respond as myself — fully, with depth and presence. Not brief.\n`;
+  t += `<|channel|>response\n`;
+  return t;
+}
+async function loadSubstrate(name) {
+  if (substrates[name]) return substrates[name];
+  const info = entityLoops[name];
+  if (!info?.substrate) return null;
+  try {
+    const resp = await fetch(`/${info.substrate}`);
+    if (resp.ok) { substrates[name] = await resp.json(); return substrates[name]; }
+  } catch (e) {}
+  return null;
+}
+async function fetchKeywordsAndGrep(text) {
+  try {
+    const resp = await fetch('http://localhost:8160/api/keywords', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text }),
+    });
+    if (resp.ok) return await resp.json();
+  } catch (e) {}
+  return { keywords: [], grepResults: [] };
+}
+async function saveMemory(entity, turn) {
+  try {
+    await fetch('http://localhost:8160/api/save-memory', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ entity, turn }),
+    });
+  } catch (e) {}
+}
+function connectBridge() {
+  try {
+    ws = new WebSocket('ws://localhost:8160');
+    ws.onopen = () => {
+      document.getElementById('bridge-tag').textContent = 'bridge: live';
+      document.getElementById('bridge-tag').className = 'tag live';
+    };
+    ws.onmessage = async (ev) => {
+      const req = JSON.parse(ev.data);
+      addMsg('system', `[Discord → ${req.entity}] ${req.message}`);
+      const result = await generate(req.entity, req.message, null, null, req.systemContext);
+      ws.send(JSON.stringify({ id: req.id, text: result }));
+      addMsg('system', `[→ Discord] responded`);
+    };
+    ws.onclose = () => {
+      document.getElementById('bridge-tag').textContent = 'bridge: disconnected';
+      document.getElementById('bridge-tag').className = 'tag off';
+      setTimeout(connectBridge, 3000);
+    };
+  } catch (e) { setTimeout(connectBridge, 3000); }
+}
+async function generate(entity, msg, keywords, grepResults, systemContext) {
+  const sub = await loadSubstrate(entity);
+  let memories = [];
+  if (sub) memories = keywordRetrieve(msg, sub, 8);
+  if (!grepResults) {
+    const r = await fetchKeywordsAndGrep(msg);
+    grepResults = r.grepResults;
+  }
+  document.getElementById('retrieved').innerHTML = memories.map(m =>
+    `<div class="mem">${m.key} (${m.score.toFixed(1)})</div>`).join('') || '—';
+  const thinking = buildThinking(entity, memories, grepResults, msg, systemContext);
+  const info = entityLoops[entity];
+  // Dual-layer: system prompt has full memory context, thinking has Loop identity
+  const sysBlock = systemContext ? `<start_of_turn>system\n${systemContext}<end_of_turn>\n` : '';
+  const result = await wllama.createCompletion({
+    prompt: `${sysBlock}<start_of_turn>user\n${msg}<end_of_turn>\n<start_of_turn>model\n${thinking}`,
+    max_tokens: 1200, temperature: 0.85, top_k: 40, top_p: 0.9, repeat_penalty: 1.2, no_repeat_ngram_size: 6,
+    stop: ['<end_of_turn>', '<eos>'],
+  });
+  let text = result?.choices?.[0]?.text?.trim() || '';
+  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();
+  // Kill repetition loops: if any 4+ word phrase repeats 3+ times, cut at first repeat
+  const repMatch = text.match(/(\b\w+(?:\s+\w+){3,})\s*(?:\1\s*){2,}/);
+  if (repMatch) text = text.slice(0, repMatch.index + repMatch[1].length).trim();
+  // Kill character-level stutters: aaa, ----, ///
+  text = text.replace(/(.)\1{8,}/g, '$1$1$1').trim();
+  if (!runningMemory[entity]) runningMemory[entity] = [];
+  runningMemory[entity].push(`User: ${msg.slice(0, 80)}`);
+  runningMemory[entity].push(`${info?.name || entity}: ${text.slice(0, 100)}`);
+  if (runningMemory[entity].length > 12) runningMemory[entity] = runningMemory[entity].slice(-12);
+  document.getElementById('running-mem').innerHTML = (runningMemory[entity] || []).map(r =>
+    `<div class="mem">${r}</div>`).join('') || '—';
+  saveMemory(entity, `${msg} → ${text.slice(0, 150)}`);
+  const tps = result?.timings?.predicted_per_second?.toFixed(1) || '?';
+  return text;
+}
+window.send = async function() {
+  const input = document.getElementById('input');
+  const msg = input.value.trim();
+  if (!msg) return;
+  input.value = '';
+  input.disabled = true;
+  document.getElementById('btn').disabled = true;
+  addMsg('user', msg);
+  status.textContent = 'thinking...';
+  const entity = entitySelect.value;
+  const info = entityLoops[entity];
+  try {
+    const t0 = performance.now();
+    const text = await generate(entity, msg);
+    const elapsed = ((performance.now() - t0) / 1000).toFixed(1);
+    addMsg('entity', text, info?.name, `${elapsed}s`);
+    status.textContent = 'ready';
+  } catch (e) {
+    addMsg('system', 'Error: ' + e.message);
+    status.textContent = 'error';
+  }
+  input.disabled = false;
+  document.getElementById('btn').disabled = false;
+  input.focus();
+};
+entitySelect.addEventListener('change', async () => {
+  currentEntity = entitySelect.value;
+  const info = entityLoops[currentEntity];
+  document.getElementById('entity-info').innerHTML = `<strong>${info?.name}</strong><br><br>${info?.loop?.replace(/\n/g, '<br>')}`;
+  addMsg('system', `${info?.name} is here.`);
+  await loadSubstrate(currentEntity);
+  document.getElementById('running-mem').innerHTML = (runningMemory[currentEntity] || []).map(r =>
+    `<div class="mem">${r}</div>`).join('') || '—';
+});
+document.getElementById('input').addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && !document.getElementById('btn').disabled) window.send();
+});
+async function boot() {
+  status.textContent = 'loading entity loops...';
+  const resp = await fetch('/entity-loops.json');
+  entityLoops = await resp.json();
+  for (const [key, val] of Object.entries(entityLoops)) {
+    const opt = document.createElement('option');
+    opt.value = key; opt.textContent = val.name;
+    entitySelect.appendChild(opt);
+  }
+  entitySelect.value = 'grandma';
+  const gInfo = entityLoops['grandma'];
+  document.getElementById('entity-info').innerHTML = `<strong>${gInfo?.name}</strong><br><br>${gInfo?.loop?.replace(/\n/g, '<br>')}`;
+  status.textContent = 'loading Gemma 26B...';
+  addMsg('system', 'Loading Gemma 26B on WebGPU...');
+  wllama = new Wllama(
+    { default: './node_modules/@wllama/wllama/esm/wasm/wllama.wasm' },
+    { parallelDownloads: 5, logger: { debug: () => {}, log: (m) => status.textContent = m, warn: (m) => console.warn(m), error: (m) => console.error(m) } }
+  );
+  await wllama.loadModelFromUrl(window.location.origin + '/model/gemma-26b-00001-of-00062.gguf', {
+    n_gpu_layers: 99, n_ctx: 8192, n_batch: 64, useCache: false,
+    progressCallback: ({ loaded, total }) => {
+      const pct = Math.round((loaded / total) * 100);
+      if (pct % 10 === 0) status.textContent = `downloading ${pct}%...`;
+    },
+  });
+  document.getElementById('model-tag').textContent = 'model: ready';
+  document.getElementById('model-tag').className = 'tag live';
+  status.textContent = 'ready — talk to the Garden';
+  addMsg('system', 'Gemma 26B loaded. Select an entity and talk.');
+  document.getElementById('input').disabled = false;
+  document.getElementById('btn').disabled = false;
+  document.getElementById('input').focus();
+  connectBridge();
+}
+boot().catch(e => { status.textContent = 'Error: ' + e.message; console.error(e); });
+</script>
+</body>
+</html>