Update app.py

app.py

@@ -42,6 +42,13 @@ def _plot_series(y, title, xlabel='step', ylabel='value'):
     return fig
 
 
+def _save_fig(fig, path: Path) -> str:
+    """Save a matplotlib figure as PNG and return the filepath (string)."""
+    path.parent.mkdir(parents=True, exist_ok=True)
+    fig.savefig(path, dpi=160, bbox_inches='tight')
+    return str(path)
+
+
 # =========================
 # DOWN / AntiDown
 # =========================
@@ -104,9 +111,14 @@ def run_down(episodes_per_phase: int, seed: int):
         'artifact_csv': str(out_csv),
     }
 
-    headers = ['agent', 'phase', 'mean_total_reward', 'std_total_reward', 'mean_valley_visits', 'n']
+    # Save plot(s) to PNG for the UI carousel
+    graphics_dir = out_dir / 'graphics'
+    mean_plot = _save_fig(fig, graphics_dir / 'down_mean_reward_by_phase.png')
+    carousel = [mean_plot]
+
+    headers = ['agent', 'phase', 'mean_reward', 'std_reward', 'n']
     rows = [[row.get(h) for h in headers] for row in table_lines]
-    return json.dumps(meta, indent=2), rows, fig, str(out_csv)
+    return json.dumps(meta, indent=2), rows, fig, str(out_csv), carousel
 
 
 def run_antidown(n_episodes: int, base_seed: int):
@@ -193,9 +205,14 @@ def run_antidown(n_episodes: int, base_seed: int):
         'artifact_csv': str(out_csv),
     }
 
-    headers = ['agent', 'phase', 'mean_reward', 'std_reward', 'n']
+    # Save plot(s) to PNG for the UI carousel
+    graphics_dir = out_dir / 'graphics'
+    mean_plot = _save_fig(fig, graphics_dir / 'antidown_mean_total_reward_by_phase.png')
+    carousel = [mean_plot]
+
+    headers = ['agent', 'phase', 'mean_total_reward', 'std_total_reward', 'mean_valley_visits', 'n']
     rows = [[row.get(h) for h in headers] for row in table_lines]
-    return json.dumps(meta, indent=2), rows, fig, str(out_csv)
+    return json.dumps(meta, indent=2), rows, fig, str(out_csv), carousel
 
 
 # =========================
@@ -243,7 +260,12 @@ def run_strange(n_episodes: int, max_steps: int, seed: int, mode: str):
         'artifact_csv': str(out_csv),
     }
 
-    return json.dumps(metrics, indent=2), fig, str(out_csv)
+    # Save plot(s) to PNG for the UI carousel
+    graphics_dir = out_dir / 'graphics'
+    plot_path = _save_fig(fig, graphics_dir / f"{mode.lower()}_return_per_episode.png")
+    carousel = [plot_path]
+
+    return json.dumps(metrics, indent=2), fig, str(out_csv), carousel
 
 
 # =========================
@@ -283,7 +305,14 @@ def run_charm(n_episodes: int, seed: int):
         'artifact_csv': str(out_csv),
     }
 
-    return json.dumps(metrics, indent=2), fig_r, fig_l, fig_rho, str(out_csv)
+    # Save plots to PNG for the UI carousel
+    graphics_dir = out_dir / 'graphics'
+    p_r   = _save_fig(fig_r, graphics_dir / 'charm_reward.png')
+    p_l   = _save_fig(fig_l, graphics_dir / 'charm_lambda.png')
+    p_rho = _save_fig(fig_rho, graphics_dir / 'charm_rho_mean.png')
+    carousel = [p_r, p_l, p_rho]
+
+    return json.dumps(metrics, indent=2), fig_r, fig_l, fig_rho, str(out_csv), carousel
 
 
 # =========================
@@ -291,87 +320,210 @@ def run_charm(n_episodes: int, seed: int):
 # =========================
 
 def build_ui():
