testing_space

Runtime error

App Files Files Community

everydaytok commited on 6 days ago

Commit

92ee031

verified ·

1 Parent(s): 6b942a5

Update index.html

Browse files

Files changed (1) hide show

index.html +191 -382

index.html CHANGED Viewed

@@ -1,446 +1,255 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Scalar Tri-Mesh v5</title>
-<script src="https://cdn.tailwindcss.com"></script>
-<script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
-<style>
-  body{background:#06090e;color:#cbd5e1;font-family:'Courier New',monospace}
-  .glass{background:rgba(10,18,35,.98);border:1px solid #1e2d40}
-  #drawer{transition:transform .3s;z-index:200}
-  .closed{transform:translateY(100%)}
-  .lb{width:20px;height:20px;background:#1e293b;border:1px solid #334155;border-radius:3px;
-      color:#94a3b8;font-weight:bold;font-size:12px;cursor:pointer;
-      display:inline-flex;align-items:center;justify-content:center}
-  .lb:hover{background:#334155;color:#fff}
-  .pt{display:inline-block;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:bold}
-  .pt-heavy_a{background:#1e3a2f;color:#4ade80}
-  .pt-avg    {background:#1e2d4a;color:#60a5fa}
-  .pt-diff   {background:#3a2a1e;color:#fb923c}
-  .pt-heavy_b{background:#3a1e1e;color:#f87171}
-  .ood{display:inline-block;padding:0 4px;border-radius:2px;font-size:7px;
-       font-weight:bold;background:#7c2d12;color:#fca5a5;margin-left:3px}
-  .seen{display:inline-block;padding:0 4px;border-radius:2px;font-size:7px;
-        font-weight:bold;background:#14532d;color:#86efac;margin-left:3px}
-</style>
 </head>
 <body class="flex flex-col h-screen overflow-hidden">
 <!-- HEADER -->
-<header class="glass flex-shrink-0 px-2 py-1 flex justify-between items-center gap-1">
   <div class="flex flex-wrap gap-1 items-center text-[8px] font-bold">
-    <span id="bMode" class="px-1.5 py-0.5 rounded bg-slate-800 text-slate-400 border border-slate-700">IDLE</span>
-    <span id="bType" class="pt pt-avg">—</span>
-    <span id="bN"    class="px-1.5 py-0.5 rounded bg-slate-900 text-slate-600 border border-slate-800">n:1</span>
-    <span id="bSpr"  class="px-1.5 py-0.5 rounded bg-slate-900 text-slate-600 border border-slate-800">K:—</span>
-    <div class="flex items-center gap-0.5 px-1.5 py-0.5 rounded bg-slate-800 border border-slate-700">
-      <span class="text-slate-500 text-[8px]">n=</span>
-      <button class="lb" onclick="chN(-1)">−</button>
-      <span id="nDial" class="text-white w-3 text-center">1</span>
-      <button class="lb" onclick="chN(+1)">+</button>
-    </div>
   </div>
   <div class="flex items-center gap-1 flex-shrink-0">
-    <span id="qLbl"  class="text-[8px] text-slate-600">Q:0</span>
-    <div id="dot"    class="w-2 h-2 rounded-full bg-slate-700"></div>
-    <button onclick="doTrain()"  class="text-[9px] bg-purple-800 hover:bg-purple-700 px-2 py-1 rounded font-bold">⚡TRAIN</button>
-    <button onclick="doViz()"    class="text-[9px] bg-blue-800   hover:bg-blue-700   px-2 py-1 rounded font-bold">👁VIZ</button>
-    <button onclick="doInfer()"  class="text-[9px] bg-green-800  hover:bg-green-700  px-2 py-1 rounded font-bold">▶INFER</button>
-    <button onclick="doHalt()"   class="text-[9px] bg-red-900    hover:bg-red-800    px-2 py-1 rounded font-bold">■</button>
-    <button onclick="openD()"    class="text-[9px] bg-slate-700  hover:bg-slate-600  px-2 py-1 rounded font-bold">⚙</button>
   </div>
 </header>
 <!-- PLOTS -->
-<div class="flex-grow flex flex-col min-h-0 overflow-hidden">
-  <div id="meshPlot" class="flex-grow min-h-0"></div>
-  <div id="errPlot" style="height:54px" class="flex-shrink-0 border-t border-slate-900"></div>
 </div>
-<!-- BOTTOM -->
-<div class="glass flex-shrink-0 border-t border-slate-800" style="height:180px">
   <div class="flex border-b border-slate-800 text-[10px]">
-    <button onclick="tab('nodes')"    id="tNodes"   class="flex-1 py-1 bg-blue-900/40 text-blue-300 font-bold">NODES</button>
-    <button onclick="tab('springs')"  id="tSprings" class="flex-1 py-1 text-slate-500">SPRINGS</button>
-    <button onclick="tab('acc')"      id="tAcc"     class="flex-1 py-1 text-slate-500">ACCURACY</button>
-    <button onclick="tab('logs')"     id="tLogs"    class="flex-1 py-1 text-slate-500">LOGS</button>
   </div>
   <div class="flex h-full overflow-hidden">
-    <!-- Tension readout -->
-    <div class="w-20 flex-shrink-0 border-r border-slate-800 flex flex-col items-center justify-center p-1 gap-0.5">
-      <div class="text-[7px] text-slate-600 uppercase">error</div>
-      <div id="eBig"  class="text-xl font-bold text-red-400 leading-none">0.00</div>
-      <div id="pVal"  class="text-[8px] text-slate-500">P:—</div>
-      <div id="tVal"  class="text-[8px] text-slate-600">T:—</div>
-      <div id="itLbl" class="text-[8px] text-slate-700">IT:0</div>
-      <div id="sLbl"  class="text-[7px] text-slate-800">S:0</div>
     </div>
     <!-- Panes -->
-    <div class="flex-grow overflow-y-auto p-1.5 text-[10px]">
-      <div id="pNodes"></div>
-      <div id="pSprings" class="hidden text-[9px]"></div>
-      <div id="pAcc"     class="hidden"></div>
-      <div id="pLogs"    class="hidden text-[9px] text-slate-500 font-mono"></div>
     </div>
   </div>
 </div>
 <!-- DRAWER -->
-<aside id="drawer" class="closed fixed inset-x-0 bottom-0 glass border-t border-slate-700 p-4 flex flex-col gap-3 max-h-[90vh] overflow-y-auto">
   <div class="flex justify-between items-center">
-    <span class="text-orange-400 font-bold">SCALAR TRI-MESH  v5</span>
-    <button onclick="closeD()" class="text-slate-400 text-2xl leading-none">✕</button>
-  </div>
-  <div class="bg-slate-900 rounded p-3 border border-blue-900/50 text-[9px] space-y-1">
-    <div class="text-blue-400 font-bold mb-1">ARCHITECTURE</div>
-    <div>• Nodes: <span class="text-white">scalar (1 float)</span></div>
-    <div>• Springs: <span class="text-white">scalar K (signed) per edge</span></div>
-    <div>• Topology: <span class="text-white">9-row triangulated hourglass, widths [n,n+1,n+2,n+1,n,…]</span></div>
-    <div>• Learning: <span class="text-white">LMS backprop on inter-row springs</span></div>
-    <div>• Inference: <span class="text-white">K update at inference time, EWC-protected</span></div>
   </div>
-  <!-- Offline training -->
-  <div class="bg-slate-900 rounded p-3 border border-purple-900/50">
-    <div class="text-purple-400 text-[9px] font-bold mb-2">OFFLINE LMS TRAINING</div>
-    <div class="flex gap-2 items-center">
-      <label class="text-[9px] text-slate-500 w-16">Epochs</label>
-      <input id="epN" type="number" value="5" min="1" max="30"
-        class="w-16 bg-black border border-slate-700 p-1 text-white text-sm text-center rounded">
-      <button onclick="doTrain()"
-        class="flex-1 bg-purple-800 hover:bg-purple-700 py-2 text-xs font-bold rounded">⚡ START</button>
     </div>
-    <div class="text-[8px] text-slate-600 mt-1">LMS runs at CPU speed. EWC Fisher accumulates automatically.</div>
-  </div>
-  <!-- Inference -->
-  <div class="bg-slate-900 rounded p-3 border border-green-900/50">
-    <div class="text-green-400 text-[9px] font-bold mb-2">INFERENCE  (heavy_b = OOD test)</div>
-    <div class="flex gap-2 items-center">
-      <label class="text-[9px] text-slate-500 w-16">N samples</label>
-      <input id="infN" type="number" value="400" min="10" max="2500"
-        class="w-16 bg-black border border-slate-700 p-1 text-white text-sm text-center rounded">
-      <button onclick="doInfer()"
-        class="flex-1 bg-green-800 hover:bg-green-700 py-2 text-xs font-bold rounded">▶ RUN</button>
     </div>
-    <div class="text-[8px] text-slate-600 mt-1">Springs update in real-time during inference (EWC on).</div>
   </div>
-  <div class="flex gap-2">
-    <button onclick="doReset()"
-      class="flex-1 border border-slate-600 text-slate-400 py-2 rounded text-xs font-bold">RESET K</button>
-    <button onclick="doHalt(); closeD()"
-      class="flex-1 border border-red-700 text-red-500 py-2 rounded text-xs font-bold">HALT</button>
   </div>
 </aside>
 <script>
-// ── STATE ─────────────────────────────────────────────────────────────────────
-let curN = 1;
-const KCLIP = 12.0;
-function openD()  { document.getElementById('drawer').classList.remove('closed'); }
-function closeD() { document.getElementById('drawer').classList.add('closed'); }
-async function chN(d) {
-  curN = Math.max(1, Math.min(8, curN + d));
-  document.getElementById('nDial').innerText = curN;
-  await fetch('/set_n', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({n:curN})});
-  meshReady = false;
 }
 async function doTrain() {
-  const ep = parseInt(document.getElementById('epN').value);
-  await fetch('/train_offline',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({epochs:ep})});
 }
-async function doViz()   { await fetch('/train_visual',{method:'POST',headers:{'Content-Type':'application/json'},body:'{}'}); }
-async function doInfer() {
-  const n = parseInt(document.getElementById('infN').value);
-  await fetch('/infer',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({n})});
-  closeD();
-}
-async function doHalt()  { await fetch('/halt',{method:'POST'}); }
-async function doReset() { await fetch('/reset',{method:'POST'}); meshReady=false; }
-// ── TABS ──────────────────────────────────────────────────────────────────────
-function tab(name) {
-  ['nodes','springs','acc','logs'].forEach(t => {
-    document.getElementById('p'+t.charAt(0).toUpperCase()+t.slice(1)).classList.toggle('hidden', t!==name);
-    const btn = document.getElementById('t'+t.charAt(0).toUpperCase()+t.slice(1));
-    btn.className = t===name
-      ? 'flex-1 py-1 bg-blue-900/40 text-blue-300 font-bold text-[10px]'
-      : 'flex-1 py-1 text-slate-500 text-[10px]';
-  });
 }
-// ── VISUALIZATION ─────────────────────────────────────────────────────────────
-const KIND_COL  = {A:'#fb923c', B:'#c084fc', C:'#38bdf8', H:'#4ade80'};
-const KIND_SIZE = {A:18, B:18, C:20, H:9};
-// Map K value → edge color and width
-function edgeCol(k) {
-  const t = Math.min(Math.abs(k)/KCLIP, 1);
-  if (k < 0) return [`rgba(30,${Math.round(80+t*120)},${Math.round(140+t*115)},${0.4+t*0.5})`, 0.5+t*2.5];
-  return [`rgba(${Math.round(80+t*160)},${Math.round(60+t*120)},20,${0.35+t*0.55})`, 0.5+t*2.5];
 }
-// Scale node positions so the widest row fits the display
-function scalePos(nodes, margin=4.2) {
-  const pxs = Object.values(nodes).map(n=>n.px);
-  const pys = Object.values(nodes).map(n=>n.py);
-  const maxx = Math.max(...pxs.map(Math.abs)) || 1;
-  const sx = margin / maxx;
-  return {sx, sy:4.0};  // y already in [-1,1], scale to [-4,4]
 }
-function buildTraces(nodes, springs, triangles) {
-  const traces = [];
-  const {sx, sy} = scalePos(nodes);
-  // ── Triangle fills grouped by stress ─────────────────────────────────────
-  const buckets = {low:{xs:[],ys:[]}, mid:{xs:[],ys:[]}, high:{xs:[],ys:[]}};
-  for (const tri of triangles) {
-    const [p0,p1,p2] = tri.pos;
-    const s = tri.stress;
-    const b = s < 0.05 ? 'low' : s < 0.2 ? 'mid' : 'high';
-    buckets[b].xs.push(p0[0]*sx, p1[0]*sx, p2[0]*sx, p0[0]*sx, null);
-    buckets[b].ys.push(p0[1]*sy, p1[1]*sy, p2[1]*sy, p0[1]*sy, null);
-  }
-  const fills = {
-    low:  ['rgba(56,189,248,0.04)','rgba(56,189,248,0.18)'],
-    mid:  ['rgba(251,146,60,0.07)','rgba(251,146,60,0.28)'],
-    high: ['rgba(239,68,68,0.11)', 'rgba(239,68,68,0.42)'],
-  };
-  for (const [bk,td] of Object.entries(buckets)) {
-    if (!td.xs.length) continue;
-    traces.push({
-      type:'scatter', mode:'lines',
-      x:td.xs, y:td.ys,
-      fill:'toself', fillcolor:fills[bk][0],
-      line:{color:fills[bk][1], width:0.7},
-      hoverinfo:'none', showlegend:false
-    });
-  }
-  // ── Edges: vertical (colored by K) and horizontal (faint) ────────────────
-  const vertX=[], vertY=[], horzX=[], horzY=[];
-  for (const [, s] of Object.entries(springs)) {
-    const lx = [s.u_px*sx, s.v_px*sx, null];
-    const ly = [s.u_py*sy, s.v_py*sy, null];
-    if (s.vert) { vertX.push(...lx); vertY.push(...ly); }
-    else        { horzX.push(...lx); horzY.push(...ly); }
-  }
-  // Horizontal springs: static faint lines (no per-spring coloring needed)
-  if (horzX.length) traces.push({
-    type:'scatter', mode:'lines',
-    x:horzX, y:horzY,
-    line:{color:'rgba(51,65,85,0.5)', width:0.6},
-    hoverinfo:'none', showlegend:false
-  });
-  // Vertical springs: color by K (group into pos/neg buckets for speed)
-  const vBuckets = {};
-  for (const [, s] of Object.entries(springs)) {
-    if (!s.vert) continue;
-    const bk = s.k >= 0 ? Math.floor(s.k/3) : `n${Math.floor(-s.k/3)}`;
-    if (!vBuckets[bk]) vBuckets[bk] = {k:s.k, xs:[], ys:[]};
-    vBuckets[bk].xs.push(s.u_px*sx, s.v_px*sx, null);
-    vBuckets[bk].ys.push(s.u_py*sy, s.v_py*sy, null);
-  }
-  for (const [, b] of Object.entries(vBuckets)) {
-    const [col, wd] = edgeCol(b.k);
-    traces.push({type:'scatter', mode:'lines', x:b.xs, y:b.ys,
-      line:{color:col, width:wd}, hoverinfo:'none', showlegend:false});
-  }
-  // ── Nodes ─────────────────────────────────────��───────────────────────────
-  const ns = Object.entries(nodes);
-  traces.push({
-    type:'scatter', mode:'markers+text',
-    x: ns.map(([,n]) => n.px*sx),
-    y: ns.map(([,n]) => n.py*sy),
-    text: ns.map(([,n]) => {
-      if (n.kind==='H') return '';
-      return `${n.kind}\n${n.x.toFixed(2)}`;
-    }),
-    textposition: ns.map(([,n]) => n.py>0 ? 'top center' : 'bottom center'),
-    textfont:{size:8, color: ns.map(([,n])=>KIND_COL[n.kind])},
-    marker:{
-      size:   ns.map(([,n]) => KIND_SIZE[n.kind] + Math.min(n.vel*25, 6)),
-      color:  ns.map(([,n]) => KIND_COL[n.kind]),
-      opacity:ns.map(([,n]) => 0.72 + Math.min(n.vel*2, 0.28)),
-      line:{
-        width:2,
-        color: ns.map(([,n]) => n.anchored ? '#ef4444' : '#22c55e')
-      }
-    },
-    hoverinfo:'none', showlegend:false
   });
-  return traces;
 }
-const MESH_LAYOUT = {
-  margin:{l:4,r:4,t:4,b:4},
-  paper_bgcolor:'transparent', plot_bgcolor:'transparent',
-  xaxis:{visible:false, range:[-5,5]},
-  yaxis:{visible:false, range:[-5,5]},
-  showlegend:false,
-};
-const ERR_LAYOUT = {
-  margin:{l:26,r:4,t:2,b:8},
-  paper_bgcolor:'transparent', plot_bgcolor:'transparent',
-  xaxis:{visible:false},
-  yaxis:{color:'#334155',gridcolor:'#0f172a',
-         zeroline:true,zerolinecolor:'#22c55e',zerolinewidth:1},
-  showlegend:false,
-};
-let meshReady=false, errReady=false, lastW='';
-// ── POLL ──────────────────────────────────────────────────────────────────────
 setInterval(async () => {
   try {
-    const r = await fetch('/state');
-    const d = await r.json();
-    // Sync N dial
-    curN = d.n;
-    document.getElementById('nDial').innerText = d.n;
-    // Header badges
-    document.getElementById('bN').innerText   = `n:${d.n}`;
-    document.getElementById('bSpr').innerText = `K:${d.n_vert}v+${d.n_springs-d.n_vert}h`;
-    document.getElementById('bType').className = `pt pt-${d.cur_type||'avg'}`;
-    document.getElementById('bType').innerText  = d.cur_type || '—';
-    const mc = {training:'bg-yellow-700 text-yellow-100',
-                inference:'bg-green-800 text-green-100',
-                idle:'bg-slate-800 text-slate-400'}[d.mode]||'bg-slate-800 text-slate-400';
-    const bm = document.getElementById('bMode');
-    bm.className = `px-1.5 py-0.5 rounded text-[8px] font-bold ${mc}`;
-    bm.innerText = d.mode?.toUpperCase()||'IDLE';
-    document.getElementById('dot').className = `w-2 h-2 rounded-full ${d.running?'bg-green-400':'bg-slate-700'}`;
-    document.getElementById('qLbl').innerText = `Q:${d.q_size}`;
-    // Tension
-    const e = Math.abs(d.error);
-    const ec = e<0.025?'text-green-400':e<0.15?'text-yellow-400':'text-red-400';
-    document.getElementById('eBig').className = `text-xl font-bold ${ec} leading-none`;
-    document.getElementById('eBig').innerText  = d.error.toFixed(4);
-    document.getElementById('pVal').innerText  = `P:${(d.c_pred||[0]).map(v=>v.toFixed(3)).join(',')}`;
-    document.getElementById('tVal').innerText  = d.c_tgt ? `T:${d.c_tgt.map(v=>v.toFixed(3)).join(',')}` : 'T:—';
-    document.getElementById('itLbl').innerText = `IT:${d.iter}`;
-    document.getElementById('sLbl').innerText  = `S:${d.step_cnt}`;
-    // ── Nodes pane ───────────────────────────────────────────────────────────
-    // Build layer-by-layer HTML
-    let nh = '';
-    (d.widths||[]).forEach((w,ri)=>{
-      const kinds = Object.values(d.nodes||{}).filter(n=>n.row===ri);
-      if (kinds.length===0) return;
-      const k0 = kinds[0].kind;
-      if (k0==='H' && ri!==1) return;  // only show first hidden row + A/B/C
-      kinds.forEach(n=>{
-        const icon = n.anchored ? '⊠' : '◎';
-        const ic   = n.anchored ? 'text-red-400' : 'text-green-500';
-        const nc   = {A:'text-orange-300',B:'text-purple-300',C:'text-sky-300',H:'text-green-400'}[n.kind];
-        nh += `<div class="flex justify-between items-center py-0.5 border-b border-slate-900/50">
-          <span class="${ic} text-[9px]">${icon}</span>
-          <span class="${nc} font-bold ml-1">${n.kind}[r${n.row}]</span>
-          <span class="text-white font-bold">${n.x.toFixed(4)}</span>
-          <span class="text-slate-600 text-[8px]">v=${n.vel.toFixed(3)}</span>
-        </div>`;
-      });
-    });
-    document.getElementById('pNodes').innerHTML = nh || '<div class="text-slate-700">No nodes loaded.</div>';
-    // ── Springs pane ─────────────────────────────────────────────────────────
-    let sh = '';
-    const sEntries = Object.entries(d.springs||{}).filter(([,s])=>s.vert).slice(0,50);
-    for (const [key,s] of sEntries) {
-      const kc = s.k<-0.5?'text-blue-300':s.k>3?'text-yellow-200':'text-purple-300';
-      const bw = Math.round(Math.min(Math.abs(s.k)/KCLIP,1)*56);
-      const bc = s.k<0?'bg-blue-700':'bg-amber-700';
-      const fc = s.fish>0.01?'text-orange-400':'text-slate-700';
-      sh += `<div class="flex items-center gap-1 py-0.5 border-b border-slate-900/40">
-        <div class="flex-grow h-1.5 bg-slate-900 rounded overflow-hidden">
-          <div class="${bc} h-full rounded" style="width:${bw}px"></div>
-        </div>
-        <span class="${kc} font-bold text-[9px] w-12 text-right">${s.k.toFixed(3)}</span>
-        <span class="${fc} text-[8px] w-12 text-right">F=${s.fish.toFixed(4)}</span>
-      </div>`;
-    }
-    if (!sh) sh='<div class="text-slate-700">No vertical springs yet.</div>';
-    document.getElementById('pSprings').innerHTML = sh;
-    // ── Accuracy pane ─────────────────────────────────────────────────────────
-    const acc=d.type_acc||{}, done=d.n_done||0;
-    let ah=`<div class="text-[9px] text-slate-500 mb-2">
-      Progress: <span class="text-white font-bold">${done}</span> / ${d.test_size||'?'}</div>`;
-    if (Object.keys(acc).length) {
-      const seen=Object.entries(acc).filter(([,v])=>!v.ood);
-      const ood =Object.entries(acc).filter(([,v])=> v.ood);
-      const row=([t,v])=>{
-        const ac=v.acc>=80?'text-green-400':v.acc>=50?'text-yellow-400':'text-red-400';
-        const b=v.ood?'<span class="ood">OOD</span>':'<span class="seen">SEEN</span>';
-        return `<tr class="border-b border-slate-900/60">
-          <td class="py-0.5"><span class="pt pt-${t}">${t}</span>${b}</td>
-          <td class="text-right text-slate-400">${v.n}</td>
-          <td class="text-right ${ac} font-bold">${v.acc}%</td>
-          <td class="text-right text-slate-400">${v.avg_err}</td>
-          <td class="text-right text-slate-600">${v.avg_steps}</td>
-        </tr>`;
       };
-      ah+=`<table class="w-full text-[9px] border-collapse">
-        <tr class="text-slate-600 border-b border-slate-800 text-[8px]">
-          <th class="text-left">Type</th><th class="text-right">N</th>
-          <th class="text-right">Acc%</th><th class="text-right">Avg|e|</th><th class="text-right">Steps</th>
-        </tr>${seen.map(row).join('')}
-        ${ood.length?`<tr><td colspan="5" class="pt-1 text-[8px] text-slate-600">── OOD (never seen) ──</td></tr>`:'' }
-        ${ood.map(row).join('')}</table>`;
-      if (done>20) {
-        const oa=ood.reduce((s,[,v])=>s+v.acc*v.n,0)/Math.max(ood.reduce((s,[,v])=>s+v.n,0),1);
-        const sa=seen.reduce((s,[,v])=>s+v.acc*v.n,0)/Math.max(seen.reduce((s,[,v])=>s+v.n,0),1);
-        const vc=oa>=80?'text-green-400':oa>=50?'text-yellow-400':'text-red-400';
-        ah+=`<div class="mt-2 p-2 bg-slate-900 rounded text-[9px]">
-          <span class="${vc} font-bold">${oa>=80?'✓ Generalises OOD':'~ Partial generalisation'}</span>
-          <span class="text-slate-500 ml-2">seen:${sa.toFixed(0)}% OOD:${oa.toFixed(0)}%</span>
-        </div>`;
-      }
-    } else ah+='<div class="text-slate-700 text-[9px]">Run inference to see accuracy.</div>';
-    document.getElementById('pAcc').innerHTML=ah;
-    // ── Logs pane ─────────────────────────────────────────────────────────────
-    document.getElementById('pLogs').innerHTML=
-      d.logs.map(l=>`<div class="py-0.5 border-b border-slate-900/40">${l}</div>`).join('');
-    // ── Mesh plot ─────────────────────────────────────────────────────────────
-    const wKey = JSON.stringify(d.widths);
-    const traces = buildTraces(d.nodes||{}, d.springs||{}, d.triangles||[]);
-    if (!meshReady || wKey!==lastW) {
-      Plotly.newPlot('meshPlot', traces, MESH_LAYOUT, {displayModeBar:false, responsive:true});
-      meshReady=true; lastW=wKey;
-    } else {
-      Plotly.react('meshPlot', traces, MESH_LAYOUT);
-    }
-    // ── Error history ─────────────────────────────────────────────────────────
-    const hist=d.history||[];
-    const et={type:'scatter',mode:'lines',
-              x:hist.map((_,i)=>i),y:hist,
-              line:{color:'#f97316',width:1.5},
-              fill:'tozeroy',fillcolor:'rgba(249,115,22,0.07)'};
-    if (!errReady) {
-      Plotly.newPlot('errPlot',[et],ERR_LAYOUT,{displayModeBar:false,responsive:true});
-      errReady=true;
-    } else {
-      Plotly.react('errPlot',[et],ERR_LAYOUT);
-    }
-  } catch(_){}
-}, 220);
 </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>N-Dim Lattice Mesh</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
+  <style>
+    body { background:#06090e; color:#cbd5e1; font-family:'Courier New',monospace; }
+    .glass { background:rgba(10,18,35,0.98); border:1px solid #1e2d40; }
+    #drawer { transition:transform .3s ease; z-index:200; }
+    .drawer-closed { transform:translateY(100%); }
+    .ptype { display:inline-block; padding:1px 5px; border-radius:3px; font-size:9px; font-weight:bold; }
+    .pt-blend { background:#1e3a2f; color:#4ade80; }
+    .pt-diff  { background:#1e2d4a; color:#60a5fa; }
+    .pt-route { background:#3a1e3a; color:#e879f9; }
+    .pt-manual{ background:#3a2a1e; color:#fb923c; }
+  </style>
 </head>
 <body class="flex flex-col h-screen overflow-hidden">
 <!-- HEADER -->
+<header class="glass flex-shrink-0 px-2 py-1.5 flex justify-between items-center gap-1">
   <div class="flex flex-wrap gap-1 items-center text-[8px] font-bold">
+    <span id="b-mode" class="px-1.5 py-0.5 rounded bg-slate-800 text-slate-400 border border-slate-700">IDLE</span>
+    <span id="b-type" class="ptype pt-blend">—</span>
+    <span id="b-dim" class="px-1.5 py-0.5 rounded bg-slate-900 text-slate-600 border border-slate-800">D:8</span>
   </div>
   <div class="flex items-center gap-1 flex-shrink-0">
+    <span id="q-lbl" class="text-[8px] text-slate-600">Q:0</span>
+    <div id="run-dot" class="w-2 h-2 rounded-full bg-slate-700"></div>
+    <button onclick="postAct('/halt')" class="text-[9px] bg-red-900 hover:bg-red-800 px-2 py-1 rounded font-bold shadow">■ HALT</button>
+    <button onclick="openDrawer()" class="text-[9px] bg-slate-700 hover:bg-slate-600 px-2 py-1 rounded font-bold shadow">⚙ CONTROLS</button>
   </div>
 </header>
 <!-- PLOTS -->
+<div class="flex-grow flex flex-col min-h-[30vh] overflow-hidden relative">
+  <div id="error-box" class="hidden absolute top-0 w-full bg-red-900 text-white p-2 text-xs font-bold z-50"></div>
+  <div id="mesh-plot" class="flex-grow w-full"></div>
+  <div id="err-plot" style="height:56px" class="flex-shrink-0 border-t border-slate-900 hidden md:block"></div>
 </div>
+<!-- BOTTOM PANEL -->
+<div class="glass flex-shrink-0 border-t border-slate-800 h-48">
   <div class="flex border-b border-slate-800 text-[10px]">
+    <button onclick="tab('nodes')" id="tab-nodes" class="flex-1 py-1 bg-blue-900/40 text-blue-300 font-bold">NODES</button>
+    <button onclick="tab('accuracy')" id="tab-accuracy" class="flex-1 py-1 text-slate-500">ACCURACY</button>
+    <button onclick="tab('logs')" id="tab-logs" class="flex-1 py-1 text-slate-500">LOGS</button>
   </div>
   <div class="flex h-full overflow-hidden">
+    <!-- Tension Meter -->
+    <div class="w-24 flex-shrink-0 border-r border-slate-800 flex flex-col items-center justify-center p-1 gap-0.5">
+      <div class="text-[7px] text-slate-600 uppercase">mean error</div>
+      <div id="err-big" class="text-xl font-bold text-red-400 leading-none">0.00</div>
     </div>
     <!-- Panes -->
+    <div class="flex-grow overflow-y-auto p-1.5 text-[10px] pb-6">
+      <div id="pane-nodes"></div>
+      <div id="pane-accuracy" class="hidden"></div>
+      <div id="pane-logs" class="hidden text-[9px] text-slate-500"></div>
     </div>
   </div>
 </div>
 <!-- DRAWER -->
+<aside id="drawer" class="drawer-closed fixed inset-x-0 bottom-0 glass border-t border-slate-700 p-4 flex flex-col gap-3 max-h-[90vh] overflow-y-auto pb-10 shadow-2xl">
   <div class="flex justify-between items-center">
+    <span class="text-orange-400 font-bold">CONTROL PANEL</span>
+    <button onclick="closeDrawer()" class="text-slate-400 text-2xl leading-none">✕</button>
   </div>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+    <div class="bg-slate-900 rounded p-3 border border-purple-900/50">
+      <div class="text-purple-400 text-[9px] font-bold mb-2">OFFLINE TRAINING</div>
+      <div class="flex gap-2 items-center">
+        <input id="ep-n" type="number" value="10" class="w-16 bg-black border border-slate-700 p-1 text-white text-sm text-center rounded">
+        <label class="text-[9px] text-slate-500 flex-1">Epochs</label>
+        <button onclick="doTrain()" class="bg-purple-800 hover:bg-purple-700 px-4 py-2 text-xs font-bold rounded">⚡ TRAIN</button>
+      </div>
     </div>
+    <div class="bg-slate-900 rounded p-3 border border-green-900/50">
+      <div class="text-green-400 text-[9px] font-bold mb-2">BATCH INFERENCE (EWC)</div>
+      <div class="flex gap-2 items-center">
+        <input id="inf-n" type="number" value="200" class="w-16 bg-black border border-slate-700 p-1 text-white text-sm text-center rounded">
+        <label class="text-[9px] text-slate-500 flex-1">Samples</label>
+        <button onclick="doInfer()" class="bg-green-800 hover:bg-green-700 px-4 py-2 text-xs font-bold rounded">▶ RUN</button>
+      </div>
     </div>
   </div>
+  <div class="bg-slate-900 rounded p-3 border border-orange-900/50">
+    <div class="text-orange-400 text-[9px] font-bold mb-2">MANUAL INJECTION (D:8)</div>
+    <div class="space-y-2">
+      <div>
+        <label class="text-[8px] text-slate-500 block mb-0.5">Input A</label>
+        <input id="man-a" type="text" value="0.9, 0.1, 0.5, 0.2, 0.8, 0.3, 0.7, 0.4" class="w-full bg-black border border-slate-700 p-1.5 text-orange-200 text-xs rounded font-mono">
+      </div>
+      <div>
+        <label class="text-[8px] text-slate-500 block mb-0.5">Input B</label>
+        <input id="man-b" type="text" value="0.1, 0.9, 0.5, 0.8, 0.2, 0.7, 0.3, 0.6" class="w-full bg-black border border-slate-700 p-1.5 text-cyan-200 text-xs rounded font-mono">
+      </div>
+      <button onclick="doManual()" class="w-full bg-orange-900 hover:bg-orange-800 py-2 text-xs font-bold rounded mt-1">INJECT MANUAL ARRAYS</button>
+    </div>
   </div>
 </aside>
 <script>
+let plotted = false;
+function openDrawer()  { document.getElementById('drawer').classList.remove('drawer-closed'); }
+function closeDrawer() { document.getElementById('drawer').classList.add('drawer-closed'); }
+async function postAct(route) {
+    try { await fetch(route, {method:'POST'}); }
+    catch(e) { showError("Connection lost: " + e.message); }
 }
 async function doTrain() {
+  const ep = parseInt(document.getElementById('ep-n').value);
+  await fetch('/train', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({epochs:ep})});
+  closeDrawer();
 }
+async function doInfer() {
+  const n = parseInt(document.getElementById('inf-n').value);
+  await fetch('/infer', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({n})});
+  closeDrawer();
 }
+async function doManual() {
+  const a = document.getElementById('man-a').value;
+  const b = document.getElementById('man-b').value;
+  const res = await fetch('/manual', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({a:a, b:b})});
+  const data = await res.json();
+  if(!data.ok) alert(data.error);
+  else closeDrawer();
 }
+function showError(msg) {
+    const box = document.getElementById('error-box');
+    box.innerText = msg; box.classList.remove('hidden');
 }
+function tab(name) {
+  ['nodes','accuracy','logs'].forEach(t => {
+    document.getElementById(`pane-${t}`).classList.toggle('hidden', t !== name);
+    document.getElementById(`tab-${t}`).className = t === name
+      ? 'flex-1 py-1 bg-blue-900/40 text-blue-300 font-bold text-[10px]'
+      : 'flex-1 py-1 text-slate-500 text-[10px]';
   });
 }
 setInterval(async () => {
   try {
+      const res = await fetch('/state');
+      if (!res.ok) throw new Error("Server returned status " + res.status);
+      const d = await res.json();
+      document.getElementById('error-box').classList.add('hidden');
+      const mcolor = {train:'bg-yellow-700 text-yellow-100', infer:'bg-green-800 text-green-100', manual:'bg-orange-800 text-orange-100'}[d.mode] || 'bg-slate-800';
+      document.getElementById('b-mode').className = `px-1.5 py-0.5 rounded text-[8px] font-bold ${mcolor}`;
+      document.getElementById('b-mode').innerText = (d.mode || 'IDLE').toUpperCase();
+      document.getElementById('b-type').className = `ptype pt-${d.current_type || 'blend'}`;
+      document.getElementById('b-type').innerText = d.current_type || '—';
+      document.getElementById('run-dot').className = `w-2 h-2 rounded-full ${d.running?'bg-green-400':'bg-slate-700'}`;
+      document.getElementById('q-lbl').innerText = `Q:${d.queue_size || 0}`;
+      const err = d.error || 0.0;
+      const col = err < 0.05 ? 'text-green-400' : err < 0.15 ? 'text-yellow-400' : 'text-red-400';
+      document.getElementById('err-big').className = `text-xl font-bold ${col} leading-none`;
+      document.getElementById('err-big').innerText = err.toFixed(4);
+      document.getElementById('pane-logs').innerHTML = (d.logs || []).map(l => `<div>${l}</div>`).join('');
+      let ah = "";
+      if(d.type_acc && Object.keys(d.type_acc).length > 0) {
+          ah += `<table class="w-full text-left border-collapse">
+            <tr class="text-slate-600 border-b border-slate-800"><th>Type</th><th>N</th><th>Avg Err</th></tr>`;
+          for(const [t, v] of Object.entries(d.type_acc)) {
+              ah += `<tr class="border-b border-slate-900/60">
+                <td class="py-1 text-orange-300 font-bold">${t}</td>
+                <td class="text-slate-400">${v.n}</td>
+                <td class="text-white">${v.avg_err}</td>
+              </tr>`;
+          }
+          ah += `</table>`;
+      } else { ah = "No inference data yet. Run Batch Inference."; }
+      document.getElementById('pane-accuracy').innerHTML = ah;
+      let nh = "";
+      if (d.nodes) {
+          ['A','C','B'].forEach(kind => {
+             const k_nodes = Object.values(d.nodes).filter(n => n.kind === kind).sort((a,b)=>a.col-b.col);
+             if(k_nodes.length === 0) return;
+             const vals = k_nodes.map(n => n.x.toFixed(2)).join(', ');
+             const color = kind==='A'?'text-orange-400':kind==='B'?'text-purple-400':'text-sky-400';
+             nh += `<div class="mb-1"><span class="${color} font-bold w-4 inline-block">${kind}:</span><span class="font-mono text-slate-300 tracking-wider">${vals}</span></div>`;
+          });
+      }
+      document.getElementById('pane-nodes').innerHTML = nh;
+      const traces = [];
+      if (d.nodes && d.springs) {
+          const nodes = Object.values(d.nodes);
+          for(const [key, K] of Object.entries(d.springs)) {
+              const parts = key.split('|');
+              if (parts.length !== 2) continue;
+              if(!d.nodes[parts[0]] || !d.nodes[parts[1]]) continue;
+              const pu = d.nodes[parts[0]].pos, pv = d.nodes[parts[1]].pos;
+              const color = K > 0 ? `rgba(217,119,6,${Math.min(K/1.5,1)})` : `rgba(6,182,212,${Math.min(Math.abs(K)/1.5,1)})`;
+              traces.push({
+                  type:'scatter', mode:'lines', x:[pu[0], pv[0]], y:[pu[1], pv[1]],
+                  line:{ color: color, width: 1.0 + Math.abs(K)*1.5 }, hoverinfo:'none', showlegend:false
+              });
+          }
+          traces.push({
+              type:'scatter', mode:'markers+text',
+              x: nodes.map(n => n.pos[0]), y: nodes.map(n => n.pos[1]),
+              text: nodes.map(n => n.x.toFixed(2)),
+              textposition: 'top center', textfont: {size: 10, color: '#9ca3af'},
+              marker: {
+                  size: 14, color: nodes.map(n => n.x), colorscale: 'Viridis',
+                  line: {color: nodes.map(n => ['A','B','C'].includes(n.kind)?'#ef4444':'#171717'), width: 2}
+              },
+              showlegend:false
+          });
+      }
+      const layout = {
+          margin:{l:5,r:5,t:5,b:5}, paper_bgcolor:'transparent', plot_bgcolor:'transparent',
+          xaxis:{visible:false}, yaxis:{visible:false, scaleanchor:'x'},
       };
+      if(!plotted) { Plotly.newPlot('mesh-plot', traces, layout, {responsive:true}); plotted = true; }
+      else { Plotly.react('mesh-plot', traces, layout); }
+      if(d.hist && document.getElementById('err-plot').offsetWidth > 0 && d.hist.length > 0) {
+        Plotly.react('err-plot', [{y: d.hist, type:'scatter', line:{color:'#22c55e'}}], {
+            margin:{l:30,r:10,t:10,b:15}, paper_bgcolor:'transparent', plot_bgcolor:'transparent',
+            xaxis:{visible:false}, yaxis:{gridcolor:'#262626'}
+        });
+      }
+  } catch (e) { showError("UI Error: " + e.message); }
+}, 250);
 </script>
 </body>
 </html>