Hugging Face's logo

Spaces:
everydaytok
/
testing_space
Runtime error

App Files Community
1
everydaytok commited on
Commit
2803122
·
verified ·
1 Parent(s): 8c77d8f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +15 -38
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Lattice Mesh + Controls</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
9
  <style>
@@ -20,7 +20,6 @@
20
  </head>
21
  <body class="flex flex-col h-screen overflow-hidden">
22
 
23
- <!-- HEADER -->
24
  <header class="glass flex-shrink-0 px-2 py-1.5 flex justify-between items-center gap-1">
25
  <div class="flex flex-wrap gap-1 items-center text-[8px] font-bold">
26
  <span id="b-mode" class="px-1.5 py-0.5 rounded bg-slate-800 text-slate-400 border border-slate-700">IDLE</span>
@@ -35,38 +34,31 @@
35
  </div>
36
  </header>
37
 
38
- <!-- PLOTS -->
39
  <div class="flex-grow flex flex-col min-h-[30vh] overflow-hidden relative">
40
  <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>
41
  <div id="mesh-plot" class="flex-grow w-full"></div>
42
  <div id="err-plot" style="height:56px" class="flex-shrink-0 border-t border-slate-900 hidden md:block"></div>
43
  </div>
44
 
45
- <!-- BOTTOM PANEL (Restored) -->
46
  <div class="glass flex-shrink-0 border-t border-slate-800 h-48">
47
  <div class="flex border-b border-slate-800 text-[10px]">
48
- <button onclick="tab('nodes')" id="tab-nodes" class="flex-1 py-1 bg-blue-900/40 text-blue-300 font-bold">NODES</button>
49
- <button onclick="tab('springs')" id="tab-springs" class="flex-1 py-1 text-slate-500">SPRINGS</button>
50
  <button onclick="tab('accuracy')" id="tab-accuracy" class="flex-1 py-1 text-slate-500">ACCURACY</button>
51
  <button onclick="tab('logs')" id="tab-logs" class="flex-1 py-1 text-slate-500">LOGS</button>
52
  </div>
53
  <div class="flex h-full overflow-hidden">
54
- <!-- Tension Meter -->
55
  <div class="w-24 flex-shrink-0 border-r border-slate-800 flex flex-col items-center justify-center p-1 gap-0.5">
56
  <div class="text-[7px] text-slate-600 uppercase">mean error</div>
57
  <div id="err-big" class="text-xl font-bold text-red-400 leading-none">0.00</div>
58
  </div>
59
- <!-- Panes -->
60
  <div class="flex-grow overflow-y-auto p-1.5 text-[10px] pb-6">
61
  <div id="pane-nodes"></div>
62
- <div id="pane-springs" class="hidden"></div>
63
  <div id="pane-accuracy" class="hidden"></div>
64
  <div id="pane-logs" class="hidden text-[9px] text-slate-500"></div>
65
  </div>
66
  </div>
67
  </div>
68
 
69
- <!-- DRAWER -->
70
  <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">
71
  <div class="flex justify-between items-center">
72
  <span class="text-orange-400 font-bold">CONTROL PANEL</span>
@@ -74,7 +66,6 @@
74
  </div>
75
 
76
  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
77
- <!-- Training -->
78
  <div class="bg-slate-900 rounded p-3 border border-purple-900/50">
79
  <div class="text-purple-400 text-[9px] font-bold mb-2">OFFLINE TRAINING</div>
80
  <div class="flex gap-2 items-center">
@@ -84,7 +75,6 @@
84
  </div>
85
  </div>
86
 
87
- <!-- Inference -->
88
  <div class="bg-slate-900 rounded p-3 border border-green-900/50">
89
  <div class="text-green-400 text-[9px] font-bold mb-2">BATCH INFERENCE (EWC)</div>
90
  <div class="flex gap-2 items-center">
@@ -95,16 +85,15 @@
95
  </div>
96
  </div>
97
 
