testing_space

Runtime error

App Files Files Community

everydaytok commited on 8 days ago

Commit

1357925

verified ·

1 Parent(s): b39794e

Update index.html

Browse files

Files changed (1) hide show

index.html +68 -127

index.html CHANGED Viewed

@@ -2,193 +2,134 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Mesh Reasoner Lab Mobile</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; overflow: hidden; }
         .glass { background: rgba(15,23,42,0.95); border: 1px solid #334155; }
-        .force-pos { color: #4ade80; }
-        .force-neg { color: #f87171; }
-        /* Control Drawer for Mobile */
-        #drawer { transition: transform 0.3s ease-in-out; z-index: 50; }
         .drawer-hidden { transform: translateY(100%); }
-        @media (min-width: 1024px) {
-            #drawer { transform: none !important; position: static; width: 24rem; height: 100%; }
-            #drawer-toggle { display: none; }
-        }
     </style>
 </head>
-<body class="flex flex-col lg:flex-row h-screen">
-    <!-- Header for Mobile -->
-    <header class="lg:hidden glass p-3 flex justify-between items-center z-10">
-        <h1 class="text-blue-400 font-bold text-sm">MESH REASONER</h1>
-        <button onclick="toggleDrawer()" id="drawer-toggle" class="bg-blue-600 px-4 py-1 rounded text-white text-xs font-bold">⚙️ SETTINGS</button>
     </header>
-    <!-- Controls Drawer / Sidebar -->
-    <aside id="drawer" class="fixed inset-x-0 bottom-0 lg:relative lg:translate-y-0 drawer-hidden glass p-4 flex flex-col gap-4 overflow-y-auto max-h-[80vh] lg:max-h-full">
-        <div class="flex justify-between items-center lg:hidden border-b border-slate-700 pb-2">
-            <span class="text-orange-400 font-bold">CONFIG DIALS</span>
-            <button onclick="toggleDrawer()" class="text-slate-400">CLOSE ✕</button>
         </div>
-        <div class="space-y-4 text-sm lg:text-xs">
             <section>
-                <label class="text-slate-500 block mb-1">PHASE</label>
-                <select id="mode" onchange="sendConfig()" class="w-full bg-slate-900 border border-slate-700 p-2 lg:p-1 rounded">
-                    <option value="inference">INFERENCE (Solving)</option>
-                    <option value="training">TRAINING (Learning K)</option>
                 </select>
             </section>
-            <section>
-                <label class="text-slate-500 block mb-1">CONSTRAINT LOGIC</label>
-                <select id="probType" onchange="sendConfig()" class="w-full bg-slate-900 border border-slate-700 p-2 lg:p-1 rounded">
-                    <option value="add">A + B = C</option>
-                    <option value="mult">A * B = C</option>
-                </select>
             </section>
-            <section class="border-t border-slate-800 pt-2">
-                <label class="text-green-400 block mb-1">TARGET C:</label>
-                <input type="number" id="singleVal" value="45" class="w-full bg-black border border-slate-700 p-2 text-center text-lg lg:text-base font-bold">
-                <button onclick="triggerSingle(); toggleDrawer()" class="w-full bg-blue-700 mt-2 py-3 lg:py-1 font-bold rounded shadow-lg">ENGAGE SINGLE RUN</button>
             </section>
-            <section class="bg-slate-900/50 p-2 rounded border border-slate-800">
-                <label class="text-purple-400 block mb-1">BATCH TEST SETS:</label>
-                <input type="number" id="b_count" value="10" class="w-full bg-black border border-slate-700 p-2 mb-1">
-                <button onclick="triggerBatch(); toggleDrawer()" class="w-full bg-purple-700 py-3 lg:py-1 font-bold rounded">START BATCH RUN</button>
-            </section>
-            <button onclick="triggerHalt(); toggleDrawer()" class="w-full border border-red-500 text-red-500 py-2 hover:bg-red-900 rounded">RESET ENGINE</button>
-        </div>
-        <div class="mt-auto border-t border-slate-800 pt-4 pb-6 lg:pb-0">
-            <h3 class="text-xs text-orange-400 uppercase tracking-widest">Live Error</h3>
-            <div id="error-meter" class="text-3xl lg:text-2xl font-bold">0.000</div>
-            <div class="w-full bg-slate-800 h-3 mt-1 rounded-full overflow-hidden">
-                <div id="error-bar" class="bg-red-500 h-full transition-all" style="width: 0%"></div>
-            </div>
         </div>
     </aside>
-    <!-- Main Viewport -->
     <main class="flex-grow flex flex-col min-h-0">
-        <!-- 3D Plot Area -->
-        <div id="plot" class="flex-grow min-h-[40vh]"></div>
-        <!-- Live Data Feed Area -->
-        <div class="h-48 lg:h-64 border-t border-slate-700 flex flex-col lg:flex-row bg-black/80 backdrop-blur-md">
-            <!-- Force Meters -->
-            <div id="force-tracker" class="w-full lg:w-1/2 p-3 border-b lg:border-b-0 lg:border-r border-slate-800 text-[10px] lg:text-[11px] overflow-y-auto">
-                <h4 class="text-blue-300 mb-1 sticky top-0 bg-black/80">NODE FORCES (ADOPTION)</h4>
-                <div id="node-details" class="space-y-1">Waiting...</div>
-            </div>
-            <!-- Event Log -->
-            <div id="logger" class="hidden lg:block lg:w-1/2 p-3 text-[10px] text-slate-500 overflow-y-auto">
-                <h4 class="text-slate-400 mb-1">EVENT LOG</h4>
-                <div id="log-content">...</div>
             </div>
         </div>
     </main>
     <script>
-        let drawerOpen = false;
-        function toggleDrawer() {
-            const drawer = document.getElementById('drawer');
-            drawerOpen = !drawerOpen;
-            if (drawerOpen) drawer.classList.remove('drawer-hidden');
-            else drawer.classList.add('drawer-hidden');
-        }
         async function sendConfig() {
-            await fetch('/apply_config', {
                 method: 'POST', headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({
-                    mode: document.getElementById('mode').value,
-                    distribution: 'individual',
-                    problem_type: document.getElementById('probType').value,
-                    asymmetric: false
-                })
             });
         }
-        async function triggerSingle() {
-            await sendConfig();
-            await fetch('/single_run', {
                 method: 'POST', headers: {'Content-Type':'application/json'},
-                body: JSON.stringify({ target: document.getElementById('singleVal').value })
             });
         }
-        async function triggerBatch() {
-            await fetch('/batch_run', {
                 method: 'POST', headers: {'Content-Type':'application/json'},
-                body: JSON.stringify({
-                    batch_size: document.getElementById('b_count').value,
-                    val_min: 10, val_max: 100
-                })
             });
         }
-        async function triggerHalt() { await fetch('/halt', {method: 'POST'}); }
         setInterval(async () => {
             try {
-                const r = await fetch('/state');
-                const d = await r.json();
-                // 1. Error Logic
-                const err = Math.abs(d.error);
-                document.getElementById('error-meter').innerText = d.error.toFixed(4);
-                document.getElementById('error-bar').style.width = Math.min(100, err * 2) + "%";
-                document.getElementById('error-meter').className = err < 0.1 ? "text-green-400 text-3xl font-bold" : "text-red-400 text-3xl font-bold";
-                // 2. Nodes/Forces Logic
-                let forceHTML = "";
                 let px=[], py=[], pz=[], ids=[];
                 Object.keys(d.nodes).forEach(id => {
                     const n = d.nodes[id];
-                    const fColor = n.force > 0 ? "text-green-400" : "text-red-400";
-                    forceHTML += `<div class="border-b border-slate-900 pb-1">NODE ${id}: <span class="text-white">X=${n.x.toFixed(2)}</span> | <span class="${fColor}">F=${n.force.toFixed(3)}</span> | K=${n.k.toFixed(3)}</div>`;
-                    px.push(n.x); py.push(n.y); pz.push(n.z); ids.push(id);
                 });
-                document.getElementById('node-details').innerHTML = forceHTML;
-                document.getElementById('log-content').innerHTML = d.logs.map(l => `<div>${l}</div>`).join('');
-                // 3. Optimized Plotly Logic
                 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: 8, color: ['#fb923c','#c084fc','#38bdf8']},
-                    line: {color: '#334155', width: 2}
                 };
                 const layout = {
-                    margin: {l:0,r:0,t:0,b:0},
-                    paper_bgcolor: 'transparent',
-                    showlegend: false,
-                    scene: {
-                        xaxis: {range: [-5, 105], color: '#475569'},
-                        yaxis: {range: [-3, 3], color: '#475569'},
-                        zaxis: {range: [-3, 3], color: '#475569'},
-                        camera: { eye: {x: 1.2, y: 1.2, z: 1.2} }
                     }
                 };
-                const config = { responsive: true, displayModeBar: false };
-                if(!window.plotted){
-                    Plotly.newPlot('plot', [trace], layout, config);
-                    window.plotted=true;
-                } else {
-                    Plotly.react('plot', [trace], layout, config);
-                }
-            } catch(e) {}
         }, 200);
     </script>
 </body>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mesh Reasoner 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.95); border: 1px solid #334155; }
