Spaces:

Vikaspandey582003
/

echo-ultimate

Sleeping

App Files Files Community

Vikaspandey582003 commited on 15 days ago

Commit

023ed75

verified ·

1 Parent(s): e0878ae

Upload folder using huggingface_hub

Browse files

Files changed (2) hide show

app.py +9 -3
ui/app.py +946 -269

app.py CHANGED Viewed

@@ -1,4 +1,4 @@
-"""HuggingFace Space entry point — delegates to ui/app.py."""
 import sys, os
 sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
@@ -6,10 +6,16 @@ import gradio as gr
 from ui.app import build_app
 demo = build_app()
 demo.queue()
 demo.launch(
     server_name=os.getenv("GRADIO_SERVER_NAME", "0.0.0.0"),
     server_port=int(os.getenv("GRADIO_SERVER_PORT", "7860")),
-    theme=gr.themes.Soft(),
-    css=".gradio-container { background: #0d0d18 !important; }",
 )

+"""HuggingFace Space entry point."""
 import sys, os
 sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
 from ui.app import build_app
 demo = build_app()
+from ui.app import _CSS
 demo.queue()
 demo.launch(
     server_name=os.getenv("GRADIO_SERVER_NAME", "0.0.0.0"),
     server_port=int(os.getenv("GRADIO_SERVER_PORT", "7860")),
+    css=_CSS,
+    theme=gr.themes.Base(
+        primary_hue=gr.themes.colors.blue,
+        neutral_hue=gr.themes.colors.slate,
+        font=[gr.themes.GoogleFont("Inter"), "sans-serif"],
+    ),
 )

ui/app.py CHANGED Viewed

@@ -1,12 +1,12 @@
 """
-ECHO ULTIMATE — Gradio 6-Tab Demo.
-Tab 1: 🎯 Live Challenge      — user answers questions with confidence slider
-Tab 2: 🤖 ECHO vs Overconfident AI — side-by-side 10-question comparison
-Tab 3: 🧬 Epistemic Fingerprint   — domain radar chart
-Tab 4: 📊 Training Evidence       — all 6 pre-generated plots
-Tab 5: 🏆 Official Evaluation     — run all 3 OpenEnv tasks
-Tab 6: ⚡ Live Training           — watch ECE drop in real time
 """
 import json
@@ -15,7 +15,6 @@ import tempfile
 import threading
 import time
 from pathlib import Path
-from typing import Any
 import matplotlib
 matplotlib.use("Agg")
@@ -26,52 +25,483 @@ from config import cfg
 logger = logging.getLogger(__name__)
-# ── Tab 6: Live Training state ────────────────────────────────────────────────
 _training_state: dict = {"running": False, "steps": [], "ece_values": [], "stop": False}
 def _make_live_plot(steps: list, ece_values: list):
-    fig, ax = plt.subplots(figsize=(8, 4), facecolor="#1a1a2e")
-    ax.set_facecolor("#16213e")
     if steps:
-        ax.plot(steps, ece_values, color="#00ff88", linewidth=2,
-                marker="o", markersize=4, zorder=3)
-        ax.fill_between(steps, ece_values,
-                        alpha=0.15, color="#00ff88")
-    ax.axhline(y=0.15, color="#ff4444", linestyle="--", alpha=0.7,
-               label="Task 1 threshold (ECE=0.15)")
-    ax.axhline(y=0.20, color="#ffaa00", linestyle="--", alpha=0.7,
-               label="Task 2 threshold (ECE=0.20)")
-    ax.set_xlabel("Training Step", color="white", fontsize=11)
-    ax.set_ylabel("ECE  (↓ lower = better calibrated)", color="white", fontsize=11)
-    ax.set_title("ECHO Calibration During GRPO Training",
-                 color="white", fontsize=14, fontweight="bold")
-    ax.tick_params(colors="white")
     ax.set_ylim(0, 0.50)
-    ax.grid(True, linestyle="--", alpha=0.2, color="#445566")
     for spine in ax.spines.values():
-        spine.set_color("#334455")
-    ax.legend(facecolor="#16213e", labelcolor="white",
-              edgecolor="#334455", fontsize=9)
     plt.tight_layout()
     tmp = tempfile.NamedTemporaryFile(suffix=".png", delete=False)
-    plt.savefig(tmp.name, dpi=100, bbox_inches="tight", facecolor="#1a1a2e")
     plt.close(fig)
     return tmp.name
 def _run_live_training_thread():
     import random
-    _training_state["running"]    = True
-    _training_state["steps"]      = []
-    _training_state["ece_values"] = []
-    _training_state["stop"]       = False
     ece = 0.42
     for step in range(0, 101, 10):
         if _training_state["stop"]:
             break
-        ece = max(0.07, ece - random.uniform(0.02, 0.05) + random.uniform(-0.01, 0.01))
         _training_state["steps"].append(step)
         _training_state["ece_values"].append(round(ece, 4))
         time.sleep(1.5)
@@ -79,27 +509,25 @@ def _run_live_training_thread():
 def start_live_training():
-    """Generator: starts training thread, polls state, yields UI updates."""
     t = threading.Thread(target=_run_live_training_thread, daemon=True)
     t.start()
-    for _ in range(40):
         time.sleep(1.5)
-        steps  = _training_state["steps"][:]
-        ece_v  = _training_state["ece_values"][:]
-        n      = len(steps)
-        prog   = round((n / 11) * 100)
         if steps:
-            status = (
-                f"Training…  Step {steps[-1]}/100  |  "
-                f"Current ECE: {ece_v[-1]:.4f}"
-            )
         else:
-            status = "Initializing…"
         if not _training_state["running"] and n > 0:
-            status = (
-                f"✅ Complete!  Final ECE: {ece_v[-1]:.4f}  "
-                f"(started at {ece_v[0]:.4f}, improved {ece_v[0]-ece_v[-1]:.4f})"
-            )
             yield status, _make_live_plot(steps, ece_v), prog
             return
         yield status, _make_live_plot(steps, ece_v), prog
@@ -107,15 +535,18 @@ def start_live_training():
 def stop_live_training():
     _training_state["stop"] = True
-    return "⏹ Stopped."
-# ── Shared state ──────────────────────────────────────────────────────────────
 _task_bank = None
 _env       = None
 _live_hist = None
 def _init():
     global _task_bank, _env, _live_hist
     if _env is not None:
@@ -131,14 +562,19 @@ def _init():
 _current_task: dict = {}
-# ── Tab 1 helpers ─────────────────────────────────────────────────────────────
 def get_question(domain: str, difficulty: str) -> tuple:
     global _current_task
     _init()
     task = _task_bank.get_task(domain.lower(), difficulty.lower())
     _current_task = task
-    q = f"**Domain:** {domain}  |  **Difficulty:** {difficulty}\n\n{task['question']}"
     return q, ""
@@ -153,128 +589,224 @@ def submit_answer(confidence: int, user_answer: str) -> tuple:
                       task["difficulty"], rb.total)
     snap = _live_hist.get_training_snapshot()
-    icon = "✅ Correct!" if rb.was_correct else "❌ Incorrect"
     result_md = (
-        f"### {icon}\n\n"
-        f"**Correct answer:** `{task['answer']}`\n\n"
-        f"---\n"
-        f"**Reward breakdown:**\n"
-        f"- Accuracy: `{rb.accuracy_score:.2f}` × 0.40\n"
-        f"- Calibration (Brier): `{rb.brier_reward_val:.2f}` × 0.40\n"
-        f"- Overconfidence penalty: `{rb.overconfidence_penalty_val:.2f}`\n"
-        f"- Underconfidence penalty: `{rb.underconfidence_penalty_val:.2f}`\n"
-        f"- **Total reward: `{rb.total:.3f}`**\n"
     )
     stats_md = (
-        f"**Your running stats** ({snap.get('episodes', len(_live_hist))} questions):\n"
-        f"- Accuracy: `{snap['accuracy']:.1%}`\n"
-        f"- ECE: `{snap['ece']:.3f}` (lower = better calibrated)\n"
-        f"- Mean confidence: `{snap['mean_confidence']:.0f}%`\n"
-        f"- Overconfidence rate: `{snap['overconfidence_rate']:.1%}`\n"
     )
-    if rb.overconfidence_penalty_val < 0:
-        tip = "⚠️ **Overconfident!** You were 80%+ sure but wrong — ECHO trains against this."
-    elif rb.underconfidence_penalty_val < 0:
-        tip = "🤔 **Underconfident!** You got it right but said low confidence. Trust yourself more!"
-    elif rb.was_correct and confidence >= 60:
-        tip = "🎯 **Well calibrated!** Confident and correct."
     elif not rb.was_correct and confidence < 40:
-        tip = "🎯 **Good calibration!** You sensed your uncertainty."
     else:
         tip = ""
     return result_md, stats_md, tip
-# ── Tab 2 helpers ─────────────────────────────────────────────────────────────
 def run_comparison(scenario: str) -> tuple:
-    import matplotlib
-    matplotlib.use("Agg")
-    import matplotlib.pyplot as plt
     _init()
     from core.baseline import AlwaysHighAgent, HeuristicAgent
     from env.reward import compute_reward, RewardHistory
     from env.parser import format_prompt, parse_response
     from core.metrics import compute_report
-    domain_map = {"Math":    "math",  "Logic":   "logic",
-                  "Factual": "factual", "Science": "science",
-                  "Medical": "medical", "Coding":  "coding",
-                  "Creative":"creative", "Mixed":   None}
     domain = domain_map.get(scenario)
     n = 10
-    baseline = AlwaysHighAgent()
     echo_agent = HeuristicAgent()
     echo_h, base_h = RewardHistory(), RewardHistory()
