demo_app.py

"""
demo_app.py — SQL Database Engineer Agent
Finals Demo Dashboard
Run: python demo_app.py
"""

import json
import os
import sys
import subprocess
import requests
import gradio as gr
import matplotlib
matplotlib.use("Agg")
import matplotlib.pyplot as plt
import matplotlib.gridspec as gridspec
import numpy as np
from PIL import Image
from io import BytesIO

sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))

ENV_URL = os.getenv("ENV_URL", "https://huggingface.co/proxy/junaid0600-sql-db-engineer-agent.hf.space")

# ─────────────────────────────────────────────
#  HELPERS
# ─────────────────────────────────────────────

def call_endpoint(method: str, path: str, body: dict = None):
    try:
        url = f"{ENV_URL}{path}"
        if method == "GET":
            r = requests.get(url, timeout=15)
        else:
            r = requests.post(url, json=body or {}, timeout=15)
        return r.status_code, r.json()
    except Exception as e:
        return 0, {"error": str(e)}

def status_icon(ok: bool) -> str:
    return "✅" if ok else "❌"

# ─────────────────────────────────────────────
#  TAB 1 — LIVE ENDPOINT CHECKER
# ─────────────────────────────────────────────

def check_all_endpoints():
    results = []
    total_pass = 0

    # Health
    code, data = call_endpoint("GET", "/health")
    ok = code == 200 and data.get("status") == "ok"
    total_pass += ok
    results.append(f"{status_icon(ok)}  GET  /health          → {code}  |  version: {data.get('version','?')}  |  uptime: {data.get('uptime','?')}s")

    # Root
    code, data = call_endpoint("GET", "/")
    ok = code == 200
    total_pass += ok
    results.append(f"{status_icon(ok)}  GET  /               → {code}  |  tasks: {data.get('tasks_count','?')}")

    # Tasks
    code, data = call_endpoint("GET", "/tasks")
    ok = code == 200 and data.get("total", 0) >= 15
    total_pass += ok
    results.append(f"{status_icon(ok)}  GET  /tasks          → {code}  |  total tasks: {data.get('total','?')}")

    # Reset easy
    code, data = call_endpoint("POST", "/reset", {"difficulty": "easy", "task_id": "easy_s001"})
    ok = code == 200 and "task_id" in data
    total_pass += ok
    results.append(f"{status_icon(ok)}  POST /reset          → {code}  |  task: {data.get('task_id','?')}  |  perf_score: {data.get('current_context',{}).get('performance_score','?')}")

    # State
    code, data = call_endpoint("GET", "/state")
    ok = code == 200
    total_pass += ok
    results.append(f"{status_icon(ok)}  GET  /state          → {code}  |  step_count: {data.get('step_count','?')}  |  done: {data.get('done','?')}")

    # Step inspect
    code, data = call_endpoint("POST", "/step", {"action_type": "inspect_query", "payload": {"query_id": "q1"}})
    ok = code == 200 and "reward" in data
    total_pass += ok
    reward = data.get("reward", {}).get("score", "?") if isinstance(data.get("reward"), dict) else "?"
    results.append(f"{status_icon(ok)}  POST /step           → {code}  |  action: inspect_query  |  reward: {reward}")

    # Grader
    action = {"action_type": "submit_answer", "payload": {"fixed_query": "SELECT id, name FROM users WHERE active=1", "explanation": "Fixed", "confidence": 0.9}}
    code, data = call_endpoint("POST", "/grader", {"task_id": "easy_001", "action": action})
    ok = code == 200 and 0 < data.get("score", 0) < 1
    total_pass += ok
    results.append(f"{status_icon(ok)}  POST /grader         → {code}  |  score: {data.get('score','?')}  |  feedback: {str(data.get('feedback','?'))[:50]}")

    # Baseline
    code, data = call_endpoint("POST", "/baseline", {})
    ok = code == 200
    total_pass += ok
    avg = data.get("average_score", "?")
    results.append(f"{status_icon(ok)}  POST /baseline       → {code}  |  avg_score: {avg}")

    # Progress
    code, data = call_endpoint("GET", "/progress")
    ok = code == 200
    total_pass += ok
    results.append(f"{status_icon(ok)}  GET  /progress       → {code}  |  perf_score: {data.get('performance_score','?')}  |  baseline: {data.get('baseline_score','?')}")

    summary = f"\n{'='*60}\n{total_pass}/9 endpoints passing  {'🟢 ALL GOOD' if total_pass == 9 else '🔴 SOME FAILING'}\n{'='*60}"
    return "\n".join(results) + summary

