testing_space

Runtime error

App Files Files Community

everydaytok commited on 8 days ago

Commit

fe9c5f9

verified ·

1 Parent(s): 7c05a72

Update index.html

Browse files

Files changed (1) hide show

index.html +85 -153

index.html CHANGED Viewed

@@ -2,125 +2,87 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Mesh Reasoner Engine Dashboard</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; }
-        .glass { background: rgba(15,23,42,0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08); }
-        select, input { background: #0f172a; color: #60a5fa; border: 1px solid #334155; padding: 4px; border-radius: 4px; font-weight: bold; width: 100%;}
-        input[type="checkbox"] { width: auto; }
-        ::-webkit-scrollbar { width: 6px; }
-        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px;}
     </style>
 </head>
-<body class="flex h-screen overflow-hidden text-sm font-sans tracking-wide">
-    <aside id="sidebar" class="w-[420px] h-full glass border-r border-slate-700 flex flex-col z-20 flex-shrink-0 shadow-2xl">
-        <div class="p-4 border-b border-slate-700 bg-slate-900 shadow text-center">
-            <h1 class="text-xl font-black tracking-tight text-blue-400">LABORATORY DIALS</h1>
-        </div>
-        <div class="p-5 space-y-6 overflow-y-auto custom-scroll flex-grow pb-10">
-            <!-- SECTION 1: EXECUTION PHASE -->
-            <div class="p-4 border border-slate-700 bg-black/60 rounded-md">
-                <h3 class="font-bold text-orange-400 text-[13px] mb-1 tracking-widest border-b border-slate-800 pb-1">1. EXECUTION PHASE</h3>
-                <p class="text-[10.5px] text-slate-400 mb-3 leading-tight font-serif italic">What part of the mesh are we updating? Dimensional space (solving a problem) or internal physics (forming memory)?</p>
-                <select id="engineMode" onchange="sendConfig()" class="text-[13px] py-1.5 cursor-pointer text-white">
-                    <option value="inference">⚙ INFERENCE (Move space, calculate answers)</option>
-                    <option value="training">🎯 TRAINING (Lock nodes, optimize stiffness 'K')</option>
                 </select>
-                <div class="mt-2 text-[10px] text-blue-200/50 pl-2 border-l border-blue-500/30">
-                    * In <b>INFERENCE</b>, A & B freely slide to find correct factor numbers. <br>
-                    * In <b>TRAINING</b>, A & B lock mathematically to objective C; the strain updates their structural memory (K-coef).
-                </div>
-            </div>
-            <!-- SECTION 2: TOPOLOGICAL PHYSICS LAWS -->
-            <div class="p-4 border border-slate-700 bg-black/60 rounded-md">
-                <h3 class="font-bold text-sky-400 text-[13px] mb-1 tracking-widest border-b border-slate-800 pb-1">2. TOPOLOGICAL LAWS</h3>
-                <p class="text-[10.5px] text-slate-400 mb-3 leading-tight font-serif italic">How do physical forces distribute inside the triangle mesh when constraint parameters don't match?</p>
-                <select id="distSplit" onchange="sendConfig()" class="text-[13px] py-1.5 mb-3 cursor-pointer text-white">
-                    <option value="uniform">DUMB GEOMETRY (50/50 Equal Split Shock)</option>
-                    <option value="individual">LEARNED BEHAVIOR (Split uses Elastic 'K' modifiers)</option>
                 </select>
