testing_space

Sleeping

App Files Files Community

everydaytok commited on Apr 5

Commit

0963db3

verified ·

1 Parent(s): 8d25655

Update index.html

Browse files

Files changed (1) hide show

index.html +120 -73

index.html CHANGED Viewed

@@ -8,84 +8,110 @@
     <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;}
     </style>
 </head>
-<body class="flex h-screen overflow-hidden text-sm">
-    <aside id="sidebar" class="w-80 h-full glass border-r border-slate-700 flex flex-col z-20">
-        <div class="p-4 border-b border-slate-700 flex justify-between bg-slate-900 shadow">
-            <h1 class="text-xl font-bold tracking-tight text-blue-400">ENGINE SUITE</h1>
         </div>
-        <div class="p-4 space-y-4 overflow-y-auto">
-            <!-- ARCHITECTURE TOGGLES -->
-            <div class="p-3 border border-slate-700 rounded bg-black">
-                <h3 class="font-bold text-orange-400 text-xs mb-2 tracking-wider">ARCHITECTURE STATE</h3>
-                <select id="engineMode" class="w-full mb-2" onchange="sendConfig()">
-                    <option value="inference">⚙ INFERENCE (Calculate Answers)</option>
-                    <option value="training">🎯 TRAINING (Learn Coefficient 'K')</option>
                 </select>
-                <select id="distSplit" class="w-full mb-2" onchange="sendConfig()">
-                    <option value="uniform">FLOW: Uniform Distro</option>
-                    <option value="individual">FLOW: Use Per-Node 'K' Values</option>
                 </select>
-                <label class="flex items-center text-xs text-slate-300">
-                    <input type="checkbox" id="asymmetric" class="w-4 h-4 mr-2" onchange="sendConfig()">
-                    Allow Non-Reciprocal Tension?
                 </label>
             </div>
-            <!-- MANUAL TARGETING -->
-            <div class="p-3 border border-slate-700 rounded">
-                <h3 class="font-bold text-green-400 text-xs mb-2 tracking-wider">MANUAL RUN (1 Target)</h3>
-                <select id="probType" class="w-full mb-2" onchange="sendConfig()">
-                    <option value="add">Constraint Type: Addition Logic</option>
-                    <option value="mult">Constraint Type: Intersection Logic</option>
                 </select>
-                <div class="flex mt-2 justify-between items-center">
-                    <span>Obj (C):</span>
-                    <input type="number" id="singleVal" value="45" class="w-20 text-center text-green-300">
-                    <button onclick="triggerSingle()" class="bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded text-white font-bold text-xs ml-1 shadow">PUSH</button>
                 </div>
             </div>
-            <!-- BATCH DATA HARNESS -->
-            <div class="p-3 border border-slate-700 bg-slate-800 rounded">
-                <h3 class="font-bold text-purple-400 text-xs mb-2 tracking-wider">DATASET BATCH RUN</h3>
-                <div class="flex gap-2 text-xs text-slate-400 mb-1 items-center justify-between">
-                     <span>Total Sets</span> <input type="number" id="b_count" value="10" class="w-16">
-                </div>
-                <div class="flex gap-2 text-xs text-slate-400 items-center justify-between">
-                     <span>Min Target</span> <input type="number" id="b_min" value="10" class="w-16">
-                </div>
-                <div class="flex gap-2 text-xs text-slate-400 mb-2 items-center justify-between">
-                     <span>Max Target</span> <input type="number" id="b_max" value="100" class="w-16">
                 </div>
-                <button onclick="triggerBatch()" class="w-full py-2 bg-purple-700 hover:bg-purple-600 text-white font-bold rounded shadow transition">START CONTINUOUS RUN</button>
             </div>
-            <button onclick="triggerHalt()" class="w-full py-2 bg-red-900 border border-red-500 text-red-100 font-bold hover:bg-red-600 shadow rounded">⚠ PANIC: STOP QUEUE</button>
         </div>
     </aside>
     <main class="flex-grow flex flex-col h-screen">
-        <div class="h-[65%] w-full" id="plot"></div>
-        <div class="h-[35%] flex border-t border-slate-700">
-            <!-- Node Stat Tracker -->
-            <div class="w-[50%] bg-slate-900 border-r border-slate-700 p-4 font-mono overflow-y-auto flex flex-col gap-1 text-[11px] glass">
-                <span id="tracker" class="space-y-[3px] text-slate-300 whitespace-pre">System warming up...</span>
             </div>