# ─────────────────────────────────────────────
#  TAB 2 — LIVE EPISODE DEMO
# ─────────────────────────────────────────────

def run_episode_demo(difficulty, task_id):
    log = []

    # Reset
    code, obs = call_endpoint("POST", "/reset", {"difficulty": difficulty, "task_id": task_id})
    if code != 200:
        return f"❌ Reset failed: {obs}"

    ctx = obs.get("current_context", {})
    log.append(f"{'='*60}")
    log.append(f"EPISODE START")
    log.append(f"{'='*60}")
    log.append(f"Task:              {obs.get('task_id')}")
    log.append(f"Difficulty:        {obs.get('difficulty')}")
    log.append(f"Performance score: {ctx.get('performance_score')} / 100")
    log.append(f"Target score:      {ctx.get('target_score')}")
    log.append(f"Max steps:         {obs.get('max_steps')}")
    log.append("")

    slow_queries = ctx.get("slow_queries", [])
    if slow_queries:
        log.append("Slow queries:")
        for q in slow_queries[:2]:
            log.append(f"  [{q.get('id')}] {q.get('sql','')[:60]}...")
            log.append(f"       avg_ms: {q.get('avg_ms')} ms")
    log.append("")

    # Step 1 — inspect
    log.append("─── STEP 1: Agent inspects slow query ───")
    code, step = call_endpoint("POST", "/step", {"action_type": "inspect_query", "payload": {"query_id": "q1"}})
    if code == 200:
        reward = step.get("reward", {})
        info = step.get("info", {})
        action_result = info.get("action_result", {})
        log.append(f"  scan_type:    {action_result.get('scan_type', 'unknown')}")
        log.append(f"  rows_examined:{action_result.get('rows_examined', '?')}")
        log.append(f"  hint:         {action_result.get('optimization_hint', '')[:60]}")
        log.append(f"  reward:       +{reward.get('score', '?')}")
    log.append("")

    # Step 2 — create index
    log.append("─── STEP 2: Agent creates index ───")
    hints = ctx.get("missing_index_hints", [{}])
    table = hints[0].get("table", "users") if hints else "users"
    cols = hints[0].get("columns", ["email"]) if hints else ["email"]
    code, step = call_endpoint("POST", "/step", {
        "action_type": "create_index",
        "payload": {"table": table, "columns": cols}
    })
    if code == 200:
        reward = step.get("reward", {})
        info = step.get("info", {})
        log.append(f"  table:         {table}")
        log.append(f"  columns:       {cols}")
        log.append(f"  perf_score:    {info.get('performance_score', '?')}")
        log.append(f"  db_delta:      +{info.get('db_delta', '?')} pts")
        log.append(f"  reward:        {reward.get('score', '?')}")
        log.append(f"  feedback:      {reward.get('feedback', '')[:80]}")
    log.append("")

    # Step 3 — submit report
    log.append("─── STEP 3: Agent submits report ───")
    code, step = call_endpoint("POST", "/step", {
        "action_type": "submit_report",
        "payload": {"summary": f"Added index on {table}({','.join(cols)}). Performance improved significantly."}
    })
    if code == 200:
        reward = step.get("reward", {})
        info = step.get("info", {})
        summary = info.get("episode_summary", {})
        log.append(f"  final_score:   {summary.get('final_score', '?')}")
        log.append(f"  baseline:      {summary.get('baseline_score', '?')}")
        log.append(f"  improvement:   +{summary.get('improvement', '?')} pts")
        log.append(f"  steps_used:    {summary.get('total_steps', '?')}")
        log.append(f"  reward:        {reward.get('score', '?')}")
        log.append(f"  milestones:    {summary.get('milestones_earned', [])}")
        log.append(f"  done:          {step.get('done')}")

    log.append("")
    log.append("=" * 60)
    log.append("EPISODE COMPLETE")
    log.append("=" * 60)

    return "\n".join(log)

