Update app.py

app.py

@@ -1,226 +1,361 @@
-import os
-import sys
-import subprocess
-from pathlib import Path
-import gradio as gr
-
-# ============================================================
-# Paths (Linux is case-sensitive!)
-# ============================================================
-
-ROOT = Path(__file__).resolve().parent
-
-DOWN_ROOT = ROOT / "Down"
-STRANGE_ROOT = ROOT / "Strange"
-
-DOWN_GRAPHICS = DOWN_ROOT / "graphics"
-STRANGE_GRAPHICS = STRANGE_ROOT / "graphics"
-
-DOWN_RESULTS = DOWN_ROOT / "results"
-STRANGE_RESULTS = STRANGE_ROOT / "results"
-
-
-# ============================================================
-# Helpers
-# ============================================================
-
-def _clean_pngs(folder: Path):
-    folder.mkdir(parents=True, exist_ok=True)
-    for f in folder.rglob("*.png"):
-        try:
-            f.unlink()
-        except Exception:
-            pass
-
-
-def _collect_pngs(folder: Path):
-    if not folder.exists():
-        return []
-    return sorted(str(p) for p in folder.rglob("*.png"))
-
-
-def _run_capture(cmd, cwd: Path, env: dict):
-    """
-    Run a subprocess and capture stdout/stderr.
-    If it fails, raise a RuntimeError containing the logs so Gradio shows it.
-    """
-    result = subprocess.run(
-        cmd,
-        cwd=str(cwd),
-        env=env,
-        capture_output=True,
-        text=True,
-    )
-    if result.returncode != 0:
-        raise RuntimeError(
-            "Subprocess failed\n"
-            f"CMD: {' '.join(map(str, cmd))}\n"
-            f"CWD: {cwd}\n\n"
-            f"STDOUT:\n{result.stdout}\n"
-            f"STDERR:\n{result.stderr}"
-        )
-    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():
-        raise RuntimeError(f"{run_all} not found (check folder name: 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()
-    env["TWOQUARKS_RESULTS_DIR"] = str(DOWN_RESULTS)
-    env["TWOQUARKS_GRAPHICS_DIR"] = str(DOWN_GRAPHICS)
-
-    cmd = [sys.executable, str(run_all), "--episodes", str(int(episodes))]
-
-    # capture logs so the UI shows the real failure reason if any
-    _run_capture(cmd, cwd=DOWN_ROOT, env=env)
-
-    images = _collect_pngs(DOWN_GRAPHICS)
-    meta = {
-        "status": "completed",
-        "pipeline": "DOWN + AntiDown",
-        "episodes_per_phase": int(episodes),
-        "graphics_count": len(images),
-        "graphics_dir": str(DOWN_GRAPHICS),
-        "results_dir": str(DOWN_RESULTS),
-        # canonical CSV names the dual plot expects
-        "csv_down": str(DOWN_RESULTS / "down_paradox_tabular_results.csv"),
-        "csv_antidown": str(DOWN_RESULTS / "antidown_corrupted_valley_tabular.csv"),
-    }
-    return meta, images
-
-
-# ============================================================
-# STRANGE (Unified: Strange + AntiStrange)
-# ============================================================
-
-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/')")
-
-    STRANGE_GRAPHICS.mkdir(parents=True, exist_ok=True)
-    STRANGE_RESULTS.mkdir(parents=True, exist_ok=True)
-
-    _clean_pngs(STRANGE_GRAPHICS)
-
-    env = os.environ.copy()
-    env["TWOQUARKS_RESULTS_DIR"] = str(STRANGE_RESULTS)
-    env["TWOQUARKS_GRAPHICS_DIR"] = str(STRANGE_GRAPHICS)
-
-    cmd = [sys.executable, str(run_all)]
-
-    _run_capture(cmd, cwd=STRANGE_ROOT, env=env)
-
-    images = _collect_pngs(STRANGE_GRAPHICS)
-    meta = {
-        "status": "completed",
-        "pipeline": "STRANGE + AntiStrange",
-        "graphics_count": len(images),
-        "graphics_dir": str(STRANGE_GRAPHICS),
-        "results_dir": str(STRANGE_RESULTS),
-    }
-    return meta, images
-
-
-# ============================================================
-# UI
-# ============================================================
-
-def build_ui():
-    with gr.Blocks(title="TwoQuarks — QuarksLab") as demo:
-        gr.Markdown(
-            """
-# TwoQuarks • QuarksLab
-**Run Models. Real artifacts. Real Models.**
-"""
-        )
-
-        # ----------------------------
-        # DOWN
-        # ----------------------------
-        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",
-        )
-
-        run_down_btn = gr.Button("Run DOWN Model")
-        down_meta = gr.JSON(label="Run status")
-        down_gallery = gr.Gallery(label="Generated plots", columns=2, height="auto")
-
-        run_down_btn.click(
-            fn=run_down_all,
-            inputs=[down_eps],
-            outputs=[down_meta, down_gallery],
-        )
-
-        gr.Markdown("---")
-
-        # ----------------------------
-        # STRANGE
-        # ----------------------------
-        gr.Markdown("## STRANGE / AntiStrange")
-        gr.Markdown(
-            """
-Strange / AntiStrange are reinforcement learning agents
-designed to study failure under hidden regime shifts and phase transitions.
-"""
-        )
-
-        run_strange_btn = gr.Button("Run STRANGE Model")
-        strange_meta = gr.JSON(label="Run status")
-        strange_gallery = gr.Gallery(label="Generated plots", columns=2, height="auto")
-
-        run_strange_btn.click(
-            fn=run_strange_all,
-            inputs=[],
-            outputs=[strange_meta, strange_gallery],
-        )
-
-        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.
-"""
-        )
-
-    return demo
-
-
-# ============================================================
-# Launch
-# ============================================================
-
-demo = build_ui()
-
-if __name__ == "__main__":
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=int(os.getenv("PORT", "7860")),
-        show_api=False,
-    )
+/* ===== TwoQuarks skin for Gradio ===== */
+*{margin:0;padding:0;box-sizing:border-box}
+
+:root{
+  --bg:#000;
+  --fg:#fff;
+  --muted:rgba(255,255,255,.55);
+
+  --card:rgba(255,255,255,.04);
+  --card2:rgba(255,255,255,.08);
+  --stroke:rgba(255,255,255,.10);
+
+  /* glass needs to be visible but not milky */
+  --glass:rgba(0,0,0,.32);
+
+  --accent:#8cb4ff;
+  --accentGlow: rgba(140,180,255,.20);
+
+  --rSm:10px;
+  --rMd:12px;
+  --rLg:14px;
+}
+
+html,body{height:100%}
+body, .gradio-container{
+  font-family: Inter, ui-sans-serif, system-ui, Arial;
+  background:var(--bg) !important;
+  color:var(--fg) !important;
+  overflow-x:hidden;
+}
+
+/* Starfield canvas (keep it inside stacking context) */
+#quantumField{
+  position:fixed; inset:0;
+  width:100vw; height:100vh;
+  z-index:0;
+  background:#000;
+  pointer-events:none;
+  opacity:.70;
+}
+
+/*  Nav */
+#tqNav{
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  z-index: 999;
+  padding: 12px 22px;
+  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.22));
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255,255,255,.06);
+}
+
+#tqNav .nav-inner{
+  max-width: 980px;
+  margin: 0 auto;
+  display:flex;
+  align-items:center;
+  gap: 12px;
+}
+
+#tqNav .brand{
+  font-weight: 700;
+  font-size: 1.05rem;
+  letter-spacing: .22px;
+  opacity: .92;
+}
+
+#tqNav .nav-links{
+  display:flex;
+  gap:10px;
+  margin-left: 14px;
+  flex-wrap: wrap;
+}
+
+#tqNav .nav-links a{
+  text-decoration:none;
+  color: var(--fg);
+  padding: 8px 12px;
+  border: 1px solid rgba(255,255,255,.12);
+  border-radius: 999px;
+  font-size: .9rem;
+  opacity: .78;
+  transition: .15s ease;
+  white-space: nowrap;
+  background: rgba(255,255,255,.02);
+}
+
+#tqNav .nav-links a:hover{
+  opacity: 1;
+  background: rgba(255,255,255,.06);
+  border-color: rgba(255,255,255,.18);
+}
+
+#tqNav .spacer{ flex:1; }
+
+/* Hamburger button */
+#tqNav .menu-btn{
+  width: 34px;
+  height: 34px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  border: 1px solid rgba(255,255,255,.14);
+  border-radius: 12px;
+  cursor: pointer;
+  background: rgba(255,255,255,.03);
+  transition: .15s ease;
+}
+#tqNav .menu-btn:hover{
+  background: rgba(255,255,255,.06);
+  border-color: rgba(255,255,255,.20);
+}
+
+#tqNav .menu-btn span{
+  display:block;
+  width:16px;
+  height:2px;
+  background: var(--fg);
+  position:relative;
+  opacity:.9;
+}
+
+#tqNav .menu-btn span::before,
+#tqNav .menu-btn span::after{
+  content:"";
+  position:absolute;
+  left:0;
+  width:16px;
+  height:2px;
+  background: var(--fg);
+  opacity:.9;
+}
+
+#tqNav .menu-btn span::before{ top:-6px; }
+#tqNav .menu-btn span::after{ top: 6px; }
+
+#tqNav .menu{
+  position:absolute;
+  top: 60px;
+  right: 24px;
+  min-width: 220px;
+  padding: 10px;
+  border-radius: var(--rLg);
+  background: var(--glass);
+  backdrop-filter: blur(14px);
+  border: 1px solid rgba(255,255,255,.10);
+  box-shadow: 0 0 28px rgba(0,0,0,.6);
+  display:none;
+}
+
+#tqNav .menu.open{ display:block; }
+
+#tqNav .menu a{
+  display:block;
+  padding: 10px 10px;
+  border-radius: 10px;
+  text-decoration:none;
+  color: var(--fg);
+  opacity: .88;
+}
+
+#tqNav .menu a:hover{
+  background: rgba(255,255,255,.06);
+  opacity: 1;
+}
+
+#tqNav .menu .sep{
+  height:1px;
+  background: rgba(255,255,255,.10);
+  margin: 8px 2px;
+}
+
+/* Make app sit above canvas and below fixed nav */
+#tqApp{
+  position:relative;
+  z-index:1;
+  padding-top: 84px;
+}
+
+/* Hero / header panel (glass) */
+.tq-hero{
+  margin: 10px 0 14px 0;
+  padding: 14px 18px;
+  background: var(--glass);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255,255,255,.06);
+  border-radius: var(--rMd);
+  box-shadow: 0 12px 34px rgba(0,0,0,.45);
+}
+
+.tq-hero .brand{
+  font-weight:700;
+  letter-spacing:.22px;
+  font-size:1.08rem;
+  opacity:.92;
+}
+
+.tq-hero .desc{
+  margin-top:8px;
+  color: var(--muted);
+  font-size: .98rem;
+  line-height: 1.45;
+}
+
+/* Cards / panels */
+.gradio-container .gr-panel,
+.gradio-container .block,
+.gradio-container .wrap{
+  border:1px solid var(--stroke) !important;
+  background: var(--card) !important;
+  backdrop-filter: blur(10px) !important;
+  border-radius: var(--rMd) !important;
+}
+
+/* Hover effect */
+.gradio-container .gr-panel:hover{
+  background: var(--card2) !important;
+  border-color: rgba(255,255,255,.14) !important;
+}
+
+/* Tabs (pill vibe) */
+.gradio-container .gr-tab-nav{
+  background: transparent !important;
+  border: none !important;
+  gap: 10px !important;
+}
+
+.gradio-container .gr-tab-nav button{
+  border:1px solid rgba(255,255,255,.12) !important;
+  border-radius:999px !important;
+  padding:8px 12px !important;
+  color: var(--fg) !important;
+  opacity:.78 !important;
+  background: rgba(255,255,255,.02) !important;
+  transition:.18s ease !important;
+}
+
+.gradio-container .gr-tab-nav button:hover{
+  opacity:1 !important;
+  background: rgba(255,255,255,.06) !important;
+  border-color: rgba(255,255,255,.18) !important;
+}
+
+.gradio-container .gr-tab-nav button.selected{
+  opacity: 1 !important;
+  border-color: rgba(140,180,255,.55) !important;
+  box-shadow:
+    0 0 0 1px rgba(140,180,255,.18) inset,
+    0 0 20px var(--accentGlow) !important;
+}
+
+/* Inputs */
+.gradio-container input,
+.gradio-container textarea{
+  background: rgba(255,255,255,.03) !important;
+  border:1px solid rgba(255,255,255,.12) !important;
+  color: var(--fg) !important;
+  border-radius: var(--rMd) !important;
+}
+
+/* Buttons (base) */
+.gradio-container button,
+.gradio-container .gr-button{
+  color: var(--fg) !important;
+  border:1px solid rgba(255,255,255,.12) !important;
+  background: rgba(255,255,255,.04) !important;
+  border-radius:999px !important;
+  padding:10px 14px !important;
+  opacity:.86 !important;
+  transition:.15s ease !important;
+}
+
+/* Buttons: make them feel like buttons, not banners */
+.gradio-container .gr-button,
+.gradio-container button{
+  width:auto !important;
+  min-width: 160px;
+  max-width: 280px;
+  display:inline-flex !important;
+  align-items:center !important;
+  justify-content:center !important;
+  font-weight: 650;
+  letter-spacing: .2px;
+}
+
+.gradio-container button:hover,
+.gradio-container .gr-button:hover{
+  opacity:1 !important;
+  background: rgba(255,255,255,.08) !important;
+  border-color: rgba(140,180,255,.35) !important;
+  box-shadow: 0 0 18px var(--accentGlow);
+}
+
+/* Gallery base */
+.gradio-container .gallery{
+  border-radius: var(--rMd) !important;
+}
+
+/* ===== Gallery → horizontal carousel (needs elem_id in app.py) ===== */
+
+/* Grid row becomes horizontal strip */
+#down_gallery .grid,
+#strange_gallery .grid{
+  display:flex !important;
+  flex-wrap:nowrap !important;
+  gap: 14px !important;
+
+  overflow-x:auto !important;
+  overflow-y:hidden !important;
+
+  padding: 12px !important;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Each slide */
+#down_gallery .grid > figure,
+#strange_gallery .grid > figure{
+  flex: 0 0 auto !important;
+  width: 220px !important;
+  scroll-snap-align: start;
+
+  background: rgba(255,255,255,.03);
+  border: 1px solid rgba(255,255,255,.08);
+  border-radius: 14px;
+  padding: 8px;
+}
+
+/* Thumbnail size */
+#down_gallery img,
+#strange_gallery img{
+  width: 100% !important;
+  height: 130px !important;
+  object-fit: contain !important; /* use cover if you prefer */
+  border-radius: 10px !important;
+}
+
+/* Hide captions/filenames */
+#down_gallery figcaption,
+#strange_gallery figcaption,
+#down_gallery .caption,
+#strange_gallery .caption{
+  display:none !important;
+}
+
+/* Sleek scrollbar */
+#down_gallery .grid::-webkit-scrollbar,
+#strange_gallery .grid::-webkit-scrollbar{
+  height: 6px;
+}
+#down_gallery .grid::-webkit-scrollbar-thumb,
+#strange_gallery .grid::-webkit-scrollbar-thumb{
+  background: rgba(255,255,255,.14);
+  border-radius: 999px;
+}
+
+/* Range accent */
+input[type="range"]{ accent-color: var(--accent); }
+
+/* Optional: hide Gradio footer */
+footer{ display:none !important; }