-    with gr.Blocks(title='TwoQuarks — QuarksLab (Interactive)') as demo:
-        gr.Markdown(
-            """# TwoQuarks • QuarksLab (Interactive)
-
-Real runs, real knobs: seed/episodes/steps. Short-bounded experiments (public CPU).
+    css_path = ROOT / "style.css"
+    css = css_path.read_text(encoding="utf-8") if css_path.exists() else ""
+
+    NAV_HTML = """
+<nav id="tqNav">
+  <div class="nav-inner">
+    <div class="brand">TwoQuarks</div>
+    <div class="nav-links">
+      <a href="#down" onclick="return false;">DOWN</a>
+      <a href="#strange" onclick="return false;">STRANGE</a>
+      <a href="#top" onclick="return false;">TOP</a>
+      <a href="#charm" onclick="return false;">CHARM</a>
+      <a href="#up" onclick="return false;">UP</a>
+      <a href="#bottom" onclick="return false;">BOTTOM</a>
+    </div>
+    <div class="spacer"></div>
+    <div class="menu-btn" id="menuBtn" title="Menu"><span></span></div>
+    <div class="menu" id="siteMenu">
+      <a href="https://twoquarks.com/#about" target="_blank" rel="noopener">ABOUT</a>
+      <a href="https://twoquarks.com/quarkslab.html" target="_blank" rel="noopener">QuarksLab</a>
+      <div class="sep"></div>
+      <a href="https://twoquarks.com/quarks/bottom/resume.pdf" target="_blank" rel="noopener">Resume</a>
+      <a href="https://twoquarks.com/summary.pdf" target="_blank" rel="noopener">Summary</a>
+    </div>
+  </div>
+</nav>
 """
-        )
-
-        with gr.Tab('DOWN / AntiDown'):
-            gr.Markdown('Tabular experiments (fast).')
-            with gr.Row():
-                down_eps = gr.Slider(50, 800, value=200, step=50, label='DOWN: episodes_per_phase')
-                down_seed = gr.Number(value=2025, precision=0, label='DOWN: seed')
-                run_down_btn = gr.Button('Run DOWN')
-            down_meta = gr.Code(label='DOWN: run meta (JSON)', language='json')
-            down_table = gr.Dataframe(
-                headers=['agent', 'phase', 'mean_reward', 'std_reward', 'n'],
-                label='DOWN: summary (mean/std by phase+agent)',
-                interactive=False,
-            )
-            down_plot = gr.Plot(label='DOWN: mean reward by phase')
-            down_file = gr.File(label='DOWN: results CSV')
 
-            run_down_btn.click(
-                fn=run_down,
-                inputs=[down_eps, down_seed],
-                outputs=[down_meta, down_table, down_plot, down_file],
-            )
-
-            gr.Markdown('---')
-            with gr.Row():
-                ad_eps = gr.Slider(20, 400, value=120, step=20, label='AntiDown: episodes_per_phase')
-                ad_seed = gr.Number(value=1234, precision=0, label='AntiDown: base seed')
-                run_ad_btn = gr.Button('Run AntiDown')
-            ad_meta = gr.Code(label='AntiDown: run meta (JSON)', language='json')
-            ad_table = gr.Dataframe(
-                headers=['agent', 'phase', 'mean_total_reward', 'std_total_reward', 'mean_valley_visits', 'n'],
-                label='AntiDown: summary',
-                interactive=False,
-            )
-            ad_plot = gr.Plot(label='AntiDown: mean total reward by phase')
-            ad_file = gr.File(label='AntiDown: results CSV')
+    head = """
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
+
+<canvas id="quantumField"></canvas>
+
+<script>
+(function(){
+  // Hamburger menu toggle
+  window.addEventListener("load", () => {
+    const menuBtn = document.getElementById('menuBtn');
+    const siteMenu = document.getElementById('siteMenu');
+    if(menuBtn && siteMenu){
+      menuBtn.addEventListener('click', (e)=>{ e.stopPropagation(); siteMenu.classList.toggle('open'); });
+      document.addEventListener('click', ()=> siteMenu.classList.remove('open'));
+      siteMenu.addEventListener('click', (e)=> e.stopPropagation());
+    }
+  });
+
+  // Starfield (ported from your site canvas pattern)
+  const canvas = document.getElementById('quantumField');
+  if(!canvas) return;
+  const ctx = canvas.getContext('2d');
+
+  function resize(){
+    canvas.width = innerWidth;
+    canvas.height = innerHeight;
+  }
+  resize();
+  addEventListener('resize', resize);
+
+  let particles = [];
+  const count = 680;
+
+  for(let i=0;i<count;i++){
+    particles.push({
+      x:(Math.random()-0.5)*canvas.width,
+      y:(Math.random()-0.5)*canvas.height,
+      z:Math.random()*canvas.width,
+    });
+  }
+
+  function render(){
+    ctx.clearRect(0,0,canvas.width,canvas.height);
+    for(const p of particles){
+      p.z -= 2.2;
+      if(p.z < 1){
+        p.x=(Math.random()-0.7)*canvas.width;
+        p.y=(Math.random()-0.7)*canvas.height;
+        p.z=canvas.width;
+      }
+      const k=128/p.z;
+      const px=p.x*k+canvas.width/2;
+      const py=p.y*k+canvas.height/2;
+      const size=(1-p.z/canvas.width)*1.29;
+      ctx.beginPath();
+      ctx.fillStyle="rgba(140,180,255,0.85)";
+      ctx.arc(px,py,size,0,Math.PI*2);
+      ctx.fill();
+    }
+    requestAnimationFrame(render);
+  }
+  render();
+})();
+</script>
+"""
 
-            run_ad_btn.click(
-                fn=run_antidown,
-                inputs=[ad_eps, ad_seed],
-                outputs=[ad_meta, ad_table, ad_plot, ad_file],
+    with gr.Blocks(title='TwoQuarks - QuarksLab (Interactive)', css=css, head=head) as demo:
+        gr.HTML(NAV_HTML)
+
+        with gr.Column(elem_id='tqApp'):
+            gr.HTML(
+                """
+                <div class="tq-hero">
+                  <div class="brand">TwoQuarks - QuarksLab (Interactive)</div>
+                  <div class="desc">Real runs, real knobs: seed/episodes/steps. Short-bounded experiments (public CPU).</div>
+                </div>
+                """
             )
 
-        with gr.Tab('STRANGE / AntiStrange'):
-            gr.Markdown('HypothesisLab: swarm dynamics with hidden regime shifts.')
-            mode = gr.Radio(['Strange', 'AntiStrange'], value='Strange', label='Mode')
-            with gr.Row():
-                seps = gr.Slider(50, 500, value=200, step=50, label='Episodes')
-                ssteps = gr.Slider(10, 120, value=50, step=5, label='Max steps per episode')
-                sseed = gr.Number(value=0, precision=0, label='Seed')
-            run_s_btn = gr.Button('Run')
-            s_meta = gr.Code(label='Run meta (JSON)', language='json')
-            s_plot = gr.Plot(label='Return per episode')
-            s_file = gr.File(label='Results CSV')
-            run_s_btn.click(fn=run_strange, inputs=[seps, ssteps, sseed, mode], outputs=[s_meta, s_plot, s_file])
-
-        with gr.Tab('CHARM'):
-            gr.Markdown('Enchanted Valley: non-stationary graph + CharmField meta-control.')
-            with gr.Row():
-                ceps = gr.Slider(50, 600, value=300, step=50, label='Episodes')
-                cseed = gr.Number(value=0, precision=0, label='Seed')
-                run_c_btn = gr.Button('Run CHARM')
-            c_meta = gr.Code(label='Run meta (JSON)', language='json')
-            c_plot_r = gr.Plot(label='Reward')
-            c_plot_l = gr.Plot(label='Lambda')
-            c_plot_rho = gr.Plot(label='Rho_mean')
-            c_file = gr.File(label='Timeseries CSV')
-            run_c_btn.click(fn=run_charm, inputs=[ceps, cseed], outputs=[c_meta, c_plot_r, c_plot_l, c_plot_rho, c_file])
-
-        gr.Markdown(
-            """### Notes
+            with gr.Tab('DOWN / AntiDown'):
+                gr.Markdown('Tabular experiments (fast).')
+
+                with gr.Row():
+                    down_eps = gr.Slider(50, 800, value=200, step=50, label='DOWN: episodes_per_phase')
+                    down_seed = gr.Number(value=2025, precision=0, label='DOWN: seed')
+                    run_down_btn = gr.Button('Run DOWN')
+
+                down_meta = gr.Code(label='DOWN: run meta (JSON)', language='json')
+                down_table = gr.Dataframe(
+                    headers=['agent', 'phase', 'mean_reward', 'std_reward', 'n'],
+                    label='DOWN: summary (mean/std by phase+agent)',
+                    interactive=False,
+                )
+                down_plot = gr.Plot(label='DOWN: mean reward by phase')
+                down_carousel = gr.Gallery(label='DOWN: results (carousel)', columns=1, height=520)
+                down_file = gr.File(label='DOWN: results CSV')
+
+                run_down_btn.click(
+                    fn=run_down,
+                    inputs=[down_eps, down_seed],
+                    outputs=[down_meta, down_table, down_plot, down_file, down_carousel],
+                )
+
+                gr.Markdown('---')
+
+                with gr.Row():
+                    ad_eps = gr.Slider(20, 400, value=120, step=20, label='AntiDown: episodes_per_phase')
+                    ad_seed = gr.Number(value=1234, precision=0, label='AntiDown: base seed')
+                    run_ad_btn = gr.Button('Run AntiDown')
+
+                ad_meta = gr.Code(label='AntiDown: run meta (JSON)', language='json')
+                ad_table = gr.Dataframe(
+                    headers=['agent', 'phase', 'mean_total_reward', 'std_total_reward', 'mean_valley_visits', 'n'],
+                    label='AntiDown: summary',
+                    interactive=False,
+                )
+                ad_plot = gr.Plot(label='AntiDown: mean total reward by phase')
+                ad_carousel = gr.Gallery(label='AntiDown: results (carousel)', columns=1, height=520)
+                ad_file = gr.File(label='AntiDown: results CSV')
+
+                run_ad_btn.click(
+                    fn=run_antidown,
+                    inputs=[ad_eps, ad_seed],
+                    outputs=[ad_meta, ad_table, ad_plot, ad_file, ad_carousel],
+                )
+
+            with gr.Tab('STRANGE / AntiStrange'):
+                gr.Markdown('HypothesisLab: swarm dynamics with hidden regime shifts.')
+                mode = gr.Radio(['Strange', 'AntiStrange'], value='Strange', label='Mode')
+
+                with gr.Row():
+                    seps = gr.Slider(50, 500, value=200, step=50, label='Episodes')
+                    ssteps = gr.Slider(10, 120, value=50, step=5, label='Max steps per episode')
+                    sseed = gr.Number(value=0, precision=0, label='Seed')
+
+                run_s_btn = gr.Button('Run')
+                s_meta = gr.Code(label='Run meta (JSON)', language='json')
+                s_plot = gr.Plot(label='Return per episode')
+                s_carousel = gr.Gallery(label='Results (carousel)', columns=1, height=520)
+                s_file = gr.File(label='Results CSV')
+
+                run_s_btn.click(
+                    fn=run_strange,
+                    inputs=[seps, ssteps, sseed, mode],
+                    outputs=[s_meta, s_plot, s_file, s_carousel],
+                )
+
+            with gr.Tab('CHARM'):
+                gr.Markdown('Enchanted Valley: non-stationary graph + CharmField meta-control.')
+
+                with gr.Row():
+                    ceps = gr.Slider(50, 600, value=300, step=50, label='Episodes')
+                    cseed = gr.Number(value=0, precision=0, label='Seed')
+                    run_c_btn = gr.Button('Run CHARM')
+
+                c_meta = gr.Code(label='Run meta (JSON)', language='json')
+                c_plot_r = gr.Plot(label='Reward')
+                c_plot_l = gr.Plot(label='Lambda')
+                c_plot_rho = gr.Plot(label='Rho_mean')
+                c_carousel = gr.Gallery(label='CHARM: results (carousel)', columns=1, height=520)
+                c_file = gr.File(label='Timeseries CSV')
+
+                run_c_btn.click(
+                    fn=run_charm,
+                    inputs=[ceps, cseed],
+                    outputs=[c_meta, c_plot_r, c_plot_l, c_plot_rho, c_file, c_carousel],
+                )
+
+            gr.Markdown(
+                """### Notes
 - This Space runs bounded experiments on shared CPU.
 - For heavy runs, keep episodes modest and use the CSV artifact to reproduce locally.
 """
-        )
+            )
 
     return demo
 
@@ -384,3 +536,4 @@ if __name__ == '__main__':
         server_port=int(os.getenv('PORT', '7860')),
         show_api=False,
     )
+