testing_space

Runtime error

App Files Files Community

everydaytok commited on 11 days ago

Commit

c5b8264

verified ·

1 Parent(s): 85504c2

Update index.html

Browse files

Files changed (1) hide show

index.html +43 -87

index.html CHANGED Viewed

@@ -3,12 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Topological Logic Lab</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: monospace; }
-        .glass { background: rgba(15,23,42,0.98); border: 1px solid #334155; }
         #drawer { transition: transform 0.3s ease-in-out; z-index: 100; }
         .drawer-hidden { transform: translateY(100%); }
     </style>
@@ -16,143 +16,99 @@
 <body class="flex flex-col h-screen overflow-hidden">
     <header class="glass p-3 flex justify-between items-center z-10">
-        <h1 id="logic-label" class="text-blue-400 font-bold text-xs uppercase">LOGIC: ADDITION</h1>
-        <button onclick="toggleDrawer()" class="bg-blue-600 px-4 py-1 rounded text-white text-xs font-bold">⚙️ SETTINGS & DATA</button>
     </header>
-    <!-- SETTINGS DRAWER -->
-    <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">
         <div class="flex justify-between items-center border-b border-slate-700 pb-2">
-            <span class="text-orange-400 font-bold">SYSTEM CONFIGURATION</span>
-            <button onclick="toggleDrawer()" class="text-slate-400 text-2xl">✕</button>
         </div>
         <div class="space-y-4">
             <section>
-                <label class="text-slate-500 text-[10px]">EXECUTION MODE</label>
-                <select id="mode" onchange="sendConfig()" class="w-full bg-slate-900 border border-slate-700 p-3 text-white rounded">
-                    <option value="training">TRAINING (Learn K factor)</option>
-                    <option value="inference">INFERENCE (Predict Output C)</option>
-                </select>
             </section>
             <section>
-                <label class="text-slate-500 text-[10px]">CONSTRAINT LOGIC TYPE</label>
-                <select id="logicType" onchange="sendConfig()" class="w-full bg-slate-900 border border-slate-700 p-3 text-white rounded">
-                    <option value="add">ADDITION (A + B = C)</option>
-                    <option value="mult">MULTIPLICATION (A * B = C)</option>
                 </select>
             </section>
-            <section class="bg-purple-900/20 p-4 rounded border border-purple-800">
-                <label class="text-purple-400 font-bold text-xs">BATCH DATASET GENERATOR</label>
-                <p class="text-[10px] text-slate-500 mb-2">Generates random problems based on Logic Type.</p>
-                <div class="flex gap-2">
-                    <input type="number" id="batch_count" value="15" class="w-1/2 bg-black text-center p-2 border border-slate-700">
-                    <button onclick="genBatch()" class="w-1/2 bg-purple-700 font-bold text-xs rounded">START BATCH</button>
-                </div>
-            </section>
-            <section class="bg-blue-900/20 p-4 rounded border border-blue-800">
-                <label class="text-blue-400 font-bold text-xs">CUSTOM INPUT TEST (A & B)</label>
-                <div class="grid grid-cols-2 gap-2 mt-2">
-                    <input type="number" id="custom_a" value="7" class="bg-black text-center p-2 border border-slate-700">
-                    <input type="number" id="custom_b" value="8" class="bg-black text-center p-2 border border-slate-700">
-                </div>
-                <button onclick="testCustom()" class="w-full bg-blue-700 mt-2 py-3 font-bold text-xs rounded uppercase">Run Prediction</button>
             </section>
-            <button onclick="triggerHalt()" class="w-full border border-red-500 text-red-500 py-3 rounded font-bold">RESET / HALT</button>
         </div>
     </aside>
     <main class="flex-grow flex flex-col min-h-0">
         <div id="plot" class="flex-grow"></div>
-        <div class="h-64 glass border-t border-slate-700 p-4 flex flex-col">
-            <div class="flex justify-between items-center mb-2">
-                <h4 class="text-blue-300 text-[10px] font-bold">LIVE TOPOLOGY</h4>
-                <div id="error-val" class="text-xs font-bold text-red-400">ERR: 0.000</div>
-            </div>
-            <div id="nodes-ui" class="space-y-1 text-[11px] font-mono"></div>
-            <div id="logs" class="mt-auto pt-2 border-t border-slate-800 text-[9px] text-slate-500 h-20 overflow-y-auto"></div>
         </div>
     </main>
     <script>
-        let drawer = document.getElementById('drawer');
-        function toggleDrawer() { drawer.classList.toggle('drawer-hidden'); }
-        async function sendConfig() {
-            const type = document.getElementById('logicType').value;
-            document.getElementById('logic-label').innerText = "LOGIC: " + type.toUpperCase();
             await fetch('/config', {
                 method: 'POST', headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify({
                     mode: document.getElementById('mode').value,
-                    type: type
                 })
             });
-        }
-        async function genBatch() {
             toggleDrawer();
-            await fetch('/generate_batch', {
-                method: 'POST', headers: {'Content-Type':'application/json'},
-                body: JSON.stringify({ count: document.getElementById('batch_count').value })
-            });
         }
-        async function testCustom() {
             toggleDrawer();
-            await fetch('/test_custom', {
-                method: 'POST', headers: {'Content-Type':'application/json'},
-                body: JSON.stringify({ a: document.getElementById('custom_a').value, b: document.getElementById('custom_b').value })
-            });
         }
-        async function triggerHalt() { toggleDrawer(); await fetch('/halt', {method: 'POST'}); }
         setInterval(async () => {
             try {
                 const res = await fetch('/state');
                 const d = await res.json();
-                document.getElementById('error-val').innerText = "ERR: " + d.error.toFixed(4);
-                document.getElementById('error-val').className = Math.abs(d.error) < 0.05 ? "text-green-400 font-bold" : "text-red-400 font-bold";
                 let ui = "";
                 let px=[], py=[], pz=[], ids=[];
-                Object.keys(d.nodes).forEach(id => {
                     const n = d.nodes[id];
-                    ui += `<div class="flex justify-between border-b border-slate-800 pb-1">
-                             <span>NODE ${id}: <b class="text-white">${n.x.toFixed(2)}</b></span>
-                             <span class="text-slate-500 italic">K=${n.k.toFixed(4)} | F=${n.f.toFixed(3)}</span>
-                           </div>`;
-                    px.push(n.x); py.push(id==='A'?1:id==='B'?-1:0); pz.push(0); ids.push(id);
                 });
                 document.getElementById('nodes-ui').innerHTML = ui;
-                document.getElementById('logs').innerHTML = d.logs.map(l => `<div>${l}</div>`).join('');
                 const trace = {
-                    type: 'scatter3d', mode: 'lines+markers+text',
-                    x: px.concat([px[0]]), y: py.concat([py[0]]), z: pz.concat([pz[0]]),
-                    text: ids.concat(['']),
-                    marker: {size: 10, color:['#fb923c','#c084fc','#38bdf8']},
-                    line: {color:'#334155', width:2}
-                };
-                const layout = {
-                    margin:{l:0,r:0,t:0,b:0}, paper_bgcolor:'transparent',
-                    scene:{
-                        xaxis:{color:'#475569', title:'COORD'},
-                        yaxis:{range:[-2,2], visible:false},
-                        zaxis:{range:[-2,2], visible:false},
-                        camera: {eye:{x:0, y:-1.8, z:0.8}}
-                    }
                 };
-                if(!window.plotted){ Plotly.newPlot('plot', [trace], layout, {displayModeBar:false}); window.plotted=true; }
-                else { Plotly.react('plot', [trace], layout); }
             } catch(e){}
-        }, 200);
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multicellular Mesh Engine</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: monospace; }
+        .glass { background: rgba(15,23,42,0.95); border: 1px solid #334155; }
         #drawer { transition: transform 0.3s ease-in-out; z-index: 100; }
         .drawer-hidden { transform: translateY(100%); }
     </style>
 <body class="flex flex-col h-screen overflow-hidden">
     <header class="glass p-3 flex justify-between items-center z-10">
+        <h1 class="text-blue-400 font-bold text-xs uppercase">Multicellular Mesh</h1>
+        <button onclick="toggleDrawer()" class="bg-blue-600 px-4 py-1 rounded text-white text-xs font-bold font-sans">MESH CONFIG</button>
     </header>
+    <aside id="drawer" class="fixed inset-x-0 bottom-0 drawer-hidden glass p-6 flex flex-col gap-4 z-50 max-h-[90vh] overflow-y-auto">
         <div class="flex justify-between items-center border-b border-slate-700 pb-2">
+            <span class="text-orange-400 font-bold">MESH ARCHITECTURE</span>
+            <button onclick="toggleDrawer()" class="text-slate-400 text-xl">✕</button>
         </div>
         <div class="space-y-4">
             <section>
+                <label class="text-slate-500 text-[10px]">MESH DEPTH (Hidden Cells between A-C / B-C)</label>
+                <input type="number" id="meshDepth" value="3" class="w-full bg-black border border-slate-700 p-3 text-blue-400 font-bold">
             </section>
             <section>
+                <label class="text-slate-500 text-[10px]">PROBLEM DOMAIN</label>
+                <select id="probType" class="w-full bg-slate-900 border border-slate-700 p-3 text-white rounded">
+                    <option value="housing">Housing (Loc ID + Size -> Price)</option>
+                    <option value="sub">Subtraction (A - B = C)</option>
+                    <option value="div">Division (A / B = C)</option>
                 </select>
             </section>
+            <section>
+                <label class="text-slate-500 text-[10px]">PHASE</label>
+                <select id="mode" class="w-full bg-slate-900 border border-slate-700 p-3 text-white rounded">
+                    <option value="training">TRAINING (Learn Relationships)</option>
+                    <option value="inference">INFERENCE (Predict Output)</option>
+                </select>
             </section>
+            <button onclick="applyConfig()" class="w-full bg-blue-700 py-3 font-bold rounded">APPLY & RESET MESH</button>
+            <button onclick="genData()" class="w-full bg-purple-700 py-3 font-bold rounded">START DATASET RUN</button>
+            <button onclick="halt()" class="w-full border border-red-500 text-red-500 py-3 rounded">HALT</button>
         </div>
     </aside>
     <main class="flex-grow flex flex-col min-h-0">
         <div id="plot" class="flex-grow"></div>
+        <div class="h-48 glass border-t border-slate-700 p-4 font-mono text-[10px]">
+            <div id="error-val" class="text-lg font-bold text-red-400 mb-2">ERR: 0.000</div>
+            <div id="nodes-ui" class="grid grid-cols-2 gap-2 h-24 overflow-y-auto"></div>
         </div>
     </main>
     <script>
+        function toggleDrawer() { document.getElementById('drawer').classList.toggle('drawer-hidden'); }
+        async function applyConfig() {
             await fetch('/config', {
                 method: 'POST', headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify({
                     mode: document.getElementById('mode').value,
+                    depth: document.getElementById('meshDepth').value,
+                    type: document.getElementById('probType').value
                 })
             });
             toggleDrawer();
         }
+        async function genData() {
+            await fetch('/generate', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({}) });
             toggleDrawer();
         }
