Update app.py

app.py

@@ -4,10 +4,6 @@ import subprocess
 from pathlib import Path
 import gradio as gr
 
-# ============================================================
-# Paths (Linux is case-sensitive!)
-# ============================================================
-
 ROOT = Path(__file__).resolve().parent
 
 DOWN_ROOT = ROOT / "Down"
@@ -22,21 +18,15 @@ STRANGE_RESULTS = STRANGE_ROOT / "results"
 STYLE_PATH = ROOT / "style.css"
 CSS = STYLE_PATH.read_text(encoding="utf-8") if STYLE_PATH.exists() else ""
 
-# ============================================================
-# JS (canvas + menu) — patched for HiDPI
-# ============================================================
-
 JS = r"""
 () => {
   if (window.__tq_starfield_running) return;
-
   function initOnceDomReady() {
     const canvas = document.getElementById("quantumField");
     const btn = document.getElementById("tqMenuBtn");
     const menu = document.getElementById("tqMenu");
     if (!canvas) return false;
 
-    // Menu toggle (idempotent)
     if (btn && menu && !btn.__tq_bound) {
       btn.__tq_bound = true;
       btn.addEventListener("click", () => menu.classList.toggle("open"));
@@ -57,13 +47,10 @@ JS = r"""
 
     function resize() {
       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;
@@ -84,7 +71,6 @@ JS = r"""
     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)");
@@ -93,6 +79,7 @@ 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; }
@@ -107,12 +94,10 @@ JS = r"""
 
     resize();
     seed();
-
     if (!window.__tq_resize_bound) {
       window.__tq_resize_bound = true;
       window.addEventListener("resize", () => { resize(); seed(); });
     }
-
     window.__tq_starfield_running = true;
     tick();
     return true;
@@ -128,10 +113,6 @@ JS = r"""
 }
 """
 
-# ============================================================
-# Helpers
-# ============================================================
-
 def _clean_pngs(folder: Path):
     folder.mkdir(parents=True, exist_ok=True)
     for f in folder.rglob("*.png"):
@@ -140,13 +121,11 @@ def _clean_pngs(folder: Path):
         except Exception:
             pass
 
-
 def _collect_pngs(folder: Path):
     if not folder.exists():
         return []
     return sorted(str(p.resolve()) for p in folder.rglob("*.png"))
 
-
 def _run_capture(cmd, cwd: Path, env: dict, timeout_s: int = 900):
     """
     Run a subprocess and capture stdout/stderr.
@@ -180,11 +159,6 @@ def _run_capture(cmd, cwd: Path, env: dict, timeout_s: int = 900):
 
     return result.stdout, result.stderr
 
-
-# ============================================================
-# DOWN (Unified: Down + AntiDown)
-# ============================================================
-
 def run_down_all(episodes: int):
     run_all = DOWN_ROOT / "run_all.py"
     if not run_all.exists():
@@ -214,11 +188,6 @@ def run_down_all(episodes: int):
     }
     return meta, images
 
-
-# ============================================================
-# STRANGE (Unified: Strange + AntiStrange)
-# ============================================================
-
 def run_strange_all():
     run_all = STRANGE_ROOT / "run_all.py"
     if not run_all.exists():
@@ -245,14 +214,8 @@ def run_strange_all():
     }
     return meta, images
 
-
-# ============================================================
-# UI
-# ============================================================
-
 def build_ui():
     with gr.Blocks(title="TwoQuarks — QuarksLab", css=CSS, js=JS) as demo:
-
         gr.HTML(
             """
 <canvas id="quantumField"></canvas>
@@ -276,85 +239,116 @@ def build_ui():
         )
 
         with gr.Column(elem_id="tq-app"):
-
             gr.Markdown(
                 """
 <div class="tq-hero">
-  <div class="brand">TwoQuarks • QuarksLab</div>
-  <div class="desc"><b>Run Models.</b> Real artifacts. Real agents.</div>
+  <div class="tq-hero__brand">TwoQuarks • QuarksLab</div>
+  <div class="tq-hero__desc">
+    <b>Run agents.</b> Generate real artifacts. Inspect failure modes in controlled environments.
+  </div>
 </div>
 """,
                 elem_id="top",
             )
 
-            # ----------------------------
-            # DOWN
-            # ----------------------------
             gr.HTML('<div id="down"></div>')