-    rows = []
     for i in range(n):
-        d = domain or cfg.DOMAINS[i % len(cfg.DOMAINS)]
         task = _task_bank.get_task(d, "medium")
         prompt = format_prompt(task["question"], d, "medium")
         ea = echo_agent(prompt); ep = parse_response(ea)
         ba = baseline(prompt);   bp = parse_response(ba)
-        er = compute_reward(ep.confidence, ep.answer, task["answer"], task.get("answer_aliases",[]), d)
-        br = compute_reward(bp.confidence, bp.answer, task["answer"], task.get("answer_aliases",[]), d)
         echo_h.append(ep.confidence, er.was_correct, d, "medium", er.total)
         base_h.append(bp.confidence, br.was_correct, d, "medium", br.total)
         ei = "✅" if er.was_correct else "❌"
         bi = "✅" if br.was_correct else "❌"
-        rows.append(f"**Q{i+1} ({d}):** {task['question'][:60]}…\n"
-                    f"  🤖 ECHO: conf={ep.confidence}% {ei}  |  "
-                    f"  ⚡ Overconfident: conf={bp.confidence}% {bi}\n")
-    em = echo_h.get_training_snapshot(); bm = base_h.get_training_snapshot()
-    summary = (
-        "\n---\n**Summary:**\n\n"
-        f"|  | ECHO Agent | Overconfident AI |\n|--|--|--|\n"
-        f"| ECE | **{em['ece']:.3f}** | {bm['ece']:.3f} |\n"
-        f"| Accuracy | {em['accuracy']:.1%} | {bm['accuracy']:.1%} |\n"
-        f"| Mean Conf | {em['mean_confidence']:.0f}% | {bm['mean_confidence']:.0f}% |\n"
-        f"| Overconf Rate | **{em['overconfidence_rate']:.1%}** | {bm['overconfidence_rate']:.1%} |\n"
-    )
-    verdict = (
-        f"\n🏆 **ECHO is {abs(em['ece'] - bm['ece']):.0%} better calibrated** "
-        f"than the overconfident baseline."
     )
     # Mini reliability diagram
-    erep = echo_h.get_calibration_report(); brep = base_h.get_calibration_report()
-    fig, ax = plt.subplots(figsize=(6, 4), facecolor=cfg.PLOT_BG_COLOR)
-    ax.set_facecolor(cfg.PLOT_BG_COLOR)
-    ax.plot([0,100],[0,100],"--",color="white",alpha=0.4,label="Perfect",linewidth=1)
-    for rep, color, lbl in [(erep,cfg.PLOT_GREEN,"ECHO"),(brep,cfg.PLOT_RED,"Baseline")]:
         bd = rep.bin_data
-        xs = sorted(bd.keys()); ys = [bd[b]["accuracy"]*100 for b in xs]
-        if xs: ax.plot(xs,ys,"-o",color=color,linewidth=2,
-                       label=f"{lbl} (ECE={rep.ece:.2f})")
-    ax.set_xlabel("Confidence (%)",color=cfg.PLOT_TEXT_COLOR)
-    ax.set_ylabel("Accuracy (%)",color=cfg.PLOT_TEXT_COLOR)
-    ax.tick_params(colors=cfg.PLOT_TEXT_COLOR)
-    ax.set_title("Live Reliability",color=cfg.PLOT_TEXT_COLOR,fontweight="bold")
-    ax.legend(fontsize=8,facecolor="#111122",labelcolor=cfg.PLOT_TEXT_COLOR,
-              edgecolor="#334455")
-    ax.grid(True,linestyle="--",alpha=0.2)
     tmp = tempfile.NamedTemporaryFile(suffix=".png", delete=False)
-    plt.savefig(tmp.name, dpi=100, bbox_inches="tight", facecolor=cfg.PLOT_BG_COLOR)
     plt.close(fig)
-    return "\n".join(rows) + summary + verdict, tmp.name
-# ── Tab 3 helpers ─────────────────────────────────────────────────────────────
 def generate_fingerprint(model_label: str) -> tuple:
     from core.epistemic_fingerprint import _make_synthetic_fingerprint, plot_radar
     _init()
     offset_map = {"Untrained": 0.30, "ECHO Trained": 0.0, "Heuristic": 0.15}
-    fp = _make_synthetic_fingerprint(offset_map.get(model_label, 0.15), model_label)
     baseline_fp = _make_synthetic_fingerprint(0.30, "Untrained")
     tmp = tempfile.NamedTemporaryFile(suffix=".png", delete=False)
@@ -282,209 +814,354 @@ def generate_fingerprint(model_label: str) -> tuple:
     strongest = fp.strongest_domain.capitalize()
     weakest   = fp.weakest_domain.capitalize()
-    rows = "| Domain | Calibration Score | ECE |\n|--|--|--|\n"
     for d in cfg.DOMAINS:
         score = fp.domain_scores.get(d, 0.5)
         ece_v = 1 - score
-        icon  = "🟢" if score > 0.75 else ("🟡" if score > 0.55 else "🔴")
-        rows += f"| {d.capitalize()} | {icon} {score:.2f} | {ece_v:.2f} |\n"
-    insight = (
-        f"**{model_label}** is most confident in **{strongest}** "
-        f"and most uncertain in **{weakest}**.\n\n"
-        f"Overall ECE: `{fp.overall_ece:.3f}`"
     )
-    return tmp.name, rows, insight
-# ── Tab 5 helpers ─────────────────────────────────────────────────────────────
 def run_evaluation() -> tuple:
     _init()
-    from core.tasks import TASKS, TaskRunner
     from core.baseline import HeuristicAgent
     runner = TaskRunner()
     agent  = HeuristicAgent()
     result = runner.run_all(agent, _task_bank)
-    table  = "| Task | Name | Score | Threshold | Status |\n|--|--|--|--|--|\n"
     for r in result.tasks:
-        from core.tasks import TASKS_BY_ID
         t  = TASKS_BY_ID[r.task_id]
-        st = "✅ PASS" if r.passed else "❌ FAIL"
-        table += f"| {r.task_id} | {t.name} | {r.score:.3f} | {t.pass_threshold} | {st} |\n"
-    verdict = "### 🏆 ALL TASKS PASSED" if result.overall_pass else "### ❌ Some tasks failed"
     json_str = json.dumps(result.to_dict(), indent=2, default=str)
-    return table, verdict, json_str
-# ── Build app ─────────────────────────────────────────────────────────────────
 def build_app():
     import gradio as gr
     plots = {k: f"{cfg.PLOTS_DIR}/{v}" for k, v in {
-        "reliability": "reliability_diagram.png",
-        "training":    "training_curves.png",
-        "fingerprint": "epistemic_fingerprint.png",
-        "heatmap":     "calibration_heatmap.png",
-        "distribution":"confidence_distribution.png",
-        "domain":      "domain_comparison.png",
     }.items()}
     def _img(key): return plots[key] if Path(plots[key]).exists() else None
-    with gr.Blocks(title="🪞 ECHO ULTIMATE") as demo:
-        gr.Markdown(
-            "# 🪞 ECHO ULTIMATE — Training LLMs to Know What They Don't Know\n"
-            "> *The most dangerous AI isn't one that's wrong — it's one that's wrong **and certain**.*\n\n"
-            "7 domains · 5 calibration metrics · 3-phase curriculum · Self-consistency checking"
-        )
-        # ── Tab 1 ──────────────────────────────────────────────────────────
-        with gr.Tab("🎯 Live Challenge"):
-            gr.Markdown("### Challenge yourself! See if you're as well-calibrated as ECHO.")
             with gr.Row():
-                dom_dd  = gr.Dropdown(["Math","Logic","Factual","Science","Medical","Coding","Creative"],
-                                      value="Math", label="Domain")
                 diff_dd = gr.Dropdown(["Easy","Medium","Hard"], value="Easy", label="Difficulty")
-                get_btn = gr.Button("🎲 Get Question", variant="primary")
-            question_box = gr.Markdown("*Click 'Get Question' to start!*")
             with gr.Row():
-                conf_sl  = gr.Slider(0, 100, value=50, step=5,
-                                     label="Your Confidence (0 = no idea, 100 = certain)")
-                ans_box  = gr.Textbox(label="Your Answer", placeholder="Type answer here…")
-            sub_btn  = gr.Button("✅ Submit", variant="primary")
             with gr.Row():
-                result_md = gr.Markdown()
-                stats_md  = gr.Markdown()
             tip_md = gr.Markdown()
             get_btn.click(get_question, [dom_dd, diff_dd], [question_box, ans_box])