98
- <!-- Manual Input -->
99
  <div class="bg-slate-900 rounded p-3 border border-orange-900/50">
100
- <div class="text-orange-400 text-[9px] font-bold mb-2">MANUAL INPUT OVERRIDE (D:8)</div>
101
  <div class="space-y-2">
102
  <div>
103
- <label class="text-[8px] text-slate-500 block mb-0.5">Input A (comma separated)</label>
104
  <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">
105
  </div>
106
  <div>
107
- <label class="text-[8px] text-slate-500 block mb-0.5">Input B (comma separated)</label>
108
  <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">
109
  </div>
110
  <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>
@@ -114,14 +103,9 @@
114
 
115
  <script>
116
  let plotted = false;
117
-
118
  function openDrawer() { document.getElementById('drawer').classList.remove('drawer-closed'); }
119
  function closeDrawer() { document.getElementById('drawer').classList.add('drawer-closed'); }
120
-
121
- async function postAct(route) {
122
- try { await fetch(route, {method:'POST'}); }
123
- catch(e) { showError("Connection lost."); }
124
- }
125
 
126
  async function doTrain() {
127
  const ep = parseInt(document.getElementById('ep-n').value);
@@ -140,8 +124,7 @@ async function doManual() {
140
  const b = document.getElementById('man-b').value;
141
  const res = await fetch('/manual', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({a:a, b:b})});
142
  const data = await res.json();
143
- if(!data.ok) alert(data.error);
144
- else closeDrawer();
145
  }
146
 