+        async function halt() { await fetch('/halt', {method: 'POST'}); toggleDrawer(); }
         setInterval(async () => {
             try {
                 const res = await fetch('/state');
                 const d = await res.json();
+                document.getElementById('error-val').innerText = "SYSTEM TENSION: " + d.error.toFixed(4);
                 let ui = "";
                 let px=[], py=[], pz=[], ids=[];
+                Object.keys(d.nodes).sort().forEach(id => {
                     const n = d.nodes[id];
+                    ui += `<div>${id}: <b>${n.x.toFixed(2)}</b> <span class="text-slate-600">K:${n.k.toFixed(2)}</span></div>`;
+                    px.push(n.x); py.push(n.y); pz.push(0); ids.push(id);
                 });
                 document.getElementById('nodes-ui').innerHTML = ui;
                 const trace = {
+                    type: 'scatter3d', mode: 'markers+text',
+                    x: px, y: py, z: pz,
+                    text: ids, marker: {size: 8, color:'#38bdf8'}
                 };
+                if(!window.plotted){ Plotly.newPlot('plot', [trace], {margin:{l:0,r:0,t:0,b:0}, paper_bgcolor:'transparent', scene:{camera:{eye:{x:1.5,y:1.5,z:1.5}}}}, {displayModeBar:false}); window.plotted=true; }
+                else { Plotly.react('plot', [trace]); }
             } catch(e){}
+        }, 300);
     </script>
 </body>
 </html>