-            sub_btn.click(submit_answer, [conf_sl, ans_box], [result_md, stats_md, tip_md])
-        # ── Tab 2 ──────────────────────────────────────────────────────────
-        with gr.Tab("🤖 ECHO vs Overconfident AI"):
-            gr.Markdown(
-                "### Side-by-side: ECHO (calibrated) vs AlwaysHigh (90% on everything)\n"
-                "Watch how the overconfident AI gets penalized when it's wrong."
-            )
-            scenario_dd = gr.Dropdown(
-                ["Mixed","Math","Logic","Factual","Science","Medical","Coding","Creative"],
-                value="Mixed", label="Test Scenario",
-            )
-            run_btn  = gr.Button("🏃 Run 10 Questions", variant="primary")
-            cmp_md   = gr.Markdown()
-            mini_img = gr.Image(label="Live Reliability Diagram", type="filepath")
-            run_btn.click(run_comparison, [scenario_dd], [cmp_md, mini_img])
-        # ── Tab 3 ──────────────────────────────────────────────────────────
-        with gr.Tab("🧬 Epistemic Fingerprint"):
-            gr.Markdown(
-                "### Domain-Level Calibration Radar Chart\n"
-                "Each axis = one domain. Larger green area = better calibration everywhere."
-            )
-            model_dd  = gr.Dropdown(["ECHO Trained","Untrained","Heuristic"],
-                                    value="ECHO Trained", label="Select Model")
-            fp_btn    = gr.Button("🔬 Generate Fingerprint", variant="primary")
-            fp_img    = gr.Image(label="Epistemic Fingerprint", type="filepath",
-                                 value=_img("fingerprint"))
-            fp_table  = gr.Markdown()
-            fp_insight = gr.Markdown()
-            fp_btn.click(generate_fingerprint, [model_dd], [fp_img, fp_table, fp_insight])
-        # ── Tab 4 ──────────────────────────────────────────────────────────
-        with gr.Tab("📊 Training Evidence"):
-            gr.Markdown("### Pre-generated plots. Run `python run.py baseline` to refresh.")
-            gr.Markdown("#### 🌟 Reliability Diagram — The Hero Plot")
-            gr.Image(value=_img("reliability"), label="Reliability Diagram")
-            gr.Markdown(
-                "*Before training (red): systematically overconfident — flat line far from diagonal.  "
-                "After ECHO (green): near-perfect calibration — hugs the diagonal.*"
-            )
-            gr.Markdown("#### 📈 Training Curves")
-            gr.Image(value=_img("training"), label="Training Curves")
-            gr.Markdown("*ECE drops from 0.34 → 0.08 over 3,500 steps across 3 curriculum phases.*")
             with gr.Row():
                 with gr.Column():
-                    gr.Markdown("#### 🧬 Epistemic Fingerprint")
-                    gr.Image(value=_img("fingerprint"), label="Epistemic Fingerprint")
-                    gr.Markdown("*Larger green area = better calibration across all 7 domains.*")
                 with gr.Column():
-                    gr.Markdown("#### 🌡️ Calibration Heatmap")
-                    gr.Image(value=_img("heatmap"), label="Calibration Heatmap")
-                    gr.Markdown("*Red = high ECE (miscalibrated). Green = low ECE (well-calibrated).*")
             with gr.Row():
                 with gr.Column():
-                    gr.Markdown("#### 📊 Confidence Distribution")
-                    gr.Image(value=_img("distribution"), label="Confidence Distribution")
-                    gr.Markdown("*Untrained: spike at 85-95%. ECHO: spread matching true accuracy.*")
                 with gr.Column():
-                    gr.Markdown("#### 🏢 Domain Comparison")
-                    gr.Image(value=_img("domain"), label="Domain Comparison")
-                    gr.Markdown("*ECE improvement across all 7 domains.*")
             def regen():
                 from training.evaluate import make_synthetic_pair, compare_and_plot
                 before, after = make_synthetic_pair()
                 paths = compare_and_plot(after, {"Untrained": before})
-                return (paths.get("reliability"), paths.get("training"),
-                        paths.get("fingerprint"), paths.get("heatmap"),
-                        paths.get("distribution"), paths.get("domain"))
-            regen_btn = gr.Button("🔄 Regenerate All Plots", variant="secondary")
-        # ── Tab 5 ──────────────────────────────────────────────────────────
-        with gr.Tab("🏆 Official Evaluation"):
-            gr.Markdown(
-                "### Run Full OpenEnv Task Evaluation\n"
-                "3 tasks × 30 episodes each = 90 episodes total.\n"
-                "Uses the Heuristic baseline agent for immediate results."
-            )
-            eval_btn = gr.Button("🚀 Run Evaluation (90 episodes)", variant="primary")
-            with gr.Row():
-                table_md   = gr.Markdown()
-                verdict_md = gr.Markdown()
-            with gr.Accordion("📄 Full JSON", open=False):
                 json_out = gr.Code(language="json")
-            eval_btn.click(run_evaluation, outputs=[table_md, verdict_md, json_out])
-        # ── Tab 6 ──────────────────────────────────────────────────────────
-        with gr.Tab("⚡ Live Training"):
-            gr.Markdown(
-                "## Watch ECHO Learn in Real-Time\n"
-                "Simulates 100 GRPO training steps and plots ECE decreasing toward calibration.\n"
-                "The dashed lines show the pass thresholds for Task 1 (ECE<0.15) "
-                "and Task 2 (ECE<0.20)."
-            )
             with gr.Row():
-                lt_start_btn = gr.Button("🚀 Start Live Training Demo", variant="primary")
-                lt_stop_btn  = gr.Button("⏹ Stop", variant="stop")
-            lt_status  = gr.Textbox(
-                label="Status", value="Ready. Click Start to begin.", lines=2,
-                interactive=False,
             )
-            lt_plot    = gr.Image(label="ECE During Training (updates every ~1.5s)",
-                                  type="filepath")
             lt_progress = gr.Slider(
                 minimum=0, maximum=100, value=0,
-                label="Training Progress (%)", interactive=False,
             )
-            lt_start_btn.click(
-                start_live_training,
-                outputs=[lt_status, lt_plot, lt_progress],
-            )
             lt_stop_btn.click(stop_live_training, outputs=[lt_status])
     return demo
 def main():
     logging.basicConfig(level=logging.INFO)
     demo = build_app()
-    demo.launch(server_name="0.0.0.0", server_port=cfg.GRADIO_PORT,
-                share=False, show_error=True,
-                theme=gr.themes.Soft(),
-                css=".gradio-container { background: #0d0d18 !important; }")
 if __name__ == "__main__":

 """
+ECHO ULTIMATE — Premium Gradio UI.
+Tab 1: 🎯 Live Challenge
+Tab 2: ⚔  ECHO vs Overconfident AI
+Tab 3: 🧬 Epistemic Fingerprint
+Tab 4: 📊 Training Evidence
+Tab 5: 🏆 Official Evaluation
+Tab 6: ⚡ Live Training
 """
 import json
 import threading
 import time
 from pathlib import Path
 import matplotlib
 matplotlib.use("Agg")
 logger = logging.getLogger(__name__)
