Update app.py

app.py

@@ -1,361 +1,365 @@
-/* ===== 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; }
+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"
+
+STYLE_PATH = ROOT / "style.css"
+
+
+# ============================================================
+# CSS + JS (canvas + menu)
+# ============================================================
+
+CSS = STYLE_PATH.read_text(encoding="utf-8") if STYLE_PATH.exists() else ""
+
+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");
+      }
+    });
+  }
+
+  // --- Starfield canvas ---
+  const c = document.getElementById("quantumField");
+  if (!c) return;
+  const ctx = c.getContext("2d");
+  if (!ctx) return;
+
+  let w = 0, h = 0;
+  const stars = [];
+  const N = 170;
+
+  function resize() {
+    w = c.width = window.innerWidth;
+    h = c.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 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);
+
+    ctx.globalAlpha = 0.9;
+
+    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.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();
+  window.addEventListener("resize", () => { resize(); seed(); });
+  tick();
+}
+"""
+
+
+# ============================================================
+# 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))]
+
+    _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),
+        "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", css=CSS, js=JS) as demo:
+
+        # Inject DOM for canvas + nav
+        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>
+      <a href="#strange">STRANGE / AntiStrange</a>
+    </div>
+  </div>
+</nav>
+"""
+        )
+
+        # 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>
+""",
+                elem_id="top",
+            )
+
+            # ----------------------------
+            # 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",
+            )
+
+            run_down_btn = gr.Button("Run DOWN Model", elem_classes=["tq-primary"])
+            down_meta = gr.JSON(label="Run status")
+
+            # elem_id is REQUIRED for carousel CSS
+            down_gallery = gr.Gallery(
+                label="Generated plots",
+                columns=2,
+                height="auto",
+                elem_id="down_gallery",
+            )
+
+            run_down_btn.click(
+                fn=run_down_all,
+                inputs=[down_eps],
+                outputs=[down_meta, down_gallery],
+            )
+
+            gr.Markdown("---")
+
+            # ----------------------------
+            # 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.
+"""
+            )
+
+            run_strange_btn = gr.Button("Run STRANGE Model", elem_classes=["tq-primary"])
+            strange_meta = gr.JSON(label="Run status")
+
+            strange_gallery = gr.Gallery(
+                label="Generated plots",
+                columns=2,
+                height="auto",
+                elem_id="strange_gallery",
+            )
+
+            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,
+    )