Update index.html

index.html

@@ -192,23 +192,15 @@
 // ── CONFIG STATE ──────────────────────────────────────────────────────────────
 const cfg = { mode: 'training', architecture: 'additive', k_mode: 'single' };
 let nHidden = 1;
+let meshPlotted = false, errPlotted = false;
 
 function updateKParamCount() {
   const n = nHidden;
   const p = cfg.k_mode === 'single' ? (2 + n) : (3 * n);
   document.getElementById('k-param-count').innerText = `K params: ${p}`;
 }
-  
-/*
-function changeHidden(delta) {
-  nHidden = Math.max(1, Math.min(8, nHidden + delta));
-  document.getElementById('hidden-count').innerText = nHidden;
-  document.getElementById('b-h-n').innerText = nHidden;
-  updateKParamCount();
-}
-*/
 
-  async function changeHidden(delta) {
+async function changeHidden(delta) {
   const res = await fetch('/set_hidden', {
     method: 'POST',
     headers: {'Content-Type': 'application/json'},
@@ -221,22 +213,14 @@ function changeHidden(delta) {
   document.getElementById('hidden-count').innerText = nHidden;
   document.getElementById('b-h-n').innerText = nHidden;
 
-  meshPlotted = errPlotted = false;
+  updateKParamCount();
+  meshPlotted = false;
+  errPlotted = false;
 }
 
-  
 // Quick +/- right from the header badge (calls server immediately)
 async function quickH(delta) {
-  const res = await fetch('/set_hidden', {
-    method: 'POST', headers: {'Content-Type':'application/json'},
-    body: JSON.stringify({ delta })
-  });
-  const d = await res.json();
-  nHidden = d.n_hidden;
-  document.getElementById('hidden-count').innerText = nHidden;
-  document.getElementById('b-h-n').innerText = nHidden;
-  updateKParamCount();
-  meshPlotted = errPlotted = false;
+  await changeHidden(delta);
 }
 
 function pick(key, val, btn, cls) {
@@ -264,7 +248,8 @@ async function applyConfig() {
   document.getElementById('b-k').innerText    = cfg.k_mode === 'single' ? 'SNGL-K' : 'TRPL-K';
   document.getElementById('b-h-n').innerText  = nHidden;
   document.getElementById('b-data').innerText = ds.slice(0,6).toUpperCase();
-  meshPlotted = errPlotted = false;
+  meshPlotted = false;
+  errPlotted = false;
   toggleDrawer();
 }
 
@@ -351,44 +336,42 @@ function tab(name) {
 
 // ── VISUALIZATION ─────────────────────────────────────────────────────────────
 
-  /*
-// Hourglass layout: A (left-top), B (left-bottom), H1..HN (centre column), C (right)
+// Proper hourglass layout: hidden nodes split into an upper funnel and a lower funnel.
+// This prevents the "fan/web" look while preserving every existing edge.
 function getNodePositions(n) {
-  const pos = { A: [-4.5, 1.8], B: [-4.5, -1.8], C: [4.5, 0] };
-  if (n === 1) {
-    pos['H1'] = [0, 0];
-  } else {
-    const spread = Math.min(3.2, 0.85 * n);
-    for (let i = 1; i <= n; i++) {
-      const t = (i - 1) / (n - 1);
-      pos[`H${i}`] = [0, spread * (1 - 2 * t)];
-    }
-  }
-  return pos;
-}
-*/
-
-  function getNodePositions(n) {
   const pos = {
-    A: [-4.5, 2],
-    B: [-4.5, -2],
-    C: [4.5, 0]
+    A: [-4.5,  2.0],
+    B: [-4.5, -2.0],
+    C: [ 4.5,  0.0]
   };
 
-  const spread = Math.min(3.5, 0.9 * n);
+  if (n === 1) {
+    pos.H1 = [0.0, 0.0];
+    return pos;
+  }
 
-  for (let i = 1; i <= n; i++) {
-    const t = (i - 1) / (n - 1 || 1); // avoid divide by 0
-    const y = spread * (1 - 2 * t);
+  const topCount = Math.ceil(n / 2);
+  const bottomCount = n - topCount;
 
-    // 👇 THIS is the key: give X variation
-    const xOffset = Math.abs(y) * 0.6;
+  // Upper funnel: A/B side toward center, then down toward the middle
+  for (let i = 1; i <= topCount; i++) {
+    const t = topCount === 1 ? 0 : (i - 1) / (topCount - 1);
+    const x = -1.6 + (t * 1.6);
+    const y =  1.8 - (t * 1.5);
+    pos[`H${i}`] = [x, y];
+  }
 
-    pos[`H${i}`] = [0 + xOffset, y];
+  // Lower funnel: A/B side toward center, then up toward the middle
+  for (let j = 1; j <= bottomCount; j++) {
+    const i = topCount + j;
+    const t = bottomCount === 1 ? 0 : (j - 1) / (bottomCount - 1);
+    const x = -1.6 + (t * 1.6);
+    const y = -1.8 + (t * 1.5);
+    pos[`H${i}`] = [x, y];
   }
 
   return pos;
-  }
+}
 
 function getEdgeList(n) {
   const edges = [];
@@ -457,8 +440,6 @@ const ERR_LAYOUT = {
   showlegend:false
 };
 
-let meshPlotted = false, errPlotted = false;
-
 // ── POLL ──────────────────────────────────────────────────────────────────────
 setInterval(async () => {
   try {
@@ -471,6 +452,8 @@ setInterval(async () => {
       document.getElementById('hidden-count').innerText = nHidden;
       document.getElementById('b-h-n').innerText = nHidden;
       updateKParamCount();
+      meshPlotted = false;
+      errPlotted = false;
     }
 
     document.getElementById('run-dot').className =