Update app.py

app.py

@@ -20,28 +20,23 @@ DOWN_RESULTS = DOWN_ROOT / "results"
 STRANGE_RESULTS = STRANGE_ROOT / "results"
 
 STYLE_PATH = ROOT / "style.css"
+CSS = STYLE_PATH.read_text(encoding="utf-8") if STYLE_PATH.exists() else ""
 
 # ============================================================
-# CSS + JS (canvas + menu)
+# JS (canvas + menu) — patched for HiDPI
 # ============================================================
 
-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"""
 () => {
-  // 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) ----
+    // Menu toggle (idempotent)
     if (btn && menu && !btn.__tq_bound) {
       btn.__tq_bound = true;
       btn.addEventListener("click", () => menu.classList.toggle("open"));
@@ -52,17 +47,26 @@ JS = r"""
       });
     }
 
-    // ---- Starfield canvas ----
     const ctx = canvas.getContext("2d");
     if (!ctx) return true;
 
     let w = 0, h = 0;
+    let dpr = 1;
     const stars = [];
     const N = 170;
 
     function resize() {
-      w = canvas.width = window.innerWidth;
-      h = canvas.height = window.innerHeight;
+      dpr = Math.max(1, window.devicePixelRatio || 1);
+      // CSS size
+      canvas.style.width = window.innerWidth + "px";
+      canvas.style.height = window.innerHeight + "px";
+      // backing buffer
+      canvas.width = Math.floor(window.innerWidth * dpr);
+      canvas.height = Math.floor(window.innerHeight * dpr);
+      // draw in CSS pixels
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      w = window.innerWidth;
+      h = window.innerHeight;
     }
 
     function seed() {
@@ -89,7 +93,6 @@ JS = r"""
 
       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; }
@@ -112,11 +115,9 @@ JS = r"""
 
     window.__tq_starfield_running = true;
     tick();
-
     return true;
   }
 