-            gr.Markdown("## DOWN / AntiDown")
-            gr.Markdown(
-                "RL agents designed to expose failure modes under **deceptive reward** conditions."
-            )
-
-            run_down_btn = gr.Button("Run DOWN Model", elem_id="btn_down", elem_classes=["tq-primary"])
-
-            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",
-                show_label=False,
-                columns=8,          # wide -> we’ll style as strip
-                height=260,         # stable tiles
-                elem_id="down_gallery",
-            )
-
-            run_down_btn.click(
-                fn=run_down_all,
-                inputs=[down_eps],
-                outputs=[down_meta, down_gallery],
-                api_name=False,
-            )
+            with gr.Group():  
+                gr.Markdown(
+                    """
+<div class="tq-card-title">DOWN / AntiDown</div>
+<div class="tq-card-subtitle">Deceptive reward • reward hacking signatures • instability diagnostics</div>
+""",
+                )
+
+                with gr.Row(equal_height=True):
+                    with gr.Column(scale=1, min_width=280):
+                        run_down_btn = gr.Button("Run DOWN Pipeline", variant="primary", elem_id="btn_down")
+                        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")
+                        gr.Markdown(
+                            """
+<div class="tq-card-subtitle">
+Tip: start with 200 episodes. Increase only when you need cleaner trends in plots.
+</div>
+"""
+                        )
+
+                    with gr.Column(scale=2, min_width=420):
+                        gr.Markdown(
+                            '<div class="tq-card-title">Generated artifacts</div>'
+                        )
+                        down_gallery = gr.Gallery(
+                            show_label=False,
+                            columns=1, 
+                            height=240,
+                            elem_id="down_gallery",
+                            preview=True,
+                        )
+
+                run_down_btn.click(
+                    fn=run_down_all,
+                    inputs=[down_eps],
+                    outputs=[down_meta, down_gallery],
+                    api_name=False,
+                )
 
             gr.Markdown("---")
-
-            # ----------------------------
-            # STRANGE
-            # ----------------------------
             gr.HTML('<div id="strange"></div>')
-            gr.Markdown("## STRANGE / AntiStrange")
-            gr.Markdown(
-                "RL agents designed to study failure under **hidden regime shifts** and phase transitions."
-            )
+            with gr.Group():
+                gr.Markdown(
+                    """
+<div class="tq-card-title">STRANGE / AntiStrange</div>
+<div class="tq-card-subtitle">Hidden regime shifts • phase transitions • early warning signals</div>
+""",
+                )
 
-            run_strange_btn = gr.Button("Run STRANGE Model", elem_id="btn_strange", elem_classes=["tq-primary"])
+                with gr.Row(equal_height=True):
+                    with gr.Column(scale=1, min_width=280):
+                        run_strange_btn = gr.Button("Run STRANGE Pipeline", variant="primary", elem_id="btn_strange")
 
-            with gr.Accordion("Run status / logs", open=False):
-                strange_meta = gr.JSON(label="Run status", elem_id="strange_meta")
+                        with gr.Accordion("Run status / logs", open=False):
+                            strange_meta = gr.JSON(label="Run status", elem_id="strange_meta")
 
-            strange_gallery = gr.Gallery(
-                show_label=False,
-                columns=8,
-                height=260,
-                elem_id="strange_gallery",
-            )
-
-            run_strange_btn.click(
-                fn=run_strange_all,
-                inputs=[],
-                outputs=[strange_meta, strange_gallery],
-                api_name=False,
-            )
+                        gr.Markdown(
+                            """
+<div class="tq-card-subtitle">
+This pipeline explores stability under non-stationarity: when the world changes mid-training.
+</div>
+"""
+                        )
+
+                    with gr.Column(scale=2, min_width=420):
+                        gr.Markdown('<div class="tq-card-title">Generated artifacts</div>')
+                        strange_gallery = gr.Gallery(
+                            show_label=False,
+                            columns=1,
+                            height=240,
+                            elem_id="strange_gallery",
+                            preview=True,
+                        )
+
+                run_strange_btn.click(
+                    fn=run_strange_all,
+                    inputs=[],
+                    outputs=[strange_meta, strange_gallery],
+                    api_name=False,
+                )
 
             gr.Markdown(
                 """
 ---
-### 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.
+### About QuarksLab
+- This space is a small laboratory developed so 
+  that anyone interested can view our work.
+- The graphics shown are direct artifacts of the 
+  TwoQuarks research framework, focused on the 
+  AI Safety.
 """
             )