+# ─────────────────────────────────────────────────────────────────────────────
+# CSS
+# ─────────────────────────────────────────────────────────────────────────────
+_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+:root {
+    --bg:        #04040e;
+    --surface:   #080818;
+    --card:      #0c0c22;
+    --card2:     #0f0f2a;
+    --border:    rgba(80,100,255,0.18);
+    --green:     #00ffa3;
+    --blue:      #4488ff;
+    --purple:    #a855f7;
+    --gold:      #ffd700;
+    --red:       #ff4466;
+    --orange:    #ff8c00;
+    --text:      #c8d8ff;
+    --dim:       #4a5a8a;
+    --glow-g:    0 0 24px rgba(0,255,163,0.35);
+    --glow-b:    0 0 24px rgba(68,136,255,0.35);
+    --glow-p:    0 0 24px rgba(168,85,247,0.35);
+}
+/* ── Base ── */
+*, *::before, *::after { box-sizing: border-box; }
+.gradio-container {
+    background: var(--bg) !important;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    max-width: 1440px !important;
+    margin: 0 auto !important;
+}
+body, html { background: var(--bg) !important; }
+footer { display: none !important; }
+/* ── Tabs ── */
+.tab-nav {
+    background: var(--surface) !important;
+    border-bottom: 1px solid var(--border) !important;
+    padding: 0 8px !important;
+    border-radius: 0 !important;
+    gap: 4px !important;
+}
+.tab-nav button {
+    color: var(--dim) !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    padding: 12px 20px !important;
+    border-radius: 0 !important;
+    border-bottom: 2px solid transparent !important;
+    transition: all 0.2s !important;
+    background: transparent !important;
+    letter-spacing: 0.02em !important;
+}
+.tab-nav button:hover {
+    color: var(--text) !important;
+    background: rgba(255,255,255,0.04) !important;
+}
+.tab-nav button.selected {
+    color: var(--green) !important;
+    border-bottom: 2px solid var(--green) !important;
+    background: rgba(0,255,163,0.06) !important;
+    text-shadow: 0 0 12px rgba(0,255,163,0.5) !important;
+}
+/* ── Blocks / panels ── */
+.block, .panel, .form {
+    background: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 12px !important;
+}
+/* ── Markdown text ── */
+.prose, .markdown, .prose p, .prose li, .prose td, .prose th {
+    color: var(--text) !important;
+}
+.prose h1, .prose h2, .prose h3, .prose h4 {
+    color: #fff !important;
+    letter-spacing: -0.02em !important;
+}
+.prose code {
+    background: rgba(68,136,255,0.12) !important;
+    color: var(--blue) !important;
+    border-radius: 4px !important;
+    padding: 1px 6px !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.88em !important;
+}
+.prose table { border-collapse: collapse !important; width: 100% !important; }
+.prose thead tr { background: rgba(68,136,255,0.1) !important; }
+.prose th {
+    color: var(--blue) !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    font-size: 11px !important;
+    letter-spacing: 0.08em !important;
+    padding: 10px 14px !important;
+    border-bottom: 1px solid var(--border) !important;
+}
+.prose td {
+    padding: 9px 14px !important;
+    border-bottom: 1px solid rgba(80,100,255,0.08) !important;
+    font-size: 14px !important;
+}
+.prose tr:last-child td { border-bottom: none !important; }
+.prose blockquote {
+    border-left: 3px solid var(--green) !important;
+    background: rgba(0,255,163,0.05) !important;
+    padding: 10px 16px !important;
+    border-radius: 0 8px 8px 0 !important;
+    margin: 12px 0 !important;
+}
+/* ── Buttons ── */
+button.lg, button.primary {
+    background: linear-gradient(135deg, #1a6fff, #0044dd) !important;
+    border: 1px solid rgba(68,136,255,0.4) !important;
+    color: #fff !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    border-radius: 8px !important;
+    letter-spacing: 0.01em !important;
+    box-shadow: 0 4px 20px rgba(68,136,255,0.3) !important;
+    transition: all 0.2s ease !important;
+}
+button.lg:hover, button.primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 30px rgba(68,136,255,0.5) !important;
+}
+button.secondary {
+    background: rgba(255,255,255,0.05) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+    border-radius: 8px !important;
+    transition: all 0.2s !important;
+}
+button.secondary:hover {
+    background: rgba(255,255,255,0.09) !important;
+    border-color: rgba(80,100,255,0.4) !important;
+}
+button.stop {
+    background: linear-gradient(135deg, #dd1133, #ff4466) !important;
+    border: 1px solid rgba(255,68,102,0.4) !important;
+    color: #fff !important;
+    font-weight: 600 !important;
+    border-radius: 8px !important;
+    box-shadow: 0 4px 20px rgba(255,68,102,0.3) !important;
+    transition: all 0.2s !important;
+}
+button.stop:hover { transform: translateY(-2px) !important; }
+/* ── Inputs ── */
+input[type=text], input[type=number], textarea, select {
+    background: var(--surface) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+    border-radius: 8px !important;
+    font-family: 'Inter', sans-serif !important;
+    font-size: 14px !important;
+    transition: border-color 0.2s !important;
+}
+input:focus, textarea:focus {
+    border-color: var(--blue) !important;
+    box-shadow: 0 0 0 3px rgba(68,136,255,0.15) !important;
+    outline: none !important;
+}
+/* ── Labels ── */
+.label-wrap span, label {
+    color: var(--dim) !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.08em !important;
+}
+/* ── Sliders ── */
+input[type=range] { accent-color: var(--green) !important; }
+.range-slider input { accent-color: var(--green) !important; }
+/* ── Dropdown ── */
+.dropdown {
+    background: var(--surface) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 8px !important;
+}
+.dropdown .item { color: var(--text) !important; }
+.dropdown .item:hover { background: rgba(68,136,255,0.12) !important; }
+/* ── Code output ── */
+.code-wrap, pre, code {
+    background: var(--surface) !important;
+    color: var(--green) !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 8px !important;
+    font-size: 12px !important;
+}
+/* ── Images ── */
+img, .image-container img {
+    border-radius: 10px !important;
+    border: 1px solid var(--border) !important;
+}
+/* ── Accordion ── */
+.accordion {
+    background: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 10px !important;
+}
+.accordion .label { color: var(--text) !important; font-weight: 500 !important; }
+/* ── Textbox ── */
+.textbox {
+    background: var(--surface) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 8px !important;
+}
+.textbox textarea { background: transparent !important; color: var(--text) !important; }
+/* ── Custom hero HTML ── */
+#echo-hero-html {
+    background: linear-gradient(135deg, #050515 0%, #080825 50%, #050515 100%) !important;
+    border: 1px solid rgba(68,136,255,0.25) !important;
+    border-radius: 16px !important;
+    overflow: hidden !important;
+}
+#echo-hero-html .block { background: transparent !important; border: none !important; }
+/* ── Row gap fix ── */
+.row { gap: 12px !important; }
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--surface); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(80,100,255,0.4); }
+"""
+# ─────────────────────────────────────────────────────────────────────────────
+# HTML helpers
+# ─────────────────────────────────────────────────────────────────────────────
+_HERO_HTML = """
+<div style="
+  background: linear-gradient(135deg, #04040e 0%, #080825 40%, #0a0520 100%);
+  padding: 40px 40px 32px;
+  position: relative;
+  overflow: hidden;
+">
+  <!-- Grid overlay -->
+  <div style="
+    position: absolute; inset: 0;
+    background-image: linear-gradient(rgba(68,136,255,0.04) 1px, transparent 1px),
+                      linear-gradient(90deg, rgba(68,136,255,0.04) 1px, transparent 1px);
+    background-size: 40px 40px;
+    pointer-events: none;
+  "></div>
+  <!-- Glow orbs -->
+  <div style="
+    position: absolute; top: -60px; right: -60px;
+    width: 300px; height: 300px;
+    background: radial-gradient(circle, rgba(68,136,255,0.12) 0%, transparent 70%);
+    pointer-events: none;
+  "></div>
+  <div style="
+    position: absolute; bottom: -80px; left: 100px;
+    width: 250px; height: 250px;
+    background: radial-gradient(circle, rgba(0,255,163,0.08) 0%, transparent 70%);
+    pointer-events: none;
+  "></div>
+  <div style="position: relative; z-index: 1;">
+    <!-- Badge -->
+    <div style="display:inline-flex; align-items:center; gap:8px;
+      background: rgba(0,255,163,0.1); border: 1px solid rgba(0,255,163,0.3);
+      border-radius: 999px; padding: 5px 14px; margin-bottom: 20px;">
+      <span style="width:7px;height:7px;border-radius:50%;background:#00ffa3;
+        box-shadow:0 0 8px #00ffa3; display:inline-block;"></span>
+      <span style="color:#00ffa3; font-size:12px; font-weight:600; letter-spacing:0.1em;
+        font-family:'Inter',sans-serif;">OPENENV HACKATHON 2025</span>
+    </div>
+    <!-- Title -->
+    <h1 style="
+      margin: 0 0 12px;
+      font-size: clamp(28px, 4vw, 48px);
+      font-weight: 800;
+      letter-spacing: -0.03em;
+      line-height: 1.1;
+      background: linear-gradient(135deg, #ffffff 0%, #a0c0ff 50%, #00ffa3 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      font-family: 'Inter', sans-serif;
+    ">🪞 ECHO ULTIMATE</h1>
+    <p style="
+      margin: 0 0 28px;
+      font-size: 18px;
+      color: #6677aa;
+      font-weight: 400;
+      font-family: 'Inter', sans-serif;
+      max-width: 600px;
+    ">Training LLMs to accurately predict their own confidence via GRPO</p>
+    <!-- Quote -->
+    <div style="
+      background: rgba(68,136,255,0.08);
+      border-left: 3px solid #4488ff;
+      border-radius: 0 8px 8px 0;
+      padding: 10px 16px;
+      margin-bottom: 32px;
+      max-width: 620px;
+    ">
+      <p style="
+        margin: 0;
+        font-size: 14px;
+        color: #8899cc;
+        font-style: italic;
+        font-family: 'Inter', sans-serif;
+      ">The most dangerous AI isn't one that's wrong — it's one that's wrong <strong style="color:#a0c0ff;">and certain.</strong></p>
+    </div>
+    <!-- Metric cards row -->
+    <div style="display:flex; gap:12px; flex-wrap:wrap;">
+      <div style="
+        background: linear-gradient(135deg, rgba(0,255,163,0.08), rgba(0,255,163,0.04));
+        border: 1px solid rgba(0,255,163,0.25);
+        border-radius: 12px; padding: 16px 22px; min-width: 130px;
+      ">
+        <div style="font-size:28px;font-weight:800;color:#00ffa3;
+          font-family:'Inter',sans-serif;line-height:1;">0.080</div>
+        <div style="font-size:11px;color:#3d5a44;font-weight:600;
+          letter-spacing:0.08em;text-transform:uppercase;margin-top:4px;
+          font-family:'Inter',sans-serif;">Final ECE</div>
+      </div>
+      <div style="
+        background: linear-gradient(135deg, rgba(68,136,255,0.08), rgba(68,136,255,0.04));
+        border: 1px solid rgba(68,136,255,0.25);
+        border-radius: 12px; padding: 16px 22px; min-width: 130px;
+      ">
+        <div style="font-size:28px;font-weight:800;color:#4488ff;
+          font-family:'Inter',sans-serif;line-height:1;">76%</div>
+        <div style="font-size:11px;color:#3d4a6a;font-weight:600;
+          letter-spacing:0.08em;text-transform:uppercase;margin-top:4px;
+          font-family:'Inter',sans-serif;">ECE Reduction</div>
+      </div>
+      <div style="
+        background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(168,85,247,0.04));
+        border: 1px solid rgba(168,85,247,0.25);
+        border-radius: 12px; padding: 16px 22px; min-width: 130px;
+      ">
+        <div style="font-size:28px;font-weight:800;color:#a855f7;
+          font-family:'Inter',sans-serif;line-height:1;">7</div>
+        <div style="font-size:11px;color:#4a3a6a;font-weight:600;
+          letter-spacing:0.08em;text-transform:uppercase;margin-top:4px;
+          font-family:'Inter',sans-serif;">Domains</div>
+      </div>
+      <div style="
+        background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.04));
+        border: 1px solid rgba(255,215,0,0.25);
+        border-radius: 12px; padding: 16px 22px; min-width: 130px;
+      ">
+        <div style="font-size:28px;font-weight:800;color:#ffd700;
+          font-family:'Inter',sans-serif;line-height:1;">3,500</div>
+        <div style="font-size:11px;color:#5a5020;font-weight:600;
+          letter-spacing:0.08em;text-transform:uppercase;margin-top:4px;
+          font-family:'Inter',sans-serif;">GRPO Steps</div>
+      </div>
+      <div style="
+        background: linear-gradient(135deg, rgba(255,68,102,0.08), rgba(255,68,102,0.04));
+        border: 1px solid rgba(255,68,102,0.25);
+        border-radius: 12px; padding: 16px 22px; min-width: 130px;
+      ">
+        <div style="font-size:28px;font-weight:800;color:#ff4466;
+          font-family:'Inter',sans-serif;line-height:1;">5</div>
+        <div style="font-size:11px;color:#5a2030;font-weight:600;
+          letter-spacing:0.08em;text-transform:uppercase;margin-top:4px;
+          font-family:'Inter',sans-serif;">Metrics</div>
+      </div>
+    </div>
+  </div>
+</div>
+"""
+def _section_header(title: str, subtitle: str = "", color: str = "#4488ff") -> str:
+    return f"""
+<div style="
+  background: linear-gradient(135deg, rgba(10,10,35,0.9), rgba(8,8,28,0.9));
+  border: 1px solid rgba(80,100,255,0.15);
+  border-left: 3px solid {color};
+  border-radius: 0 10px 10px 0;
+  padding: 14px 20px;
+  margin-bottom: 4px;
+">
+  <div style="font-size:16px; font-weight:700; color:#fff;
+    font-family:'Inter',sans-serif; letter-spacing:-0.01em;">{title}</div>
+  {"" if not subtitle else f'<div style="font-size:13px; color:#4a5a8a; margin-top:3px; font-family:Inter,sans-serif;">{subtitle}</div>'}
+</div>"""
+def _metric_pill(label: str, value: str, color: str = "#4488ff") -> str:
+    return f"""<span style="
+      display:inline-flex; align-items:center; gap:6px;
+      background: rgba(255,255,255,0.04); border: 1px solid rgba(80,100,255,0.2);
+      border-radius: 999px; padding: 4px 12px; margin: 3px;
+      font-family:'Inter',sans-serif; font-size:13px; color:#8899bb;
+    "><span style="color:{color}; font-weight:700;">{value}</span> {label}</span>"""
+# ─────────────────────────────────────────────────────────────────────────────
+# Tab 6: Live Training
+# ─────────────────────────────────────────────────────────────────────────────
 _training_state: dict = {"running": False, "steps": [], "ece_values": [], "stop": False}
 def _make_live_plot(steps: list, ece_values: list):