-  // Try a few times to catch Gradio timing
   let tries = 0;
   const maxTries = 30;
   const timer = setInterval(() => {
@@ -143,22 +144,31 @@ def _clean_pngs(folder: Path):
 def _collect_pngs(folder: Path):
     if not folder.exists():
         return []
-    # 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):
+def _run_capture(cmd, cwd: Path, env: dict, timeout_s: int = 900):
     """
     Run a subprocess and capture stdout/stderr.
-    If it fails, raise a RuntimeError containing the logs so Gradio shows it.
+    Timeout prevents Spaces from hanging forever.
     """
-    result = subprocess.run(
-        cmd,
-        cwd=str(cwd),
-        env=env,
-        capture_output=True,
-        text=True,
-    )
+    try:
+        result = subprocess.run(
+            cmd,
+            cwd=str(cwd),
+            env=env,
+            capture_output=True,
+            text=True,
+            timeout=timeout_s,
+        )
+    except subprocess.TimeoutExpired as e:
+        raise RuntimeError(
+            "Subprocess timed out\n"
+            f"CMD: {' '.join(map(str, cmd))}\n"
+            f"CWD: {cwd}\n"
+            f"TIMEOUT: {timeout_s}s\n"
+        ) from e
+
     if result.returncode != 0:
         raise RuntimeError(
             "Subprocess failed\n"
@@ -167,6 +177,7 @@ def _run_capture(cmd, cwd: Path, env: dict):
             f"STDOUT:\n{result.stdout}\n"
             f"STDERR:\n{result.stderr}"
         )
+
     return result.stdout, result.stderr
 
 
@@ -177,11 +188,10 @@ def _run_capture(cmd, cwd: Path, env: dict):
 def run_down_all(episodes: int):
     run_all = DOWN_ROOT / "run_all.py"
     if not run_all.exists():
-        raise RuntimeError(f"{run_all} not found (check folder name: must be 'Down/')")
+        raise RuntimeError(f"{run_all} not found (folder must be 'Down/')")
 
     DOWN_GRAPHICS.mkdir(parents=True, exist_ok=True)
     DOWN_RESULTS.mkdir(parents=True, exist_ok=True)
-
     _clean_pngs(DOWN_GRAPHICS)
 
     env = os.environ.copy()
@@ -189,8 +199,7 @@ def run_down_all(episodes: int):
     env["TWOQUARKS_GRAPHICS_DIR"] = str(DOWN_GRAPHICS)
 
     cmd = [sys.executable, str(run_all), "--episodes", str(int(episodes))]
-
-    _run_capture(cmd, cwd=DOWN_ROOT, env=env)
+    _run_capture(cmd, cwd=DOWN_ROOT, env=env, timeout_s=1200)
 
     images = _collect_pngs(DOWN_GRAPHICS)
     meta = {
@@ -213,11 +222,10 @@ def run_down_all(episodes: int):
 def run_strange_all():
     run_all = STRANGE_ROOT / "run_all.py"
     if not run_all.exists():
-        raise RuntimeError(f"{run_all} not found (check folder name: must be 'Strange/')")
+        raise RuntimeError(f"{run_all} not found (folder must be 'Strange/')")
 
     STRANGE_GRAPHICS.mkdir(parents=True, exist_ok=True)
     STRANGE_RESULTS.mkdir(parents=True, exist_ok=True)
-
     _clean_pngs(STRANGE_GRAPHICS)
 
     env = os.environ.copy()
@@ -225,8 +233,7 @@ def run_strange_all():
     env["TWOQUARKS_GRAPHICS_DIR"] = str(STRANGE_GRAPHICS)
 
     cmd = [sys.executable, str(run_all)]
-
-    _run_capture(cmd, cwd=STRANGE_ROOT, env=env)
+    _run_capture(cmd, cwd=STRANGE_ROOT, env=env, timeout_s=1200)
 
     images = _collect_pngs(STRANGE_GRAPHICS)
     meta = {
@@ -246,7 +253,6 @@ def run_strange_all():
 def build_ui():
     with gr.Blocks(title="TwoQuarks — QuarksLab", css=CSS, js=JS) as demo:
 
-        # Inject DOM for canvas + nav
         gr.HTML(
             """
 <canvas id="quantumField"></canvas>
@@ -258,9 +264,7 @@ def build_ui():
       <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-btn" id="tqMenuBtn" aria-label="menu"><span></span></div>
     <div class="menu" id="tqMenu">
       <a href="#down">DOWN / AntiDown</a>
       <div class="sep"></div>
@@ -271,14 +275,13 @@ def build_ui():
 """
         )
 
-        # App wrapper (needed for z-index + padding-top in your CSS)
         with gr.Column(elem_id="tqApp"):
 
             gr.Markdown(
                 """
 <div class="tq-hero">
   <div class="brand">TwoQuarks • QuarksLab</div>
-  <div class="desc"><b>Run Models.</b> Real artifacts. Real Models.</div>
+  <div class="desc"><b>Run Models.</b> Real artifacts. Real agents.</div>
 </div>
 """,
                 elem_id="top",
@@ -288,31 +291,25 @@ def build_ui():
             # DOWN
             # ----------------------------
             gr.HTML('<div id="down"></div>')
-
             gr.Markdown("## DOWN / AntiDown")
             gr.Markdown(
-                """
-The Down / AntiDown models are reinforcement learning agents
-designed to expose and analyze failure modes under deceptive reward conditions.
-"""
-            )
-
-            down_eps = gr.Slider(
-                minimum=50,
-                maximum=500,
-                step=50,
-                value=200,
-                label="Episodes per phase",
+                "RL agents designed to expose failure modes under **deceptive reward** conditions."
             )
 
+            # 🔥 Button visible, everything else folded
             run_down_btn = gr.Button("Run DOWN Model", elem_id="btn_down", elem_classes=["tq-primary"])
-            down_meta = gr.JSON(label="Run status")
 
-            # Force 1 column; carousel is handled by CSS
+            with gr.Accordion("Advanced parameters", open=False):
+                down_eps = gr.Slider(50, 500, step=50, value=200, label="Episodes per phase")
+
+            with gr.Accordion("Run status / logs", open=False):
+                down_meta = gr.JSON(label="Run status", elem_id="down_meta")
+
             down_gallery = gr.Gallery(
                 label="Generated plots",
-                columns=1,
-                height="auto",
+                show_label=False,
+                columns=8,          # wide -> we’ll style as strip
+                height=260,         # stable tiles
                 elem_id="down_gallery",
             )
 
@@ -320,6 +317,7 @@ designed to expose and analyze failure modes under deceptive reward conditions.
                 fn=run_down_all,
                 inputs=[down_eps],
                 outputs=[down_meta, down_gallery],
+                api_name=False,
             )
 
             gr.Markdown("---")
@@ -328,22 +326,20 @@ designed to expose and analyze failure modes under deceptive reward conditions.
             # STRANGE
             # ----------------------------
             gr.HTML('<div id="strange"></div>')
-
             gr.Markdown("## STRANGE / AntiStrange")
             gr.Markdown(
-                """
-Strange / AntiStrange are reinforcement learning agents
-designed to study failure under hidden regime shifts and phase transitions.
-"""
+                "RL agents designed to study failure under **hidden regime shifts** and phase transitions."
             )
 
             run_strange_btn = gr.Button("Run STRANGE Model", elem_id="btn_strange", elem_classes=["tq-primary"])
-            strange_meta = gr.JSON(label="Run status")
+
+            with gr.Accordion("Run status / logs", open=False):
+                strange_meta = gr.JSON(label="Run status", elem_id="strange_meta")
 
             strange_gallery = gr.Gallery(
-                label="Generated plots",
-                columns=1,
-                height="auto",
+                show_label=False,
+                columns=8,
+                height=260,
                 elem_id="strange_gallery",
             )
 
@@ -351,26 +347,21 @@ designed to study failure under hidden regime shifts and phase transitions.
                 fn=run_strange_all,
                 inputs=[],
                 outputs=[strange_meta, strange_gallery],
+                api_name=False,
             )
 
             gr.Markdown(
                 """
 ---
-### Notes:
-- This lab, its models & the TwoQuarks website,
-  are developed end to end by Jaime Ledesma.
-- Gradio does not import or orchestrate internal model logic.
-- All visualizations are the result produced by the model.
+### Notes
+- This lab and the TwoQuarks website are developed end-to-end by Jaime Ledesma.
+- Visualizations shown here are **direct artifacts** produced by the models.
 """
             )
 
     return demo
 
 
-# ============================================================
-# Launch
-# ============================================================
-
 demo = build_ui()
 
 if __name__ == "__main__":