testing_space

Runtime error

App Files Files Community

everydaytok commited on 8 days ago

Commit

7c2f631

verified ·

1 Parent(s): fe9c5f9

Update index.html

Browse files

Files changed (1) hide show

index.html +89 -44

index.html CHANGED Viewed

@@ -2,79 +2,109 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <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.9); border: 1px solid #334155; }
         .force-pos { color: #4ade80; }
         .force-neg { color: #f87171; }
     </style>
 </head>
-<body class="flex h-screen overflow-hidden">
-    <aside class="w-96 glass p-4 flex flex-col gap-4 overflow-y-auto">
-        <h1 class="text-blue-400 font-bold border-b border-slate-700 pb-2">TOPOLOGICAL DIALS</h1>
-        <div class="space-y-4 text-xs">
             <section>
-                <label class="text-slate-500">PHASE</label>
-                <select id="mode" onchange="sendConfig()" class="w-full bg-slate-900 border border-slate-700 p-1">
                     <option value="inference">INFERENCE (Solving)</option>
                     <option value="training">TRAINING (Learning K)</option>
                 </select>
             </section>
             <section>
-                <label class="text-slate-500">CONSTRAINT LOGIC</label>
-                <select id="probType" onchange="sendConfig()" class="w-full bg-slate-900 border border-slate-700 p-1">
                     <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">TARGET C:</label>
-                <input type="number" id="singleVal" value="45" class="w-full bg-black border border-slate-700 p-1 text-center">
-                <button onclick="triggerSingle()" class="w-full bg-blue-700 mt-2 py-1 font-bold">ENGAGE SINGLE RUN</button>
             </section>
-            <section class="bg-slate-900 p-2 rounded">
-                <label class="text-purple-400">BATCH TEST SETS:</label>
-                <input type="number" id="b_count" value="10" class="w-full bg-black border border-slate-700 p-1 mb-1">
-                <button onclick="triggerBatch()" class="w-full bg-purple-700 py-1 font-bold">START BATCH RUN</button>
             </section>
-            <button onclick="triggerHalt()" class="w-full border border-red-500 text-red-500 py-1 hover:bg-red-900">RESET ENGINE</button>
         </div>
-        <div class="mt-auto border-t border-slate-800 pt-4">
-            <h3 class="text-xs text-orange-400">LIVE SYSTEM ERROR</h3>
-            <div id="error-meter" class="text-2xl font-bold">0.000</div>
-            <div class="w-full bg-slate-800 h-2 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 class="flex-grow flex flex-col">
-        <div id="plot" class="flex-grow"></div>
-        <div class="h-64 border-t border-slate-700 flex bg-black/50">
             <!-- Force Meters -->
-            <div id="force-tracker" class="w-1/2 p-4 border-r border-slate-800 text-[11px] overflow-y-auto">
-                <h4 class="text-blue-300 mb-2 underline">NODE FORCE VECTORS</h4>
-                <div id="node-details">Waiting...</div>
             </div>
             <!-- Event Log -->
-            <div id="logger" class="w-1/2 p-4 text-[10px] text-slate-500 overflow-y-auto">
-                <h4 class="text-slate-400 mb-2">EVENT LOG</h4>
                 <div id="log-content">...</div>
             </div>
         </div>
     </main>
     <script>
         async function sendConfig() {
             await fetch('/apply_config', {
                 method: 'POST', headers: {'Content-Type': 'application/json'},
@@ -112,39 +142,54 @@
                 const r = await fetch('/state');
                 const d = await r.json();
-                // 1. Update Error UI
                 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-2xl font-bold" : "text-red-400 text-2xl font-bold";
-                // 2. Update Force UI
                 let forceHTML = "";
                 let px=[], py=[], pz=[], ids=[];
                 Object.keys(d.nodes).forEach(id => {
                     const n = d.nodes[id];
-                    const fClass = n.force > 0 ? "force-pos" : "force-neg";
-                    forceHTML += `<div>NODE ${id}: X=[${n.x.toFixed(2)}] | <span class="${fClass}">FORCE: ${n.force.toFixed(4)}</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. Update Plot
                 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: {range: [-10, 110]}, yaxis: {range: [-5, 5]}, zaxis: {range: [-5, 5]} }
                 };
-                if(!window.plotted){ Plotly.newPlot('plot', [trace], layout); window.plotted=true; }
-                else { Plotly.react('plot', [trace], layout); }
             } catch(e) {}
-        }, 150);
     </script>
 </body>
 </html>

 <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'},
                 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>