-                <label class="flex items-start text-xs text-slate-300 bg-slate-800/40 p-2 border border-slate-700/50 rounded cursor-pointer">
-                    <input type="checkbox" id="asymmetric" onchange="sendConfig()" class="w-4 h-4 mr-2 mt-0.5 cursor-pointer accent-orange-500">
-                    <span class="leading-snug block"><b>Apply Non-Reciprocal Tension Damper?</b> <br>
-                    <span class="text-[10px] text-slate-400 font-serif">(Test: Check this if the node forces are resonating, vibrating forever, or values mathematically explode during calculations.)</span></span>
-                </label>
-            </div>
-            <!-- SECTION 3: LOGICAL CONSTRAINT -->
-            <div class="p-4 border border-slate-700 bg-black/60 rounded-md">
-                <h3 class="font-bold text-green-400 text-[13px] mb-1 tracking-widest border-b border-slate-800 pb-1">3. MANAUL CONSTRAINT GOAL</h3>
-                <p class="text-[10.5px] text-slate-400 mb-3 leading-tight font-serif italic">What arithmetic "rule" dictates the resting equilibrium point between nodes A, B, and clamped objective C?</p>
-                <select id="probType" onchange="sendConfig()" class="text-[13px] py-1.5 mb-3 cursor-pointer text-white">
-                    <option value="add">TEST RULE: Alignments (Node A + Node B = Node C)</option>
-                    <option value="mult">TEST RULE: Multiplication (Node A * Node B = Node C)</option>
-                </select>
-                <div class="flex items-center gap-2 mt-4 bg-slate-800/50 p-2 rounded">
-                    <div class="flex flex-col">
-                        <span class="font-bold text-[10px] text-green-400">Lock Target Constraint C To:</span>
-                        <input type="number" id="singleVal" value="45" class="text-center font-mono w-24">
-                    </div>
-                    <button onclick="triggerSingle()" class="flex-grow bg-blue-600 hover:bg-blue-500 rounded text-white font-bold h-11 text-xs transition duration-200 uppercase tracking-widest">Single Test Run</button>
-                </div>
-            </div>
-            <!-- SECTION 4: DATASET EVALUATION -->
-            <div class="p-4 border border-purple-800 bg-purple-900/10 rounded-md">
-                <h3 class="font-bold text-purple-400 text-[13px] mb-1 tracking-widest border-b border-purple-800/50 pb-1">4. AUTOMATED DATASET PIPELINE</h3>
-                <p class="text-[10.5px] text-purple-300/60 mb-3 leading-tight font-serif italic">Continuously feed a batch of changing objective "C" variables. Tests the network's capacity to adjust continuously.</p>
-                <div class="grid grid-cols-2 gap-2 text-xs font-mono mb-4 bg-black/50 p-3 rounded">
-                    <div> <span class="block text-slate-500">Problem Ct:</span> <input type="number" id="b_count" value="15" class="text-white text-center mt-1"> </div>
-                    <div> <span class="block text-slate-500">-</span> </div>
-                    <div> <span class="block text-slate-500">Target MIN:</span> <input type="number" id="b_min" value="10" class="text-white text-center mt-1"> </div>
-                    <div> <span class="block text-slate-500">Target MAX:</span> <input type="number" id="b_max" value="100" class="text-white text-center mt-1"> </div>
-                </div>
-                <button onclick="triggerBatch()" class="w-full py-2.5 bg-purple-600 hover:bg-purple-500 text-white font-bold rounded shadow transition tracking-widest text-[12px] uppercase">Initialize Continuous Pipeline</button>
-            </div>
-            <button onclick="triggerHalt()" class="w-full py-2 border-2 border-red-900 text-red-500 hover:bg-red-900 hover:text-white text-[13px] font-black uppercase tracking-widest transition">⛔ Halt Server & Clear Queues</button>
         </div>
     </aside>
-    <main class="flex-grow flex flex-col h-screen">
-        <div class="h-[65%] w-full relative border-b border-slate-700 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-slate-900 to-black" id="plot"></div>
-        <div class="h-[35%] flex shadow-[0_-5px_20px_rgba(0,0,0,0.5)]">
-            <!-- LIVE TELEMETRY: Math -->
-            <div class="w-[50%] bg-slate-950/80 border-r border-slate-700 p-4 font-mono overflow-y-auto flex flex-col gap-1 text-[11px] backdrop-blur relative">
-                <span id="tracker" class="space-y-[3px] text-slate-300 whitespace-pre">Connecting telemetry port to mathematical core...</span>
             </div>
-            <!-- EVENT QUEUE: Messaging loop tracker -->
-            <div class="w-[50%] bg-black p-4 font-mono overflow-y-auto flex flex-col gap-1 text-[10px] tracking-wide text-green-500 relative">
-                 <div class="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,1)_5%,rgba(0,0,0,0))] pointer-events-none border-t border-b h-[20px] shadow z-10"></div>
-                 <div class="font-bold text-[9px] uppercase tracking-widest border-b border-green-900/50 pb-1 mb-1 opacity-70">Push/Pull Server Action Queue</div>
-                 <div id="logger">No pipeline initialized...</div>
             </div>
         </div>
     </main>
     <script>
-        const endpoint = ''; // Set relative for HF
         async function sendConfig() {
             await fetch('/apply_config', {
                 method: 'POST', headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify({
-                    mode: document.getElementById('engineMode').value,
-                    distribution: document.getElementById('distSplit').value,
                     problem_type: document.getElementById('probType').value,
-                    asymmetric: document.getElementById('asymmetric').checked
                 })
             });
         }
@@ -134,85 +96,55 @@
         }
         async function triggerBatch() {
-            await sendConfig();
             await fetch('/batch_run', {
                 method: 'POST', headers: {'Content-Type':'application/json'},
                 body: JSON.stringify({
                     batch_size: document.getElementById('b_count').value,
-                    val_min: document.getElementById('b_min').value,
-                    val_max: document.getElementById('b_max').value
                 })
             });
         }