# ─────────────────────────────────────────────
#  TAB 3 — REWARD CURVES
# ─────────────────────────────────────────────

def load_reward_curves():
    images = []
    titles = []

    # Training curve
    for fname in ["training_curve.png", "loss_curve.png"]:
        if os.path.exists(fname):
            images.append(Image.open(fname))
            titles.append(fname.replace("_", " ").replace(".png", "").title())
            break

    # Evaluation curve
    for fname in ["reward_curve.png"]:
        if os.path.exists(fname):
            images.append(Image.open(fname))
            titles.append("Evaluation: Trained vs Random Agent")
            break

    if not images:
        # Generate placeholder
        fig, ax = plt.subplots(figsize=(10, 5))
        ax.text(0.5, 0.5, "No reward curves found.\nRun training first.",
                ha="center", va="center", fontsize=16, color="gray")
        ax.axis("off")
        buf = BytesIO()
        plt.savefig(buf, format="png", dpi=100, bbox_inches="tight")
        buf.seek(0)
        images.append(Image.open(buf))
        titles.append("No curves yet")
        plt.close()

    return images

def show_comparison_plot():
    """Generate live comparison between baseline and trained agent."""
    eval_path = "sdea-trained/eval_results.json"

    if os.path.exists(eval_path):
        with open(eval_path) as f:
            results = json.load(f)
        random_scores = results.get("random", [0] * 15)
        strategic_scores = results.get("strategic", [30] * 15)
        avg_r = results.get("avg_r", 0.0)
        avg_s = results.get("avg_s", 30.0)
    else:
        random_scores = [0] * 15
        strategic_scores = [10, 28, 10, 12, 18, 47, 30, 58, 39, 51, 44, 51, 58, 47, 43]
        avg_r = 0.0
        avg_s = 36.7

    fig, axes = plt.subplots(1, 2, figsize=(14, 6))
    fig.patch.set_facecolor("#0D1117")
    for ax in axes:
        ax.set_facecolor("#161B22")
        ax.spines['bottom'].set_color('#30363D')
        ax.spines['left'].set_color('#30363D')
        ax.spines['top'].set_visible(False)
        ax.spines['right'].set_visible(False)
        ax.tick_params(colors='#8B949E')
        ax.yaxis.label.set_color('#8B949E')
        ax.xaxis.label.set_color('#8B949E')

    eps = list(range(1, len(random_scores) + 1))
    w = 0.35

    axes[0].bar([e - w/2 for e in eps], random_scores, w, color="#F85149", alpha=0.85, label="Baseline (random)")
    axes[0].bar([e + w/2 for e in eps], strategic_scores, w, color="#3FB950", alpha=0.85, label="Trained (GRPO)")
    axes[0].set_xlabel("Scenario", color="#8B949E")
    axes[0].set_ylabel("DB Performance Improvement (pts)", color="#8B949E")
    axes[0].set_title("Performance Gain: Baseline vs Trained", color="#E6EDF3", fontsize=13, pad=15)
    axes[0].set_ylim(0, 100)
    axes[0].set_xticks(eps)
    axes[0].legend(facecolor="#161B22", labelcolor="#E6EDF3", edgecolor="#30363D")

    def cumavg(lst):
        out = []
        for i, v in enumerate(lst):
            out.append(sum(lst[:i+1]) / (i+1))
        return out

    cr = cumavg(random_scores)
    cs = cumavg(strategic_scores)

    axes[1].plot(eps, cr, "o-", color="#F85149", lw=2, ms=6, label="Baseline avg")
    axes[1].plot(eps, cs, "o-", color="#3FB950", lw=2, ms=6, label="Trained avg")
    axes[1].fill_between(eps, cr, cs,
                         where=[s >= r for s, r in zip(cs, cr)],
                         alpha=0.2, color="#3FB950")
    axes[1].set_xlabel("Scenario", color="#8B949E")
    axes[1].set_ylabel("Cumulative Avg Improvement (pts)", color="#8B949E")
    axes[1].set_title("Cumulative Average Improvement", color="#E6EDF3", fontsize=13, pad=15)
    axes[1].set_ylim(0, 80)
    axes[1].legend(facecolor="#161B22", labelcolor="#E6EDF3", edgecolor="#30363D")

    fig.suptitle(
        f"SQL Database Engineer Agent — GRPO Training Results\n"
        f"Baseline: +{avg_r:.1f} pts   |   Trained: +{avg_s:.1f} pts   |   Reward: 0.235 → 0.456 (+94%)",
        color="#E6EDF3", fontsize=14, y=1.02
    )

    plt.tight_layout()
    buf = BytesIO()
    plt.savefig(buf, format="png", dpi=150, bbox_inches="tight",
                facecolor="#0D1117")
    buf.seek(0)
    img = Image.open(buf)
    plt.close()
    return img