+        #drawer { transition: transform 0.3s ease-in-out; }
         .drawer-hidden { transform: translateY(100%); }
     </style>
 </head>
+<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 tracking-tighter">Topological Model</h1>
+        <button onclick="toggleDrawer()" class="bg-blue-600 px-4 py-1 rounded text-white text-xs font-bold">SETTINGS / TOOLS</button>
     </header>
+    <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">
+        <div class="flex justify-between items-center border-b border-slate-700 pb-2">
+            <span class="text-orange-400 font-bold">CONTROLS</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]">MODE</label>
+                <select id="mode" onchange="sendConfig()" class="w-full bg-slate-900 border border-slate-700 p-2 text-white">
+                    <option value="training">TRAINING (A,B,C Locked -> Learn K)</option>
+                    <option value="inference">INFERENCE (A,B Locked -> C Drifts)</option>
                 </select>
             </section>
+            <section class="bg-purple-900/20 p-3 rounded border border-purple-800">
+                <label class="text-purple-400 font-bold text-xs">FACTORIZATION DATASET</label>
+                <div class="flex gap-2 mt-2">
+                    <input type="number" id="batch_count" value="10" class="w-1/2 bg-black text-center p-2 border border-slate-700">
+                    <button onclick="genFactors()" class="w-1/2 bg-purple-700 font-bold text-xs rounded">START SET</button>
+                </div>
             </section>
