| <!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 ''; |
| |
| 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]; |
| |
| |
| 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(); |
| |
| 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(); |
| |
| 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(); |
| |
| 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> |
|
|