-            <!-- Log Console -->
             <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(20,20,20,1),rgba(0,0,0,0))] pointer-events-none border-t border-b h-[20px] shadow z-10" ></div>
-                 <div id="logger">No data feed...</div>
             </div>
         </div>
     </main>
     <script>
-        const endpoint = ''; // Blank relative string for HuggingFace Spaces mapping
         async function sendConfig() {
             await fetch('/apply_config', {
@@ -100,6 +126,7 @@
         }
         async function triggerSingle() {
             await fetch('/single_run', {
                 method: 'POST', headers: {'Content-Type':'application/json'},
                 body: JSON.stringify({ target: document.getElementById('singleVal').value })
@@ -107,7 +134,7 @@
         }
         async function triggerBatch() {
-            await sendConfig(); // assure current UI dials are saved first
             await fetch('/batch_run', {
                 method: 'POST', headers: {'Content-Type':'application/json'},
                 body: JSON.stringify({
@@ -120,7 +147,7 @@
         async function triggerHalt() { await fetch('/halt', { method: 'POST'}); }
-        // Live Graphic Draw Loop
         setInterval(async () => {
             try {
                 let res = await fetch('/state');
@@ -128,44 +155,64 @@
                 let isTraining = document.getElementById('engineMode').value === "training";
-                // Map Math Coords for Plotly
-                let px=[], py=[], pz=[], l=[];
-                let logMap = `<b class='text-blue-400 uppercase font-sans'>ITERATION COUNT [${d.iteration}] | ITEMS REMAINING IN BATCH = ${d.batch_size} | FORCES WAITING = ${d.buffer_size}</b><br><hr class="border-slate-700 my-1">`;
                 Object.keys(d.nodes).forEach(id => {
                     let v = d.nodes[id];
                     px.push(v.x); py.push(v.y); pz.push(v.z);
-                    let LckTxt = v.anchored ? '[ LOCKED FORCES ]' : '[ FLOW IN MOTION ]';
-                    l.push(`Node ${id}<br>Val: ${v.x.toFixed(3)}<br>K: ${v.k.toFixed(3)}`);
-                    logMap += `<span class='${v.anchored? 'text-red-300' : 'text-blue-300'}'>[VERTEXT ID ${id}]</span> ${LckTxt} > DimensionX Output <span class='text-white bg-slate-800 rounded'>: ${v.x.toFixed(6)}</span> | Constraint Elast: ${v.k.toFixed(6)}<br>`;
                 });
-                document.getElementById('tracker').innerHTML = logMap;
-                document.getElementById('logger').innerHTML = d.logs.map(lg => `<span class='opacity-80 block pb-[1px] pt-[1px] hover:bg-slate-800 border-b border-slate-900 cursor-default'>▰ ${lg}</span>`).join('');
-                let TraceLines = { 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:'white',size:15}, textposition: 'top left',
-                    hoverinfo: 'text', hovertext: l.concat(['']),
-                    line: {color: isTraining?'#b91c1c':'#1e40af', width: 4},
-                    marker: {size: 14, line:{width:1, color:'#fff'}, color:['#fb923c','#c084fc','#38bdf8']}
                 };
-                let lt = {
-                    margin: { l: 0, r: 0, b: 0, t: 10}, paper_bgcolor: 'transparent',
                     scene: {
-                        camera: { eye: {x:0, y:-1.5, z:1.2} },
-                        xaxis: {title:'Structural Solution Dimension X'},
-                        yaxis: {title:'Twist DispY'}, zaxis: {title:'Twist DispZ'}
                     }
                 };
-                if(!window.plotlyHasRun){ Plotly.newPlot('plot', [TraceLines], lt, {responsive:true}); window.plotlyHasRun = true; }
-                else { Plotly.react('plot', [TraceLines], lt); }
             } catch(e) {}
-        }, 120);
     </script>
 </body>
 </html>

     <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', {
         }
         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 sendConfig();
             await fetch('/batch_run', {
                 method: 'POST', headers: {'Content-Type':'application/json'},
                 body: JSON.stringify({
         async function triggerHalt() { await fetch('/halt', { method: 'POST'}); }
+        // DRAW LOOP ============================
         setInterval(async () => {
             try {
                 let res = await fetch('/state');
                 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>