Upload 2 files

app.py

@@ -0,0 +1,753 @@
+"""
+app.py — Car Racing Agent · Gradio Demo
+OpenEnv Student Challenge 2026 · NirmalPratheep
+"""
+
+import os, sys, tempfile, uuid, traceback
+
+_APP_DIR = os.path.dirname(os.path.abspath(__file__))
+# Local layout: app.py lives in app/, repo root is parent.
+# HF Space layout: app.py sits at root alongside game/, env/, training/.
+_ROOT    = _APP_DIR if os.path.isdir(os.path.join(_APP_DIR, "game")) else os.path.dirname(_APP_DIR)
+sys.path.insert(0, _ROOT)
+sys.path.insert(1, os.path.join(_ROOT, "training"))
+
+os.environ.setdefault("SDL_VIDEODRIVER", "dummy")
+os.environ.setdefault("SDL_AUDIODRIVER", "dummy")
+
+import gradio as gr
+import numpy as np
+import torch
+from PIL import Image, ImageDraw, ImageFont
+
+from game.rl_splits import TRAIN, _ensure_pygame
+from env.environment import RaceEnvironment
+from env.models import DriveAction
+from train_torchrl import build_policy_and_value
+
+_ensure_pygame()
+import pygame
+from game.oval_racer import draw_car, draw_headlights
+
+# ── Constants ─────────────────────────────────────────────────────────────────
+STEP_CHUNK        = 20
+MAX_STEPS         = 3000
+LAPS_TARGET       = 1
+FRAME_W, FRAME_H  = 540, 360
+HEADLIGHT_PX      = 192
+DEVICE            = torch.device("cpu")
+
+_CKPT_CANDIDATES  = [
+    os.path.join(_APP_DIR, "ppo_torchrl_final.pt"),
+    os.path.join(_ROOT,    "ppo_torchrl_final.pt"),
+    os.path.join(_ROOT,    "checkpoints", "ppo_torchrl_final.pt"),
+]
+CKPT_PATH = next((p for p in _CKPT_CANDIDATES if os.path.isfile(p)), None)
+POLICY    = None
+
+
+def _load_policy():
+    global POLICY
+    if POLICY is not None:
+        return POLICY
+    if CKPT_PATH is None:
+        raise RuntimeError("Checkpoint not found. Put ppo_torchrl_final.pt in app/ or checkpoints/")
+    policy, _, _ = build_policy_and_value(DEVICE)
+    ckpt = torch.load(CKPT_PATH, map_location="cpu", weights_only=False)
+    sd   = ckpt.get("policy", ckpt.get("model", {}))
+    if any(k.startswith("_orig_mod.") for k in sd):
+        sd = {k.replace("_orig_mod.", "", 1): v for k, v in sd.items()}
+    policy.load_state_dict(sd)
+    policy.eval()
+    POLICY = policy
+    print(f"✓ Policy loaded: {CKPT_PATH}")
+    return POLICY
+
+
+# ── Rendering ─────────────────────────────────────────────────────────────────
+
+def _surf_to_pil(surf, size) -> Image.Image:
+    small = pygame.transform.scale(surf, size)
+    arr   = pygame.surfarray.array3d(small).transpose(1, 0, 2)
+    return Image.fromarray(arr.astype(np.uint8))
+
+
+def _game_frame(race_env, trail=None) -> Image.Image:
+    ce   = race_env._env
+    surf = ce.track.surface.copy()
+    # Draw path trail before car so car renders on top
+    if trail and len(trail) > 1:
+        scale_x = FRAME_W / 900
+        scale_y = FRAME_H / 600
+        for i, (px, py) in enumerate(trail):
+            alpha = max(60, int(255 * i / len(trail)))
+            r = max(2, int(4 * i / len(trail)))
+            color = (255, int(140 * i / len(trail)), 0)  # orange fade-in
+            pygame.draw.circle(surf, color, (int(px), int(py)), r)
+    draw_headlights(surf, ce._x, ce._y, ce._angle)
+    draw_car(surf, ce._x, ce._y, ce._angle)
+    return _surf_to_pil(surf, (FRAME_W, FRAME_H))
+
+
+def _headlight_frame(race_env) -> Image.Image:
+    img64 = race_env._render_headlight_image()
+    return Image.fromarray(img64).resize((HEADLIGHT_PX, HEADLIGHT_PX), Image.NEAREST)
+
+
+def _placeholder(w, h, text, bg=(15, 17, 26), fg=(80, 90, 120)) -> Image.Image:
+    img  = Image.new("RGB", (w, h), bg)
+    draw = ImageDraw.Draw(img)
+    try:
+        font = ImageFont.truetype("arial.ttf", 18)
+    except Exception:
+        font = ImageFont.load_default()
+    bb = draw.textbbox((0, 0), text, font=font)
+    tw, th = bb[2] - bb[0], bb[3] - bb[1]
+    draw.text(((w - tw) // 2, (h - th) // 2), text, fill=fg, font=font)
+    return img
+
+
+def _placeholder_main():
+    return _placeholder(FRAME_W, FRAME_H, "← Click  Reset  to load the track")
+
+def _placeholder_pov():
+    return _placeholder(HEADLIGHT_PX, HEADLIGHT_PX, "POV", fg=(100, 110, 140))
+
+
+def _agent_action(obs):
+    from tensordict import TensorDict
+    from torchrl.envs.utils import ExplorationType, set_exploration_type
+    policy  = _load_policy()
+    img     = (torch.from_numpy(obs.image.copy())
+               .float().div(255.0).permute(2, 0, 1).unsqueeze(0).to(DEVICE))
+    scalars = torch.tensor(obs.scalars, dtype=torch.float32, device=DEVICE).unsqueeze(0)
+    td      = TensorDict({"image": img, "scalars": scalars}, batch_size=[1])
+    with set_exploration_type(ExplorationType.MEAN):
+        td = policy(td)
+    a = td["action"][0].detach().clamp(-1.0, 1.0).cpu().numpy()
+    return float(a[0]), float(a[1])
+
+
+# ── Status HTML ───────────────────────────────────────────────────────────────
+TRACK_CHOICES = [f"Track {t.level:02d} — {t.name}" for t in TRAIN]
+
+def _get_track(label: str):
+    lvl = int(label.split(" ")[1])
+    return next((t for t in TRAIN if t.level == lvl), TRAIN[0])
+
+
+def _stat_card(label, value, cls=""):
+    return (f"<div class='sc'><div class='sl'>{label}</div>"
+            f"<div class='sv {cls}'>{value}</div></div>")
+
+
+def _status_html(state, error=None):
+    if error:
+        return (f"<div class='stat-row'>"
+                f"<div class='sc err'><div class='sl'>ERROR</div>"
+                f"<div class='sv' style='font-size:.7rem;color:#ff6b6b;word-break:break-all'>{error}</div></div>"
+                f"</div>")
+    if state is None:
+        return (f"<div class='stat-row'>"
+                + _stat_card("STATUS", "IDLE", "idle")
+                + _stat_card("SPEED", "—")
+                + _stat_card("LAPS", "—")
+                + _stat_card("STEPS", "—")
+                + "</div>")
+    ce    = state["env"]._env
+    laps  = ce._laps
+    speed = ce._speed
+    step  = state["step"]
+    done  = state["done"]
+    spd   = f"{int(abs(speed)/ce.track.max_speed*100)}%"
+    if done and laps >= LAPS_TARGET:
+        st, cls = "✅ PASS", "pass"
+    elif done:
+        st, cls = "💥 CRASH", "fail"
+    else:
+        st, cls = "▶ RUNNING", "run"
+    return (f"<div class='stat-row'>"
+            + _stat_card("STATUS", st, cls)
+            + _stat_card("SPEED", spd)
+            + _stat_card("LAPS", f"{laps}/{LAPS_TARGET}")
+            + _stat_card("STEPS", f"{step}")
+            + "</div>")
+
+
+# ── Callbacks ─────────────────────────────────────────────────────────────────
+
+def reset(track_label):
+    try:
+        _ensure_pygame()
+        track = _get_track(track_label)
+        track.build()
+        env   = RaceEnvironment(track, max_steps=MAX_STEPS, laps_target=LAPS_TARGET, use_image=True)
+        obs   = env.reset()
+        state = {"env": env, "obs": obs, "step": 0, "done": False, "trail": []}
+        return state, _game_frame(env), _headlight_frame(env), _status_html(state), None
+    except Exception as e:
+        traceback.print_exc()
+        return None, _placeholder_main(), _placeholder_pov(), _status_html(None, str(e)), None
+
+
+def step_agent(state):
+    """Generator: yields a frame every 4 physics steps so the image streams smoothly."""
+    try:
+        if state is None:
+            yield (state, _placeholder_main(), _placeholder_pov(),
+                   _status_html(None, "No session — press Reset first"), None)
+            return
+        if state["done"]:
+            yield (state, _game_frame(state["env"], state.get("trail")),
+                   _headlight_frame(state["env"]), _status_html(state), None)
+            return
+
+        env   = state["env"]
+        obs   = state["obs"]
+        trail = state.setdefault("trail", [])
+        YIELD_EVERY = 4   # stream a new frame every N physics steps
+
+        for i in range(STEP_CHUNK):
+            if state["done"]:
+                break
+            accel, steer  = _agent_action(obs)
+            obs            = env.step(DriveAction(accel=accel, steer=steer))
+            state["step"] += 1
+            trail.append((env._env._x, env._env._y))
+            if obs.done:
+                state["done"] = True
+            # stream intermediate frames
+            if (i + 1) % YIELD_EVERY == 0 or state["done"]:
+                yield (state,
+                       _game_frame(env, trail),
+                       _headlight_frame(env),
+                       _status_html(state),
+                       None)
+
+        state["obs"] = obs
+        yield state, _game_frame(env, trail), _headlight_frame(env), _status_html(state), None
+
+    except Exception as e:
+        traceback.print_exc()
+        yield state, _placeholder_main(), _placeholder_pov(), _status_html(state, str(e)), None
+
+
+def auto_drive(track_label):
+    """Generator: streams live frames while driving, then yields the final MP4."""
+    try:
+        import imageio.v3 as iio
+        _ensure_pygame()
+        track = _get_track(track_label)
+        track.build()
+        env   = RaceEnvironment(track, max_steps=MAX_STEPS, laps_target=LAPS_TARGET, use_image=True)
+        obs   = env.reset()
+        trail  = []
+        frames = [np.array(_game_frame(env))]
+        n      = 0
+        YIELD_EVERY = 3   # stream a UI update every N steps
+
+        # Show initial frame
+        state = {"env": env, "obs": obs, "step": 0, "done": False, "trail": trail}
+        yield state, _game_frame(env, trail), _headlight_frame(env), _status_html(state), None
+
+        while not obs.done:
+            accel, steer = _agent_action(obs)
+            obs           = env.step(DriveAction(accel=accel, steer=steer))
+            n            += 1
+            trail.append((env._env._x, env._env._y))
+
+            frame_img = _game_frame(env, trail)
+            frames.append(np.array(frame_img))
+
+            if n % YIELD_EVERY == 0:
+                state["step"] = n
+                yield (state, frame_img, _headlight_frame(env), _status_html(state), None)
+
+        # Final state
+        ce      = env._env
+        laps    = ce._laps
+        crashes = getattr(ce, "_crash_count", 0)
+        result  = "✅ PASS" if laps >= LAPS_TARGET and crashes == 0 else "💥 FAIL"
+
+        vpath = os.path.join(tempfile.gettempdir(), f"race_{uuid.uuid4().hex[:8]}.mp4")
+        iio.imwrite(vpath, np.stack(frames), fps=20, codec="libx264", plugin="pyav")
+
+        state = {"env": env, "obs": obs, "step": n, "done": True, "trail": trail}
+        extra = (f"<div class='stat-row'>"
+                 + _stat_card("RESULT", result, "pass" if "PASS" in result else "fail")
+                 + _stat_card("LAPS", str(laps))
+                 + _stat_card("STEPS", str(n))
+                 + _stat_card("FRAMES", str(len(frames)))
+                 + "</div>")
+        yield state, _game_frame(env, trail), _headlight_frame(env), extra, vpath
+
+    except Exception as e:
+        traceback.print_exc()
+        yield None, _placeholder_main(), _placeholder_pov(), _status_html(None, str(e)), None
+
+
+# ── CSS ───────────────────────────────────────────────────────────────────────
+CSS = """
+/* ─────────────────────────────────────────────────────────────
+   Car Racing Agent · premium light theme
+   palette: warm orange accent on neutral stone background
+   ───────────────────────────────────────────────────────────── */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');
+
+*, *::before, *::after { box-sizing: border-box; }
+
+body, .gradio-container {
+    background:
+        radial-gradient(1200px 600px at 10% -10%, #ffedd5 0%, transparent 50%),
+        radial-gradient(900px 500px at 110% 10%, #fef3c7 0%, transparent 45%),
+        linear-gradient(180deg, #fafafa 0%, #f3f4f6 100%) !important;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    font-size: 13px !important;
+    color: #1f2937 !important;
+    min-height: 100vh;
+}
+.gradio-container { max-width: 100% !important; padding: 0 !important; }
+
+/* strip default Gradio borders — we'll add our own where needed */
+.gr-box, .gr-form, .gr-panel,
+div[class*="component-"], div[data-testid] {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BANNER — hero strip
+   ═══════════════════════════════════════════════════════════════ */
+.banner {
+    position: relative;
+    background:
+        linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
+    border-bottom: 1px solid rgba(249, 115, 22, 0.15);
+    padding: 22px 32px 20px;
+    margin-bottom: 20px;
+    overflow: hidden;
+}
+.banner::before {
+    content: ""; position: absolute; inset: 0;
+    background:
+        radial-gradient(500px 200px at 15% 120%, rgba(249,115,22,.18), transparent 70%),
+        radial-gradient(400px 180px at 90% -30%, rgba(251,191,36,.22), transparent 70%);
+    pointer-events: none;
+}
+.banner-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
+.banner h1 {
+    font-size: 1.85rem; font-weight: 900; margin: 0 0 6px;
+    letter-spacing: -0.02em;
+    background: linear-gradient(92deg, #9a3412 0%, #ea580c 40%, #f97316 65%, #fbbf24 100%);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    display: inline-block;
+    filter: drop-shadow(0 1px 0 rgba(255,255,255,.6));
+}
+.banner .sub {
+    color: #57534e; font-size: 0.83rem; margin: 0 0 12px;
+    font-weight: 500; line-height: 1.5;
+}
+.banner .sub strong { font-weight: 700; }
+.badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.badge {
+    background: rgba(255, 255, 255, 0.85);
+    border: 1px solid #fed7aa;
+    color: #9a3412;
+    padding: 4px 11px;
+    border-radius: 999px;
+    font-size: 0.66rem;
+    font-weight: 700;
+    letter-spacing: .05em;
+    backdrop-filter: blur(6px);
+    box-shadow: 0 1px 2px rgba(120, 53, 15, .04);
+    transition: transform .12s ease, box-shadow .12s ease;
+}
+.badge:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(120, 53, 15, .10); }
+.badge.green {
+    background: rgba(240, 253, 244, .9); border-color: #86efac; color: #166534;
+}
+.badge.hf-badge {
+    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
+    border-color: #fbbf24; color: #78350f;
+    text-decoration: none; cursor: pointer;
+    font-weight: 800;
+}
+.badge.hf-badge:hover { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
+
+/* ═══════════════════════════════════════════════════════════════
+   STAT CARDS
+   ═══════════════════════════════════════════════════════════════ */
+.stat-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
+.sc {
+    flex: 1; min-width: 64px;
+    background: #ffffff;
+    border: 1px solid #e7e5e4 !important;
+    border-radius: 10px !important;
+    padding: 10px 8px;
+    text-align: center;
+    box-shadow:
+        0 1px 2px rgba(17, 24, 39, .04),
+        0 0 0 1px rgba(255, 255, 255, .6) inset;
+    transition: border-color .15s ease, box-shadow .15s ease;
+}
+.sc:hover {
+    border-color: #fdba74 !important;
+    box-shadow: 0 4px 12px rgba(249, 115, 22, .10);
+}
+.sl {
+    font-size: 0.55rem; color: #a8a29e;
+    letter-spacing: .14em; text-transform: uppercase;
+    margin-bottom: 5px; font-weight: 800;
+}
+.sv {
+    font-size: 1.1rem; font-weight: 800;
+    color: #1c1917;
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    letter-spacing: -0.01em;
+}
+.sv.pass { color: #15803d; text-shadow: 0 0 18px rgba(34, 197, 94, .25); }
+.sv.fail { color: #dc2626; }
+.sv.run  { color: #2563eb; }
+.sv.idle { color: #a8a29e; }
+.sc.err  {
+    flex: 100%;
+    border-color: #fecaca !important;
+    background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
+}
+.sc.err .sv { color: #b91c1c; font-size: .72rem; word-break: break-all; }
+
+/* ═══════════════════════════════════════════════════════════════
+   IMAGES — track view + agent POV
+   ═══════════════════════════════════════════════════════════════ */
+.main-view, .agent-pov {
+    position: relative;
+    border: 1px solid #e7e5e4 !important;
+    border-radius: 14px !important;
+    overflow: hidden;
+    background: #ffffff;
+    box-shadow:
+        0 10px 30px -12px rgba(17, 24, 39, .12),
+        0 0 0 1px rgba(255, 255, 255, .8) inset;
+    transition: box-shadow .2s ease, transform .2s ease;
+}
+.main-view:hover {
+    box-shadow:
+        0 18px 44px -14px rgba(17, 24, 39, .18),
+        0 0 0 1px rgba(255, 255, 255, .8) inset;
+}
+.main-view img,
+.agent-pov img {
+    width: 100% !important; display: block !important;
+    border: none !important; border-radius: 0 !important;
+}
+.agent-pov {
+    border-color: #fb923c !important;
+    box-shadow:
+        0 8px 24px -10px rgba(249, 115, 22, .35),
+        0 0 0 1px rgba(255, 237, 213, .8) inset;
+}
+.agent-pov::after {
+    content: "CNN INPUT";
+    position: absolute; top: 8px; right: 8px;
+    background: rgba(249, 115, 22, .95);
+    color: #fff; font-size: 0.55rem;
+    letter-spacing: .16em; font-weight: 800;
+    padding: 2px 7px; border-radius: 999px;
+    box-shadow: 0 2px 6px rgba(249, 115, 22, .35);
+    pointer-events: none;
+}
+.agent-pov img { image-rendering: pixelated !important; }
+
+/* ═══════════════════════════════════════════════════════════════
+   PANEL TITLES (small orange labels above each box)
+   ═══════════════════════════════════════════════════════════════ */
+.panel-title {
+    display: inline-flex; align-items: center; gap: 6px;
+    font-size: 0.6rem; font-weight: 800;
+    letter-spacing: .18em; text-transform: uppercase;
+    color: #ea580c;
+    padding: 3px 10px;
+    background: linear-gradient(90deg, #fff7ed 0%, rgba(255,255,255,0) 100%);
+    border-left: 3px solid #fb923c;
+    border-radius: 2px;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   HELP BOX
+   ═══════════════════════════════════════════════════════════════ */
+.help-box {
+    background:
+        linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
+    border: 1px solid #e7e5e4 !important;
+    border-radius: 14px !important;
+    padding: 14px 16px;
+    font-size: 0.78rem; color: #44403c; line-height: 1.65;
+    box-shadow:
+        0 4px 14px -6px rgba(17, 24, 39, .08),
+        0 0 0 1px rgba(255, 255, 255, .6) inset;
+}
+.help-box strong { color: #1c1917; font-weight: 700; }
+.help-box .help-title {
+    font-size: .7rem; font-weight: 800; letter-spacing: .14em;
+    color: #ea580c; text-transform: uppercase; margin-bottom: 10px;
+    display: flex; align-items: center; gap: 6px;
+}
+.help-box .step { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
+.help-box .num {
+    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
+    color: #fff;
+    width: 20px; height: 20px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 0.65rem; font-weight: 800;
+    flex-shrink: 0; margin-top: 1px;
+    box-shadow: 0 2px 6px rgba(249, 115, 22, .35);
+}
+.help-box .footer-note {
+    margin-top: 10px; padding-top: 10px;
+    border-top: 1px dashed #e7e5e4;
+    font-size: 0.72rem; color: #78716c;
+}
+.help-box .footer-note .accent { color: #ea580c; font-weight: 700; }
+
+/* ═══════════════════════════════════════════════════════════════
+   VIDEO PANEL
+   ═══════════════════════════════════════════════════════════════ */
+.video-panel {
+    border: 1px solid #e7e5e4 !important;
+    border-radius: 14px !important;
+    overflow: hidden;
+    background: #0c0a09;
+    box-shadow:
+        0 10px 30px -12px rgba(17, 24, 39, .15),
+        0 0 0 1px rgba(255, 255, 255, .8) inset;
+}
+.video-panel video { width: 100% !important; display: block !important; }
+
+/* ═══════════════════════════════════════════════════════════════
+   BUTTONS — premium tactile feel
+   ═══════════════════════════════════════════════════════════════ */
+button.gr-button, button {
+    font-family: 'Inter', sans-serif !important;
+    font-size: 0.8rem !important;
+    font-weight: 700 !important;
+    letter-spacing: .01em !important;
+    border-radius: 10px !important;
+    transition: transform .08s ease, box-shadow .15s ease, filter .15s ease !important;
+    border: 1px solid transparent !important;
+}
+button.gr-button:hover { transform: translateY(-1px); filter: brightness(1.04); }
+button.gr-button:active { transform: translateY(0); }
+
+/* primary = orange */
+button.primary, button[variant="primary"], .gr-button-primary {
+    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
+    color: #ffffff !important;
+    border-color: #c2410c !important;
+    box-shadow:
+        0 4px 12px -2px rgba(249, 115, 22, .35),
+        0 0 0 1px rgba(255, 255, 255, .25) inset !important;
+}
+button.primary:hover { box-shadow: 0 6px 18px -2px rgba(249, 115, 22, .45) !important; }
+
+/* secondary = neutral white */
+button.secondary, button[variant="secondary"], .gr-button-secondary {
+    background: #ffffff !important;
+    color: #1c1917 !important;
+    border-color: #e7e5e4 !important;
+    box-shadow: 0 1px 2px rgba(17, 24, 39, .05) !important;
+}
+button.secondary:hover { border-color: #fb923c !important; color: #ea580c !important; }
+
+/* stop = red */
+button.stop, button[variant="stop"], .gr-button-stop {
+    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
+    color: #ffffff !important;
+    border-color: #15803d !important;
+    box-shadow:
+        0 4px 12px -2px rgba(22, 163, 74, .35),
+        0 0 0 1px rgba(255, 255, 255, .25) inset !important;
+}
+button.stop:hover { box-shadow: 0 6px 18px -2px rgba(22, 163, 74, .45) !important; }
+
+/* ═══════════════════════════════════════════════════════════════
+   LABELS & INPUTS
+   ═══════════════════════════════════════════════════════════════ */
+label, .gr-input-label, span[data-testid="block-label"] {
+    color: #44403c !important;
+    font-size: 0.74rem !important;
+    font-weight: 600 !important;
+    letter-spacing: .01em !important;
+}
+select, input, textarea {
+    font-family: 'Inter', sans-serif !important;
+    font-size: 0.82rem !important;
+    background: #ffffff !important;
+    border: 1px solid #e7e5e4 !important;
+    border-radius: 10px !important;
+    color: #1c1917 !important;
+    transition: border-color .15s ease, box-shadow .15s ease !important;
+}
+select:focus, input:focus, textarea:focus {
+    outline: none !important;
+    border-color: #fb923c !important;
+    box-shadow: 0 0 0 3px rgba(251, 146, 60, .18) !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   FOOTER
+   ═══════════════════════════════════════════════════════════════ */
+.footer-strip {
+    margin-top: 24px; padding: 14px 32px 18px;
+    border-top: 1px solid #e7e5e4;
+    color: #78716c; font-size: 0.72rem;
+    text-align: center;
+    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fafaf9 100%);
+}
+.footer-strip a {
+    color: #ea580c; text-decoration: none; font-weight: 700;
+    border-bottom: 1px dashed #fdba74;
+}
+.footer-strip a:hover { color: #c2410c; border-bottom-color: #ea580c; }
+"""
+
+BANNER_HTML = """
+<div class="banner">
+  <div class="banner-inner">
+    <h1>🏎️ Car Racing Agent</h1>
+    <p class="sub">
+      A PPO agent trained from scratch · 10 tracks · egocentric vision ·
+      <strong style="color:#15803d">10 / 10 tracks — zero crashes</strong>
+      &nbsp;·&nbsp; OpenEnv Student Challenge 2026
+    </p>
+    <div class="badges">
+      <span class="badge">OpenEnv API</span>
+      <span class="badge">TorchRL PPO</span>
+      <span class="badge">Curriculum Learning</span>
+      <span class="badge">ImpalaCNN</span>
+      <span class="badge">~1.3 M Steps</span>
+      <span class="badge green">10 / 10 ✅</span>
+      <a class="badge hf-badge" href="https://huggingface.co/spaces/nirmalpratheep/curriculum-car-racer" target="_blank" rel="noopener">📝 Blog Post</a>
+    </div>
+  </div>
+</div>
+"""
+
+HELP_HTML = f"""
+<div class="help-box">
+  <div class="help-title">🎮 How to use</div>
+  <div class="step">
+    <div class="num">1</div>
+    <div>Pick any of the <strong>10 curriculum tracks</strong> — from the easy Wide Oval up to the Hairpin and Chicane.</div>
+  </div>
+  <div class="step">
+    <div class="num">2</div>
+    <div>Click <strong>Reset</strong> to spawn the agent at the start line. The track view and agent POV appear immediately.</div>
+  </div>
+  <div class="step">
+    <div class="num">3</div>
+    <div>Click <strong>Step ×{STEP_CHUNK}</strong> to advance {STEP_CHUNK} physics steps at a time — watch the path trail build up.</div>
+  </div>
+  <div class="step">
+    <div class="num">4</div>
+    <div>Click <strong>Auto-Drive</strong> to run a full lap and generate a <strong>replay video</strong> below.</div>
+  </div>
+  <div class="footer-note">
+    The <span class="accent">orange-bordered image</span> is the actual 64×64 input the neural network receives —
+    always rotated so the car faces upward.
+  </div>
+</div>
+"""
+
+FOOTER_HTML = """
+<div class="footer-strip">
+  Car Racing Agent · trained with
+  <a href="https://github.com/pytorch/rl" target="_blank">TorchRL</a> PPO ·
+  served via <a href="https://openenv.dev" target="_blank">OpenEnv</a> ·
+  <a href="https://huggingface.co/spaces/nirmalpratheep/Car-Racing-Agent" target="_blank">🤗 HF Space</a> ·
+  <a href="https://huggingface.co/blog/NirmalPratheep/curriculum-car-racer" target="_blank">📝 Blog</a> ·
+  <a href="https://github.com/NirmalPratheep/curriculum-car-racer" target="_blank">GitHub</a>
+</div>
+"""
+
+# ── Build UI ──────────────────────────────────────────────────────────────────
+with gr.Blocks(title="Car Racing Agent — OpenEnv Demo") as demo:
+
+    gr.HTML(BANNER_HTML)
+
+    session_state = gr.State(None)
+
+    with gr.Row(equal_height=False):
+
+        # ── Left column ───────────────────────────────────────────────────
+        with gr.Column(scale=1, min_width=260):
+            gr.HTML("<div class='panel-title' style='margin:4px 0 6px'>Select Track</div>")
+            track_dd = gr.Dropdown(
+                choices=TRACK_CHOICES, value=TRACK_CHOICES[0],
+                label="", interactive=True,
+            )
+            gr.HTML("<div style='height:10px'></div>")
+            reset_btn = gr.Button("🎬  Reset", variant="secondary")
+            step_btn  = gr.Button(f"⏩  Step ×{STEP_CHUNK}", variant="primary")
+            auto_btn  = gr.Button("🏁  Auto-Drive Full Lap", variant="stop")
+            gr.HTML("<div style='height:10px'></div>")
+            status_out = gr.HTML(_status_html(None))
+            gr.HTML("<div style='height:6px'></div>")
+            gr.HTML(HELP_HTML)
+
+        # ── Right column ──────────────────────────────────────────────────
+        with gr.Column(scale=3):
+            gr.HTML("<div class='panel-title' style='margin:4px 0 6px'>Live Track View</div>")
+            with gr.Row(equal_height=False):
+                with gr.Column(scale=3, min_width=300):
+                    frame_img = gr.Image(
+                        label="Top-Down Track", type="pil",
+                        height=360, interactive=False,
+                        elem_classes=["main-view"],
+                        value=_placeholder_main(),
+                    )
+                with gr.Column(scale=1, min_width=160):
+                    headlight_img = gr.Image(
+                        label="Agent POV — CNN Input (64×64)",
+                        type="pil", height=200, interactive=False,
+                        elem_classes=["agent-pov"],
+                        value=_placeholder_pov(),
+                    )
+            gr.HTML("<div style='height:10px'></div>")
+            gr.HTML("<div class='panel-title' style='margin:4px 0 6px'>Auto-Drive Replay</div>")
+            video_out = gr.Video(
+                label="", height=300, show_label=False,
+                elem_classes=["video-panel"],
+            )
+
+    gr.HTML(FOOTER_HTML)
+
+    # ── Wire callbacks ────────────────────────────────────────────────────
+    step_event = step_btn.click(
+        fn=step_agent,
+        inputs=[session_state],
+        outputs=[session_state, frame_img, headlight_img, status_out, video_out],
+    )
+    auto_event = auto_btn.click(
+        fn=auto_drive,
+        inputs=[track_dd],
+        outputs=[session_state, frame_img, headlight_img, status_out, video_out],
+    )
+    # Reset cancels any running auto-drive or step generator, then resets.
+    reset_btn.click(
+        fn=reset,
+        inputs=[track_dd],
+        outputs=[session_state, frame_img, headlight_img, status_out, video_out],
+        cancels=[auto_event, step_event],
+    )
+
+
+if __name__ == "__main__":
+    demo.queue(default_concurrency_limit=2)
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=int(os.environ.get("PORT", 7860)),
+        css=CSS,
+        theme=gr.themes.Soft(primary_hue="orange"),
+    )

requirements.txt

@@ -0,0 +1,11 @@
+gradio==6.12.0
+torch
+torchrl
+tensordict
+pygame
+numpy
+Pillow
+imageio
+imageio-ffmpeg
+openenv-core
+pydantic