Update index.html

index.html

@@ -57,8 +57,8 @@
     <span id="b-data" class="px-1.5 py-0.5 rounded bg-pink-900/60 text-pink-300 border border-pink-800/60">HOUSNG</span>
   </div>
   <div class="flex items-center gap-2 ml-1">
-    <!-- shared-vertex counter, hidden when 0 -->
-    <span id="shared-lbl" class="text-[7px] text-slate-700"></span>
+    <!-- bridge counter, hidden when 0 -->
+    <span id="bridge-lbl" class="text-[7px] text-amber-500"></span>
     <span id="q-lbl"   class="text-[8px] text-slate-600">Q:0</span>
     <div   id="run-dot" class="w-2 h-2 rounded-full bg-slate-700"></div>
     <button onclick="openDrawer()" class="text-[10px] bg-blue-700 hover:bg-blue-600 px-2 py-1 rounded font-bold">⚙ DIALS</button>
@@ -135,15 +135,16 @@
     </div>
 
     <!-- CROSS CONNECT -->
-    <div class="col-span-2 bg-slate-900 rounded p-3 border border-violet-900/50">
-      <div class="text-violet-400 text-[9px] font-bold mb-1">
+    <div class="col-span-2 bg-slate-900 rounded p-3 border border-amber-900/50">
+      <div class="text-amber-400 text-[9px] font-bold mb-1">
         CROSS-CONNECT
-        <span class="text-slate-600 font-normal ml-1">structural shared vertices</span>
+        <span class="text-slate-600 font-normal ml-1">passive bridge vertices</span>
       </div>
       <div class="text-[9px] text-slate-500 mb-2">
-        OFF → n independent parallel hourglasses (default)<br>
-        ON  → boundary hidden nodes that visually overlap become one<br>
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shared vertex with springs to both neighbouring dims
+        OFF → N independent parallel hourglasses (default)<br>
+        ON  → a passive bridge vertex is inserted between each adjacent<br>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dimension pair (upper &amp; lower). Bridge springs are fixed<br>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and never learned — cross-talk happens through physics only.
       </div>
       <button id="drawer-cross-btn" onclick="toggleCross()"
         class="w-full py-2 rounded text-xs font-bold border border-slate-700 bg-slate-800 text-slate-400">
@@ -256,62 +257,59 @@
 const cfg  = { mode: 'training', architecture: 'additive' };
 const topo = { inputs: 1, upper: 3, lower: 3 };
 let crossConnect = false;