147
  function showError(msg) {
@@ -150,7 +133,7 @@ function showError(msg) {
150
  }
151
 
152
  function tab(name) {
153
- ['nodes','springs','accuracy','logs'].forEach(t => {
154
  document.getElementById(`pane-${t}`).classList.toggle('hidden', t !== name);
155
  document.getElementById(`tab-${t}`).className = t === name
156
  ? 'flex-1 py-1 bg-blue-900/40 text-blue-300 font-bold text-[10px]'
@@ -165,7 +148,6 @@ setInterval(async () => {
165
  const d = await res.json();
166
  document.getElementById('error-box').classList.add('hidden');
167
 
168
- // Header & Badges
169
  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';
170
  document.getElementById('b-mode').className = `px-1.5 py-0.5 rounded text-[8px] font-bold ${mcolor}`;
171
  document.getElementById('b-mode').innerText = d.mode.toUpperCase();
@@ -174,15 +156,12 @@ setInterval(async () => {
174
  document.getElementById('run-dot').className = `w-2 h-2 rounded-full ${d.running?'bg-green-400':'bg-slate-700'}`;
175
  document.getElementById('q-lbl').innerText = `Q:${d.queue_size}`;
176
 
177
- // Tension Meter
178
  const col = d.error < 0.05 ? 'text-green-400' : d.error < 0.15 ? 'text-yellow-400' : 'text-red-400';
179
  document.getElementById('err-big').className = `text-xl font-bold ${col} leading-none`;
180
  document.getElementById('err-big').innerText = d.error.toFixed(4);
181
 
182
- // Logs Pane
183
  document.getElementById('pane-logs').innerHTML = d.logs.map(l => `<div>${l}</div>`).join('');
184
 
185
- // Accuracy Pane
186
  let ah = "";
187
  if(Object.keys(d.type_acc).length > 0) {
188
  ah += `<table class="w-full text-left border-collapse">
@@ -195,21 +174,19 @@ setInterval(async () => {
195
  </tr>`;
196
  }
197
  ah += `</table>`;
198
- } else { ah = "No inference data yet."; }
199
  document.getElementById('pane-accuracy').innerHTML = ah;
200
 
201
- // Nodes Pane (Compact for mobile)
202
  let nh = "";
203
  ['A','C','B'].forEach(kind => {
204
  const k_nodes = Object.values(d.nodes).filter(n => n.kind === kind).sort((a,b)=>a.col-b.col);
205
  if(k_nodes.length === 0) return;
206
  const vals = k_nodes.map(n => n.x.toFixed(2)).join(', ');
207
  const color = kind==='A'?'text-orange-400':kind==='B'?'text-purple-400':'text-sky-400';
208
- 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>`;
209
  });
210
  document.getElementById('pane-nodes').innerHTML = nh;
211
 
212
- // Plotly Update
213
  const traces = [];
214
  const nodes = Object.values(d.nodes);
215
 
@@ -219,7 +196,8 @@ setInterval(async () => {
219
  if(!d.nodes[parts[0]] || !d.nodes[parts[1]]) continue;
220
 
221
  const pu = d.nodes[parts[0]].pos, pv = d.nodes[parts[1]].pos;
222
- const color = K > 0 ? `rgba(217,119,6,${Math.min(K/4,1)})` : `rgba(6,182,212,${Math.min(Math.abs(K)/4,1)})`;
 
223
  traces.push({
224
  type:'scatter', mode:'lines', x:[pu[0], pv[0]], y:[pu[1], pv[1]],
225
  line:{ color: color, width: 1.5 + Math.abs(K) }, hoverinfo:'none', showlegend:false
@@ -230,7 +208,7 @@ setInterval(async () => {
230
  type:'scatter', mode:'markers+text',
231
  x: nodes.map(n => n.pos[0]), y: nodes.map(n => n.pos[1]),
232
  text: nodes.map(n => n.x.toFixed(2)),
233
- textposition: 'top center', textfont: {size: 9, color: '#9ca3af'},
234
  marker: {
235
  size: 14, color: nodes.map(n => n.x), colorscale: 'Viridis',
236
  line: {color: nodes.map(n => ['A','B','C'].includes(n.kind)?'#ef4444':'#171717'), width: 2}
@@ -246,8 +224,7 @@ setInterval(async () => {
246
  if(!plotted) { Plotly.newPlot('mesh-plot', traces, layout, {responsive:true}); plotted = true; }
247
  else { Plotly.react('mesh-plot', traces, layout); }
248
 
249
- // Mobile error chart rendering (hidden on small screens usually, but we update the logic safely)
250
- if(document.getElementById('err-plot').offsetWidth > 0) {
251
  Plotly.react('err-plot', [{y: d.hist, type:'scatter', line:{color:'#22c55e'}}], {
252
  margin:{l:30,r:10,t:10,b:15}, paper_bgcolor:'transparent', plot_bgcolor:'transparent',
253
  xaxis:{visible:false}, yaxis:{gridcolor:'#262626'}
@@ -255,7 +232,7 @@ setInterval(async () => {
255
  }
256
 
257
  } catch (e) { showError("UI Error: " + e.message); }
258
- }, 300);
259
  </script>
260
  </body>
261
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Lattice LMS Controller</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
9
  <style>
 
20
  </head>
21
  <body class="flex flex-col h-screen overflow-hidden">
22
 
 
23
  <header class="glass flex-shrink-0 px-2 py-1.5 flex justify-between items-center gap-1">
24
  <div class="flex flex-wrap gap-1 items-center text-[8px] font-bold">
25
  <span id="b-mode" class="px-1.5 py-0.5 rounded bg-slate-800 text-slate-400 border border-slate-700">IDLE</span>
 
34
  </div>
35
  </header>
36
 
 
37
  <div class="flex-grow flex flex-col min-h-[30vh] overflow-hidden relative">
38
  <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>
39
  <div id="mesh-plot" class="flex-grow w-full"></div>
40
  <div id="err-plot" style="height:56px" class="flex-shrink-0 border-t border-slate-900 hidden md:block"></div>
41
  </div>
42
 
 
43
  <div class="glass flex-shrink-0 border-t border-slate-800 h-48">
44
  <div class="flex border-b border-slate-800 text-[10px]">
45
+ <button onclick="tab('nodes')" id="tab-nodes" class="flex-1 py-1 bg-blue-900/40 text-blue-300 font-bold">NODES (A, C, B)</button>
 
46
  <button onclick="tab('accuracy')" id="tab-accuracy" class="flex-1 py-1 text-slate-500">ACCURACY</button>
47
  <button onclick="tab('logs')" id="tab-logs" class="flex-1 py-1 text-slate-500">LOGS</button>
48
  </div>
49
  <div class="flex h-full overflow-hidden">
 
50
  <div class="w-24 flex-shrink-0 border-r border-slate-800 flex flex-col items-center justify-center p-1 gap-0.5">
51
  <div class="text-[7px] text-slate-600 uppercase">mean error</div>
52
  <div id="err-big" class="text-xl font-bold text-red-400 leading-none">0.00</div>
53
  </div>
 
54
  <div class="flex-grow overflow-y-auto p-1.5 text-[10px] pb-6">
55
  <div id="pane-nodes"></div>
 
56
  <div id="pane-accuracy" class="hidden"></div>
57
  <div id="pane-logs" class="hidden text-[9px] text-slate-500"></div>
58
  </div>
59
  </div>
60
  </div>
61
 
 
62
  <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">
63
  <div class="flex justify-between items-center">
64
  <span class="text-orange-400 font-bold">CONTROL PANEL</span>
 
66
  </div>
67
 
68
  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
 
69
  <div class="bg-slate-900 rounded p-3 border border-purple-900/50">
70
  <div class="text-purple-400 text-[9px] font-bold mb-2">OFFLINE TRAINING</div>
71
  <div class="flex gap-2 items-center">
 
75
  </div>
76
  </div>
77
 
 
78
  <div class="bg-slate-900 rounded p-3 border border-green-900/50">
79
  <div class="text-green-400 text-[9px] font-bold mb-2">BATCH INFERENCE (EWC)</div>
80
  <div class="flex gap-2 items-center">
 
85
  </div>
86
  </div>
87
 
 
88
  <div class="bg-slate-900 rounded p-3 border border-orange-900/50">
89
+ <div class="text-orange-400 text-[9px] font-bold mb-2">MANUAL INJECTION (D:8)</div>
90
  <div class="space-y-2">
91
  <div>
92
+ <label class="text-[8px] text-slate-500 block mb-0.5">Input A</label>
93
  <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">
94
  </div>
95
  <div>
96
+ <label class="text-[8px] text-slate-500 block mb-0.5">Input B</label>
97
  <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">
98
  </div>
99
  <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>
 
103
 
104
  <script>
105
  let plotted = false;
 
106
  function openDrawer() { document.getElementById('drawer').classList.remove('drawer-closed'); }
107
  function closeDrawer() { document.getElementById('drawer').classList.add('drawer-closed'); }
108
+ async function postAct(route) { try { await fetch(route, {method:'POST'}); } catch(e) { showError("Connection lost."); } }
 
 
 
 
109
 
110
  async function doTrain() {
111
  const ep = parseInt(document.getElementById('ep-n').value);
 
124
  const b = document.getElementById('man-b').value;
125
  const res = await fetch('/manual', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({a:a, b:b})});
126
  const data = await res.json();
127
+ if(!data.ok) alert(data.error); else closeDrawer();
 
128
  }
129
 
130
  function showError(msg) {
 
133
  }
134
 
135
  function tab(name) {
136
+ ['nodes','accuracy','logs'].forEach(t => {
137
  document.getElementById(`pane-${t}`).classList.toggle('hidden', t !== name);
138
  document.getElementById(`tab-${t}`).className = t === name
139
  ? 'flex-1 py-1 bg-blue-900/40 text-blue-300 font-bold text-[10px]'
 
148
  const d = await res.json();
149
  document.getElementById('error-box').classList.add('hidden');
150
 
 
151
  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';
152
  document.getElementById('b-mode').className = `px-1.5 py-0.5 rounded text-[8px] font-bold ${mcolor}`;
153
  document.getElementById('b-mode').innerText = d.mode.toUpperCase();
 
156
  document.getElementById('run-dot').className = `w-2 h-2 rounded-full ${d.running?'bg-green-400':'bg-slate-700'}`;
157
  document.getElementById('q-lbl').innerText = `Q:${d.queue_size}`;
158
 
 
159
  const col = d.error < 0.05 ? 'text-green-400' : d.error < 0.15 ? 'text-yellow-400' : 'text-red-400';
160
  document.getElementById('err-big').className = `text-xl font-bold ${col} leading-none`;
161
  document.getElementById('err-big').innerText = d.error.toFixed(4);
162
 
 
163
  document.getElementById('pane-logs').innerHTML = d.logs.map(l => `<div>${l}</div>`).join('');
164
 
 
165
  let ah = "";
166
  if(Object.keys(d.type_acc).length > 0) {
167
  ah += `<table class="w-full text-left border-collapse">
 
174
  </tr>`;
175
  }
176
  ah += `</table>`;
177
+ } else { ah = "No inference data yet. Run Batch Inference."; }
178
  document.getElementById('pane-accuracy').innerHTML = ah;
179
 
 
180
  let nh = "";
181
  ['A','C','B'].forEach(kind => {
182
  const k_nodes = Object.values(d.nodes).filter(n => n.kind === kind).sort((a,b)=>a.col-b.col);
183
  if(k_nodes.length === 0) return;
184
  const vals = k_nodes.map(n => n.x.toFixed(2)).join(', ');
185
  const color = kind==='A'?'text-orange-400':kind==='B'?'text-purple-400':'text-sky-400';
186
+ 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>`;
187
  });
188
  document.getElementById('pane-nodes').innerHTML = nh;
189
 
 
190
  const traces = [];
191
  const nodes = Object.values(d.nodes);
192
 
 
196
  if(!d.nodes[parts[0]] || !d.nodes[parts[1]]) continue;
197
 
198
  const pu = d.nodes[parts[0]].pos, pv = d.nodes[parts[1]].pos;
199
+ // Stiff/Positive = Amber, Repulsive/Negative = Cyan
200
+ const color = K > 0 ? `rgba(217,119,6,${Math.min(K/2.5,1)})` : `rgba(6,182,212,${Math.min(Math.abs(K)/2.5,1)})`;
201
  traces.push({
202
  type:'scatter', mode:'lines', x:[pu[0], pv[0]], y:[pu[1], pv[1]],
203
  line:{ color: color, width: 1.5 + Math.abs(K) }, hoverinfo:'none', showlegend:false
 
208
  type:'scatter', mode:'markers+text',
209
  x: nodes.map(n => n.pos[0]), y: nodes.map(n => n.pos[1]),
210
  text: nodes.map(n => n.x.toFixed(2)),
211
+ textposition: 'top center', textfont: {size: 10, color: '#9ca3af'},
212
  marker: {
213
  size: 14, color: nodes.map(n => n.x), colorscale: 'Viridis',
214
  line: {color: nodes.map(n => ['A','B','C'].includes(n.kind)?'#ef4444':'#171717'), width: 2}
 
224
  if(!plotted) { Plotly.newPlot('mesh-plot', traces, layout, {responsive:true}); plotted = true; }
225
  else { Plotly.react('mesh-plot', traces, layout); }
226
 
227
+ if(document.getElementById('err-plot').offsetWidth > 0 && d.hist.length > 0) {
 
228
  Plotly.react('err-plot', [{y: d.hist, type:'scatter', line:{color:'#22c55e'}}], {
229
  margin:{l:30,r:10,t:10,b:15}, paper_bgcolor:'transparent', plot_bgcolor:'transparent',
230
  xaxis:{visible:false}, yaxis:{gridcolor:'#262626'}
 
232
  }
233
 
234
  } catch (e) { showError("UI Error: " + e.message); }
235
+ }, 250);
236
  </script>
237
  </body>
238
  </html>