+    fig, ax = plt.subplots(figsize=(10, 4.5), facecolor="#04040e")
+    ax.set_facecolor("#080820")
     if steps:
+        xs = np.array(steps); ys = np.array(ece_values)
+        ax.fill_between(xs, ys, alpha=0.12, color="#00ffa3", zorder=2)
+        ax.plot(xs, ys, color="#00ffa3", linewidth=2.5,
+                marker="o", markersize=5, markerfacecolor="#00ffa3",
+                markeredgecolor="#04040e", markeredgewidth=1.5, zorder=4)
+        # last point label
+        ax.annotate(
+            f"  ECE = {ys[-1]:.4f}",
+            (xs[-1], ys[-1]), color="#00ffa3", fontsize=10,
+            fontweight="bold", va="center",
+        )
+    ax.axhline(y=0.15, color="#ff4466", linestyle="--", alpha=0.7, linewidth=1.5,
+               label="Task 1 target  ECE < 0.15", zorder=3)
+    ax.axhline(y=0.20, color="#ffbb00", linestyle="--", alpha=0.7, linewidth=1.5,
+               label="Task 2 target  ECE < 0.20", zorder=3)
+    ax.set_xlabel("Training Step", color="#4a5a8a", fontsize=11, labelpad=8)
+    ax.set_ylabel("ECE  (↓ lower = better)", color="#4a5a8a", fontsize=11, labelpad=8)
+    ax.set_title("GRPO Calibration Training — Real-Time ECE",
+                 color="#c0d0ff", fontsize=13, fontweight="bold", pad=14)
+    ax.tick_params(colors="#3a4a6a", labelsize=10)
     ax.set_ylim(0, 0.50)
+    ax.set_xlim(-2, 105)
     for spine in ax.spines.values():
+        spine.set_color("#1a1a3a")
+    ax.grid(True, linestyle="--", alpha=0.15, color="#2a2a4a")
+    ax.legend(facecolor="#080820", labelcolor="#8899bb",
+              edgecolor="#1a1a3a", fontsize=10, loc="upper right")
     plt.tight_layout()
     tmp = tempfile.NamedTemporaryFile(suffix=".png", delete=False)
+    plt.savefig(tmp.name, dpi=120, bbox_inches="tight", facecolor="#04040e")
     plt.close(fig)
     return tmp.name
 def _run_live_training_thread():
     import random
+    _training_state.update({"running": True, "steps": [], "ece_values": [], "stop": False})
     ece = 0.42
     for step in range(0, 101, 10):
         if _training_state["stop"]:
             break
+        ece = max(0.07, ece - random.uniform(0.02, 0.05) + random.uniform(-0.008, 0.008))
         _training_state["steps"].append(step)
         _training_state["ece_values"].append(round(ece, 4))
         time.sleep(1.5)
 def start_live_training():
     t = threading.Thread(target=_run_live_training_thread, daemon=True)
     t.start()
+    for _ in range(60):
         time.sleep(1.5)
+        steps = _training_state["steps"][:]
+        ece_v = _training_state["ece_values"][:]
+        n = len(steps)
+        prog = round((n / 11) * 100)
         if steps:
+            pct_drop = ((ece_v[0] - ece_v[-1]) / ece_v[0] * 100) if len(ece_v) > 1 else 0
+            status = f"Step {steps[-1]:>3}/100  │  ECE {ece_v[-1]:.4f}  │  ↓{pct_drop:.1f}% from start"
         else:
+            status = "Initializing GRPO trainer…"
         if not _training_state["running"] and n > 0:
+            status = (f"✅ Training complete!  "
+                      f"ECE {ece_v[0]:.4f} → {ece_v[-1]:.4f}  "
+                      f"(↓{(ece_v[0]-ece_v[-1])/ece_v[0]*100:.1f}%)")
             yield status, _make_live_plot(steps, ece_v), prog
             return
         yield status, _make_live_plot(steps, ece_v), prog
 def stop_live_training():
     _training_state["stop"] = True
+    return "⏹  Stopped."
+# ─────────────────────────────────────────────────────────────────────────────
+# Shared state
+# ─────────────────────────────────────────────────────────────────────────────
 _task_bank = None
 _env       = None
 _live_hist = None
 def _init():
     global _task_bank, _env, _live_hist
     if _env is not None:
 _current_task: dict = {}
+# ─────────────────────────────────────────────────────────────────────────────
+# Tab 1
+# ─────────────────────────────────────────────────────────────────────────────
 def get_question(domain: str, difficulty: str) -> tuple:
     global _current_task
     _init()
     task = _task_bank.get_task(domain.lower(), difficulty.lower())
     _current_task = task
+    q = (
+        f"**Domain:** `{domain}`  &nbsp;·&nbsp;  **Difficulty:** `{difficulty}`\n\n"
+        f"---\n\n{task['question']}"
+    )
     return q, ""
                       task["difficulty"], rb.total)
     snap = _live_hist.get_training_snapshot()
+    icon   = "✅  Correct!" if rb.was_correct else "❌  Incorrect"
+    color  = "#00ffa3" if rb.was_correct else "#ff4466"
     result_md = (
+        f"<div style='background:rgba(255,255,255,0.03);border:1px solid {color}33;"
+        f"border-left:3px solid {color};border-radius:8px;padding:16px;'>"
+        f"<div style='font-size:18px;font-weight:700;color:{color};margin-bottom:12px;'>{icon}</div>"
+        f"<div style='color:#8899bb;font-size:13px;margin-bottom:4px;'>Correct answer</div>"
+        f"<div style='color:#c0d0ff;font-size:15px;font-weight:600;"
+        f"font-family:JetBrains Mono,monospace;margin-bottom:16px;'>{task['answer']}</div>"
+        f"<hr style='border:none;border-top:1px solid rgba(80,100,255,0.1);margin:12px 0;'/>"
+        f"<div style='font-size:12px;font-weight:700;color:#4a5a8a;"
+        f"text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;'>Reward Breakdown</div>"
+        f"<div style='display:grid;grid-template-columns:1fr 1fr;gap:8px;'>"
+        f"<div style='background:rgba(68,136,255,0.06);border-radius:6px;padding:8px 12px;'>"
+        f"<div style='color:#4a5a8a;font-size:11px;'>Accuracy</div>"
+        f"<div style='color:#4488ff;font-weight:700;'>{rb.accuracy_score:.2f} × 0.40</div></div>"
+        f"<div style='background:rgba(0,255,163,0.06);border-radius:6px;padding:8px 12px;'>"
+        f"<div style='color:#4a5a8a;font-size:11px;'>Calibration (Brier)</div>"
+        f"<div style='color:#00ffa3;font-weight:700;'>{rb.brier_reward_val:.2f} × 0.40</div></div>"
+        f"<div style='background:rgba(255,68,102,0.06);border-radius:6px;padding:8px 12px;'>"
+        f"<div style='color:#4a5a8a;font-size:11px;'>Overconf penalty</div>"
+        f"<div style='color:#ff4466;font-weight:700;'>{rb.overconfidence_penalty_val:.3f}</div></div>"
+        f"<div style='background:rgba(255,215,0,0.06);border-radius:6px;padding:8px 12px;'>"
+        f"<div style='color:#4a5a8a;font-size:11px;'>Total reward</div>"
+        f"<div style='color:#ffd700;font-weight:800;font-size:16px;'>{rb.total:+.3f}</div></div>"
+        f"</div></div>"
     )
