File size: 13,223 Bytes

<!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 meta-reasoning leaking into output
  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();
  // 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>