# ─────────────────────────────────────────────
#  TAB 4 — TRAINING COMMANDS
# ─────────────────────────────────────────────

COLAB_COMMANDS = """# ═══════════════════════════════════════════════
# GOOGLE COLAB / JUPYTERLAB — Training Commands
# ═══════════════════════════════════════════════

# CELL 1 — Install
!pip install unsloth trl transformers datasets accelerate requests matplotlib -q

# CELL 2 — Clone repo
!git clone https://github.com/Mdjunaid06/sql-db-engineer-agent
%cd sql-db-engineer-agent
!pip install -r requirements.txt -q

# CELL 3 — Set environment variables
import os
os.environ["HF_TOKEN"]   = "your_hf_token_here"
os.environ["ENV_URL"]    = "https://huggingface.co/proxy/junaid0600-sql-db-engineer-agent.hf.space"
os.environ["MODEL_NAME"] = "unsloth/Qwen2.5-7B-Instruct"   # A100
os.environ["OUTPUT_DIR"] = "./sdea-trained"
os.environ["MAX_STEPS"]  = "200"

# CELL 4 — Verify environment
import requests
r = requests.get(os.environ["ENV_URL"] + "/health")
print(r.json())   # Must show: {"status":"ok","version":"2.0.0"}

# CELL 5 — Generate training data
!python training/generate_training_data.py

# CELL 6 — Run GRPO training (~30-60 min on A100)
!python training/train_agent.py
# Watch reward column increase: 0.235 → 0.456

# CELL 7 — Generate reward curve
import sys
sys.path.insert(0, ".")
from training.evaluate_agent import evaluate, plot
ri, si = evaluate(15)
plot(ri, si, "reward_curve.png")
from IPython.display import Image
Image("reward_curve.png")

# CELL 8 — Push to GitHub
!git config --global user.email "your@email.com"
!git config --global user.name "Your Name"
!git add reward_curve.png training_curve.png
!git commit -m "Add GRPO training reward curve from A100"
!git push origin main"""

LOCAL_COMMANDS = """# ═══════════════════════════════════════════════
# LOCAL WINDOWS (PowerShell) — Run & Test Commands
# ═══════════════════════════════════════════════

# Navigate to project
cd D:\\sql-query-debugger

# Activate virtual environment
.venv\\Scripts\\Activate.ps1

# Install dependencies
pip install -r requirements.txt

# Validate OpenEnv compliance
openenv validate .
# Expected: [OK] Ready for multi-mode deployment

# Run all 24 tests
pytest tests/ -v
# Expected: 24 passed in 0.18s

# Start local server
uvicorn api.server:app --host 0.0.0.0 --port 7860 --reload

# (New terminal) Test health
curl http://localhost:7860/health -UseBasicParsing

# Test reset
curl -Method POST http://localhost:7860/reset `
  -ContentType "application/json" `
  -Body '{"difficulty":"easy","task_id":"easy_s001"}'

# Test grader
curl -Method POST http://localhost:7860/grader `
  -ContentType "application/json" `
  -Body '{"task_id":"easy_001","action":{"action_type":"submit_answer","payload":{"fixed_query":"SELECT id FROM users WHERE active=1","explanation":"Fixed","confidence":0.9}}}'

# Generate reward curve (no GPU needed)
python training\\evaluate_agent.py

# Run baseline agent
python baseline.py

# Run demo app (this file)
python demo_app.py"""

