Spaces:
Sleeping
Sleeping
| """ | |
| app.py — Sports Observer | |
| Gradio app for Hugging Face Spaces. | |
| UI follows DESIGN.md "The Digital Observer" spec exactly: | |
| background #0b0e14 void black | |
| surface #161a21 primary workspace | |
| surface-high #1c2028 panels | |
| primary #a1ffc2 green accent | |
| secondary #00d2fd cyan accent | |
| tertiary #ff7350 orange alert | |
| on-surface #ecedf6 body text (never pure white) | |
| Space Grotesk headlines / Inter body / IBM Plex Mono data | |
| """ | |
| from __future__ import annotations | |
| import json | |
| import math | |
| import os | |
| import tempfile | |
| import traceback | |
| from collections import defaultdict, deque | |
| from pathlib import Path | |
| import cv2 | |
| import numpy as np | |
| import gradio as gr | |
| # ── Palette (BGR for OpenCV) ─────────────────────────────────────────────── | |
| PALETTE_BGR = [ | |
| (253,210,0),(194,255,161),(80,115,255),(187,212,0), | |
| (29,178,255),(134,219,61),(56,56,255),(255,115,100), | |
| (255,194,0),(49,210,207),(151,157,255),(23,204,146), | |
| (255,56,132),(31,112,255),(52,147,26),(255,56,203), | |
| (168,153,44),(200,149,255),(10,249,72),(133,0,82), | |
| ] | |
| PPM = 20.0 # pixels per metre | |
| # ══════════════════════════════════════════════════════════════════════════ | |
| # PIPELINE | |
| # ══════════════════════════════════════════════════════════════════════════ | |
| def process_video(video_path, conf, iou, show_traj, show_speed, traj_len, progress=gr.Progress()): | |
| if video_path is None: | |
| return None, None, '{"status":"waiting"}', _status("idle", "Upload a video to begin.") | |
| try: | |
| return _run(video_path, float(conf), float(iou), bool(show_traj), | |
| bool(show_speed), int(traj_len), progress) | |
| except Exception as exc: | |
| traceback.print_exc() | |
| return None, None, json.dumps({"error": str(exc)}), _status("error", str(exc)) | |
| def _find_working_fourcc(fps, W, H): | |
| """Try several codecs and return (fourcc, suffix) for the first one that works.""" | |
| import shutil | |
| candidates = [ | |
| ("avc1", ".mp4"), # H.264 — best for browsers | |
| ("H264", ".mp4"), | |
| ("X264", ".mp4"), | |
| ("mp4v", ".mp4"), # MPEG-4 fallback (needs re-encode for browser) | |
| ] | |
| for codec, ext in candidates: | |
| test_path = tempfile.mktemp(suffix=f"_test{ext}") | |
| try: | |
| fourcc = cv2.VideoWriter_fourcc(*codec) | |
| w = cv2.VideoWriter(test_path, fourcc, fps, (W, H)) | |
| if w.isOpened(): | |
| # Write a test frame to make sure it really works | |
| w.write(np.zeros((H, W, 3), dtype=np.uint8)) | |
| w.release() | |
| if Path(test_path).exists() and Path(test_path).stat().st_size > 0: | |
| Path(test_path).unlink(missing_ok=True) | |
| print(f"[Codec] Using {codec}") | |
| return fourcc, ext, codec | |
| w.release() | |
| except Exception: | |
| pass | |
| finally: | |
| Path(test_path).unlink(missing_ok=True) | |
| # absolute fallback | |
| print("[Codec] Falling back to mp4v") | |
| return cv2.VideoWriter_fourcc(*"mp4v"), ".mp4", "mp4v" | |
| def _reencode_for_browser(input_path, output_path): | |
| """Try to re-encode to H.264 with ffmpeg/ffmpeg.exe. Returns True on success.""" | |
| import subprocess, shutil | |
| # Check if ffmpeg is available | |
| ffmpeg_cmd = shutil.which("ffmpeg") | |
| if ffmpeg_cmd is None: | |
| print("[Encode] ffmpeg not found, skipping re-encode") | |
| return False | |
| try: | |
| result = subprocess.run( | |
| [ffmpeg_cmd, "-y", "-i", input_path, | |
| "-vcodec", "libx264", "-crf", "23", | |
| "-preset", "fast", "-movflags", "+faststart", | |
| output_path], | |
| capture_output=True, text=True, timeout=600, | |
| ) | |
| if result.returncode == 0 and Path(output_path).exists() and Path(output_path).stat().st_size > 0: | |
| print("[Encode] H.264 re-encode successful") | |
| return True | |
| else: | |
| print(f"[Encode] ffmpeg failed: {result.stderr[:300]}") | |
| return False | |
| except Exception as e: | |
| print(f"[Encode] ffmpeg error: {e}") | |
| return False | |
| def _run(video_path, conf, iou, show_traj, show_speed, traj_len, progress): | |
| from ultralytics import YOLO | |
| import supervision as sv | |
| # ── open video ──────────────────────────────────────────────────────── | |
| cap = cv2.VideoCapture(video_path) | |
| if not cap.isOpened(): | |
| raise RuntimeError("Cannot open video file.") | |
| W = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH)) | |
| H = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT)) | |
| fps = float(cap.get(cv2.CAP_PROP_FPS) or 30.0) | |
| total = int(cap.get(cv2.CAP_PROP_FRAME_COUNT)) or 1 | |
| # ── writers ─────────────────────────────────────────────────────────── | |
| fourcc, ext, codec_name = _find_working_fourcc(fps, W, H) | |
| tmp_raw = tempfile.mktemp(suffix=f"_raw{ext}") | |
| tmp_out = tempfile.mktemp(suffix="_out.mp4") | |
| writer = cv2.VideoWriter(tmp_raw, fourcc, fps, (W, H)) | |
| if not writer.isOpened(): | |
| raise RuntimeError(f"Cannot create video writer with codec {codec_name}. " | |
| "Please install ffmpeg or an H.264-capable OpenCV build.") | |
| # ── model ───────────────────────────────────────────────────────────── | |
| model = YOLO("yolov8n.pt") | |
| # ── tracker (supervision 0.21 stable API) ───────────────────────────── | |
| byte_tracker = sv.ByteTrack( | |
| track_activation_threshold=conf, | |
| lost_track_buffer=max(60, int(fps * 3)), | |
| minimum_matching_threshold=0.80, | |
| frame_rate=int(fps), | |
| ) | |
| # ── state ───────────────────────────────────────────────────────────── | |
| trajs: dict = defaultdict(lambda: deque(maxlen=traj_len)) | |
| prev_c: dict = {} | |
| speeds: dict = {} | |
| hm_acc = np.zeros((H, W), dtype=np.float32) | |
| counts = [] | |
| fi = 0 | |
| progress(0, desc="Initialising…") | |
| while True: | |
| ret, frame = cap.read() | |
| if not ret: | |
| break | |
| # detect | |
| res = model(frame, conf=conf, iou=iou, classes=[0], verbose=False)[0] | |
| dets = sv.Detections.from_ultralytics(res) | |
| # track | |
| if len(dets) > 0: | |
| tracked = byte_tracker.update_with_detections(dets) | |
| else: | |
| tracked = sv.Detections.empty() | |
| out = frame.copy() | |
| # collect active tracks | |
| active_tracks = [] | |
| if tracked.tracker_id is not None and len(tracked) > 0: | |
| for i, tid in enumerate(tracked.tracker_id): | |
| if tid is None: | |
| continue | |
| tid = int(tid) | |
| x1, y1, x2, y2 = [int(v) for v in tracked.xyxy[i]] | |
| active_tracks.append({"id": tid, "box": (x1,y1,x2,y2)}) | |
| cx, cy = (x1+x2)//2, (y1+y2)//2 | |
| trajs[tid].append((cx, cy)) | |
| if 0 <= cy < H and 0 <= cx < W: | |
| cv2.circle(hm_acc, (cx, cy), 18, 1.0, -1) | |
| # speed EMA | |
| if show_speed and tid in prev_c: | |
| d = math.hypot(cx - prev_c[tid][0], cy - prev_c[tid][1]) | |
| spd = (d / PPM) * fps * 3.6 | |
| speeds[tid] = 0.7 * speeds.get(tid, spd) + 0.3 * spd | |
| prev_c[tid] = (cx, cy) | |
| # ── draw trajectories ───────────────────────────────────────────── | |
| if show_traj: | |
| ovl = out.copy() | |
| for tid, pts_dq in trajs.items(): | |
| pts = list(pts_dq) | |
| col = PALETTE_BGR[tid % len(PALETTE_BGR)] | |
| for j in range(1, len(pts)): | |
| a = j / max(len(pts), 1) | |
| c = tuple(int(v * a) for v in col) | |
| cv2.line(ovl, pts[j-1], pts[j], c, 2, cv2.LINE_AA) | |
| cv2.addWeighted(ovl, 0.70, out, 0.30, 0, out) | |
| # ── draw boxes + labels (DESIGN.md colours) ─────────────────────── | |
| for t in active_tracks: | |
| tid = t["id"] | |
| x1, y1, x2, y2 = t["box"] | |
| # secondary #00d2fd (BGR: 253,210,0) | |
| cv2.rectangle(out, (x1,y1), (x2,y2), (253,210,0), 2) | |
| s_str = f" {speeds[tid]:.0f}km/h" if (show_speed and tid in speeds) else "" | |
| label = f"#{tid}{s_str}" | |
| fs, tk = 0.45, 1 | |
| (tw, th), _ = cv2.getTextSize(label, cv2.FONT_HERSHEY_SIMPLEX, fs, tk) | |
| lx = x1 | |
| ly = max(y1 - 4, th + 6) | |
| # secondary-container #00677e (BGR: 126,103,0) | |
| cv2.rectangle(out, (lx, ly-th-4), (lx+tw+8, ly+2), (126,103,0), -1) | |
| # on-secondary-container #eefaff | |
| cv2.putText(out, label, (lx+4, ly-1), | |
| cv2.FONT_HERSHEY_SIMPLEX, fs, (255,250,238), tk, cv2.LINE_AA) | |
| # ── HUD ─────────────────────────────────────────────────────────── | |
| n = len(active_tracks) | |
| hud = f"SUBJECTS:{n:02d} FRAME:{fi:05d}" | |
| (hw, hh), _ = cv2.getTextSize(hud, cv2.FONT_HERSHEY_SIMPLEX, 0.47, 1) | |
| cv2.rectangle(out, (8,8), (hw+20, hh+16), (0,0,0), -1) | |
| # primary #a1ffc2 (BGR: 194,255,161) | |
| cv2.putText(out, hud, (13, hh+10), | |
| cv2.FONT_HERSHEY_SIMPLEX, 0.47, (194,255,161), 1, cv2.LINE_AA) | |
| writer.write(out) | |
| counts.append({"frame": fi, "count": n}) | |
| fi += 1 | |
| if fi % 25 == 0: | |
| progress(fi / total, desc=f"Frame {fi}/{total} · Subjects: {n}") | |
| cap.release() | |
| writer.release() | |
| # ── re-encode to browser-compatible H.264 if needed ─────────────────── | |
| final = tmp_raw | |
| if codec_name not in ("avc1", "H264", "X264"): | |
| # mp4v isn't browser-playable, try re-encoding with ffmpeg | |
| if _reencode_for_browser(tmp_raw, tmp_out): | |
| final = tmp_out | |
| Path(tmp_raw).unlink(missing_ok=True) | |
| else: | |
| # Last resort: serve the mp4v file as-is; Gradio may still handle it | |
| print("[Warning] Output video may not play in browser without ffmpeg. " | |
| "Install ffmpeg for best results: https://ffmpeg.org/download.html") | |
| final = tmp_raw | |
| # ── heatmap ─────────────────────────────────────────────────────────── | |
| hm_path = tempfile.mktemp(suffix="_hm.png") | |
| norm = cv2.normalize(hm_acc, None, 0, 255, cv2.NORM_MINMAX).astype(np.uint8) | |
| cv2.imwrite(hm_path, cv2.applyColorMap(norm, cv2.COLORMAP_JET)) | |
| uid = len(trajs) | |
| stats = json.dumps({ | |
| "total_frames" : fi, | |
| "unique_ids" : uid, | |
| "all_track_ids" : list(trajs.keys()), | |
| "fps" : round(fps, 2), | |
| "counts_over_time": counts[-300:], | |
| }, indent=2) | |
| return ( | |
| final, | |
| hm_path, | |
| stats, | |
| _status("ok", f"Complete · {fi} frames processed · {uid} unique IDs tracked"), | |
| ) | |
| def _status(kind: str, msg: str) -> str: | |
| cfg = { | |
| "ok": ("#a1ffc2", "SYSTEM NOMINAL"), | |
| "error": ("#ff716c", "SYSTEM ERROR"), | |
| "idle": ("#45484f", "STANDBY"), | |
| } | |
| col, prefix = cfg.get(kind, cfg["idle"]) | |
| dot_anim = "animation:pulse 2s ease-in-out infinite;" if kind == "ok" else "" | |
| return f""" | |
| <div style="display:flex;align-items:center;gap:10px;padding:10px 16px; | |
| background:{col}14;border-radius:6px;margin-top:8px;"> | |
| <span style="width:7px;height:7px;border-radius:50%;background:{col}; | |
| flex-shrink:0;{dot_anim}"></span> | |
| <span style="font-family:'IBM Plex Mono',monospace;font-size:.72rem; | |
| color:{col};letter-spacing:.06em;"> | |
| <span style="opacity:.5;margin-right:8px;">{prefix}</span>{msg} | |
| </span> | |
| </div> | |
| <style> | |
| @keyframes pulse{{0%,100%{{opacity:1;transform:scale(1)}}50%{{opacity:.3;transform:scale(.7)}}}} | |
| </style>""" | |
| # ══════════════════════════════════════════════════════════════════════════ | |
| # DESIGN.md CSS — "The Digital Observer" | |
| # ══════════════════════════════════════════════════════════════════════════ | |
| CSS = """ | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap'); | |
| /* ── Reset & base ── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { background: #0b0e14 !important; } | |
| .gradio-container { | |
| background: #0b0e14 !important; | |
| max-width: 1240px !important; | |
| margin: 0 auto !important; | |
| padding: 2.25rem !important; | |
| font-family: 'Inter', sans-serif !important; | |
| color: #ecedf6 !important; | |
| } | |
| /* ── Masthead ── */ | |
| #masthead { | |
| background: #161a21; | |
| border-radius: 10px; | |
| padding: 1.75rem 2rem 1.5rem; | |
| margin-bottom: 1.75rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* sensor-sweep gradient texture (DESIGN.md §2) */ | |
| #masthead::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, #a1ffc21a 0%, #00fc9a0d 40%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| #masthead .eyebrow { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: .65rem; | |
| letter-spacing: .15em; | |
| text-transform: uppercase; | |
| color: #3d4555; | |
| margin-bottom: .5rem; | |
| display: block; | |
| } | |
| #masthead h1 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: #ecedf6; | |
| letter-spacing: -.03em; | |
| line-height: 1.1; | |
| } | |
| #masthead h1 em { | |
| font-style: normal; | |
| color: #a1ffc2; | |
| } | |
| .badge-row { | |
| display: flex; | |
| gap: 6px; | |
| margin-top: .85rem; | |
| flex-wrap: wrap; | |
| } | |
| .bdg { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: .6rem; | |
| letter-spacing: .07em; | |
| padding: 3px 9px; | |
| border-radius: 4px; | |
| border: 1px solid; | |
| } | |
| .bdg-p { color:#a1ffc2; border-color:#a1ffc228; background:#a1ffc20e; } | |
| .bdg-s { color:#00d2fd; border-color:#00d2fd28; background:#00d2fd0e; } | |
| .bdg-t { color:#ff7350; border-color:#ff735028; background:#ff73500e; } | |
| .bdg-n { color:#45484f; border-color:#45484f40; } | |
| /* ── Workspace grid ── */ | |
| .workspace { | |
| display: grid; | |
| grid-template-columns: 310px 1fr; | |
| gap: 1.75rem; | |
| align-items: start; | |
| } | |
| /* ── Control panel ── */ | |
| .ctrl { | |
| background: #161a21; | |
| border-radius: 10px; | |
| padding: .9rem; | |
| } | |
| /* Section labels — no borders, tonal only (DESIGN.md No-Line rule) */ | |
| .sec { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: .6rem; | |
| font-weight: 500; | |
| letter-spacing: .14em; | |
| text-transform: uppercase; | |
| color: #2e3340; | |
| padding: .75rem 0 .3rem; | |
| margin-top: .5rem; | |
| } | |
| .sec:first-child { padding-top: 0; margin-top: 0; } | |
| /* ── Gradio element overrides ── */ | |
| .gradio-container label, | |
| .gradio-container .label-wrap span, | |
| .gradio-container .svelte-1gfkn6j { | |
| font-family: 'Inter', sans-serif !important; | |
| font-size: .78rem !important; | |
| color: #6b7585 !important; | |
| font-weight: 400 !important; | |
| } | |
| .gradio-container input[type=range] { accent-color: #00d2fd !important; } | |
| .gradio-container input[type=checkbox] { accent-color: #a1ffc2 !important; } | |
| .gradio-container .wrap { background: #161a21 !important; border: none !important; } | |
| /* ── Primary CTA (DESIGN.md §5 Buttons) ── */ | |
| #run-btn > button { | |
| width: 100% !important; | |
| background: #a1ffc2 !important; | |
| color: #00391e !important; | |
| font-family: 'Space Grotesk', sans-serif !important; | |
| font-size: .9rem !important; | |
| font-weight: 700 !important; | |
| border: none !important; | |
| border-radius: 6px !important; /* rounded-md */ | |
| height: 44px !important; | |
| margin-top: .9rem !important; | |
| letter-spacing: .02em !important; | |
| transition: opacity .15s, transform .1s !important; | |
| cursor: pointer !important; | |
| } | |
| #run-btn > button:hover { opacity: .86 !important; } | |
| #run-btn > button:active { transform: scale(.98) !important; } | |
| /* ── Output panel ── */ | |
| .out-panel { | |
| display: flex; | |
| flex-direction: column; | |
| gap: .9rem; | |
| } | |
| /* ── Telemetry cards — glassmorphism (DESIGN.md §2 Glass Rule) ── */ | |
| .telem { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 8px; | |
| } | |
| .tcard { | |
| background: rgba(34, 38, 47, .60); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-radius: 8px; | |
| padding: 12px 14px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* sensor-sweep top accent */ | |
| .tcard::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; height: 2px; | |
| background: linear-gradient(90deg, #a1ffc2, #00fc9a); | |
| opacity: .10; | |
| } | |
| .tv { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: 1.55rem; | |
| font-weight: 700; | |
| line-height: 1; | |
| margin-bottom: 4px; | |
| } | |
| .tk { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: .58rem; | |
| letter-spacing: .12em; | |
| text-transform: uppercase; | |
| color: #2e3340; | |
| } | |
| .ca { color: #a1ffc2; } /* primary */ | |
| .cs { color: #00d2fd; } /* secondary */ | |
| .ct { color: #ff7350; } /* tertiary */ | |
| /* ── Video well — recessed (DESIGN.md §4 Layering) ── */ | |
| .video-well { | |
| background: #000000; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .gradio-container video { border-radius: 6px; background: #000; } | |
| /* ── Tabs ── */ | |
| .gradio-container .tab-nav { | |
| background: #10131a !important; | |
| border-radius: 6px 6px 0 0 !important; | |
| border: none !important; | |
| padding: 0 6px !important; | |
| } | |
| .gradio-container .tab-nav button { | |
| font-family: 'IBM Plex Mono', monospace !important; | |
| font-size: .68rem !important; | |
| letter-spacing: .07em !important; | |
| color: #2e3340 !important; | |
| border: none !important; | |
| padding: 9px 16px !important; | |
| background: transparent !important; | |
| text-transform: uppercase !important; | |
| } | |
| .gradio-container .tab-nav button.selected { | |
| color: #00d2fd !important; | |
| border-bottom: 2px solid #00d2fd !important; | |
| } | |
| /* ── Code block ── */ | |
| .gradio-container .codemirror-wrapper, | |
| .gradio-container .cm-editor { | |
| background: #000000 !important; | |
| border-radius: 0 0 6px 6px !important; | |
| } | |
| /* ── Tip bar ── */ | |
| .tip { | |
| background: #10131a; | |
| border-radius: 6px; | |
| padding: 9px 16px; | |
| margin-top: 1.75rem; | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: .62rem; | |
| color: #2e3340; | |
| letter-spacing: .05em; | |
| } | |
| .tip b { color: #45484f; font-weight: 500; } | |
| """ | |
| # ── HTML blocks ─────────────────────────────────────────────────────────── | |
| MASTHEAD_HTML = """ | |
| <div id="masthead"> | |
| <span class="eyebrow">Computer Vision · Multi-Object Tracking · Applied AI</span> | |
| <h1>Sports <em>Observer</em></h1> | |
| <div class="badge-row"> | |
| <span class="bdg bdg-p">YOLOv8n</span> | |
| <span class="bdg bdg-s">ByteTrack</span> | |
| <span class="bdg bdg-t">Trajectory Trails</span> | |
| <span class="bdg bdg-n">Speed Estimation</span> | |
| <span class="bdg bdg-n">Heatmap</span> | |
| <span class="bdg bdg-n">HF Spaces</span> | |
| </div> | |
| </div> | |
| """ | |
| TELEM_HTML = """ | |
| <div class="telem"> | |
| <div class="tcard"><div class="tv ca" id="t-ids">—</div><div class="tk">Unique IDs</div></div> | |
| <div class="tcard"><div class="tv cs" id="t-fr">—</div><div class="tk">Frames</div></div> | |
| <div class="tcard"><div class="tv ct" id="t-fps">—</div><div class="tk">Source FPS</div></div> | |
| </div> | |
| """ | |
| TIP_HTML = """ | |
| <div class="tip"> | |
| <b>TIP</b> · 15–60 s clips give best results on CPU · | |
| Lower confidence → more detections · | |
| Works with football, cricket, basketball, athletics footage | |
| </div> | |
| """ | |
| # ══════════════════════════════════════════════════════════════════════════ | |
| # GRADIO UI | |
| # ══════════════════════════════════════════════════════════════════════════ | |
| def build_app() -> gr.Blocks: | |
| with gr.Blocks( | |
| css=CSS, | |
| title="Sports Observer", | |
| theme=gr.themes.Base( | |
| primary_hue=gr.themes.colors.green, | |
| secondary_hue=gr.themes.colors.cyan, | |
| neutral_hue=gr.themes.colors.slate, | |
| ), | |
| ) as demo: | |
| gr.HTML(MASTHEAD_HTML) | |
| gr.HTML('<div class="workspace">') | |
| # ── LEFT: Control Panel ─────────────────────────────────────────── | |
| gr.HTML('<div class="ctrl">') | |
| gr.HTML('<div class="sec">Input Stream</div>') | |
| video_in = gr.Video(label="Upload video", height=210, elem_classes="video-well") | |
| gr.HTML('<div class="sec">Detection Parameters</div>') | |
| conf = gr.Slider(0.10, 0.90, value=0.30, step=0.05, label="Confidence threshold") | |
| iou = gr.Slider(0.10, 0.90, value=0.50, step=0.05, label="IoU threshold (NMS)") | |
| gr.HTML('<div class="sec">Visualisation</div>') | |
| show_traj = gr.Checkbox(value=True, label="Trajectory trails") | |
| show_speed = gr.Checkbox(value=True, label="Speed estimates (km/h)") | |
| traj_len = gr.Slider(10, 120, value=60, step=10, label="Trail length (frames)") | |
| run_btn = gr.Button("▶ Run Tracker", elem_id="run-btn", variant="primary") | |
| gr.HTML('</div>') # close .ctrl | |
| # ── RIGHT: Output Panel ─────────────────────────────────────────── | |
| gr.HTML('<div class="out-panel">') | |
| gr.HTML(TELEM_HTML) | |
| with gr.Tabs(): | |
| with gr.TabItem("Stream Output"): | |
| video_out = gr.Video(label="", height=340, elem_classes="video-well") | |
| with gr.TabItem("Movement Heatmap"): | |
| heatmap_out = gr.Image(label="", height=340) | |
| with gr.TabItem("Telemetry JSON"): | |
| stats_out = gr.Textbox(label="Telemetry JSON", lines=16, max_lines=20) | |
| status_out = gr.HTML("") | |
| gr.HTML('</div>') # close .out-panel | |
| gr.HTML('</div>') # close .workspace | |
| gr.HTML(TIP_HTML) | |
| # ── Wire ───────────────────────────────────────────────────────── | |
| run_btn.click( | |
| fn=process_video, | |
| inputs=[video_in, conf, iou, show_traj, show_speed, traj_len], | |
| outputs=[video_out, heatmap_out, stats_out, status_out], | |
| ) | |
| return demo | |
| if __name__ == "__main__": | |
| build_app().launch( | |
| server_name="0.0.0.0", | |
| server_port=7860, | |
| show_error=True, | |
| ) | |