Hugging Face's logo

Spaces:
everydaytok
/
testing_space
Runtime error

App Files Community
1
everydaytok commited on
Commit
bc6da21
·
verified ·
1 Parent(s): 1f9dde9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +58 -36
index.html CHANGED
@@ -3,69 +3,79 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mesh Reasoner Lab</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>
10
  body { background: #06090e; color: #cbd5e1; font-family: monospace; }
11
- .glass { background: rgba(15,23,42,0.95); border: 1px solid #334155; }
12
- #drawer { transition: transform 0.3s ease-in-out; }
13
  .drawer-hidden { transform: translateY(100%); }
14
  </style>
15
  </head>
16
  <body class="flex flex-col h-screen overflow-hidden">
17
 
18
  <header class="glass p-3 flex justify-between items-center z-10">
19
- <h1 class="text-blue-400 font-bold text-xs uppercase tracking-tighter">Topological Model</h1>
20
- <button onclick="toggleDrawer()" class="bg-blue-600 px-4 py-1 rounded text-white text-xs font-bold">SETTINGS / TOOLS</button>
21
  </header>
22
 
23
- <aside id="drawer" class="fixed inset-x-0 bottom-0 drawer-hidden glass p-4 flex flex-col gap-4 z-50 max-h-[90vh] overflow-y-auto">
 
24
  <div class="flex justify-between items-center border-b border-slate-700 pb-2">
25
- <span class="text-orange-400 font-bold">CONTROLS</span>
26
- <button onclick="toggleDrawer()" class="text-slate-400 text-xl">✕</button>
27
  </div>
28
 
29
  <div class="space-y-4">
30
  <section>
31
- <label class="text-slate-500 text-[10px]">MODE</label>
32
- <select id="mode" onchange="sendConfig()" class="w-full bg-slate-900 border border-slate-700 p-2 text-white">
33
- <option value="training">TRAINING (A,B,C Locked -> Learn K)</option>
34
- <option value="inference">INFERENCE (A,B Locked -> C Drifts)</option>
35
  </select>
36
  </section>
37
 
38
- <section class="bg-purple-900/20 p-3 rounded border border-purple-800">
39
- <label class="text-purple-400 font-bold text-xs">FACTORIZATION DATASET</label>
40
- <div class="flex gap-2 mt-2">
41
- <input type="number" id="batch_count" value="10" class="w-1/2 bg-black text-center p-2 border border-slate-700">
42
- <button onclick="genFactors()" class="w-1/2 bg-purple-700 font-bold text-xs rounded">START SET</button>
 
 
 
 
 
 
 
 
 
43
  </div>
44
  </section>
45
 
46
- <section class="bg-blue-900/20 p-3 rounded border border-blue-800">
47
- <label class="text-blue-400 font-bold text-xs">CUSTOM TEST (FORWARD PASS)</label>
48
  <div class="grid grid-cols-2 gap-2 mt-2">
49
- <input type="number" id="custom_a" placeholder="A" class="bg-black text-center p-2 border border-slate-700">
50
- <input type="number" id="custom_b" placeholder="B" class="bg-black text-center p-2 border border-slate-700">
51
  </div>
52
- <button onclick="testCustom()" class="w-full bg-blue-700 mt-2 py-2 font-bold text-xs rounded uppercase">Predict C</button>
53
  </section>
54
 
55
- <button onclick="triggerHalt()" class="w-full border border-red-500 text-red-500 py-3 rounded font-bold">RESET ENGINE</button>
56
  </div>
57
  </aside>
58
 
59
  <main class="flex-grow flex flex-col min-h-0">
60
  <div id="plot" class="flex-grow"></div>
61
 
62
- <div class="h-56 glass border-t border-slate-700 p-4 flex flex-col overflow-y-auto">
63
  <div class="flex justify-between items-center mb-2">
64
- <h4 class="text-blue-300 text-[10px] font-bold">MODEL STATE</h4>
65
- <div id="error-val" class="text-xs font-bold">ERR: 0.000</div>
66
  </div>
67
- <div id="nodes-ui" class="space-y-1 text-[11px]"></div>
68
- <div id="logs" class="mt-3 pt-2 border-t border-slate-800 text-[9px] text-slate-500 space-y-1"></div>
69
  </div>
70
  </main>
71
 
@@ -74,15 +84,20 @@
74
  function toggleDrawer() { drawer.classList.toggle('drawer-hidden'); }
75
 
76
  async function sendConfig() {
 
 
77
  await fetch('/config', {
78
  method: 'POST', headers: {'Content-Type': 'application/json'},
79
- body: JSON.stringify({ mode: document.getElementById('mode').value })
 
 
 
80
  });
81
  }
82
 
83
- async function genFactors() {
84
  toggleDrawer();
85
- await fetch('/generate_factors', {
86
  method: 'POST', headers: {'Content-Type':'application/json'},
87
  body: JSON.stringify({ count: document.getElementById('batch_count').value })
88
  });
@@ -102,14 +117,17 @@
102
  try {
103
  const res = await fetch('/state');
104
  const d = await res.json();
105
-
106
  document.getElementById('error-val').innerText = "ERR: " + d.error.toFixed(4);
 
107
 
108
  let ui = "";
109
  let px=[], py=[], pz=[], ids=[];
110
  Object.keys(d.nodes).forEach(id => {
111
  const n = d.nodes[id];
112
- ui += `<div class="flex justify-between"><span>NODE ${id}: <b class="text-white">${n.x.toFixed(2)}</b></span> <span class="text-slate-500">K: ${n.k.toFixed(4)} | F: ${n.f.toFixed(3)}</span></div>`;
 
 
 
113
  px.push(n.x); py.push(id==='A'?1:id==='B'?-1:0); pz.push(0); ids.push(id);
114
  });
115
  document.getElementById('nodes-ui').innerHTML = ui;
@@ -118,13 +136,17 @@
118
  const trace = {
119
  type: 'scatter3d', mode: 'lines+markers+text',
120
  x: px.concat([px[0]]), y: py.concat([py[0]]), z: pz.concat([pz[0]]),
121
- text: ids.concat(['']), marker: {size: 10, color:['#fb923c','#c084fc','#38bdf8']}
 
 
122
  };
123
  const layout = {
124
  margin:{l:0,r:0,t:0,b:0}, paper_bgcolor:'transparent',
125
  scene:{
126
- xaxis:{color:'#475569'}, yaxis:{range:[-3,3], color:'#475569'}, zaxis:{range:[-3,3], color:'#475569'},
127
- camera: {eye:{x:1.5, y:1.5, z:1.5}}
 
 
128
  }
129
  };
130
  if(!window.plotted){ Plotly.newPlot('plot', [trace], layout, {displayModeBar:false}); window.plotted=true; }
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Topological Logic Lab</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>
10
  body { background: #06090e; color: #cbd5e1; font-family: monospace; }
11
+ .glass { background: rgba(15,23,42,0.98); border: 1px solid #334155; }
12
+ #drawer { transition: transform 0.3s ease-in-out; z-index: 100; }
13
  .drawer-hidden { transform: translateY(100%); }
14
  </style>
15
  </head>
16
  <body class="flex flex-col h-screen overflow-hidden">
17
 
18
  <header class="glass p-3 flex justify-between items-center z-10">
19
+ <h1 id="logic-label" class="text-blue-400 font-bold text-xs uppercase">LOGIC: ADDITION</h1>
20
+ <button onclick="toggleDrawer()" class="bg-blue-600 px-4 py-1 rounded text-white text-xs font-bold">⚙️ SETTINGS & DATA</button>
21
  </header>
22
 
23
+ <!-- SETTINGS DRAWER -->
24
+ <aside id="drawer" class="fixed inset-x-0 bottom-0 drawer-hidden glass p-5 flex flex-col gap-5 max-h-[90vh] overflow-y-auto">
25
  <div class="flex justify-between items-center border-b border-slate-700 pb-2">
26
+ <span class="text-orange-400 font-bold">SYSTEM CONFIGURATION</span>
27
+ <button onclick="toggleDrawer()" class="text-slate-400 text-2xl">✕</button>
28
  </div>
29
 
30
  <div class="space-y-4">
31
  <section>
32
+ <label class="text-slate-500 text-[10px]">EXECUTION MODE</label>
33
+ <select id="mode" onchange="sendConfig()" class="w-full bg-slate-900 border border-slate-700 p-3 text-white rounded">
34
+ <option value="training">TRAINING (Learn K factor)</option>
35
+ <option value="inference">INFERENCE (Predict Output C)</option>
36
  </select>
37
  </section>
38
 
39
+ <section>
40
+ <label class="text-slate-500 text-[10px]">CONSTRAINT LOGIC TYPE</label>
41
+ <select id="logicType" onchange="sendConfig()" class="w-full bg-slate-900 border border-slate-700 p-3 text-white rounded">
42
+ <option value="add">ADDITION (A + B = C)</option>
43
+ <option value="mult">MULTIPLICATION (A * B = C)</option>
44
+ </select>
45
+ </section>
46
+
47
+ <section class="bg-purple-900/20 p-4 rounded border border-purple-800">
48
+ <label class="text-purple-400 font-bold text-xs">BATCH DATASET GENERATOR</label>
49
+ <p class="text-[10px] text-slate-500 mb-2">Generates random problems based on Logic Type.</p>
50
+ <div class="flex gap-2">
51
+ <input type="number" id="batch_count" value="15" class="w-1/2 bg-black text-center p-2 border border-slate-700">
52
+ <button onclick="genBatch()" class="w-1/2 bg-purple-700 font-bold text-xs rounded">START BATCH</button>
53
  </div>
54
  </section>
55
 
56
+ <section class="bg-blue-900/20 p-4 rounded border border-blue-800">
57
+ <label class="text-blue-400 font-bold text-xs">CUSTOM INPUT TEST (A & B)</label>
58
  <div class="grid grid-cols-2 gap-2 mt-2">
59
+ <input type="number" id="custom_a" value="7" class="bg-black text-center p-2 border border-slate-700">
60
+ <input type="number" id="custom_b" value="8" class="bg-black text-center p-2 border border-slate-700">
61
  </div>
62
+ <button onclick="testCustom()" class="w-full bg-blue-700 mt-2 py-3 font-bold text-xs rounded uppercase">Run Prediction</button>
63
  </section>
64
 
65
+ <button onclick="triggerHalt()" class="w-full border border-red-500 text-red-500 py-3 rounded font-bold">RESET / HALT</button>
66
  </div>
67
  </aside>
68
 
69
  <main class="flex-grow flex flex-col min-h-0">
70
  <div id="plot" class="flex-grow"></div>
71
 
72
+ <div class="h-64 glass border-t border-slate-700 p-4 flex flex-col">
73
  <div class="flex justify-between items-center mb-2">
74
+ <h4 class="text-blue-300 text-[10px] font-bold">LIVE TOPOLOGY</h4>
75
+ <div id="error-val" class="text-xs font-bold text-red-400">ERR: 0.000</div>
76
  </div>
77
+ <div id="nodes-ui" class="space-y-1 text-[11px] font-mono"></div>
78
+ <div id="logs" class="mt-auto pt-2 border-t border-slate-800 text-[9px] text-slate-500 h-20 overflow-y-auto"></div>
79
  </div>
80
  </main>
81
 
 
84
  function toggleDrawer() { drawer.classList.toggle('drawer-hidden'); }
85
 
86
  async function sendConfig() {
87
+ const type = document.getElementById('logicType').value;
88
+ document.getElementById('logic-label').innerText = "LOGIC: " + type.toUpperCase();
89
  await fetch('/config', {
90
  method: 'POST', headers: {'Content-Type': 'application/json'},
91
+ body: JSON.stringify({
92
+ mode: document.getElementById('mode').value,
93
+ type: type
94
+ })
95
  });
96
  }
97
 
98
+ async function genBatch() {
99
  toggleDrawer();
100
+ await fetch('/generate_batch', {
101
  method: 'POST', headers: {'Content-Type':'application/json'},
102
  body: JSON.stringify({ count: document.getElementById('batch_count').value })
103
  });
 
117
  try {
118
  const res = await fetch('/state');
119
  const d = await res.json();
 
120
  document.getElementById('error-val').innerText = "ERR: " + d.error.toFixed(4);
121
+ document.getElementById('error-val').className = Math.abs(d.error) < 0.05 ? "text-green-400 font-bold" : "text-red-400 font-bold";
122
 
123
  let ui = "";
124
  let px=[], py=[], pz=[], ids=[];
125
  Object.keys(d.nodes).forEach(id => {
126
  const n = d.nodes[id];
127
+ ui += `<div class="flex justify-between border-b border-slate-800 pb-1">
128
+ <span>NODE ${id}: <b class="text-white">${n.x.toFixed(2)}</b></span>
129
+ <span class="text-slate-500 italic">K=${n.k.toFixed(4)} | F=${n.f.toFixed(3)}</span>
130
+ </div>`;
131
  px.push(n.x); py.push(id==='A'?1:id==='B'?-1:0); pz.push(0); ids.push(id);
132
  });
133
  document.getElementById('nodes-ui').innerHTML = ui;
 
136
  const trace = {
137
  type: 'scatter3d', mode: 'lines+markers+text',
138
  x: px.concat([px[0]]), y: py.concat([py[0]]), z: pz.concat([pz[0]]),
139
+ text: ids.concat(['']),
140
+ marker: {size: 10, color:['#fb923c','#c084fc','#38bdf8']},
141
+ line: {color:'#334155', width:2}
142
  };
143
  const layout = {
144
  margin:{l:0,r:0,t:0,b:0}, paper_bgcolor:'transparent',
145
  scene:{
146
+ xaxis:{color:'#475569', title:'COORD'},
147
+ yaxis:{range:[-2,2], visible:false},
148
+ zaxis:{range:[-2,2], visible:false},
149
+ camera: {eye:{x:0, y:-1.8, z:0.8}}
150
  }
151
  };
152
  if(!window.plotted){ Plotly.newPlot('plot', [trace], layout, {displayModeBar:false}); window.plotted=true; }