Update app.py

app.py

@@ -21,92 +21,112 @@ STRANGE_RESULTS = STRANGE_ROOT / "results"
 
 STYLE_PATH = ROOT / "style.css"
 
-
 # ============================================================
 # CSS + JS (canvas + menu)
 # ============================================================
 
 CSS = STYLE_PATH.read_text(encoding="utf-8") if STYLE_PATH.exists() else ""
 
+# JS: robust init (Gradio can run JS before HTML exists)
 JS = r"""
 () => {
-  // prevent double init (Gradio can re-render)
-  if (window.__tq_inited) return;
-  window.__tq_inited = true;
-
-  // --- Menu toggle ---
-  const btn = document.getElementById("tqMenuBtn");
-  const menu = document.getElementById("tqMenu");
-  if (btn && menu) {
-    btn.addEventListener("click", () => menu.classList.toggle("open"));
-    document.addEventListener("click", (e) => {
-      if (!menu.contains(e.target) && !btn.contains(e.target)) {
-        menu.classList.remove("open");
-      }
-    });
-  }
+  // already running animation? bail
+  if (window.__tq_starfield_running) return;
+
+  function initOnceDomReady() {
+    const canvas = document.getElementById("quantumField");
+    const btn = document.getElementById("tqMenuBtn");
+    const menu = document.getElementById("tqMenu");
+
+    // DOM not ready yet -> retry shortly
+    if (!canvas) return false;
+
+    // ---- Menu toggle (idempotent) ----
+    if (btn && menu && !btn.__tq_bound) {
+      btn.__tq_bound = true;
+      btn.addEventListener("click", () => menu.classList.toggle("open"));
+      document.addEventListener("click", (e) => {
+        if (!menu.contains(e.target) && !btn.contains(e.target)) {
+          menu.classList.remove("open");
+        }
+      });
+    }
 
-  // --- Starfield canvas ---
-  const c = document.getElementById("quantumField");
-  if (!c) return;
-  const ctx = c.getContext("2d");
-  if (!ctx) return;
+    // ---- Starfield canvas ----
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return true;
 
-  let w = 0, h = 0;
-  const stars = [];
-  const N = 170;
+    let w = 0, h = 0;
+    const stars = [];
+    const N = 170;
 
-  function resize() {
-    w = c.width = window.innerWidth;
-    h = c.height = window.innerHeight;
-  }
+    function resize() {
+      w = canvas.width = window.innerWidth;
+      h = canvas.height = window.innerHeight;
+    }
 
-  function seed() {
-    stars.length = 0;
-    for (let i = 0; i < N; i++) {
-      stars.push({
-        x: Math.random() * w,
-        y: Math.random() * h,
-        z: 0.2 + Math.random() * 0.8,
-        v: 0.15 + Math.random() * 0.55,
-      });
+    function seed() {
+      stars.length = 0;
+      for (let i = 0; i < N; i++) {
+        stars.push({
+          x: Math.random() * w,
+          y: Math.random() * h,
+          z: 0.2 + Math.random() * 0.8,
+          v: 0.15 + Math.random() * 0.55,
+        });
+      }
     }
-  }
 
-  function tick() {
-    ctx.clearRect(0, 0, w, h);
+    function tick() {
+      ctx.clearRect(0, 0, w, h);
 
-    // subtle vignette
-    const g = ctx.createRadialGradient(w/2, h/2, 10, w/2, h/2, Math.max(w,h)/1.1);
-    g.addColorStop(0, "rgba(0,0,0,0)");
-    g.addColorStop(1, "rgba(0,0,0,0.55)");
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, w, h);
+      // subtle vignette
+      const g = ctx.createRadialGradient(w/2, h/2, 10, w/2, h/2, Math.max(w,h)/1.1);
+      g.addColorStop(0, "rgba(0,0,0,0)");
+      g.addColorStop(1, "rgba(0,0,0,0.55)");
+      ctx.fillStyle = g;
+      ctx.fillRect(0, 0, w, h);
 
-    ctx.globalAlpha = 0.9;
+      ctx.globalAlpha = 0.9;
+      ctx.fillStyle = "rgba(255,255,255,0.75)";
 
-    for (const s of stars) {
-      s.y += s.v * (1.0 + (1.0 - s.z));
-      if (s.y > h + 10) { s.y = -10; s.x = Math.random() * w; }
+      for (const s of stars) {
+        s.y += s.v * (1.0 + (1.0 - s.z));
+        if (s.y > h + 10) { s.y = -10; s.x = Math.random() * w; }
+        const r = 0.6 + 1.6 * (1.0 - s.z);
+        ctx.beginPath();
+        ctx.arc(s.x, s.y, r, 0, Math.PI * 2);
+        ctx.fill();
+      }
 
-      const r = 0.6 + 1.6 * (1.0 - s.z);
-      ctx.fillStyle = "rgba(255,255,255,0.75)";
-      ctx.beginPath();
-      ctx.arc(s.x, s.y, r, 0, Math.PI * 2);
-      ctx.fill();
+      requestAnimationFrame(tick);
+    }
+
+    resize();
+    seed();
+
+    if (!window.__tq_resize_bound) {
+      window.__tq_resize_bound = true;
+      window.addEventListener("resize", () => { resize(); seed(); });
     }
 
-    requestAnimationFrame(tick);
+    window.__tq_starfield_running = true;
+    tick();
+
+    return true;
   }
 
-  resize();
-  seed();
-  window.addEventListener("resize", () => { resize(); seed(); });
-  tick();
+  // Try a few times to catch Gradio timing
+  let tries = 0;
+  const maxTries = 30;
+  const timer = setInterval(() => {
+    tries += 1;
+    const ok = initOnceDomReady();
+    if (ok || tries >= maxTries) clearInterval(timer);
+  }, 120);
 }
 """
 