+            <section class="bg-blue-900/20 p-3 rounded border border-blue-800">
+                <label class="text-blue-400 font-bold text-xs">CUSTOM TEST (FORWARD PASS)</label>
+                <div class="grid grid-cols-2 gap-2 mt-2">
+                    <input type="number" id="custom_a" placeholder="A" class="bg-black text-center p-2 border border-slate-700">
+                    <input type="number" id="custom_b" placeholder="B" class="bg-black text-center p-2 border border-slate-700">
+                </div>
+                <button onclick="testCustom()" class="w-full bg-blue-700 mt-2 py-2 font-bold text-xs rounded uppercase">Predict C</button>
             </section>
+            <button onclick="triggerHalt()" class="w-full border border-red-500 text-red-500 py-3 rounded font-bold">RESET ENGINE</button>
         </div>
     </aside>
     <main class="flex-grow flex flex-col min-h-0">
+        <div id="plot" class="flex-grow"></div>
+        <div class="h-56 glass border-t border-slate-700 p-4 flex flex-col overflow-y-auto">
+            <div class="flex justify-between items-center mb-2">
+                <h4 class="text-blue-300 text-[10px] font-bold">MODEL STATE</h4>
+                <div id="error-val" class="text-xs font-bold">ERR: 0.000</div>
             </div>
+            <div id="nodes-ui" class="space-y-1 text-[11px]"></div>
+            <div id="logs" class="mt-3 pt-2 border-t border-slate-800 text-[9px] text-slate-500 space-y-1"></div>
         </div>
     </main>
     <script>
+        let drawer = document.getElementById('drawer');
+        function toggleDrawer() { drawer.classList.toggle('drawer-hidden'); }
         async function sendConfig() {
+            await fetch('/config', {
                 method: 'POST', headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({ mode: document.getElementById('mode').value })
             });
         }
+        async function genFactors() {
+            toggleDrawer();
+            await fetch('/generate_factors', {
                 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);
+                let ui = "";
                 let px=[], py=[], pz=[], ids=[];
                 Object.keys(d.nodes).forEach(id => {
                     const n = d.nodes[id];
+                    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>`;
+                    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']}
                 };
                 const layout = {
+                    margin:{l:0,r:0,t:0,b:0}, paper_bgcolor:'transparent',
+                    scene:{
+                        xaxis:{color:'#475569'}, yaxis:{range:[-3,3], color:'#475569'}, zaxis:{range:[-3,3], color:'#475569'},
+                        camera: {eye:{x:1.5, y:1.5, z:1.5}}
                     }
                 };
+                if(!window.plotted){ Plotly.newPlot('plot', [trace], layout, {displayModeBar:false}); window.plotted=true; }
+                else { Plotly.react('plot', [trace], layout); }
+            } catch(e){}
         }, 200);
     </script>
 </body>