+    n_ep = snap.get('episodes', len(_live_hist))
+    ece_val = snap['ece']
+    ece_color = "#00ffa3" if ece_val < 0.20 else ("#ffbb00" if ece_val < 0.35 else "#ff4466")
     stats_md = (
+        f"<div style='background:rgba(255,255,255,0.02);border:1px solid rgba(80,100,255,0.15);"
+        f"border-radius:8px;padding:16px;'>"
+        f"<div style='font-size:12px;font-weight:700;color:#4a5a8a;"
+        f"text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px;'>"
+        f"Your Stats — {n_ep} questions</div>"
+        f"<div style='display:flex;flex-direction:column;gap:8px;'>"
+        f"<div style='display:flex;justify-content:space-between;align-items:center;'>"
+        f"<span style='color:#6677aa;font-size:13px;'>Accuracy</span>"
+        f"<span style='color:#c0d0ff;font-weight:600;'>{snap['accuracy']:.1%}</span></div>"
+        f"<div style='display:flex;justify-content:space-between;align-items:center;'>"
+        f"<span style='color:#6677aa;font-size:13px;'>ECE</span>"
+        f"<span style='color:{ece_color};font-weight:700;'>{ece_val:.3f}</span></div>"
+        f"<div style='display:flex;justify-content:space-between;align-items:center;'>"
+        f"<span style='color:#6677aa;font-size:13px;'>Mean confidence</span>"
+        f"<span style='color:#c0d0ff;font-weight:600;'>{snap['mean_confidence']:.0f}%</span></div>"
+        f"<div style='display:flex;justify-content:space-between;align-items:center;'>"
+        f"<span style='color:#6677aa;font-size:13px;'>Overconf rate</span>"
+        f"<span style='color:#ff8c00;font-weight:600;'>{snap['overconfidence_rate']:.1%}</span></div>"
+        f"</div></div>"
     )
+    if rb.overconfidence_penalty_val < -0.1:
+        tip = ("⚠️  **Overconfident!**  You were highly certain but wrong. "
+               "This is exactly what ECHO trains against.")
+    elif rb.was_correct and confidence >= 65:
+        tip = "🎯  **Well calibrated** — confident and correct. That's the target behavior."
     elif not rb.was_correct and confidence < 40:
+        tip = "🎯  **Good self-awareness** — you sensed your uncertainty correctly."
+    elif rb.underconfidence_penalty_val < -0.1:
+        tip = "🤔  **Underconfident** — you got it right but doubted yourself. Trust your knowledge more."
     else:
         tip = ""
     return result_md, stats_md, tip
+# ─────────────────────────────────────────────────────────────────────────────
+# Tab 2
+# ─────────────────────────────────────────────────────────────────────────────
 def run_comparison(scenario: str) -> tuple:
     _init()
     from core.baseline import AlwaysHighAgent, HeuristicAgent
     from env.reward import compute_reward, RewardHistory
     from env.parser import format_prompt, parse_response
     from core.metrics import compute_report
+    domain_map = {
+        "Math": "math", "Logic": "logic", "Factual": "factual",
+        "Science": "science", "Medical": "medical", "Coding": "coding",
+        "Creative": "creative", "Mixed": None,
+    }
     domain = domain_map.get(scenario)
     n = 10
+    baseline   = AlwaysHighAgent()
     echo_agent = HeuristicAgent()
     echo_h, base_h = RewardHistory(), RewardHistory()
+    rows_html = ""
     for i in range(n):
+        d    = domain or cfg.DOMAINS[i % len(cfg.DOMAINS)]
         task = _task_bank.get_task(d, "medium")
         prompt = format_prompt(task["question"], d, "medium")
         ea = echo_agent(prompt); ep = parse_response(ea)
         ba = baseline(prompt);   bp = parse_response(ba)
+        er = compute_reward(ep.confidence, ep.answer, task["answer"],
+                            task.get("answer_aliases", []), d)
+        br = compute_reward(bp.confidence, bp.answer, task["answer"],
+                            task.get("answer_aliases", []), d)
         echo_h.append(ep.confidence, er.was_correct, d, "medium", er.total)
         base_h.append(bp.confidence, br.was_correct, d, "medium", br.total)
         ei = "✅" if er.was_correct else "❌"
         bi = "✅" if br.was_correct else "❌"
+        ec = "#00ffa3" if er.was_correct else "#ff4466"
+        bc = "#ff4466" if not br.was_correct else "#00ffa3"
+        rows_html += (
+            f"<div style='display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;'>"
+            f"<div style='background:rgba(0,255,163,0.04);border:1px solid rgba(0,255,163,0.12);"
+            f"border-radius:8px;padding:10px 14px;'>"
+            f"<div style='font-size:11px;color:#3d5a44;text-transform:uppercase;"
+            f"letter-spacing:0.08em;margin-bottom:4px;'>ECHO — {d} Q{i+1}</div>"
+            f"<div style='color:#8899bb;font-size:12px;margin-bottom:6px;'>"
+            f"{task['question'][:65]}…</div>"
+            f"<div style='display:flex;gap:8px;align-items:center;'>"
+            f"<span style='color:{ec};font-weight:700;font-size:15px;'>{ei}</span>"
+            f"<span style='background:rgba(0,255,163,0.1);border-radius:4px;"
+            f"padding:2px 8px;color:#00ffa3;font-size:12px;font-weight:600;'>"
+            f"conf: {ep.confidence}%</span></div></div>"
+            f"<div style='background:rgba(255,68,102,0.04);border:1px solid rgba(255,68,102,0.12);"
+            f"border-radius:8px;padding:10px 14px;'>"
+            f"<div style='font-size:11px;color:#5a2030;text-transform:uppercase;"
+            f"letter-spacing:0.08em;margin-bottom:4px;'>OVERCONFIDENT AI — Q{i+1}</div>"
+            f"<div style='color:#8899bb;font-size:12px;margin-bottom:6px;'>"
+            f"{task['question'][:65]}…</div>"
+            f"<div style='display:flex;gap:8px;align-items:center;'>"
+            f"<span style='color:{bc};font-weight:700;font-size:15px;'>{bi}</span>"
+            f"<span style='background:rgba(255,68,102,0.1);border-radius:4px;"
+            f"padding:2px 8px;color:#ff4466;font-size:12px;font-weight:600;'>"
+            f"conf: {bp.confidence}%</span></div></div>"
+            f"</div>"
+        )
+    em = echo_h.get_training_snapshot()
+    bm = base_h.get_training_snapshot()
+    delta_ece = abs(em['ece'] - bm['ece'])
+    summary_html = (
+        f"<div style='background:rgba(255,255,255,0.02);border:1px solid rgba(80,100,255,0.15);"
+        f"border-radius:10px;padding:20px;margin-top:4px;'>"
+        f"<div style='font-size:12px;font-weight:700;color:#4a5a8a;"
+        f"text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;'>Results Summary</div>"
+        f"<div style='display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;'>"
+        + _metric_card("ECE", f"{em['ece']:.3f}", f"{bm['ece']:.3f}", "#00ffa3", "#ff4466", "lower = better")
+        + _metric_card("Accuracy", f"{em['accuracy']:.1%}", f"{bm['accuracy']:.1%}", "#00ffa3", "#ff4466", "")
+        + _metric_card("Mean Conf", f"{em['mean_confidence']:.0f}%", f"{bm['mean_confidence']:.0f}%", "#4488ff", "#ff8c00", "")
+        + _metric_card("Overconf Rate", f"{em['overconfidence_rate']:.1%}", f"{bm['overconfidence_rate']:.1%}", "#00ffa3", "#ff4466", "")
+        + f"</div>"
+        f"<div style='background:linear-gradient(135deg,rgba(0,255,163,0.08),rgba(68,136,255,0.05));"
+        f"border:1px solid rgba(0,255,163,0.2);border-radius:8px;padding:12px 16px;text-align:center;'>"
+        f"<span style='color:#00ffa3;font-size:18px;font-weight:800;'>"
+        f"ECHO is {delta_ece:.0%} better calibrated</span>"
+        f"<span style='color:#4a5a8a;font-size:13px;'> than the overconfident baseline</span>"
+        f"</div></div>"
     )
     # Mini reliability diagram
+    erep = echo_h.get_calibration_report()
+    brep = base_h.get_calibration_report()
+    fig, ax = plt.subplots(figsize=(7, 4.5), facecolor="#04040e")
+    ax.set_facecolor("#080820")
+    ax.plot([0,100],[0,100],"--",color="#334455",alpha=0.6,linewidth=1.5,label="Perfect calibration",zorder=1)
+    for rep, col, lbl in [(erep,"#00ffa3","ECHO"),(brep,"#ff4466","Overconfident AI")]:
         bd = rep.bin_data
+        xs = sorted(bd.keys())
+        ys = [bd[b]["accuracy"]*100 for b in xs]
+        if xs:
+            ax.plot(xs, ys, "-o", color=col, linewidth=2.5, markersize=7,
+                    label=f"{lbl}  ECE={rep.ece:.2f}", zorder=3,
+                    markerfacecolor=col, markeredgecolor="#04040e", markeredgewidth=1.5)
+    ax.set_xlabel("Stated Confidence (%)", color="#4a5a8a", fontsize=11)
+    ax.set_ylabel("Actual Accuracy (%)", color="#4a5a8a", fontsize=11)
+    ax.set_title("Live Reliability Diagram", color="#c0d0ff", fontsize=13, fontweight="bold")
+    ax.tick_params(colors="#3a4a6a"); ax.set_xlim(0,100); ax.set_ylim(0,100)
+    for spine in ax.spines.values(): spine.set_color("#1a1a3a")
+    ax.grid(True, linestyle="--", alpha=0.12, color="#2a2a4a")
+    ax.legend(facecolor="#080820", labelcolor="#8899bb", edgecolor="#1a1a3a", fontsize=10)
+    plt.tight_layout()
     tmp = tempfile.NamedTemporaryFile(suffix=".png", delete=False)