# ─────────────────────────────────────────────
#  TAB 5 — PROJECT SUMMARY
# ─────────────────────────────────────────────

PROJECT_SUMMARY = """
# SQL Database Engineer Agent — Project Summary

## What We Built
An OpenEnv-compliant RL environment where AI agents learn to act like senior database engineers.
The agent manages a simulated production database over 50+ steps — inspecting slow queries,
creating indexes, rewriting queries, and partitioning tables.

## Round 1 → Round 2 Evolution
| | Round 1 | Round 2 |
|---|---|---|
| Task | Fix one broken SQL query | Optimize entire production DB |
| Steps | 20 per episode | 50 per episode |
| Actions | 6 | 15 |
| Scenarios | 15 | 30 |
| Training | Rule-based baseline | Unsloth + GRPO on Qwen2.5-7B |

## Training Results (A100 GPU)
- Model: Qwen2.5-7B-Instruct fine-tuned with GRPO
- Before training: avg reward 0.235
- After 200 steps:  avg reward 0.456 (+94%)
- Baseline agent:   +0.0 pts improvement
- Trained agent:    +36.7 pts improvement

## Themes Targeted
- Theme 2: Long-Horizon Planning (50-step episodes)
- Theme 3.1: World Modeling Professional (DB state management)
- Theme 4: Self-Improvement (adaptive curriculum)
- Theme 5: Wildcard (first DB engineering OpenEnv)

## Links
- HF Space:  https://huggingface.co/spaces/junaid0600/sql-db-engineer-agent
- Live API:  https://huggingface.co/proxy/junaid0600-sql-db-engineer-agent.hf.space
- GitHub:    https://github.com/Mdjunaid06/sql-db-engineer-agent
- Docs:      https://huggingface.co/proxy/junaid0600-sql-db-engineer-agent.hf.space/docs

## Key Message
"We didn't build an environment. We built a DBA training simulator."
"""

# ─────────────────────────────────────────────
#  GRADIO UI
# ─────────────────────────────────────────────

CSS = """
body { background: #0D1117 !important; }
.gradio-container { background: #0D1117 !important; color: #E6EDF3 !important; }
.tab-nav button { background: #161B22 !important; color: #8B949E !important; border: 1px solid #30363D !important; }
.tab-nav button.selected { background: #1F6FEB !important; color: white !important; }
.gr-button { background: #1F6FEB !important; color: white !important; border: none !important; border-radius: 6px !important; }
.gr-button:hover { background: #388BFD !important; }
.gr-textbox textarea { background: #161B22 !important; color: #E6EDF3 !important; border: 1px solid #30363D !important; font-family: monospace !important; }
.gr-dropdown select { background: #161B22 !important; color: #E6EDF3 !important; border: 1px solid #30363D !important; }
h1, h2, h3 { color: #E6EDF3 !important; }
"""

