testing_space

Runtime error

App Files Files Community

everydaytok commited on 12 days ago

Commit

8b56059

verified ·

1 Parent(s): 0f14148

Update index.html

Browse files

Files changed (1) hide show

index.html +98 -64

index.html CHANGED Viewed

@@ -1,6 +1,8 @@
 <!DOCTYPE html>
-<html>
 <head>
   <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>
@@ -8,88 +10,120 @@
 </head>
 <body class="flex flex-col h-screen overflow-hidden">
-<div class="flex-shrink-0 p-2 bg-neutral-900 border-b border-neutral-800 flex justify-between items-center">
-  <div class="font-bold text-orange-500">N-DIM LATTICE MESH + EWC</div>
-  <div class="space-x-2">
-    <button onclick="fetch('/train',{method:'POST'})" class="bg-purple-700 px-3 py-1 rounded text-xs font-bold">⚡ TRAIN OFFLINE</button>
-    <button onclick="fetch('/infer',{method:'POST'})" class="bg-green-700 px-3 py-1 rounded text-xs font-bold">▶ INFER (REALTIME K)</button>
-    <button onclick="fetch('/halt',{method:'POST'})" class="bg-red-800 px-3 py-1 rounded text-xs font-bold">■ HALT</button>
   </div>
 </div>
 <div class="flex-grow flex flex-col">
-  <div id="mesh-plot" class="flex-grow min-h-0"></div>
-  <div class="h-48 border-t border-neutral-800 flex">
-    <div class="w-1/3 p-2 border-r border-neutral-800 overflow-y-auto text-xs" id="logs"></div>
-    <div class="w-2/3" id="err-plot"></div>
   </div>
 </div>
 <script>
 let plotted = false;
-setInterval(async () => {
-  const res = await fetch('/state');
-  const d = await res.json();
-  document.getElementById('logs').innerHTML = d.logs.map(l => `<div>${l}</div>`).join('');
-  // 1. Build beautiful geometric traces
-  const traces = [];
-  const nodes = Object.values(d.nodes);
-  // Edges
-  for(const [key, K] of Object.entries(d.springs)) {
-      const [u, v] = key.replace(/[\(\)'\s]/g, '').split(',');
-      if(!d.nodes[u] || !d.nodes[v]) continue;
-      const pu = d.nodes[u].pos, pv = d.nodes[v].pos;
-      // Stiff/Positive = Amber, Repulsive/Negative = Cyan
-      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: 10, color: '#9ca3af'},
-      marker: {
-          size: 14,
-          color: nodes.map(n => n.x), // Color maps to value!
-          colorscale: 'Viridis',
-          line: {color: '#171717', width: 2}
-      },
-      showlegend:false
-  });
-  const layout = {
-      margin:{l:20,r:20,t:20,b:20},
-      paper_bgcolor:'transparent', plot_bgcolor:'transparent',
-      xaxis:{visible:false}, yaxis:{visible:false, scaleanchor:'x'}, // Keeps it perfectly proportional!
-  };
-  if(!plotted) { Plotly.newPlot('mesh-plot', traces, layout); 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'}
-  });
-}, 250);
 </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 Triangulated LMS Mesh</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
 </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>