-        async function triggerHalt() { await fetch('/halt', { method: 'POST'}); }
-        // DRAW LOOP ============================
         setInterval(async () => {
             try {
-                let res = await fetch('/state');
-                let d = await res.json();
-                let isTraining = document.getElementById('engineMode').value === "training";
-                // Visual Traces Map Arrays
-                let px=[], py=[], pz=[], hoverData=[];
-                // Print System Status Top Header
-                let systemLogHeader = `<b class='text-blue-400 tracking-[0.2em] font-sans block border-b border-slate-700 pb-2 mb-2'>T-EPOCH: [ <span class='text-white'>${d.iteration}</span> ] // DATASETS QUEUE:[ <span class='text-white'>${d.batch_size}</span> ] // FAST-EVENTS:[ <span class='text-purple-400'>${d.buffer_size}</span> ]</b>`;
-                // Construct the Math Coordinate text UI log below it
                 Object.keys(d.nodes).forEach(id => {
-                    let v = d.nodes[id];
-                    px.push(v.x); py.push(v.y); pz.push(v.z);
-                    let stateLockTxt = v.anchored ? '[🔒 ANCHOR_POINT]' : '[🌊 FLOWING]';
-                    // Graph tooltip content
-                    hoverData.push(`VERTEX ${id}<br>Solution Coord: ${v.x.toFixed(3)}<br>Phys Memory (K): ${v.k.toFixed(4)}`);
-                    // Lower Left Window output formatting
-                    let nodeColor = v.anchored ? 'text-red-300' : 'text-sky-300';
-                    systemLogHeader += `
-                        <div class="py-1">
-                          <span class="${nodeColor}">◆ [ VERTEX ${id} ]</span> <span class="text-slate-500 font-bold ml-1">${stateLockTxt}</span><br>
-                          ├─ Structural Answer (Dim X) <span class='text-white bg-slate-800 rounded px-1.5 ml-2 font-black shadow shadow-black'>${v.x.toFixed(6)}</span><br>
-                          └─ Latent Cell Mod (Stiff-K) <span class='text-purple-300 ml-2 font-mono'>${v.k.toFixed(6)}</span>
-                        </div>
-                    `;
                 });
-                document.getElementById('tracker').innerHTML = systemLogHeader;
-                // Pushing strings sequentially as pipeline lines
-                document.getElementById('logger').innerHTML = d.logs.map(lg => `<span class='opacity-80 block hover:bg-slate-800 border-b border-green-900/20 cursor-default'>▰ ${lg}</span>`).join('');
-                // Draw Network Lines visually via Plotly
-                let DrawShapeParams = {
                     type: 'scatter3d', mode: 'lines+markers+text',
                     x: px.concat([px[0]]), y: py.concat([py[0]]), z: pz.concat([pz[0]]),
-                    text: Object.keys(d.nodes).concat(['']),
-                    textfont:{color:'rgba(255,255,255,0.7)',size:12, family:'system-ui, monospace'},
-                    textposition: 'top left',
-                    hoverinfo: 'text', hovertext: hoverData.concat(['']),
-                    line: {color: isTraining ? 'rgba(239, 68, 68, 0.6)':'rgba(56, 189, 248, 0.6)', width: 5},
-                    marker: {size: 14, line:{width:2, color:'#1e293b'}, color:['#fb923c','#c084fc','#38bdf8']}
                 };
-                let SceneLayout = {
-                    margin: { l: 0, r: 0, b: 0, t: 15}, paper_bgcolor: 'transparent',
-                    scene: {
-                        camera: { eye: {x:0, y:-1.5, z:1.3} },
-                        xaxis: {title:'Constraint Values (Latent Logic X Axis)', color:'white', gridcolor:'#1e293b'},
-                        yaxis: {title:'System Shift Y', color:'#475569', gridcolor:'#1e293b', zerolinecolor:'#475569'},
-                        zaxis: {title:'System Shift Z', color:'#475569', gridcolor:'#1e293b', zerolinecolor:'#475569'}
-                    }
                 };
-                if(!window.plotlyRun){ Plotly.newPlot('plot',[DrawShapeParams], SceneLayout, {responsive:true}); window.plotlyRun = true; }
-                else { Plotly.react('plot', [DrawShapeParams], SceneLayout); }
             } catch(e) {}
-        }, 110);
     </script>
 </body>
 </html>

 <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'},
                 body: JSON.stringify({
+                    mode: document.getElementById('mode').value,
+                    distribution: 'individual',
                     problem_type: document.getElementById('probType').value,
+                    asymmetric: false
                 })
             });
         }
         }
         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. 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>