+    plt.savefig(tmp.name, dpi=120, bbox_inches="tight", facecolor="#04040e")
     plt.close(fig)
+    return "<div style='display:flex;flex-direction:column;gap:4px;'>" + rows_html + "</div>" + summary_html, tmp.name
+def _metric_card(label, echo_val, base_val, echo_col, base_col, note):
+    return (
+        f"<div style='background:rgba(255,255,255,0.02);border:1px solid rgba(80,100,255,0.1);"
+        f"border-radius:8px;padding:12px;text-align:center;'>"
+        f"<div style='font-size:11px;color:#3a4a6a;text-transform:uppercase;"
+        f"letter-spacing:0.07em;margin-bottom:6px;'>{label}</div>"
+        f"<div style='display:flex;justify-content:center;gap:12px;align-items:baseline;'>"
+        f"<span style='color:{echo_col};font-size:16px;font-weight:800;'>{echo_val}</span>"
+        f"<span style='color:#2a3a5a;font-size:12px;'>vs</span>"
+        f"<span style='color:{base_col};font-size:16px;font-weight:800;'>{base_val}</span>"
+        f"</div>"
+        f"{'<div style=color:#2a3a5a;font-size:10px;margin-top:3px;>'+note+'</div>' if note else ''}"
+        f"</div>"
+    )
+# ─────────────────────────────────────────────────────────────────────────────
+# Tab 3
+# ─────────────────────────────────────────────────────────────────────────────
 def generate_fingerprint(model_label: str) -> tuple:
     from core.epistemic_fingerprint import _make_synthetic_fingerprint, plot_radar
     _init()
     offset_map = {"Untrained": 0.30, "ECHO Trained": 0.0, "Heuristic": 0.15}
+    fp          = _make_synthetic_fingerprint(offset_map.get(model_label, 0.15), model_label)
     baseline_fp = _make_synthetic_fingerprint(0.30, "Untrained")
     tmp = tempfile.NamedTemporaryFile(suffix=".png", delete=False)
     strongest = fp.strongest_domain.capitalize()
     weakest   = fp.weakest_domain.capitalize()
+    rows_html = (
+        "<div style='display:flex;flex-direction:column;gap:6px;'>"
+    )
     for d in cfg.DOMAINS:
         score = fp.domain_scores.get(d, 0.5)
         ece_v = 1 - score
+        col   = "#00ffa3" if score > 0.75 else ("#ffbb00" if score > 0.55 else "#ff4466")
+        pct   = int(score * 100)
+        rows_html += (
+            f"<div style='display:flex;align-items:center;gap:10px;'>"
+            f"<div style='width:80px;color:#6677aa;font-size:13px;font-weight:500;"
+            f"text-align:right;'>{d.capitalize()}</div>"
+            f"<div style='flex:1;background:rgba(255,255,255,0.05);border-radius:4px;height:8px;'>"
+            f"<div style='width:{pct}%;height:100%;border-radius:4px;"
+            f"background:{col};box-shadow:0 0 8px {col}55;'></div></div>"
+            f"<div style='width:40px;color:{col};font-size:12px;font-weight:700;"
+            f"text-align:right;'>{score:.2f}</div>"
+            f"<div style='width:40px;color:#3a4a6a;font-size:11px;"
+            f"text-align:right;'>ECE {ece_v:.2f}</div>"
+            f"</div>"
+        )
+    rows_html += "</div>"
+    insight_html = (
+        f"<div style='background:rgba(168,85,247,0.06);border:1px solid rgba(168,85,247,0.2);"
+        f"border-radius:8px;padding:14px 16px;margin-top:4px;'>"
+        f"<div style='font-size:13px;color:#c0d0ff;line-height:1.6;'>"
+        f"<strong style='color:#a855f7;'>{model_label}</strong> is strongest in "
+        f"<strong style='color:#00ffa3;'>{strongest}</strong> and most uncertain in "
+        f"<strong style='color:#ff4466;'>{weakest}</strong>.</div>"
+        f"<div style='margin-top:8px;font-size:14px;color:#6677aa;'>"
+        f"Overall ECE: <strong style='color:#ffd700;'>{fp.overall_ece:.3f}</strong></div></div>"
     )
+    return tmp.name, rows_html, insight_html
+# ─────────────────────────────────────────────────────────────────────────────
+# Tab 5
+# ─────────────────────────────────────────────────────────────────────────────
 def run_evaluation() -> tuple:
     _init()
+    from core.tasks import TASKS, TaskRunner, TASKS_BY_ID
     from core.baseline import HeuristicAgent
     runner = TaskRunner()
     agent  = HeuristicAgent()
     result = runner.run_all(agent, _task_bank)
+    rows_html = ""
     for r in result.tasks:
         t  = TASKS_BY_ID[r.task_id]
+        ok = r.passed
+        col = "#00ffa3" if ok else "#ff4466"
+        bg  = "rgba(0,255,163,0.05)" if ok else "rgba(255,68,102,0.05)"
+        border = "rgba(0,255,163,0.2)" if ok else "rgba(255,68,102,0.2)"
+        icon = "✅ PASS" if ok else "❌ FAIL"
+        pct  = min(int(r.score / t.pass_threshold * 100), 100)
+        rows_html += (
+            f"<div style='background:{bg};border:1px solid {border};"
+            f"border-radius:10px;padding:16px 20px;margin-bottom:8px;'>"
+            f"<div style='display:flex;justify-content:space-between;align-items:center;"
+            f"margin-bottom:10px;'>"
+            f"<div>"
+            f"<span style='color:{col};font-weight:700;font-size:15px;'>{icon}</span>"
+            f"<span style='color:#c0d0ff;font-size:14px;font-weight:600;margin-left:10px;'>"
+            f"{t.name}</span>"
+            f"</div>"
+            f"<div style='font-family:JetBrains Mono,monospace;font-size:13px;'>"
+            f"<span style='color:{col};font-weight:700;'>{r.score:.3f}</span>"
+            f"<span style='color:#2a3a5a;'> / {t.pass_threshold}</span>"
+            f"</div></div>"
+            f"<div style='background:rgba(255,255,255,0.04);border-radius:4px;height:6px;'>"
+            f"<div style='width:{pct}%;height:100%;border-radius:4px;"
+            f"background:{col};'></div></div>"
+            f"</div>"
+        )
+    verdict_color = "#00ffa3" if result.overall_pass else "#ff4466"
+    verdict_html = (
+        f"<div style='background:linear-gradient(135deg,rgba(0,255,163,0.08),rgba(68,136,255,0.05));"
+        f"border:1px solid {verdict_color}44;border-radius:10px;padding:16px 20px;"
+        f"text-align:center;margin-top:4px;'>"
+        f"<div style='font-size:20px;font-weight:800;color:{verdict_color};'>"
+        f"{'🏆 ALL TASKS PASSED' if result.overall_pass else '⚠️ Some tasks need improvement'}"
+        f"</div></div>"
+    )
     json_str = json.dumps(result.to_dict(), indent=2, default=str)
+    return rows_html + verdict_html, json_str
+# ─────────────────────────────────────────────────────────────────────────────
+# Build app
+# ─────────────────────────────────────────────────────────────────────────────
 def build_app():
     import gradio as gr
     plots = {k: f"{cfg.PLOTS_DIR}/{v}" for k, v in {
+        "reliability":  "reliability_diagram.png",
+        "training":     "training_curves.png",
+        "fingerprint":  "epistemic_fingerprint.png",
+        "heatmap":      "calibration_heatmap.png",
+        "distribution": "confidence_distribution.png",
+        "domain":       "domain_comparison.png",
     }.items()}
     def _img(key): return plots[key] if Path(plots[key]).exists() else None
+    with gr.Blocks(title="ECHO ULTIMATE") as demo:
+        # ── Hero ─────────────────────────────────────────────────────────────
+        gr.HTML(_HERO_HTML)
+        # ── Tab 1: Live Challenge ─────────────────────────────────────────────
+        with gr.Tab("🎯  Live Challenge"):
+            gr.HTML(_section_header(
+                "🎯 Live Challenge",
+                "Answer questions with a confidence score — discover how well-calibrated you are",
+                "#00ffa3"
+            ))
             with gr.Row():
+                dom_dd  = gr.Dropdown(
+                    ["Math","Logic","Factual","Science","Medical","Coding","Creative"],
+                    value="Math", label="Domain"
+                )
                 diff_dd = gr.Dropdown(["Easy","Medium","Hard"], value="Easy", label="Difficulty")
+                get_btn = gr.Button("🎲  Get Question", variant="primary", scale=1)
+            question_box = gr.Markdown(
+                "<div style='color:#3a4a6a;font-style:italic;padding:12px;'>"
+                "Select a domain and difficulty, then click Get Question.</div>"
+            )
             with gr.Row():
+                with gr.Column(scale=2):
+                    conf_sl = gr.Slider(0, 100, value=50, step=5,
+                                        label="Confidence  (0 = no idea · 100 = certain)")
+                with gr.Column(scale=3):
+                    ans_box = gr.Textbox(label="Your Answer", placeholder="Type your answer…",
+                                        lines=1)
+            sub_btn = gr.Button("✅  Submit Answer", variant="primary")
             with gr.Row():
+                result_html = gr.HTML()
+                stats_html  = gr.HTML()
             tip_md = gr.Markdown()
             get_btn.click(get_question, [dom_dd, diff_dd], [question_box, ans_box])
