testing_space

Runtime error

App Files Files Community

everydaytok commited on 7 days ago

Commit

8c77d8f

verified ·

1 Parent(s): 32634ef

Update index.html

Browse files

Files changed (1) hide show

index.html +198 -66

index.html CHANGED Viewed

@@ -3,127 +3,259 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>N-Dim Triangulated LMS 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:#0a0a0a; color:#e5e5e5; font-family:monospace; }</style>
 </head>
 <body class="flex flex-col h-screen overflow-hidden">
-<!-- Header (Mobile Responsive flex-wrap) -->
-<div class="flex-shrink-0 p-2 bg-neutral-900 border-b border-neutral-800 flex flex-wrap justify-between items-center gap-2">
-  <div class="font-bold text-orange-500 text-sm md:text-base">N-DIM LATTICE MESH</div>
-  <div class="flex flex-wrap gap-2">
-    <button onclick="postAct('/train')" class="bg-purple-700 px-3 py-1 rounded text-xs font-bold shadow-md active:scale-95">⚡ TRAIN</button>
-    <button onclick="postAct('/infer')" class="bg-green-700 px-3 py-1 rounded text-xs font-bold shadow-md active:scale-95">▶ INFER</button>
-    <button onclick="postAct('/halt')" class="bg-red-800 px-3 py-1 rounded text-xs font-bold shadow-md active:scale-95">■ HALT</button>
   </div>
-</div>
-<div class="flex-grow flex flex-col">
-  <!-- Error Fallback container in case JS crashes -->
-  <div id="error-box" class="hidden bg-red-900 text-white p-2 text-xs font-bold break-words"></div>
-  <!-- Plots -->
-  <div id="mesh-plot" class="flex-grow min-h-[40vh] w-full relative"></div>
-  <div class="h-1/3 min-h-[150px] border-t border-neutral-800 flex flex-col md:flex-row">
-    <div class="w-full md:w-1/3 p-2 border-b md:border-b-0 md:border-r border-neutral-800 overflow-y-auto text-[10px] text-gray-400" id="logs">
-        Waiting for backend connection...
     </div>
-    <div class="w-full md:w-2/3 h-full" id="err-plot"></div>
   </div>
 </div>
 <script>
 let plotted = false;
 async function postAct(route) {
     try { await fetch(route, {method:'POST'}); }
-    catch(e) { showError("Failed to reach server: " + e.message); }
 }
 function showError(msg) {
     const box = document.getElementById('error-box');
-    box.innerText = msg;
-    box.classList.remove('hidden');
 }
 setInterval(async () => {
   try {
       const res = await fetch('/state');
-      if (!res.ok) throw new Error("Server returned " + res.status);
       const d = await res.json();
-      document.getElementById('error-box').classList.add('hidden'); // Clear errors
-      document.getElementById('logs').innerHTML = d.logs.map(l => `<div>${l}</div>`).join('');
-      // Build traces
       const traces = [];
       const nodes = Object.values(d.nodes);
-      // Edges (Parsed using the pipe '|' we set in Python)
       for(const [key, K] of Object.entries(d.springs)) {
           const parts = key.split('|');
           if (parts.length !== 2) continue;
-          const u = parts[0];
-          const v = parts[1];
-          if(!d.nodes[u] || !d.nodes[v]) continue;
-          const pu = d.nodes[u].pos, pv = d.nodes[v].pos;
           const color = K > 0 ? `rgba(217,119,6,${Math.min(K/4,1)})` : `rgba(6,182,212,${Math.min(Math.abs(K)/4,1)})`;
           traces.push({
-              type:'scatter', mode:'lines',
-              x:[pu[0], pv[0]], y:[pu[1], pv[1]],
-              line:{ color: color, width: 1.5 + Math.abs(K) },
-              hoverinfo:'none', showlegend:false
           });
       }
-      // Nodes
       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: 9, color: '#9ca3af'},
           marker: {
-              size: 12,
-              color: nodes.map(n => n.x),
-              colorscale: 'Viridis',
-              line: {color: '#171717', width: 2}
           },
           showlegend:false
       });
       const layout = {
-          margin:{l:10,r:10,t:10,b:10},
-          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);
-      }
-      // Error plot
-      Plotly.react('err-plot', [{
-          y: d.hist, type:'scatter', line:{color:'#22c55e'}
-      }], {
-          margin:{l:30,r:10,t:10,b:20}, paper_bgcolor:'transparent', plot_bgcolor:'transparent',
-          xaxis:{visible:false}, yaxis:{gridcolor:'#262626'}
-      });
-  } catch (e) {
-      showError("UI Error: " + e.message);
-  }
-}, 300); // Slightly slower polling to save mobile battery
 </script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lattice Mesh + Controls</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 (Restored) -->
+<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('springs')" id="tab-springs" class="flex-1 py-1 text-slate-500">SPRINGS</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-springs" class="hidden"></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">
+    <!-- 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 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>
+    <!-- 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">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>
+  <!-- Manual Input -->
+  <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 INPUT OVERRIDE (D:8)</div>
+    <div class="space-y-2">
+      <div>
+        <label class="text-[8px] text-slate-500 block mb-0.5">Input A (comma separated)</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 (comma separated)</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."); }
+}
+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','springs','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 error");
       const d = await res.json();
+      document.getElementById('error-box').classList.add('hidden');
+      // Header & Badges
+      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.toUpperCase();
+      document.getElementById('b-type').className = `ptype pt-${d.current_type}`;
+      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}`;
+      // Tension Meter
+      const col = d.error < 0.05 ? 'text-green-400' : d.error < 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 = d.error.toFixed(4);
+      // Logs Pane
+      document.getElementById('pane-logs').innerHTML = d.logs.map(l => `<div>${l}</div>`).join('');
+      // Accuracy Pane
+      let ah = "";
+      if(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."; }
+      document.getElementById('pane-accuracy').innerHTML = ah;
+      // Nodes Pane (Compact for mobile)
+      let nh = "";
+      ['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 mr-2">${kind}:</span><span class="font-mono text-slate-300 tracking-wider">${vals}</span></div>`;
+      });
+      document.getElementById('pane-nodes').innerHTML = nh;
+      // Plotly Update
       const traces = [];
       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/4,1)})` : `rgba(6,182,212,${Math.min(Math.abs(K)/4,1)})`;
           traces.push({
+              type:'scatter', mode:'lines', x:[pu[0], pv[0]], y:[pu[1], pv[1]],
+              line:{ color: color, width: 1.5 + Math.abs(K) }, 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: 9, 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); }
+      // Mobile error chart rendering (hidden on small screens usually, but we update the logic safely)
+      if(document.getElementById('err-plot').offsetWidth > 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); }
+}, 300);
 </script>
 </body>
 </html>