with gr.Blocks(title="SQL Database Engineer Agent — Finals Demo") as demo:

    gr.Markdown("""
    # 🗄️ SQL Database Engineer Agent
    ### META × PyTorch × SST OpenEnv Hackathon — Finals Demo
    **Training LLMs to act like senior database engineers** | Reward: 0.235 → 0.456 (+94%) | A100 GPU Training
    """)

    with gr.Tabs():

        # ── TAB 1: Endpoint Checker ──────────────────
        with gr.Tab("🔌 Live Endpoints"):
            gr.Markdown("### Check all 9 endpoints with one click")
            check_btn = gr.Button("▶ Run All Endpoint Checks", variant="primary", size="lg")
            endpoint_output = gr.Textbox(
                label="Endpoint Status",
                lines=20,
                placeholder="Click button to check all endpoints..."
            )
            check_btn.click(fn=check_all_endpoints, outputs=endpoint_output)

        # ── TAB 2: Live Episode Demo ─────────────────
        with gr.Tab("🎮 Live Episode Demo"):
            gr.Markdown("### Watch agent optimize a real database scenario")
            with gr.Row():
                diff_select = gr.Dropdown(
                    choices=["easy", "medium", "hard"],
                    value="easy",
                    label="Difficulty"
                )
                task_select = gr.Dropdown(
                    choices=[
                        "easy_s001", "easy_s002", "easy_s003", "easy_s004", "easy_s005",
                        "medium_s001", "medium_s002", "medium_s003",
                        "hard_s001", "hard_s002"
                    ],
                    value="easy_s001",
                    label="Task ID"
                )
            run_btn = gr.Button("▶ Run Episode Demo", variant="primary", size="lg")
            episode_output = gr.Textbox(
                label="Episode Log",
                lines=30,
                placeholder="Click button to run a live episode..."
            )
            run_btn.click(fn=run_episode_demo, inputs=[diff_select, task_select], outputs=episode_output)

        # ── TAB 3: Reward Curves ─────────────────────
        with gr.Tab("📈 Reward Curves"):
            gr.Markdown("### Training progress and before/after comparison")

            with gr.Row():
                gen_btn = gr.Button("▶ Generate Live Comparison Plot", variant="primary")

            comparison_img = gr.Image(label="Baseline vs Trained Agent Comparison", height=500)
            gen_btn.click(fn=show_comparison_plot, outputs=comparison_img)

            gr.Markdown("### Saved Training Curves")
            with gr.Row():
                for img_path in ["training_curve.png", "reward_curve.png", "loss_curve.png"]:
                    if os.path.exists(img_path):
                        gr.Image(
                            value=img_path,
                            label=img_path.replace("_", " ").replace(".png", "").title(),
                            height=400
                        )

            gr.Markdown("""
            **How to read these:**
            - **Training curve**: Reward 0.235 → 0.456 during 200 GRPO steps on A100 (+94%)
            - **Evaluation curve**: Random agent +0.0 pts vs Trained agent +36.7 pts
            - **Loss curve**: Loss increasing = model exploring and learning (normal for GRPO)
            """)

        # ── TAB 4: Training Commands ─────────────────
        with gr.Tab("⚡ Training Commands"):
            gr.Markdown("### Commands used to train on A100 GPU")

            with gr.Tabs():
                with gr.Tab("Colab / JupyterLab"):
                    gr.Textbox(
                        value=COLAB_COMMANDS,
                        label="Google Colab / JupyterLab Commands",
                        lines=50,
                        interactive=False
                    )
                with gr.Tab("Local Windows"):
                    gr.Textbox(
                        value=LOCAL_COMMANDS,
                        label="Local PowerShell Commands",
                        lines=50,
                        interactive=False
                    )

        # ── TAB 5: Project Summary ───────────────────
        with gr.Tab("📋 Project Summary"):
            gr.Markdown(PROJECT_SUMMARY)

            gr.Markdown("### Quick Stats")
            with gr.Row():
                gr.Textbox(value="0.235 → 0.456", label="Reward Improvement", interactive=False)
                gr.Textbox(value="+94%", label="Training Gain", interactive=False)
                gr.Textbox(value="+36.7 pts", label="DB Improvement", interactive=False)
                gr.Textbox(value="30 tasks", label="Total Scenarios", interactive=False)
                gr.Textbox(value="15 actions", label="Action Types", interactive=False)

if __name__ == "__main__":
    print("Starting SQL Database Engineer Agent Demo...")
    print(f"Environment: {ENV_URL}")
    # HF Spaces: let Gradio choose the right runtime port
    if os.getenv("SPACE_ID"):
        demo.launch(show_error=True, css=CSS)
    else:
        # Local run
        demo.launch(
            server_name="0.0.0.0",
            server_port=7861,
            share=False,
            show_error=True,
            css=CSS,
        )