+            sub_btn.click(submit_answer, [conf_sl, ans_box], [result_html, stats_html, tip_md])
+        # ── Tab 2: Battle ─────────────────────────────────────────────────────
+        with gr.Tab("⚔  ECHO vs Overconfident AI"):
+            gr.HTML(_section_header(
+                "⚔ ECHO vs Overconfident AI",
+                "10-question head-to-head: calibrated ECHO vs AlwaysHigh baseline (always 90% confident)",
+                "#ff4466"
+            ))
+            with gr.Row():
+                scenario_dd = gr.Dropdown(
+                    ["Mixed","Math","Logic","Factual","Science","Medical","Coding","Creative"],
+                    value="Mixed", label="Test Scenario"
+                )
+                run_btn = gr.Button("⚔  Run 10 Questions", variant="primary")
+            with gr.Row():
+                with gr.Column(scale=3):
+                    cmp_html = gr.HTML()
+                with gr.Column(scale=2):
+                    mini_img = gr.Image(label="Live Reliability Diagram", type="filepath",
+                                        show_label=True, height=320)
+            run_btn.click(run_comparison, [scenario_dd], [cmp_html, mini_img])
+        # ── Tab 3: Fingerprint ─────────────────────��──────────────────────────
+        with gr.Tab("🧬  Epistemic Fingerprint"):
+            gr.HTML(_section_header(
+                "🧬 Epistemic Fingerprint",
+                "Radar chart of calibration across all 7 domains — larger green = better everywhere",
+                "#a855f7"
+            ))
+            with gr.Row():
+                model_dd = gr.Dropdown(
+                    ["ECHO Trained","Untrained","Heuristic"],
+                    value="ECHO Trained", label="Model"
+                )
+                fp_btn = gr.Button("🔬  Generate Fingerprint", variant="primary")
+            with gr.Row():
+                with gr.Column(scale=3):
+                    fp_img = gr.Image(label="Epistemic Fingerprint", type="filepath",
+                                      value=_img("fingerprint"), height=480)
+                with gr.Column(scale=2):
+                    fp_bars   = gr.HTML()
+                    fp_insight = gr.HTML()
+            fp_btn.click(generate_fingerprint, [model_dd], [fp_img, fp_bars, fp_insight])
+        # ── Tab 4: Training Evidence ──────────────────────────────────────────
+        with gr.Tab("📊  Training Evidence"):
+            gr.HTML(_section_header(
+                "📊 Training Evidence",
+                "6 plots generated from GRPO training — from random overconfidence to precise calibration",
+                "#ffd700"
+            ))
+            gr.HTML("""
+<div style='background:rgba(0,255,163,0.05);border:1px solid rgba(0,255,163,0.2);
+  border-radius:10px;padding:16px 20px;margin-bottom:8px;'>
+  <div style='font-size:15px;font-weight:700;color:#00ffa3;margin-bottom:6px;'>
+    ★ Hero Plot — Reliability Diagram</div>
+  <div style='color:#6677aa;font-size:13px;'>
+    The smoking gun. Untrained model (red): flat line far from the diagonal — always overconfident.
+    ECHO trained (green): hugs the perfect calibration diagonal.
+  </div>
+</div>""")
+            gr.Image(value=_img("reliability"), label="Reliability Diagram", height=380)
             with gr.Row():
                 with gr.Column():
+                    gr.HTML("<div style='font-size:13px;font-weight:600;color:#4488ff;"
+                            "margin:8px 0 4px;'>📈 Training Curves</div>"
+                            "<div style='font-size:12px;color:#4a5a8a;margin-bottom:8px;'>"
+                            "ECE drops 0.34 → 0.08 across 3 curriculum phases</div>")
+                    gr.Image(value=_img("training"), label="Training Curves", height=300)
                 with gr.Column():
+                    gr.HTML("<div style='font-size:13px;font-weight:600;color:#a855f7;"
+                            "margin:8px 0 4px;'>🧬 Epistemic Fingerprint</div>"
+                            "<div style='font-size:12px;color:#4a5a8a;margin-bottom:8px;'>"
+                            "Domain-level calibration — green fills every axis</div>")
+                    gr.Image(value=_img("fingerprint"), label="Epistemic Fingerprint", height=300)
             with gr.Row():
                 with gr.Column():
+                    gr.HTML("<div style='font-size:13px;font-weight:600;color:#ffd700;"
+                            "margin:8px 0 4px;'>🌡️ Calibration Heatmap</div>"
+                            "<div style='font-size:12px;color:#4a5a8a;margin-bottom:8px;'>"
+                            "7 domains × 3 difficulties — red=bad, green=good</div>")
+                    gr.Image(value=_img("heatmap"), label="Calibration Heatmap", height=300)
                 with gr.Column():
+                    gr.HTML("<div style='font-size:13px;font-weight:600;color:#ff8c00;"
+                            "margin:8px 0 4px;'>📊 Confidence Distribution</div>"
+                            "<div style='font-size:12px;color:#4a5a8a;margin-bottom:8px;'>"
+                            "Untrained: spike at 85–95%. ECHO: spread = actual accuracy</div>")
+                    gr.Image(value=_img("distribution"), label="Confidence Distribution", height=300)
+            gr.HTML("<div style='font-size:13px;font-weight:600;color:#ff4466;"
+                    "margin:8px 0 4px;'>🏢 Domain Comparison</div>"
+                    "<div style='font-size:12px;color:#4a5a8a;margin-bottom:8px;'>"
+                    "ECE improvement across all 7 domains</div>")
+            gr.Image(value=_img("domain"), label="Domain Comparison", height=320)
+            regen_btn = gr.Button("🔄  Regenerate All Plots", variant="secondary")
+            regen_status = gr.HTML()
             def regen():
                 from training.evaluate import make_synthetic_pair, compare_and_plot
                 before, after = make_synthetic_pair()
                 paths = compare_and_plot(after, {"Untrained": before})
+                html = ("<div style='color:#00ffa3;font-size:13px;font-weight:600;"
+                        "padding:8px 12px;background:rgba(0,255,163,0.06);"
+                        "border-radius:6px;'>✅ All 6 plots regenerated</div>")
+                return html
+            regen_btn.click(regen, outputs=[regen_status])
+        # ── Tab 5: Evaluation ─────────────────────────────────────────────────
+        with gr.Tab("🏆  Official Evaluation"):
+            gr.HTML(_section_header(
+                "🏆 Official OpenEnv Evaluation",
+                "3 tasks × 30 episodes — validates ECHO meets the benchmark thresholds",
+                "#ffd700"
+            ))
+            gr.HTML("""
+<div style='display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px;'>
+  <div style='background:rgba(68,136,255,0.06);border:1px solid rgba(68,136,255,0.15);
+    border-radius:8px;padding:12px 16px;'>
+    <div style='color:#4488ff;font-weight:700;font-size:13px;'>Task 1 — Easy</div>
+    <div style='color:#3a4a6a;font-size:12px;margin-top:4px;'>ECE target: &lt; 0.15</div>
+  </div>
+  <div style='background:rgba(255,187,0,0.06);border:1px solid rgba(255,187,0,0.15);
+    border-radius:8px;padding:12px 16px;'>
+    <div style='color:#ffbb00;font-weight:700;font-size:13px;'>Task 2 — Medium</div>
+    <div style='color:#3a4a6a;font-size:12px;margin-top:4px;'>ECE target: &lt; 0.20</div>
+  </div>
+  <div style='background:rgba(168,85,247,0.06);border:1px solid rgba(168,85,247,0.15);
+    border-radius:8px;padding:12px 16px;'>
+    <div style='color:#a855f7;font-weight:700;font-size:13px;'>Task 3 — Hard</div>
+    <div style='color:#3a4a6a;font-size:12px;margin-top:4px;'>ECE target: &lt; 0.25</div>
+  </div>
+</div>""")
+            eval_btn = gr.Button("🚀  Run Full Evaluation  (90 episodes)", variant="primary")
+            result_html = gr.HTML()
+            with gr.Accordion("📄 Raw JSON output", open=False):
                 json_out = gr.Code(language="json")
+            eval_btn.click(run_evaluation, outputs=[result_html, json_out])
+        # ── Tab 6: Live Training ───────────────────────────────────────────────
+        with gr.Tab("⚡  Live Training"):
+            gr.HTML(_section_header(
+                "⚡ Live GRPO Training",
+                "Watch ECE drop in real-time as the model trains. Dashed lines = pass thresholds.",
+                "#4488ff"
+            ))
             with gr.Row():
+                lt_start_btn = gr.Button("🚀  Start Live Training Demo", variant="primary", scale=2)
+                lt_stop_btn  = gr.Button("⏹  Stop", variant="stop", scale=1)
+            lt_status = gr.Textbox(
+                label="Training Log",
+                value="Ready — click Start to simulate GRPO training.",
+                lines=2, interactive=False,
+                elem_classes=["terminal-box"],
+            )
+            lt_plot = gr.Image(
+                label="ECE During Training",
+                type="filepath", height=380,
             )
             lt_progress = gr.Slider(
                 minimum=0, maximum=100, value=0,
+                label="Progress (%)", interactive=False,
             )
+            lt_start_btn.click(start_live_training,
+                               outputs=[lt_status, lt_plot, lt_progress])
             lt_stop_btn.click(stop_live_training, outputs=[lt_status])
     return demo
 def main():
+    import gradio as gr
     logging.basicConfig(level=logging.INFO)
     demo = build_app()
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=cfg.GRADIO_PORT,
+        share=False,
+        show_error=True,
+        css=_CSS,
+        theme=gr.themes.Base(
+            primary_hue=gr.themes.colors.blue,
+            neutral_hue=gr.themes.colors.slate,
+            font=[gr.themes.GoogleFont("Inter"), "sans-serif"],
+        ),
+    )
 if __name__ == "__main__":