-let nShared = 0;
+let nBridges     = 0;
+let bridgeK      = 0.20;
 
 // ── CROSS CONNECT ─────────────────────────────────────────────────────────────
 async function toggleCross() {
   const res  = await fetch('/toggle_cross', { method: 'POST' });
   const data = await res.json();
   crossConnect = data.cross_connect;
-  nShared      = data.n_shared;
+  nBridges     = data.n_bridges || 0;
+  bridgeK      = data.bridge_k  || 0.20;
   updateCrossUI();
   meshPlotted = false;
 }
 
 function updateCrossUI() {
-  const btn1  = document.getElementById('b-cross');
-  const btn2  = document.getElementById('drawer-cross-btn');
-  const info  = document.getElementById('cross-info');
-  const slbl  = document.getElementById('shared-lbl');
-  const n     = topo.inputs;
-  const u     = topo.upper;
-  const l     = topo.lower;
-  const ns    = nShared || (crossConnect && n >= 2
-    ? (n-1) * ((u >= 2 ? 1 : 0) + (l >= 2 ? 1 : 0))
-    : 0);
+  const btn1 = document.getElementById('b-cross');
+  const btn2 = document.getElementById('drawer-cross-btn');
+  const info = document.getElementById('cross-info');
+  const blbl = document.getElementById('bridge-lbl');
+  const n    = topo.inputs;
+
+  // Estimated bridge count when server hasn't confirmed yet
+  const nb = nBridges || (crossConnect && n >= 2 ? (n - 1) * 2 : 0);
 
   if (crossConnect) {
-    btn1.className = 'px-1.5 py-0.5 rounded border font-bold text-[8px] transition-all bg-violet-800 text-violet-200 border-violet-600';
+    btn1.className = 'px-1.5 py-0.5 rounded border font-bold text-[8px] transition-all bg-amber-800 text-amber-200 border-amber-600';
     btn1.innerText = 'CROSS:ON';
-    btn2.className = 'w-full py-2 rounded text-xs font-bold border border-violet-600 bg-violet-900 text-violet-200';
+    btn2.className = 'w-full py-2 rounded text-xs font-bold border border-amber-600 bg-amber-900/60 text-amber-200';
     btn2.innerText = 'CROSS-CONNECT: ON  (click to disable)';
-    info.innerText  = ns
-      ? `${ns} shared vertex${ns !== 1 ? 'es' : ''} — boundary nodes merged`
-      : 'No merges (need D≥2 and U/L≥2)';
-    slbl.innerText  = ns ? `⊕${ns}` : '';
-    slbl.className  = 'text-[7px] text-violet-400';
+    info.innerText = nb
+      ? `${nb} bridge ${nb !== 1 ? 'vertices' : 'vertex'} — passive k=${bridgeK}, not learned`
+      : 'No bridges (need D≥2)';
+    blbl.innerText  = nb ? `⬡${nb}` : '';
+    blbl.className  = 'text-[7px] text-amber-500';
   } else {
     btn1.className = 'px-1.5 py-0.5 rounded border font-bold text-[8px] transition-all bg-slate-900 text-slate-600 border-slate-700';
     btn1.innerText = 'CROSS:OFF';
     btn2.className = 'w-full py-2 rounded text-xs font-bold border border-slate-700 bg-slate-800 text-slate-400';
     btn2.innerText = 'CROSS-CONNECT: OFF  (click to enable)';
-    info.innerText  = `${n} independent parallel hourglass${n !== 1 ? 'es' : ''}`;
-    slbl.innerText  = '';
+    info.innerText = `${n} independent parallel hourglass${n !== 1 ? 'es' : ''}`;
+    blbl.innerText = '';
   }
 }
 
 // ── TOPOLOGY ──────────────────────────────────────────────────────────────────
 function updateSpringCount() {
   const { inputs: n, upper: u, lower: l } = topo;
-  // With structural merge: each merge removes 2 springs and adds 2 (net=0),
-  // but removes 1 node.  Spring count stays the same; node count reduces.
-  const ns = crossConnect && n >= 2
-    ? (n-1) * ((u >= 2 ? 1 : 0) + (l >= 2 ? 1 : 0))
-    : 0;
-  const totalSprings = n * (2*u + 2*l);  // unchanged by merge
-  const totalNodes   = 3*n + n*u + n*l - ns;
+  const nb = crossConnect && n >= 2 ? (n - 1) * 2 : 0;   // XU + XL per pair
+  const learnSprings  = n * (2*u + 2*l);
+  const bridgeSprings = nb * 2;                            // each bridge has 2 springs
+  const totalNodes    = 3*n + n*u + n*l + nb;
   document.getElementById('spring-count').innerText =
-    `${totalSprings} springs | ${totalNodes} nodes${ns ? ` (${ns} shared vertices)` : ''}`;
+    `${learnSprings} learned + ${bridgeSprings} bridge springs | ${totalNodes} nodes`;
   document.getElementById('custom-dim-hint').innerText =
     n === 1 ? '(single value)' : `(${n} values, comma-separated)`;
   updateCrossUI();
@@ -467,22 +465,22 @@ function tab(name) {
 
 // ── VISUALIZATION ─────────────────────────────────────────────────────────────
 
-function buildPos(layers, n_inputs, n_upper, n_lower) {
+/**
+ * Build x,y positions for every node.
+ * Bridge nodes (XU{d}, XL{d}) sit at the midpoint between their two
+ * adjacent boundary hidden nodes, on the same Y row.
+ */
+function buildPos(layers, n_inputs, n_upper, n_lower, bridgeNodeIds = []) {
   const pos    = {};
   const Y      = [4.4, 2.1, 0.0, -2.1, -4.4];
   const COL_W  = n_inputs === 1 ? 0 : Math.min(9.0 / (n_inputs - 1), 4.2);
   const halfSp = COL_W * (n_inputs - 1) / 2;
   const bSprd  = n_inputs === 1 ? 3.8 : Math.min(COL_W * 0.55, 1.8);
 
-  // Build a flat lookup: nid → layer index (to get Y)
-  const layerOf = {};
-  layers.forEach((layer, li) => layer.forEach(nid => { layerOf[nid] = li; }));
-
   layers.forEach((layer, li) => {
     const y = Y[li];
     layer.forEach(nid => {
       const kind = nid[0];
-      // Parse dim and j from node ID
       let dim = 1, j = 1, total = 1;
       if ('ABC'.includes(kind)) {
         dim = parseInt(nid.slice(1));
@@ -492,7 +490,7 @@ function buildPos(layers, n_inputs, n_upper, n_lower) {
         j     = parseInt(parts[1]);
         total = kind === 'U' ? n_upper : n_lower;
       }
-      const cx = n_inputs === 1 ? 0 : -halfSp + (dim-1)*COL_W;
+      const cx = n_inputs === 1 ? 0 : -halfSp + (dim - 1) * COL_W;
       if ('ABC'.includes(kind)) {
         pos[nid] = [cx, y];
       } else {
@@ -501,14 +499,25 @@ function buildPos(layers, n_inputs, n_upper, n_lower) {
       }
     });
   });
+
+  // Bridge nodes: midpoint between right boundary of dim d and left of dim d+1
+  // x = -halfSp + (d - 0.5) * COL_W  (simplifies to the column midpoint)
+  bridgeNodeIds.forEach(nid => {
+    const side = nid[1];                        // 'U' or 'L'
+    const d    = parseInt(nid.slice(2));
+    const yVal = side === 'U' ? Y[1] : Y[3];   // same row as upper/lower hidden
+    const xVal = -halfSp + (d - 0.5) * COL_W;
+    pos[nid]   = [xVal, yVal];
+  });
+
   return pos;
 }
 
 function busShapes(pos, n_inputs) {
   const sh = [];
   const mg = n_inputs === 1 ? 1.4 : 0.8;
-  const xs = k => Object.entries(pos).filter(([id])=>id[0]===k).map(([,v])=>v[0]);
-  const rect = (mn,mx,yc,hh,fill,stroke) => sh.push({
+  const xs = k => Object.entries(pos).filter(([id]) => id[0] === k).map(([,v]) => v[0]);
+  const rect = (mn, mx, yc, hh, fill, stroke) => sh.push({
     type:'rect', xref:'x', yref:'y',
     x0:mn-mg, x1:mx+mg, y0:yc-hh, y1:yc+hh,
     fillcolor:fill, line:{color:stroke, width:2}
@@ -526,35 +535,21 @@ function springColor(k) {
   return              [`rgb(30,${Math.round(80+t*100)},${Math.round(140+t*115)})`, 1.0+t*3.5];
 }
 
-// A spring is a "shared-vertex spring" if it crosses dimensions:
-// e.g. A2→U1_3 (dim2 input → dim1's canonical shared node).
-// We detect this by checking if the input side dim differs from the node's dim.
-function isSharedSpring(key) {
-  const [u, v] = key.split('→');
-  if (!u || !v) return false;
-  const getDim = s => {
-    if ('ABC'.includes(s[0])) return parseInt(s.slice(1));
-    const p = s.slice(1).split('_'); return parseInt(p[0]);
-  };
-  try {
-    const du = getDim(u), dv = getDim(v);
-    return !isNaN(du) && !isNaN(dv) && du !== dv;
-  } catch { return false; }
-}
-
-function buildTraces(nodes, springs, layers, n_inputs, n_upper, n_lower) {
-  const pos    = buildPos(layers, n_inputs, n_upper, n_lower);
+/**
+ * Build all Plotly traces.
+ * Learnable springs: solid colour based on spring constant.
+ * Bridge springs:    dashed amber lines.
+ * Bridge nodes:      amber diamonds, distinct from regular hidden nodes.
+ */
+function buildTraces(nodes, springs, bridgeSprings, layers, n_inputs, n_upper, n_lower) {
+  const bridgeNodeIds = Object.keys(nodes).filter(id => id[0] === 'X');
+  const pos    = buildPos(layers, n_inputs, n_upper, n_lower, bridgeNodeIds);
   const traces = [];
 
-  // Draw shared-vertex springs on top (after normal springs)
-  const normalEdges = [], sharedEdges = [];
+  // 1. Learnable spring edges
   for (const [key, k] of Object.entries(springs)) {
     const [u, v] = key.split('→');
     if (!pos[u] || !pos[v]) continue;
-    (isSharedSpring(key) ? sharedEdges : normalEdges).push([key, k, u, v]);
-  }
-
-  for (const [key, k, u, v] of normalEdges) {
     const [col, wd] = springColor(k);
     traces.push({
       type:'scatter', mode:'lines',
@@ -564,36 +559,29 @@ function buildTraces(nodes, springs, layers, n_inputs, n_upper, n_lower) {
     });
   }
 
-  // Shared-vertex springs drawn in violet with slight dash to distinguish
-  for (const [key, k, u, v] of sharedEdges) {
-    const t   = Math.min(Math.abs(k) / 6, 1);
-    const col = `rgb(${Math.round(160+t*60)},80,${Math.round(200+t*55)})`;
+  // 2. Bridge spring edges — amber dashed, drawn on top
+  for (const key of Object.keys(bridgeSprings)) {
+    const [u, v] = key.split('→');
+    if (!pos[u] || !pos[v]) continue;
     traces.push({
       type:'scatter', mode:'lines',
       x:[pos[u][0], pos[v][0]], y:[pos[u][1], pos[v][1]],
-      line:{color:col, width:1.8+t*2, dash:'dot'},
+      line:{color:'#f59e0b', width:2.0, dash:'dot'},
       hoverinfo:'none', showlegend:false
     });
   }
 
-  // Nodes
-  const allN = layers.flat();
+  // 3. All nodes (regular + bridge)
+  const regularNodes = layers.flat();
+  const allN = [...regularNodes, ...bridgeNodeIds];
+
   const NCOL = id => {
     const k = id[0];
     return k==='A'?'#fb923c': k==='B'?'#c084fc': k==='C'?'#38bdf8':
-           k==='U'?'#4ade80': '#67e8f9';
+           k==='X'?'#f59e0b': k==='U'?'#4ade80': '#67e8f9';
   };
-  const isIO = id => 'ABC'.includes(id[0]);
-
-  // Mark shared vertices (appear in springs from multiple dims)
-  const sharedNodes = new Set();
-  for (const key of Object.keys(springs)) {
-    if (isSharedSpring(key)) {
-      const [u, v] = key.split('→');
-      if ('UL'.includes((u||'')[0])) sharedNodes.add(u);
-      if ('UL'.includes((v||'')[0])) sharedNodes.add(v);
-    }
-  }
+  const isIO     = id => 'ABC'.includes(id[0]);
+  const isBridge = id => id[0] === 'X';
 
   traces.push({
     type:'scatter', mode:'markers+text',
@@ -607,17 +595,19 @@ function buildTraces(nodes, springs, layers, n_inputs, n_upper, n_lower) {
     textfont:{ size:9, color: allN.map(id => NCOL(id)) },
     marker:{
       size: allN.map(id => {
-        const v = Math.abs(nodes[id]?.vel ?? 0);
-        const base = isIO(id) ? 18 : (sharedNodes.has(id) ? 14 : 10);
+        const v    = Math.abs(nodes[id]?.vel ?? 0);
+        const base = isIO(id) ? 18 : isBridge(id) ? 13 : 10;
         return base + Math.min(v*30, 8);
       }),
-      color: allN.map(id => sharedNodes.has(id) ? '#a78bfa' : NCOL(id)),
+      symbol: allN.map(id => isBridge(id) ? 'diamond' : 'circle'),
+      color:  allN.map(id => NCOL(id)),
       opacity: allN.map(id => 0.75 + Math.min(Math.abs(nodes[id]?.vel??0)*1.8, 0.25)),
       line:{
-        width: allN.map(id => sharedNodes.has(id) ? 3.5 : 2.5),
+        width: allN.map(id => isBridge(id) ? 3.0 : 2.5),
         color: allN.map(id =>
-          sharedNodes.has(id) ? '#7c3aed'
-          : nodes[id]?.anchored ? '#ef4444' : '#22c55e'
+          isBridge(id)          ? '#d97706'
+          : nodes[id]?.anchored ? '#ef4444'
+                                : '#22c55e'
         )
       }
     },
@@ -627,8 +617,9 @@ function buildTraces(nodes, springs, layers, n_inputs, n_upper, n_lower) {
   return traces;
 }
 
-function meshLayout(layers, n_inputs, n_upper, n_lower) {
-  const pos  = buildPos(layers, n_inputs, n_upper, n_lower);
+function meshLayout(nodes, layers, n_inputs, n_upper, n_lower) {
+  const bridgeNodeIds = Object.keys(nodes).filter(id => id[0] === 'X');
+  const pos  = buildPos(layers, n_inputs, n_upper, n_lower, bridgeNodeIds);
   const xMax = Math.max(5.5, n_inputs * 2.8);
   return {
     margin:{l:8,r:8,t:8,b:8},
@@ -658,7 +649,8 @@ setInterval(async () => {
 
     syncTopoUI(d.n_inputs, d.n_upper, d.n_lower);
     crossConnect = d.cross_connect;
-    nShared      = d.n_shared || 0;
+    nBridges     = d.n_bridges || 0;
+    bridgeK      = d.bridge_k  || 0.20;
     updateCrossUI();
     document.getElementById('b-alpha').innerText  = `α:${d.back_alpha.toFixed(2)}`;
     document.getElementById('b-data').innerText   = (d.dataset_type||'').slice(0,6).toUpperCase();
@@ -697,6 +689,20 @@ setInterval(async () => {
         <span class="text-slate-700 text-[8px]">v:${(n.vel||0).toFixed(3)}</span>
       </div>`;
     });
+    // Bridge nodes summary
+    const bridgeIds = Object.keys(d.nodes).filter(id => id[0] === 'X');
+    if (bridgeIds.length) {
+      nh += `<div class="text-[8px] text-amber-600 py-0.5 border-b border-slate-900">
+        ⬡ ${bridgeIds.length} bridge nodes — passive k=${bridgeK}</div>`;
+      bridgeIds.forEach(id => {
+        const n = d.nodes[id];
+        nh += `<div class="flex justify-between items-center py-0.5 border-b border-slate-900/50">
+          <span class="text-amber-500 text-[9px]">◆ ${id}</span>
+          <span class="text-amber-300 font-bold">${Number(n.x).toFixed(4)}</span>
+          <span class="text-slate-700 text-[8px]">v:${(n.vel||0).toFixed(3)}</span>
+        </div>`;
+      });
+    }
     const hids = order.filter(id => 'UL'.includes(id[0]));
     if (hids.length) {
       const avgV = hids.reduce((s,id) => s + Math.abs(d.nodes[id]?.vel||0), 0) / hids.length;
@@ -704,17 +710,23 @@ setInterval(async () => {
     }
     document.getElementById('pane-nodes').innerHTML = nh;
 
-    // Springs pane — shared-vertex springs shown with violet marker
+    // Springs pane — learnable first, then bridge springs in amber
     let sh = '';
     for (const [key, k] of Object.entries(d.springs)) {
-      const shared = isSharedSpring(key);
-      const kc  = shared ? 'text-violet-300'
-                         : (k < 0 ? 'text-blue-300' : k > 4 ? 'text-yellow-200' : 'text-purple-300');
-      const pfx = shared ? '<span class="text-violet-500 mr-1">⊕</span>' : '';
+      const kc  = k < 0 ? 'text-blue-300' : k > 4 ? 'text-yellow-200' : 'text-purple-300';
       sh += `<div class="flex justify-between py-0.5 border-b border-slate-900">
-        <span>${pfx}<span class="text-slate-500 text-[9px]">${key}</span></span>
+        <span class="text-slate-500 text-[9px]">${key}</span>
         <span class="${kc} font-bold text-[10px]">${k.toFixed(4)}</span></div>`;
     }
+    const bs = d.bridge_springs || {};
+    if (Object.keys(bs).length) {
+      sh += `<div class="text-[8px] text-amber-600 py-0.5 border-b border-slate-800 mt-1">⬡ BRIDGE (passive, fixed)</div>`;
+      for (const [key, k] of Object.entries(bs)) {
+        sh += `<div class="flex justify-between py-0.5 border-b border-slate-900/50">
+          <span class="text-amber-700 text-[9px]">${key}</span>
+          <span class="text-amber-400 font-bold text-[10px]">${k.toFixed(4)}</span></div>`;
+      }
+    }
     document.getElementById('pane-springs').innerHTML = sh;
 
     // Logs
@@ -722,9 +734,10 @@ setInterval(async () => {
       d.logs.map(l => `<div class="py-0.5 border-b border-slate-900/50">${l}</div>`).join('');
 
     // Mesh plot
-    const layerKey = JSON.stringify(d.layers) + d.cross_connect;
-    const traces   = buildTraces(d.nodes, d.springs, d.layers, d.n_inputs, d.n_upper, d.n_lower);
-    const layout   = meshLayout(d.layers, d.n_inputs, d.n_upper, d.n_lower);
+    const layerKey = JSON.stringify(d.layers) + d.cross_connect + d.n_bridges;
+    const bridgeSprings = d.bridge_springs || {};
+    const traces  = buildTraces(d.nodes, d.springs, bridgeSprings, d.layers, d.n_inputs, d.n_upper, d.n_lower);
+    const layout  = meshLayout(d.nodes, d.layers, d.n_inputs, d.n_upper, d.n_lower);
     if (!meshPlotted || layerKey !== lastLayerKey) {
       Plotly.newPlot('mesh-plot', traces, layout, {displayModeBar:false, responsive:true});
       meshPlotted = true; lastLayerKey = layerKey;