-
 # ============================================================
 # Helpers
 # ============================================================
@@ -123,7 +143,8 @@ def _clean_pngs(folder: Path):
 def _collect_pngs(folder: Path):
     if not folder.exists():
         return []
-    return sorted(str(p) for p in folder.rglob("*.png"))
+    # Return absolute paths so Gradio can resolve correctly
+    return sorted(str(p.resolve()) for p in folder.rglob("*.png"))
 
 
 def _run_capture(cmd, cwd: Path, env: dict):
@@ -229,22 +250,17 @@ def build_ui():
         gr.HTML(
             """
 <canvas id="quantumField"></canvas>
-
 <nav id="tqNav">
   <div class="nav-inner">
     <div class="brand">TwoQuarks</div>
-
     <div class="nav-links">
       <a href="#down">Down</a>
       <a href="#strange">Strange</a>
     </div>
-
     <div class="spacer"></div>
-
     <div class="menu-btn" id="tqMenuBtn" aria-label="menu">
       <span></span>
     </div>
-
     <div class="menu" id="tqMenu">
       <a href="#down">DOWN / AntiDown</a>
       <div class="sep"></div>
@@ -289,13 +305,13 @@ designed to expose and analyze failure modes under deceptive reward conditions.
                 label="Episodes per phase",
             )
 
-            run_down_btn = gr.Button("Run DOWN Model", elem_classes=["tq-primary"])
+            run_down_btn = gr.Button("Run DOWN Model", elem_id="btn_down", elem_classes=["tq-primary"])
             down_meta = gr.JSON(label="Run status")
 
-            # elem_id is REQUIRED for carousel CSS
+            # Force 1 column; carousel is handled by CSS
             down_gallery = gr.Gallery(
                 label="Generated plots",
-                columns=2,
+                columns=1,
                 height="auto",
                 elem_id="down_gallery",
             )
@@ -321,12 +337,12 @@ designed to study failure under hidden regime shifts and phase transitions.
 """
             )
 
-            run_strange_btn = gr.Button("Run STRANGE Model", elem_classes=["tq-primary"])
+            run_strange_btn = gr.Button("Run STRANGE Model", elem_id="btn_strange", elem_classes=["tq-primary"])
             strange_meta = gr.JSON(label="Run status")
 
             strange_gallery = gr.Gallery(
                 label="Generated plots",
-                columns=2,
+                columns=1,
                 height="auto",
                 elem_id="strange_gallery",
             )