Initial commit — SegVision Video Segmentation App

Full-stack AI video segmentation using:
- Backend: FastAPI + Celery + Redis + DeepLabV3-ResNet50
- Frontend: Next.js 14 + Tailwind CSS
- Output: H.264 MP4 with side-by-side original/segmented video

Setup:
Backend: pip install -r backend/requirements.txt
Frontend: cd frontend && npm install && npm run dev
Start all: bash start.sh

.gitignore

@@ -0,0 +1,63 @@
+# ─── Python ───────────────────────────────────────────────────────────────────
+__pycache__/
+*.py[cod]
+*.pyo
+*.pyd
+.Python
+*.egg
+*.egg-info/
+dist/
+build/
+.eggs/
+
+# Virtual envs
+.venv/
+venv/
+env/
+ENV/
+
+# ─── Node / Next.js ───────────────────────────────────────────────────────────
+node_modules/
+.next/
+out/
+.npm
+*.tsbuildinfo
+next-env.d.ts
+
+# ─── ML / Data ────────────────────────────────────────────────────────────────
+*.pt
+*.pth
+*.onnx
+*.h5
+*.pkl
+*.npy
+*.npz
+/tmp/
+uploads/
+outputs/
+
+# ─── Environment / Secrets ────────────────────────────────────────────────────
+.env
+.env.local
+.env.*.local
+*.env
+
+# ─── OS ───────────────────────────────────────────────────────────────────────
+.DS_Store
+.DS_Store?
+._*
+Thumbs.db
+
+# ─── Logs ─────────────────────────────────────────────────────────────────────
+*.log
+logs/
+celery_worker.log
+
+# ─── Docker ───────────────────────────────────────────────────────────────────
+docker-compose.override.yml
+
+# ─── IDE ──────────────────────────────────────────────────────────────────────
+.idea/
+.vscode/
+*.swp
+*.swo

README.md

@@ -0,0 +1,196 @@
+# SegVision — AI Video Segmentation App
+
+> Upload any video → get real-time semantic segmentation with 21-class PASCAL VOC overlay.  
+> Powered by **DeepLabV3 + ResNet-50**, **FastAPI**, **Celery**, **Redis**, and **Next.js 14**.
+
+---
+
+## Architecture
+
+```
+┌─────────────────┐      HTTP/WS      ┌──────────────────┐
+│  Next.js 14     │◄─────────────────►│  FastAPI         │
+│  (port 3000)    │   upload/status   │  (port 8000)     │
+│  Dark UI        │   WS progress     │  DeepLabV3 model │
+└─────────────────┘                   └────────┬─────────┘
+                                               │ Celery tasks
+                                    ┌──────────▼─────────┐
+                                    │  Redis              │
+                                    │  (broker + backend) │
+                                    └──────────┬─────────┘
+                                               │
+                                    ┌──────────▼─────────┐
+                                    │  Celery Worker      │
+                                    │  (GPU inference)    │
+                                    └────────────────────┘
+```
+
+---
+
+## Quick Start (Local Dev)
+
+### Prerequisites
+- Python 3.10+
+- Node.js 18+ (for frontend)
+- Redis (or Docker to run Redis)
+- Optional: CUDA-capable GPU
+
+### One-command start
+
+```bash
+bash start.sh
+```
+
+This will:
+1. Start Redis (via Docker if not installed locally)
+2. Create Python venv + install backend deps
+3. Start Celery worker
+4. Start FastAPI on `:8000`
+5. Start Next.js on `:3000`
+
+Then open **http://localhost:3000** 🎉
+
+---
+
+## Manual Setup
+
+### Backend
+
+```bash
+cd backend
+python3 -m venv .venv
+source .venv/bin/activate            # Windows: .venv\Scripts\activate
+pip install -r requirements.txt
+
+# Terminal 1 — API server
+uvicorn main:app --reload --port 8000
+
+# Terminal 2 — Celery worker
+celery -A tasks worker --loglevel=info
+```
+
+### Frontend
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+### Redis (if not installed)
+
+```bash
+docker run -d -p 6379:6379 redis:7-alpine
+```
+
+---
+
+## Docker (Production)
+
+```bash
+docker-compose up --build
+```
+
+Services:
+| Service | Port | Description |
+|---|---|---|
+| `frontend` | 3000 | Next.js UI |
+| `backend` | 8000 | FastAPI + model |
+| `worker` | — | Celery inference worker |
+| `redis` | 6379 | Message broker |
+
+---
+
+## API Reference
+
+| Method | Endpoint | Description |
+|---|---|---|
+| `POST` | `/api/upload` | Upload video → returns `job_id` |
+| `GET` | `/api/status/{job_id}` | Job progress (0–100%) + detected classes |
+| `GET` | `/api/video/{job_id}` | Stream segmented MP4 |
+| `DELETE` | `/api/job/{job_id}` | Cleanup files |
+| `WS` | `/ws/{job_id}` | Real-time progress stream |
+| `GET` | `/api/health` | Health check + device info |
+| `GET` | `/docs` | Interactive Swagger UI |
+
+### Upload Response
+```json
+{
+  "job_id": "uuid",
+  "status": "queued",
+  "filename": "my_video.mp4",
+  "size_mb": 12.5
+}
+```
+
+### Status Response
+```json
+{
+  "job_id": "uuid",
+  "status": "processing",
+  "pct": 42.7,
+  "detected": ["person", "car", "dog"]
+}
+```
+
+---
+
+## PASCAL VOC Classes (21)
+
+| ID | Class | Colour |
+|---|---|---|
+| 0 | background | ⬛ black |
+| 1 | aeroplane | 🔵 sky blue |
+| 2 | bicycle | 🟠 orange |
+| 3 | bird | 🟡 gold |
+| 4 | boat | 💙 deep sky blue |
+| 5 | bottle | 🟣 dark violet |
+| 6 | bus | 🩷 deep pink |
+| 7 | car | 🔴 crimson |
+| 8 | cat | 🟠 dark orange |
+| 9 | chair | 🟤 saddle brown |
+| 10 | cow | 🟡 yellow |
+| 11 | diningtable | 🟤 chocolate |
+| 12 | dog | 🟣 medium orchid |
+| 13 | horse | 🩷 hot pink |
+| 14 | motorbike | 🟢 spring green |
+| 15 | person | 🔴 red-orange |
+| 16 | potted plant | 🟢 forest green |
+| 17 | sheep | 🟡 khaki |
+| 18 | sofa | 🩵 dark turquoise |
+| 19 | train | 🔵 blue |
+| 20 | tv/monitor | 🩵 aquamarine |
+
+---
+
+## Performance Tips
+
+- **GPU**: Set `DEVICE=cuda` — inference is ~10× faster
+- **Video length**: Works best on clips ≤ 2 min (longer = queued async)
+- **Resolution**: Frames are resized to max 640px — keeps quality + speed balanced
+- **Workers**: Increase `--concurrency` in Celery for parallel jobs
+
+---
+
+## Project Structure
+
+```
+video-seg-app/
+├── backend/
+│   ├── inference.py      # DeepLabV3 model + frame segmentation
+│   ├── tasks.py          # Celery task (async video processing)
+│   ├── main.py           # FastAPI: upload / status / video / WS
+│   ├── requirements.txt
+│   └── Dockerfile
+├── frontend/
+│   ├── src/app/
+│   │   ├── page.tsx              # Upload UI (drag & drop)
+│   │   ├── processing/[id]/      # Real-time progress page
+│   │   └── result/[id]/          # Video player + class legend
+│   ├── src/app/globals.css       # Dark mode design system
+│   ├── tailwind.config.js
+│   └── Dockerfile
+├── docker-compose.yml
+├── start.sh              # One-command local dev
+└── README.md
+```

backend/Dockerfile

@@ -0,0 +1,16 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# System deps for OpenCV
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgl1 libglib2.0-0 ffmpeg \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 8000
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

backend/inference.py

@@ -0,0 +1,282 @@
+"""
+inference.py — Video Segmentation Inference Engine
+Extracted from U-Net + DeepLabV3 notebook.
+
+Loads DeepLabV3-ResNet50 once at startup and exposes:
+  - segment_frame(frame_bgr) -> (seg_rgb, blend_bgr, detected_classes)
+  - process_video(input_path, output_path, progress_cb) -> None
+"""
+
+import cv2
+import numpy as np
+import torch
+import torch.nn.functional as F
+from PIL import Image
+from torchvision.models.segmentation import deeplabv3_resnet50, DeepLabV3_ResNet50_Weights
+import warnings
+import logging
+import os
+import subprocess
+import tempfile
+
+warnings.filterwarnings("ignore")
+logger = logging.getLogger(__name__)
+
+# ─── PASCAL VOC 21 Classes ───────────────────────────────────────────────────
+
+VOC_CLASSES = [
+    "background", "aeroplane", "bicycle", "bird", "boat",
+    "bottle", "bus", "car", "cat", "chair",
+    "cow", "diningtable", "dog", "horse", "motorbike",
+    "person", "potted plant", "sheep", "sofa", "train",
+    "tv/monitor",
+]
+
+# Vibrant perceptually distinct colours (RGB)
+PALETTE = np.array([
+    [  0,   0,   0],   # 0  background
+    [135, 206, 235],   # 1  aeroplane
+    [255, 165,   0],   # 2  bicycle
+    [255, 215,   0],   # 3  bird
+    [  0, 191, 255],   # 4  boat
+    [148,   0, 211],   # 5  bottle
+    [255,  20, 147],   # 6  bus
+    [220,  20,  60],   # 7  car
+    [255, 140,   0],   # 8  cat
+    [139,  69,  19],   # 9  chair
+    [255, 255,   0],   # 10 cow
+    [210, 105,  30],   # 11 dining table
+    [186,  85, 211],   # 12 dog
+    [255, 105, 180],   # 13 horse
+    [  0, 255, 127],   # 14 motorbike
+    [255,  69,   0],   # 15 person
+    [ 34, 139,  34],   # 16 potted plant
+    [240, 230, 140],   # 17 sheep
+    [  0, 206, 209],   # 18 sofa
+    [  0,   0, 255],   # 19 train
+    [127, 255, 212],   # 20 tv/monitor
+], dtype=np.uint8)
+
+# ─── Model Singleton ─────────────────────────────────────────────────────────
+
+_model = None
+_preprocess = None
+DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
+
+
+def get_ffmpeg() -> str:
+    """Return path to ffmpeg — uses bundled imageio-ffmpeg if system ffmpeg not found."""
+    import shutil
+    sys_ffmpeg = shutil.which("ffmpeg")
+    if sys_ffmpeg:
+        return sys_ffmpeg
+    try:
+        import imageio_ffmpeg
+        return imageio_ffmpeg.get_ffmpeg_exe()
+    except ImportError:
+        raise RuntimeError(
+            "ffmpeg not found. Install it: brew install ffmpeg  "
+            "or: pip install imageio-ffmpeg"
+        )
+
+
+def get_model():
+    """Load and cache the model (called once at startup)."""
+    global _model, _preprocess
+    if _model is None:
+        logger.info(f"Loading DeepLabV3-ResNet50 on {DEVICE}...")
+        weights = DeepLabV3_ResNet50_Weights.DEFAULT
+        _model = deeplabv3_resnet50(weights=weights).to(DEVICE)
+        _model.eval()
+        _preprocess = weights.transforms()
+        logger.info("Model loaded successfully.")
+    return _model, _preprocess
+
+
+# ─── Core Inference Helpers ───────────────────────────────────────────────────
+
+def decode_segmap(seg_mask: np.ndarray) -> np.ndarray:
+    """Convert (H,W) class index map → (H,W,3) RGB colour image."""
+    return PALETTE[seg_mask % len(PALETTE)]
+
+
+def segment_frame(frame_bgr: np.ndarray, alpha: float = 0.55):
+    """
+    Segment a single BGR frame.
+
+    Returns:
+        seg_rgb   : pure colour mask (H,W,3) uint8
+        blend_bgr : original blended with mask (H,W,3) uint8
+        detected  : set of detected class IDs (excluding background)
+    """
+    model, preprocess = get_model()
+    h, w = frame_bgr.shape[:2]
+    frame_rgb = cv2.cvtColor(frame_bgr, cv2.COLOR_BGR2RGB)
+    pil_img = Image.fromarray(frame_rgb)
+
+    inp = preprocess(pil_img).unsqueeze(0).to(DEVICE)
+
+    with torch.no_grad():
+        out = model(inp)["out"]
+        pred = out.argmax(dim=1).squeeze().cpu().numpy()
+
+    pred_resized = cv2.resize(
+        pred.astype(np.uint8), (w, h), interpolation=cv2.INTER_NEAREST
+    )
+
+    seg_rgb = decode_segmap(pred_resized)
+    seg_bgr = cv2.cvtColor(seg_rgb, cv2.COLOR_RGB2BGR)
+    blend_bgr = cv2.addWeighted(frame_bgr, 1 - alpha, seg_bgr, alpha, 0)
+    detected = set(np.unique(pred_resized).tolist()) - {0}
+
+    return seg_rgb, blend_bgr, detected
+
+
+def make_legend_bar(class_ids: set, bar_w: int, bar_h: int = 40) -> np.ndarray:
+    """Render a colour legend strip for detected classes."""
+    bar = np.zeros((bar_h, bar_w, 3), dtype=np.uint8)
+    classes = sorted(class_ids)
+    if not classes:
+        return bar
+    sw = bar_w // max(len(classes), 1)
+    for i, cid in enumerate(classes):
+        x0, x1 = i * sw, min((i + 1) * sw, bar_w)
+        color = PALETTE[cid % len(PALETTE)].tolist()
+        bar[:, x0:x1] = color
+        label = VOC_CLASSES[cid] if cid < len(VOC_CLASSES) else str(cid)
+        cv2.putText(
+            bar, label, (x0 + 3, bar_h - 8),
+            cv2.FONT_HERSHEY_SIMPLEX, 0.38, (255, 255, 255), 1, cv2.LINE_AA,
+        )
+    return bar
+
+
+# ─── Video Processing ─────────────────────────────────────────────────────────
+
+def _reencode_h264(raw_path: str, final_path: str, fps: float):
+    """
+    Re-encode a raw opencv-written video to H.264 MP4 using ffmpeg.
+    H.264 is required for browser <video> playback.
+    """
+    ffmpeg = get_ffmpeg()
+    cmd = [
+        ffmpeg, "-y",
+        "-i", raw_path,
+        "-vcodec", "libx264",
+        "-preset", "fast",
+        "-crf", "23",           # quality: 18=great, 28=ok; 23 is default
+        "-pix_fmt", "yuv420p",  # required for QuickTime / Safari compatibility
+        "-movflags", "+faststart",  # puts moov atom at start for streaming
+        "-an",                  # no audio track
+        final_path,
+    ]
+    logger.info(f"Re-encoding to H.264: {' '.join(cmd)}")
+    result = subprocess.run(cmd, capture_output=True, text=True)
+    if result.returncode != 0:
+        logger.error(f"ffmpeg error: {result.stderr[-500:]}")
+        raise RuntimeError(f"ffmpeg re-encoding failed: {result.stderr[-300:]}")
+    logger.info("H.264 re-encoding complete.")
+
+
+def process_video(
+    input_path: str,
+    output_path: str,
+    progress_callback=None,
+    alpha: float = 0.55,
+    max_dim: int = 640,
+):
+    """
+    Process a video file frame-by-frame and write browser-compatible H.264 MP4.
+
+    Args:
+        input_path: path to input video
+        output_path: path to write final H.264 MP4 (browser-playable)
+        progress_callback: callable(pct: float, detected_names: list) or None
+        alpha: blend alpha for overlay (0=original, 1=mask)
+        max_dim: resize longest edge to this before inference (for speed)
+    """
+    cap = cv2.VideoCapture(input_path)
+    if not cap.isOpened():
+        raise ValueError(f"Cannot open video: {input_path}")
+
+    total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+    fps = cap.get(cv2.CAP_PROP_FPS) or 25.0
+    orig_w = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+    orig_h = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+
+    # Resize to max_dim on longest edge (keeps aspect ratio)
+    scale = min(max_dim / orig_w, max_dim / orig_h, 1.0)
+    out_w = int(orig_w * scale)
+    out_h = int(orig_h * scale)
+
+    # H.264 requires even dimensions
+    out_w = out_w if out_w % 2 == 0 else out_w - 1
+    out_h = out_h if out_h % 2 == 0 else out_h - 1
+
+    combined_w = out_w * 2
+    combined_h = out_h + 44  # +44px for legend bar
+    # also ensure combined dims are even
+    combined_w = combined_w if combined_w % 2 == 0 else combined_w - 1
+    combined_h = combined_h if combined_h % 2 == 0 else combined_h - 1
+
+    # Write raw frames to a temp file first (mp4v is fastest for write)
+    # then re-encode to H.264 for browser compatibility
+    tmp_fd, tmp_path = tempfile.mkstemp(suffix="_raw.mp4")
+    os.close(tmp_fd)
+
+    fourcc = cv2.VideoWriter_fourcc(*"mp4v")
+    writer = cv2.VideoWriter(tmp_path, fourcc, fps, (combined_w, combined_h))
+    if not writer.isOpened():
+        raise RuntimeError(f"Failed to open VideoWriter for {tmp_path}")
+
+    frame_idx = 0
+    all_detected = set()
+
+    logger.info(f"Processing {total_frames} frames @ {fps:.1f} fps — output {combined_w}x{combined_h}")
+
+    while True:
+        ret, frame = cap.read()
+        if not ret:
+            break
+
+        # Resize frame for inference
+        if scale < 1.0 or frame.shape[1] != out_w or frame.shape[0] != out_h:
+            frame = cv2.resize(frame, (out_w, out_h), interpolation=cv2.INTER_AREA)
+
+        seg_rgb, blend_bgr, detected = segment_frame(frame, alpha=alpha)
+        all_detected.update(detected)
+
+        # Legend bar (colour + label per class)
+        legend = make_legend_bar(all_detected, combined_w, bar_h=44)
+        legend_bgr = cv2.cvtColor(legend, cv2.COLOR_RGB2BGR)
+
+        # Side-by-side: original left | segmented overlay right
+        side_by_side = np.hstack([frame, blend_bgr])
+        combined = np.vstack([side_by_side, legend_bgr])
+
+        writer.write(combined)
+        frame_idx += 1
+
+        if progress_callback and total_frames > 0:
+            pct = round(frame_idx / total_frames * 100, 1)
+            detected_names = [
+                VOC_CLASSES[c] for c in sorted(all_detected) if c < len(VOC_CLASSES)
+            ]
+            progress_callback(pct, detected_names)
+
+    cap.release()
+    writer.release()
+    logger.info(f"Raw frames written to temp: {tmp_path}")
+
+    # Re-encode raw mp4v → H.264 for browser playback
+    try:
+        _reencode_h264(tmp_path, output_path, fps)
+    finally:
+        # Always clean up temp file
+        try:
+            os.unlink(tmp_path)
+        except OSError:
+            pass
+
+    logger.info(f"Final H.264 output: {output_path}")
+    return all_detected

backend/main.py

@@ -0,0 +1,256 @@
+"""
+main.py — FastAPI backend for Video Segmentation App.
+
+Endpoints:
+  POST /api/upload         → Upload video, returns job_id
+  GET  /api/status/{id}   → Job status + progress
+  GET  /api/video/{id}    → Stream result video
+  WS   /ws/{id}           → WebSocket real-time progress
+  GET  /api/health        → Health check
+"""
+
+import os
+import uuid
+import asyncio
+import logging
+from pathlib import Path
+from typing import Optional
+
+from fastapi import FastAPI, UploadFile, File, HTTPException, WebSocket, WebSocketDisconnect
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from celery.result import AsyncResult
+
+from tasks import celery_app, segment_video_task
+from inference import get_model  # pre-load model at startup
+
+# ─── Config ──────────────────────────────────────────────────────────────────
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+UPLOAD_DIR = Path(os.getenv("UPLOAD_DIR", "/tmp/video_seg/uploads"))
+OUTPUT_DIR = Path(os.getenv("OUTPUT_DIR", "/tmp/video_seg/outputs"))
+MAX_FILE_SIZE_MB = int(os.getenv("MAX_FILE_SIZE_MB", "200"))
+ALLOWED_EXTENSIONS = {".mp4", ".avi", ".mov", ".mkv", ".webm"}
+
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
+
+# ─── App ─────────────────────────────────────────────────────────────────────
+
+app = FastAPI(
+    title="Video Segmentation API",
+    description="Upload a video and get semantic segmentation overlay",
+    version="1.0.0",
+)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # tighten in production
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# ─── Startup: warm up the model ───────────────────────────────────────────────
+
+@app.on_event("startup")
+async def startup_event():
+    logger.info("Warming up segmentation model …")
+    get_model()
+    logger.info("Model ready.")
+
+
+# ─── WebSocket connection manager ─────────────────────────────────────────────
+
+class ConnectionManager:
+    def __init__(self):
+        self.active: dict[str, list[WebSocket]] = {}
+
+    async def connect(self, job_id: str, ws: WebSocket):
+        await ws.accept()
+        self.active.setdefault(job_id, []).append(ws)
+
+    def disconnect(self, job_id: str, ws: WebSocket):
+        if job_id in self.active:
+            self.active[job_id].discard(ws)
+
+    async def broadcast(self, job_id: str, data: dict):
+        for ws in list(self.active.get(job_id, [])):
+            try:
+                await ws.send_json(data)
+            except Exception:
+                self.active[job_id].discard(ws)
+
+
+manager = ConnectionManager()
+
+
+# ─── Endpoints ───────────────────────────────────────────────────────────────
+
+@app.get("/api/health")
+async def health():
+    return {"status": "ok", "device": "cuda" if _cuda_available() else "cpu"}
+
+
+def _cuda_available():
+    try:
+        import torch
+        return torch.cuda.is_available()
+    except Exception:
+        return False
+
+
+@app.post("/api/upload")
+async def upload_video(file: UploadFile = File(...)):
+    """Accept video file, enqueue segmentation task, return job_id."""
+
+    # Validate extension
+    ext = Path(file.filename).suffix.lower()
+    if ext not in ALLOWED_EXTENSIONS:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Unsupported format '{ext}'. Allowed: {ALLOWED_EXTENSIONS}",
+        )
+
+    job_id = str(uuid.uuid4())
+    input_path = UPLOAD_DIR / f"{job_id}{ext}"
+    output_path = OUTPUT_DIR / f"{job_id}_output.mp4"
+
+    # Stream write to disk
+    content = await file.read()
+    size_mb = len(content) / (1024 * 1024)
+    if size_mb > MAX_FILE_SIZE_MB:
+        raise HTTPException(
+            status_code=413,
+            detail=f"File too large ({size_mb:.1f} MB). Max: {MAX_FILE_SIZE_MB} MB",
+        )
+
+    with open(input_path, "wb") as f:
+        f.write(content)
+
+    logger.info(f"[{job_id}] Uploaded {file.filename} ({size_mb:.1f} MB)")
+
+    # Dispatch Celery task
+    task = segment_video_task.apply_async(
+        args=[job_id, str(input_path), str(output_path)],
+        task_id=job_id,
+    )
+
+    return {
+        "job_id": job_id,
+        "status": "queued",
+        "filename": file.filename,
+        "size_mb": round(size_mb, 2),
+    }
+
+
+@app.get("/api/status/{job_id}")
+async def get_status(job_id: str):
+    """Return current job status and progress."""
+    result = AsyncResult(job_id, app=celery_app)
+
+    state = result.state  # PENDING / PROGRESS / SUCCESS / FAILURE
+
+    if state == "PENDING":
+        return {"job_id": job_id, "status": "queued", "pct": 0.0, "detected": []}
+
+    if state == "PROGRESS":
+        meta = result.info or {}
+        return {
+            "job_id": job_id,
+            "status": "processing",
+            "pct": meta.get("pct", 0.0),
+            "detected": meta.get("detected", []),
+        }
+
+    if state == "SUCCESS":
+        info = result.result or {}
+        return {
+            "job_id": job_id,
+            "status": "done",
+            "pct": 100.0,
+            "detected": info.get("detected", []),
+        }
+
+    if state == "FAILURE":
+        return {
+            "job_id": job_id,
+            "status": "error",
+            "error": str(result.info),
+        }
+
+    return {"job_id": job_id, "status": state.lower()}
+
+
+@app.get("/api/video/{job_id}")
+async def get_video(job_id: str):
+    """Stream the processed video file."""
+    output_path = OUTPUT_DIR / f"{job_id}_output.mp4"
+    if not output_path.exists():
+        raise HTTPException(status_code=404, detail="Result not ready yet")
+    return FileResponse(
+        str(output_path),
+        media_type="video/mp4",
+        filename=f"segmented_{job_id}.mp4",
+    )
+
+
+@app.delete("/api/job/{job_id}")
+async def delete_job(job_id: str):
+    """Cleanup uploaded + output files for a job."""
+    for path in UPLOAD_DIR.glob(f"{job_id}*"):
+        path.unlink(missing_ok=True)
+    for path in OUTPUT_DIR.glob(f"{job_id}*"):
+        path.unlink(missing_ok=True)
+    return {"job_id": job_id, "status": "deleted"}
+
+
+# ─── WebSocket: real-time progress ────────────────────────────────────────────
+
+@app.websocket("/ws/{job_id}")
+async def websocket_progress(websocket: WebSocket, job_id: str):
+    """
+    Poll Celery job status and push updates to connected browser.
+    Closes automatically when job finishes.
+    """
+    await manager.connect(job_id, websocket)
+    try:
+        while True:
+            result = AsyncResult(job_id, app=celery_app)
+            state = result.state
+
+            if state == "PENDING":
+                payload = {"status": "queued", "pct": 0.0, "detected": []}
+            elif state == "PROGRESS":
+                meta = result.info or {}
+                payload = {
+                    "status": "processing",
+                    "pct": meta.get("pct", 0.0),
+                    "detected": meta.get("detected", []),
+                }
+            elif state == "SUCCESS":
+                info = result.result or {}
+                payload = {
+                    "status": "done",
+                    "pct": 100.0,
+                    "detected": info.get("detected", []),
+                }
+                await websocket.send_json(payload)
+                break  # close WS on completion
+            elif state == "FAILURE":
+                payload = {"status": "error", "error": str(result.info)}
+                await websocket.send_json(payload)
+                break
+            else:
+                payload = {"status": state.lower(), "pct": 0.0}
+
+            await websocket.send_json(payload)
+            await asyncio.sleep(0.8)  # poll every 800ms
+
+    except WebSocketDisconnect:
+        logger.info(f"[{job_id}] WebSocket disconnected")
+    finally:
+        manager.disconnect(job_id, websocket)

backend/requirements.txt

@@ -0,0 +1,12 @@
+fastapi>=0.111.0
+uvicorn[standard]>=0.29.0
+python-multipart>=0.0.9
+celery[redis]>=5.3.6
+redis>=5.0.4
+torch>=2.2.0
+torchvision>=0.17.0
+opencv-python-headless>=4.9.0
+Pillow>=10.3.0
+numpy>=1.26.0
+imageio>=2.34.0
+imageio-ffmpeg>=0.4.9

backend/tasks.py

@@ -0,0 +1,76 @@
+"""
+tasks.py — Celery async tasks for video segmentation.
+"""
+
+import os
+import json
+import logging
+from celery import Celery
+from inference import process_video, VOC_CLASSES
+
+logger = logging.getLogger(__name__)
+
+REDIS_URL = os.getenv("REDIS_URL", "redis://localhost:6379/0")
+
+celery_app = Celery(
+    "video_seg",
+    broker=REDIS_URL,
+    backend=REDIS_URL,
+)
+
+celery_app.conf.update(
+    task_serializer="json",
+    accept_content=["json"],
+    result_serializer="json",
+    timezone="UTC",
+    enable_utc=True,
+    task_track_started=True,
+    result_expires=3600,  # results expire in 1 hour
+)
+
+
+@celery_app.task(bind=True, name="tasks.segment_video")
+def segment_video_task(self, job_id: str, input_path: str, output_path: str):
+    """
+    Celery task: runs video segmentation and updates progress via Redis.
+    Progress is stored in Celery's backend so FastAPI can poll it.
+    """
+    try:
+        self.update_state(
+            state="PROGRESS",
+            meta={"pct": 0.0, "detected": [], "status": "starting"},
+        )
+
+        def on_progress(pct, detected_names):
+            self.update_state(
+                state="PROGRESS",
+                meta={
+                    "pct": pct,
+                    "detected": detected_names,
+                    "status": "processing",
+                },
+            )
+
+        detected = process_video(
+            input_path=input_path,
+            output_path=output_path,
+            progress_callback=on_progress,
+        )
+
+        detected_names = [
+            VOC_CLASSES[c] for c in sorted(detected) if c < len(VOC_CLASSES)
+        ]
+
+        return {
+            "status": "done",
+            "pct": 100.0,
+            "detected": detected_names,
+            "output_path": output_path,
+        }
+
+    except Exception as exc:
+        self.update_state(
+            state="FAILURE",
+            meta={"status": "error", "error": str(exc)},
+        )
+        raise exc

docker-compose.yml

@@ -0,0 +1,78 @@
+version: '3.9'
+
+services:
+
+  # ── Redis (message broker + result backend) ──────────────────────────────
+  redis:
+    image: redis:7-alpine
+    container_name: seg_redis
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis_data:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+    restart: unless-stopped
+
+  # ── FastAPI Backend ───────────────────────────────────────────────────────
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: seg_backend
+    ports:
+      - "8000:8000"
+    environment:
+      - REDIS_URL=redis://redis:6379/0
+      - UPLOAD_DIR=/data/uploads
+      - OUTPUT_DIR=/data/outputs
+      - MAX_FILE_SIZE_MB=200
+    volumes:
+      - seg_data:/data
+      - ./backend:/app           # hot-reload in dev
+    depends_on:
+      redis:
+        condition: service_healthy
+    command: uvicorn main:app --host 0.0.0.0 --port 8000 --reload
+    restart: unless-stopped
+
+  # ── Celery Worker ─────────────────────────────────────────────────────────
+  worker:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: seg_worker
+    environment:
+      - REDIS_URL=redis://redis:6379/0
+      - UPLOAD_DIR=/data/uploads
+      - OUTPUT_DIR=/data/outputs
+    volumes:
+      - seg_data:/data
+      - ./backend:/app
+    depends_on:
+      redis:
+        condition: service_healthy
+    # 2 concurrent workers; adjust --concurrency for more GPU jobs
+    command: celery -A tasks worker --loglevel=info --concurrency=2
+    restart: unless-stopped
+
+  # ── Next.js Frontend ─────────────────────────────────────────────────────
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    container_name: seg_frontend
+    ports:
+      - "3000:3000"
+    environment:
+      - NEXT_PUBLIC_API_URL=http://localhost:8000
+    depends_on:
+      - backend
+    restart: unless-stopped
+
+volumes:
+  redis_data:
+  seg_data:

frontend/.env.local

@@ -0,0 +1 @@
+git NEXT_PUBLIC_API_URL=http://localhost:8000

frontend/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:20-alpine AS deps
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV production
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+EXPOSE 3000
+CMD ["npm", "start"]

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

frontend/next.config.js

@@ -0,0 +1,19 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  env: {
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000',
+  },
+  // Allow streaming video from the backend
+  async headers() {
+    return [
+      {
+        source: '/api/:path*',
+        headers: [
+          { key: 'Access-Control-Allow-Origin', value: '*' },
+        ],
+      },
+    ]
+  },
+}
+
+module.exports = nextConfig

frontend/package-lock.json

@@ -0,0 +1,1632 @@
+{
+  "name": "video-seg-frontend",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "video-seg-frontend",
+      "version": "0.1.0",
+      "dependencies": {
+        "next": "14.2.3",
+        "react": "^18",
+        "react-dom": "^18"
+      },
+      "devDependencies": {
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "autoprefixer": "^10.0.1",
+        "postcss": "^8",
+        "tailwindcss": "^3.3.0",
+        "typescript": "^5"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
+      "integrity": "sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
+      "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
+      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
+      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
+      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
+      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
+      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
+      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
+      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
+      "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.39",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.39.tgz",
+      "integrity": "sha512-orrrD74MBUyK8jOAD/r0+lfa1I2MO6I+vAkmAWzMYbCcgrN4lCrmK52gRFQq/JRxfYPfonkr4b0jcY7Olqdqbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.28",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
+      "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
+      "integrity": "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "caniuse-lite": "^1.0.30001787",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.20",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.20.tgz",
+      "integrity": "sha512-1AaXxEPfXT+GvTBJFuy4yXVHWJBXa4OdbIebGN/wX5DlsIkU0+wzGnd2lOzokSk51d5LUmqjgBLRLlypLUqInQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001788",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001788.tgz",
+      "integrity": "sha512-6q8HFp+lOQtcf7wBK+uEenxymVWkGKkjFpCvw5W25cmMwEDU45p1xQFBQv8JDlMMry7eNxyBaR+qxgmTUZkIRQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.340",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.340.tgz",
+      "integrity": "sha512-908qahOGocRMinT2nM3ajCEM99H4iPdv84eagPP3FfZy/1ZGeOy2CZYzjhms81ckOPCXPlW7LkY4XpxD8r1DrA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/hasown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
+      "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.3.tgz",
+      "integrity": "sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==",
+      "deprecated": "This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "14.2.3",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.3",
+        "@next/swc-darwin-x64": "14.2.3",
+        "@next/swc-linux-arm64-gnu": "14.2.3",
+        "@next/swc-linux-arm64-musl": "14.2.3",
+        "@next/swc-linux-x64-gnu": "14.2.3",
+        "@next/swc-linux-x64-musl": "14.2.3",
+        "@next/swc-win32-arm64-msvc": "14.2.3",
+        "@next/swc-win32-ia32-msvc": "14.2.3",
+        "@next/swc-win32-x64-msvc": "14.2.3"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.37",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.37.tgz",
+      "integrity": "sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz",
+      "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "video-seg-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3000",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/app/globals.css

@@ -0,0 +1,147 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg: #0f1117;
+  --surface: #1a1d27;
+  --border: #2a2d3a;
+  --brand: #6366f1;
+  --brand-light: #818cf8;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html, body {
+  min-height: 100vh;
+  background-color: var(--bg);
+  color: #fff;
+  font-family: 'Inter', system-ui, sans-serif;
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #3a3d4a; }
+
+/* Glass card */
+.glass {
+  background: rgba(26, 29, 39, 0.8);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+/* Glow button */
+.btn-glow {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+.btn-glow::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: inherit;
+  background: linear-gradient(135deg, #6366f1, #a855f7, #06b6d4);
+  opacity: 0;
+  transition: opacity 0.3s;
+  z-index: -1;
+}
+.btn-glow:hover::before { opacity: 1; }
+
+/* Shimmer skeleton */
+.shimmer {
+  background: linear-gradient(
+    90deg,
+    rgba(255,255,255,0.03) 25%,
+    rgba(255,255,255,0.08) 50%,
+    rgba(255,255,255,0.03) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2s linear infinite;
+}
+
+/* Drop zone */
+.drop-zone {
+  border: 2px dashed rgba(99, 102, 241, 0.4);
+  transition: all 0.25s ease;
+}
+.drop-zone:hover,
+.drop-zone.drag-over {
+  border-color: rgba(99, 102, 241, 0.9);
+  background: rgba(99, 102, 241, 0.06);
+  box-shadow: 0 0 40px rgba(99, 102, 241, 0.12);
+}
+
+/* Progress bar */
+.progress-track {
+  background: rgba(255,255,255,0.06);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #6366f1, #a855f7);
+  transition: width 0.5s ease-out;
+  position: relative;
+  overflow: hidden;
+}
+.progress-fill::after {
+  content: '';
+  position: absolute;
+  top: 0; right: -100%; bottom: 0;
+  width: 60%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+  animation: shimmer 1.5s linear infinite;
+}
+
+/* Class pill */
+.class-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 500;
+  background: rgba(255,255,255,0.07);
+  border: 1px solid rgba(255,255,255,0.1);
+  animation: slideUp 0.3s ease-out;
+}
+
+/* Video comparison */
+.video-wrapper {
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px;
+  background: #000;
+}
+.video-wrapper video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+/* Stat card */
+.stat-card {
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 12px;
+  padding: 16px 20px;
+  transition: all 0.2s;
+}
+.stat-card:hover {
+  background: rgba(255,255,255,0.07);
+  border-color: rgba(99, 102, 241, 0.4);
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,64 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
+
+export const metadata: Metadata = {
+  title: 'SegVision — AI Video Segmentation',
+  description:
+    'Upload any video and get real-time semantic segmentation with 21-class PASCAL VOC overlay. Powered by DeepLabV3 + ResNet-50.',
+  keywords: ['video segmentation', 'AI', 'semantic segmentation', 'DeepLabV3', 'computer vision'],
+  openGraph: {
+    title: 'SegVision — AI Video Segmentation',
+    description: 'Semantic segmentation overlay for any video, in seconds.',
+    type: 'website',
+  },
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={inter.variable}>
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+      </head>
+      <body className="bg-surface text-white antialiased min-h-screen">
+        {/* Ambient background glow */}
+        <div className="fixed inset-0 pointer-events-none overflow-hidden">
+          <div className="absolute -top-40 -left-40 w-96 h-96 bg-brand-600/20 rounded-full blur-3xl animate-pulse-slow" />
+          <div className="absolute -bottom-40 -right-40 w-96 h-96 bg-purple-600/15 rounded-full blur-3xl animate-pulse-slow" style={{ animationDelay: '1.5s' }} />
+        </div>
+
+        {/* Navbar */}
+        <nav className="relative z-10 border-b border-surface-border bg-surface/80 backdrop-blur-xl">
+          <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
+            <a href="/" className="flex items-center gap-2 group">
+              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
+                  <polygon points="5 3 19 12 5 21 5 3"/>
+                </svg>
+              </div>
+              <span className="text-lg font-bold tracking-tight">
+                Seg<span className="text-brand-400">Vision</span>
+              </span>
+            </a>
+            <div className="flex items-center gap-4 text-sm text-gray-400">
+              <span className="hidden sm:flex items-center gap-1.5">
+                <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
+                DeepLabV3 · ResNet-50 · PASCAL VOC 21
+              </span>
+            </div>
+          </div>
+        </nav>
+
+        <main className="relative z-10">
+          {children}
+        </main>
+
+        <footer className="relative z-10 border-t border-surface-border mt-20 py-8 text-center text-sm text-gray-500">
+          <p>SegVision · Semantic Video Segmentation · DeepLabV3 + ResNet-50</p>
+        </footer>
+      </body>
+    </html>
+  )
+}

frontend/src/app/page.tsx

@@ -0,0 +1,233 @@
+'use client'
+
+import { useState, useRef, useCallback, DragEvent, ChangeEvent } from 'react'
+import { useRouter } from 'next/navigation'
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
+
+const VOC_COLORS: Record<string, string> = {
+  background:    '#000000', aeroplane:   '#87CEEB', bicycle:     '#FFA500',
+  bird:          '#FFD700', boat:        '#00BFFF', bottle:      '#9400D3',
+  bus:           '#FF1493', car:         '#DC143C', cat:         '#FF8C00',
+  chair:         '#8B4513', cow:         '#FFFF00', diningtable: '#D2691E',
+  dog:           '#BA55D3', horse:       '#FF69B4', motorbike:   '#00FF7F',
+  person:        '#FF4500', 'potted plant': '#228B22', sheep:   '#F0E68C',
+  sofa:          '#00CED1', train:       '#0000FF', 'tv/monitor': '#7FFFD4',
+}
+
+const formatBytes = (bytes: number) => {
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+export default function HomePage() {
+  const router = useRouter()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [dragging, setDragging] = useState(false)
+  const [file, setFile] = useState<File | null>(null)
+  const [preview, setPreview] = useState<string | null>(null)
+  const [uploading, setUploading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const validate = (f: File): string | null => {
+    const allowed = ['video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/webm', 'video/x-matroska']
+    if (!allowed.includes(f.type) && !f.name.match(/\.(mp4|mov|avi|webm|mkv)$/i))
+      return 'Only MP4, MOV, AVI, WebM, MKV files are supported.'
+    if (f.size > 200 * 1024 * 1024)
+      return 'File too large. Maximum size is 200 MB.'
+    return null
+  }
+
+  const selectFile = useCallback((f: File) => {
+    const err = validate(f)
+    if (err) { setError(err); return }
+    setError(null)
+    setFile(f)
+    // Create video preview thumbnail
+    const url = URL.createObjectURL(f)
+    setPreview(url)
+  }, [])
+
+  const onDrop = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setDragging(false)
+    const f = e.dataTransfer.files[0]
+    if (f) selectFile(f)
+  }, [selectFile])
+
+  const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0]
+    if (f) selectFile(f)
+  }
+
+  const handleUpload = async () => {
+    if (!file) return
+    setUploading(true)
+    setError(null)
+    try {
+      const form = new FormData()
+      form.append('file', file)
+      const res = await fetch(`${API_BASE}/api/upload`, { method: 'POST', body: form })
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.detail ?? 'Upload failed')
+      }
+      const data = await res.json()
+      router.push(`/processing/${data.job_id}`)
+    } catch (e: any) {
+      setError(e.message ?? 'Upload failed. Is the backend running?')
+      setUploading(false)
+    }
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-16">
+
+      {/* Hero */}
+      <div className="text-center mb-14 animate-fade-in">
+        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium bg-brand-500/10 border border-brand-500/20 text-brand-400 mb-6">
+          <span className="w-1.5 h-1.5 rounded-full bg-brand-400 animate-pulse"></span>
+          Powered by DeepLabV3 · ResNet-50 · PASCAL VOC
+        </div>
+        <h1 className="text-5xl sm:text-6xl font-extrabold tracking-tight mb-5 leading-tight">
+          AI Video
+          <span className="block bg-gradient-to-r from-brand-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
+            Segmentation
+          </span>
+        </h1>
+        <p className="text-lg text-gray-400 max-w-xl mx-auto leading-relaxed">
+          Upload any video and watch AI detect and colour every object in real-time.
+          Get a side-by-side comparison instantly.
+        </p>
+      </div>
+
+      {/* Upload Card */}
+      <div className="glass rounded-2xl p-8 shadow-2xl animate-slide-up">
+
+        {!file ? (
+          /* Drop Zone */
+          <div
+            className={`drop-zone rounded-xl p-12 flex flex-col items-center justify-center cursor-pointer min-h-[280px] ${dragging ? 'drag-over' : ''}`}
+            onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
+            onDragLeave={() => setDragging(false)}
+            onDrop={onDrop}
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <div className={`w-20 h-20 rounded-2xl flex items-center justify-center mb-5 transition-all duration-300 ${dragging ? 'bg-brand-500/20 scale-110' : 'bg-brand-500/10'}`}>
+              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke={dragging ? '#818cf8' : '#6366f1'} strokeWidth="1.5">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                <polyline points="17 8 12 3 7 8"/>
+                <line x1="12" y1="3" x2="12" y2="15"/>
+              </svg>
+            </div>
+            <p className="text-xl font-semibold text-white mb-2">
+              {dragging ? 'Drop it here!' : 'Drop your video here'}
+            </p>
+            <p className="text-gray-400 text-sm mb-5">or click to browse your files</p>
+            <div className="flex items-center gap-2 text-xs text-gray-500">
+              <span className="px-2 py-0.5 rounded bg-white/5 border border-white/10">MP4</span>
+              <span className="px-2 py-0.5 rounded bg-white/5 border border-white/10">MOV</span>
+              <span className="px-2 py-0.5 rounded bg-white/5 border border-white/10">AVI</span>
+              <span className="px-2 py-0.5 rounded bg-white/5 border border-white/10">WebM</span>
+              <span className="text-gray-600">· Max 200 MB</span>
+            </div>
+          </div>
+        ) : (
+          /* File Preview */
+          <div className="animate-fade-in">
+            <div className="video-wrapper mb-5 max-h-64">
+              <video src={preview!} muted className="w-full max-h-64" controls />
+            </div>
+            <div className="flex items-center justify-between p-4 rounded-xl bg-white/5 border border-white/10 mb-5">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-lg bg-brand-500/15 flex items-center justify-center">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2">
+                    <polygon points="5 3 19 12 5 21 5 3"/>
+                  </svg>
+                </div>
+                <div>
+                  <p className="font-medium text-white text-sm truncate max-w-[200px] sm:max-w-sm">{file.name}</p>
+                  <p className="text-xs text-gray-400">{formatBytes(file.size)}</p>
+                </div>
+              </div>
+              <button
+                onClick={() => { setFile(null); setPreview(null); setError(null) }}
+                className="text-gray-400 hover:text-red-400 transition-colors p-1.5 rounded-lg hover:bg-red-500/10"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+        )}
+
+        <input ref={fileInputRef} type="file" accept="video/*" className="hidden" onChange={onFileChange} />
+
+        {error && (
+          <div className="mt-4 p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm flex items-center gap-2">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+            </svg>
+            {error}
+          </div>
+        )}
+
+        <button
+          onClick={handleUpload}
+          disabled={!file || uploading}
+          className="mt-6 w-full py-4 rounded-xl font-semibold text-white text-base transition-all duration-200
+            bg-gradient-to-r from-brand-600 to-purple-600
+            hover:from-brand-500 hover:to-purple-500
+            disabled:opacity-40 disabled:cursor-not-allowed
+            hover:shadow-lg hover:shadow-brand-500/25 hover:-translate-y-0.5
+            active:translate-y-0 flex items-center justify-center gap-3"
+        >
+          {uploading ? (
+            <>
+              <svg className="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+              </svg>
+              Uploading …
+            </>
+          ) : (
+            <>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                <polygon points="5 3 19 12 5 21 5 3"/>
+              </svg>
+              Segment Video
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Feature Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-10 animate-fade-in">
+        {[
+          { icon: '🎯', title: '21 Object Classes', desc: 'People, cars, animals, furniture & more from PASCAL VOC' },
+          { icon: '⚡', title: 'GPU Accelerated', desc: 'CUDA inference for fast frame-by-frame processing' },
+          { icon: '🎬', title: 'Side-by-Side View', desc: 'Original vs segmented video with downloadable output' },
+        ].map((f) => (
+          <div key={f.title} className="stat-card">
+            <div className="text-2xl mb-2">{f.icon}</div>
+            <h3 className="font-semibold text-white text-sm mb-1">{f.title}</h3>
+            <p className="text-xs text-gray-400 leading-relaxed">{f.desc}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Class palette preview */}
+      <div className="mt-10 glass rounded-xl p-6 animate-fade-in">
+        <h2 className="text-sm font-semibold text-gray-300 mb-4">Detectable Classes</h2>
+        <div className="flex flex-wrap gap-2">
+          {Object.entries(VOC_COLORS).filter(([k]) => k !== 'background').map(([cls, hex]) => (
+            <span key={cls} className="class-pill">
+              <span className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: hex }} />
+              {cls}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/app/processing/[id]/page.tsx

@@ -0,0 +1,221 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+import { useRouter, useParams } from 'next/navigation'
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
+
+const VOC_COLORS: Record<string, string> = {
+  aeroplane: '#87CEEB', bicycle: '#FFA500', bird: '#FFD700',
+  boat: '#00BFFF', bottle: '#9400D3', bus: '#FF1493',
+  car: '#DC143C', cat: '#FF8C00', chair: '#8B4513',
+  cow: '#FFFF00', diningtable: '#D2691E', dog: '#BA55D3',
+  horse: '#FF69B4', motorbike: '#00FF7F', person: '#FF4500',
+  'potted plant': '#228B22', sheep: '#F0E68C', sofa: '#00CED1',
+  train: '#0000FF', 'tv/monitor': '#7FFFD4',
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  queued: 'Queued',
+  processing: 'Segmenting frames …',
+  done: 'Complete!',
+  error: 'Error',
+}
+
+export default function ProcessingPage() {
+  const router = useRouter()
+  const params = useParams()
+  const jobId = params?.id as string
+
+  const [pct, setPct] = useState(0)
+  const [status, setStatus] = useState<string>('queued')
+  const [detected, setDetected] = useState<string[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [elapsed, setElapsed] = useState(0)
+  const wsRef = useRef<WebSocket | null>(null)
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    if (!jobId) return
+
+    // Start elapsed timer
+    const startTime = Date.now()
+    timerRef.current = setInterval(() => {
+      setElapsed(Math.floor((Date.now() - startTime) / 1000))
+    }, 1000)
+
+    // Open WebSocket
+    const wsUrl = `${API_BASE.replace('http', 'ws')}/ws/${jobId}`
+    const ws = new WebSocket(wsUrl)
+    wsRef.current = ws
+
+    ws.onmessage = (evt) => {
+      const data = JSON.parse(evt.data)
+      setStatus(data.status)
+      if (data.pct !== undefined) setPct(data.pct)
+      if (data.detected) setDetected(data.detected)
+      if (data.status === 'done') {
+        setPct(100)
+        clearInterval(timerRef.current!)
+        setTimeout(() => router.push(`/result/${jobId}`), 1200)
+      }
+      if (data.status === 'error') {
+        setError(data.error ?? 'Segmentation failed.')
+        clearInterval(timerRef.current!)
+      }
+    }
+
+    ws.onerror = () => {
+      // Fallback: poll via HTTP if WS fails
+      pollStatus()
+    }
+
+    return () => {
+      ws.close()
+      clearInterval(timerRef.current!)
+    }
+  }, [jobId])
+
+  const pollStatus = async () => {
+    const interval = setInterval(async () => {
+      try {
+        const res = await fetch(`${API_BASE}/api/status/${jobId}`)
+        const data = await res.json()
+        setStatus(data.status)
+        if (data.pct !== undefined) setPct(data.pct)
+        if (data.detected) setDetected(data.detected)
+        if (data.status === 'done') {
+          clearInterval(interval)
+          clearInterval(timerRef.current!)
+          setTimeout(() => router.push(`/result/${jobId}`), 1200)
+        }
+        if (data.status === 'error') {
+          setError(data.error)
+          clearInterval(interval)
+        }
+      } catch (e) {
+        // ignore transient errors
+      }
+    }, 1000)
+  }
+
+  const formatTime = (s: number) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`
+
+  return (
+    <div className="max-w-2xl mx-auto px-4 py-20">
+      <div className="glass rounded-2xl p-10 shadow-2xl animate-fade-in">
+
+        {/* Status header */}
+        <div className="text-center mb-10">
+          <div className={`w-20 h-20 rounded-2xl mx-auto mb-5 flex items-center justify-center
+            ${status === 'done' ? 'bg-green-500/15' : status === 'error' ? 'bg-red-500/15' : 'bg-brand-500/15'}`}>
+            {status === 'done' ? (
+              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.5">
+                <polyline points="20 6 9 17 4 12"/>
+              </svg>
+            ) : status === 'error' ? (
+              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2.5">
+                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            ) : (
+              <svg className="animate-spin" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2">
+                <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+              </svg>
+            )}
+          </div>
+
+          <h1 className="text-2xl font-bold text-white mb-1">
+            {STATUS_LABELS[status] ?? status}
+          </h1>
+          <p className="text-gray-400 text-sm">
+            Job ID: <code className="text-brand-400 font-mono">{jobId?.slice(0, 8)}…</code>
+            {status === 'processing' && (
+              <span className="ml-3 text-gray-500">⏱ {formatTime(elapsed)}</span>
+            )}
+          </p>
+        </div>
+
+        {/* Progress Bar */}
+        {status !== 'error' && (
+          <div className="mb-8">
+            <div className="flex justify-between text-sm font-medium mb-2.5">
+              <span className="text-gray-300">Progress</span>
+              <span className={`${pct >= 100 ? 'text-green-400' : 'text-brand-400'}`}>{pct.toFixed(1)}%</span>
+            </div>
+            <div className="progress-track h-3">
+              <div className="progress-fill h-full" style={{ width: `${pct}%` }} />
+            </div>
+          </div>
+        )}
+
+        {/* Error */}
+        {error && (
+          <div className="p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-sm mb-6">
+            <strong>Error:</strong> {error}
+          </div>
+        )}
+
+        {/* Detected classes */}
+        {detected.length > 0 && (
+          <div>
+            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
+              Detected Objects ({detected.length})
+            </p>
+            <div className="flex flex-wrap gap-2">
+              {detected.map((cls) => (
+                <span key={cls} className="class-pill">
+                  <span
+                    className="w-3 h-3 rounded-full flex-shrink-0"
+                    style={{ backgroundColor: VOC_COLORS[cls] ?? '#888' }}
+                  />
+                  {cls}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Queue state placeholder */}
+        {status === 'queued' && (
+          <div className="flex items-center gap-3 p-4 rounded-xl bg-white/5 border border-white/10">
+            <div className="flex gap-1">
+              {[0, 1, 2].map((i) => (
+                <span
+                  key={i}
+                  className="w-2.5 h-2.5 bg-brand-400 rounded-full animate-bounce"
+                  style={{ animationDelay: `${i * 0.15}s` }}
+                />
+              ))}
+            </div>
+            <p className="text-gray-400 text-sm">Waiting for a worker to pick up this job …</p>
+          </div>
+        )}
+
+        {/* Shimmer stats while processing */}
+        {status === 'processing' && (
+          <div className="mt-6 grid grid-cols-3 gap-3">
+            {['Frames Processed', 'Objects Found', 'Time Elapsed'].map((label, i) => (
+              <div key={label} className="stat-card text-center">
+                <p className="text-xs text-gray-500 mb-1">{label}</p>
+                <p className="font-bold text-white">
+                  {i === 0 ? `${pct.toFixed(0)}%` : i === 1 ? detected.length : formatTime(elapsed)}
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Back button */}
+        <a
+          href="/"
+          className="mt-8 flex items-center justify-center gap-2 text-sm text-gray-400 hover:text-white transition-colors"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="15 18 9 12 15 6"/>
+          </svg>
+          Back to upload
+        </a>
+      </div>
+    </div>
+  )
+}

frontend/src/app/result/[id]/page.tsx

@@ -0,0 +1,265 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+import { useParams } from 'next/navigation'
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
+
+const VOC_COLORS: Record<string, string> = {
+  aeroplane: '#87CEEB', bicycle: '#FFA500', bird: '#FFD700',
+  boat: '#00BFFF', bottle: '#9400D3', bus: '#FF1493',
+  car: '#DC143C', cat: '#FF8C00', chair: '#8B4513',
+  cow: '#FFFF00', diningtable: '#D2691E', dog: '#BA55D3',
+  horse: '#FF69B4', motorbike: '#00FF7F', person: '#FF4500',
+  'potted plant': '#228B22', sheep: '#F0E68C', sofa: '#00CED1',
+  train: '#0000FF', 'tv/monitor': '#7FFFD4',
+}
+
+export default function ResultPage() {
+  const params = useParams()
+  const jobId = params?.id as string
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const [status, setStatus] = useState<'loading' | 'ready' | 'error'>('loading')
+  const [detected, setDetected] = useState<string[]>([])
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [duration, setDuration] = useState(0)
+  const [volume, setVolume] = useState(1)
+
+  const videoUrl = `${API_BASE}/api/video/${jobId}`
+  const downloadUrl = videoUrl
+
+  useEffect(() => {
+    if (!jobId) return
+    fetch(`${API_BASE}/api/status/${jobId}`)
+      .then(r => r.json())
+      .then(data => {
+        if (data.status === 'done') {
+          setDetected(data.detected || [])
+          setStatus('ready')
+        } else if (data.status === 'error') {
+          setStatus('error')
+        }
+      })
+      .catch(() => setStatus('error'))
+  }, [jobId])
+
+  const togglePlay = () => {
+    const v = videoRef.current
+    if (!v) return
+    if (v.paused) { v.play(); setIsPlaying(true) }
+    else { v.pause(); setIsPlaying(false) }
+  }
+
+  const onTimeUpdate = () => {
+    if (videoRef.current) setCurrentTime(videoRef.current.currentTime)
+  }
+
+  const onLoadedMetadata = () => {
+    if (videoRef.current) setDuration(videoRef.current.duration)
+  }
+
+  const seek = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const t = parseFloat(e.target.value)
+    if (videoRef.current) { videoRef.current.currentTime = t; setCurrentTime(t) }
+  }
+
+  const changeVolume = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = parseFloat(e.target.value)
+    if (videoRef.current) videoRef.current.volume = v
+    setVolume(v)
+  }
+
+  const formatTime = (s: number) => {
+    const m = Math.floor(s / 60)
+    const sec = Math.floor(s % 60)
+    return `${m}:${String(sec).padStart(2, '0')}`
+  }
+
+  if (status === 'loading') {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-20 text-center animate-fade-in">
+        <div className="glass rounded-2xl p-16 shadow-2xl">
+          <div className="w-16 h-16 rounded-2xl bg-brand-500/15 flex items-center justify-center mx-auto mb-5">
+            <svg className="animate-spin" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2">
+              <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+            </svg>
+          </div>
+          <p className="text-gray-300 text-lg">Loading your result …</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (status === 'error') {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-20 text-center animate-fade-in">
+        <div className="glass rounded-2xl p-16 shadow-2xl">
+          <div className="w-16 h-16 rounded-2xl bg-red-500/15 flex items-center justify-center mx-auto mb-5">
+            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2">
+              <circle cx="12" cy="12" r="10"/>
+              <line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
+            </svg>
+          </div>
+          <p className="text-gray-300 text-lg mb-2">Result not available</p>
+          <p className="text-gray-500 text-sm mb-6">The job may have failed or the result has expired.</p>
+          <a href="/" className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-medium text-sm transition-colors">
+            Try again
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto px-4 py-12 animate-fade-in">
+
+      {/* Success Banner */}
+      <div className="flex items-center justify-between mb-8 flex-wrap gap-4">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <span className="w-2 h-2 rounded-full bg-green-400"></span>
+            <span className="text-xs font-semibold text-green-400 uppercase tracking-wider">Segmentation Complete</span>
+          </div>
+          <h1 className="text-3xl font-bold text-white">Your Segmented Video</h1>
+          <p className="text-gray-400 text-sm mt-1">
+            Job: <code className="font-mono text-brand-400">{jobId?.slice(0, 8)}…</code>
+            {detected.length > 0 && ` · ${detected.length} object class${detected.length > 1 ? 'es' : ''} detected`}
+          </p>
+        </div>
+        <a
+          href={downloadUrl}
+          download={`segmented_${jobId?.slice(0, 8)}.mp4`}
+          className="flex items-center gap-2 px-5 py-2.5 rounded-xl
+            bg-gradient-to-r from-brand-600 to-purple-600
+            hover:from-brand-500 hover:to-purple-500
+            text-white font-semibold text-sm transition-all
+            hover:shadow-lg hover:shadow-brand-500/25 hover:-translate-y-0.5"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="7 10 12 15 17 10"/>
+            <line x1="12" y1="15" x2="12" y2="3"/>
+          </svg>
+          Download MP4
+        </a>
+      </div>
+
+      {/* Video Player */}
+      <div className="glass rounded-2xl overflow-hidden shadow-2xl mb-6">
+        {/* Labels */}
+        <div className="flex text-xs font-semibold text-gray-400 uppercase tracking-wider px-5 pt-4 pb-2 border-b border-white/5">
+          <span className="w-1/2 text-center">Original</span>
+          <span className="w-1/2 text-center text-brand-400">Segmented Overlay</span>
+        </div>
+
+        {/* Video */}
+        <div className="bg-black relative">
+          <video
+            ref={videoRef}
+            src={videoUrl}
+            className="w-full max-h-[480px] object-contain"
+            onTimeUpdate={onTimeUpdate}
+            onLoadedMetadata={onLoadedMetadata}
+            onEnded={() => setIsPlaying(false)}
+          />
+        </div>
+
+        {/* Custom Controls */}
+        <div className="px-5 py-4 bg-surface-card/60 backdrop-blur-sm space-y-3">
+          {/* Seek bar */}
+          <div className="flex items-center gap-3">
+            <span className="text-xs text-gray-400 font-mono w-10">{formatTime(currentTime)}</span>
+            <input
+              type="range" min={0} max={duration || 1} step={0.1} value={currentTime}
+              onChange={seek}
+              className="flex-1 h-1.5 bg-white/10 rounded-full appearance-none cursor-pointer accent-brand-500"
+            />
+            <span className="text-xs text-gray-400 font-mono w-10 text-right">{formatTime(duration)}</span>
+          </div>
+
+          {/* Buttons row */}
+          <div className="flex items-center gap-4">
+            <button
+              onClick={togglePlay}
+              className="w-10 h-10 rounded-xl bg-brand-500/15 hover:bg-brand-500/25 flex items-center justify-center transition-colors"
+            >
+              {isPlaying ? (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="#6366f1">
+                  <rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>
+                </svg>
+              ) : (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="#6366f1">
+                  <polygon points="5 3 19 12 5 21 5 3"/>
+                </svg>
+              )}
+            </button>
+
+            {/* Volume */}
+            <div className="flex items-center gap-2 flex-1">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2">
+                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
+                {volume > 0 && <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>}
+                {volume > 0.5 && <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>}
+              </svg>
+              <input
+                type="range" min={0} max={1} step={0.05} value={volume}
+                onChange={changeVolume}
+                className="w-20 h-1.5 bg-white/10 rounded-full appearance-none cursor-pointer accent-brand-500"
+              />
+            </div>
+
+            <span className="text-xs text-gray-500">
+              Side-by-side: Original | Segmented
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Detected Objects */}
+      {detected.length > 0 && (
+        <div className="glass rounded-2xl p-6 mb-6 shadow-xl">
+          <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">
+            🎯 Detected Object Classes ({detected.length})
+          </h2>
+          <div className="flex flex-wrap gap-2">
+            {detected.map((cls) => (
+              <span key={cls} className="class-pill text-sm px-3 py-1">
+                <span
+                  className="w-3.5 h-3.5 rounded-full flex-shrink-0"
+                  style={{ backgroundColor: VOC_COLORS[cls] ?? '#888' }}
+                />
+                {cls}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Action Buttons */}
+      <div className="flex flex-wrap gap-3">
+        <a
+          href="/"
+          className="flex items-center gap-2 px-5 py-2.5 rounded-xl border border-white/10 hover:border-white/20 hover:bg-white/5 text-gray-300 hover:text-white font-medium text-sm transition-all"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="15 18 9 12 15 6"/>
+          </svg>
+          Segment Another Video
+        </a>
+        <a
+          href={downloadUrl}
+          download
+          className="flex items-center gap-2 px-5 py-2.5 rounded-xl border border-brand-500/30 hover:border-brand-500/60 hover:bg-brand-500/5 text-brand-400 font-medium text-sm transition-all"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="7 10 12 15 17 10"/>
+            <line x1="12" y1="15" x2="12" y2="3"/>
+          </svg>
+          Download Result
+        </a>
+      </div>
+    </div>
+  )
+}

frontend/tailwind.config.js

@@ -0,0 +1,59 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        brand: {
+          50:  '#f0f4ff',
+          100: '#e0e9ff',
+          200: '#c7d7fe',
+          300: '#a5b9fc',
+          400: '#8093f8',
+          500: '#6366f1',
+          600: '#4f46e5',
+          700: '#4338ca',
+          800: '#3730a3',
+          900: '#312e81',
+        },
+        surface: {
+          DEFAULT: '#0f1117',
+          card: '#1a1d27',
+          border: '#2a2d3a',
+        },
+      },
+      animation: {
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'fade-in': 'fadeIn 0.5s ease-out',
+        'slide-up': 'slideUp 0.4s ease-out',
+        'shimmer': 'shimmer 2s linear infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
+        },
+      },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'mesh-gradient': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      },
+    },
+  },
+  plugins: [],
+}

frontend/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

start.sh

@@ -0,0 +1,134 @@
+#!/usr/bin/env bash
+# start.sh — Start the SegVision stack locally
+# Run from: video-seg-app/ directory
+# Usage: bash start.sh
+
+set -e
+CYAN='\033[0;36m'; GREEN='\033[0;32m'; YELLOW='\033[1;33m'; RED='\033[0;31m'; NC='\033[0m'
+
+PROJECT_DIR="$(cd "$(dirname "$0")" && pwd)"
+BACKEND_DIR="$PROJECT_DIR/backend"
+FRONTEND_DIR="$PROJECT_DIR/frontend"
+PIDS=()
+
+# ── Detect Python / pip (Anaconda preferred) ────────────────────────────────
+PYTHON=""
+UVICORN=""
+CELERY=""
+for candidate in /opt/anaconda3/bin/python3 /opt/homebrew/bin/python3 python3 python; do
+    if command -v "$candidate" &>/dev/null 2>&1; then
+        PYTHON=$(command -v "$candidate")
+        break
+    fi
+done
+for candidate in /opt/anaconda3/bin/uvicorn /opt/homebrew/bin/uvicorn "$HOME/Library/Python/3.9/bin/uvicorn" uvicorn; do
+    if [ -x "$candidate" ]; then UVICORN="$candidate"; break; fi
+done
+for candidate in /opt/anaconda3/bin/celery /opt/homebrew/bin/celery "$HOME/Library/Python/3.9/bin/celery" celery; do
+    if [ -x "$candidate" ]; then CELERY="$candidate"; break; fi
+done
+
+echo -e "${CYAN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${CYAN}  SegVision — AI Video Segmentation${NC}"
+echo -e "${CYAN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo ""
+echo -e "  Python : ${GREEN}$PYTHON${NC}"
+echo -e "  Uvicorn: ${GREEN}${UVICORN:-NOT FOUND}${NC}"
+echo -e "  Celery : ${GREEN}${CELERY:-NOT FOUND}${NC}"
+echo ""
+
+if [ -z "$UVICORN" ]; then
+    echo -e "${RED}[ERROR]${NC} uvicorn not found. Run:"
+    echo -e "  /opt/anaconda3/bin/pip install fastapi 'uvicorn[standard]' 'celery[redis]' redis python-multipart opencv-python-headless"
+    exit 1
+fi
+
+cleanup() {
+    echo -e "\n${YELLOW}Shutting down all services …${NC}"
+    for pid in "${PIDS[@]}"; do kill "$pid" 2>/dev/null || true; done
+    # Also clean up any stray processes
+    pkill -f "celery -A tasks" 2>/dev/null || true
+    pkill -f "uvicorn main:app" 2>/dev/null || true
+    exit 0
+}
+trap cleanup SIGINT SIGTERM
+
+# ── Kill any stale processes from previous runs ───────────────────────────────
+echo -e "${YELLOW}Stopping any existing services …${NC}"
+pkill -f "celery -A tasks" 2>/dev/null && echo "  Stopped old Celery worker" || true
+pkill -f "uvicorn main:app" 2>/dev/null && echo "  Stopped old Uvicorn server" || true
+sleep 1
+
+# ── 1. Redis ─────────────────────────────────────────────────────────────────
+echo -e "${GREEN}[1/4]${NC} Checking Redis …"
+if redis-cli ping &>/dev/null 2>&1; then
+    echo "  ✓ Redis already running on :6379"
+else
+    # Try docker (Desktop app path first, then PATH)
+    DOCKER_BIN=$(command -v docker 2>/dev/null || ls /Applications/Docker.app/Contents/Resources/bin/docker 2>/dev/null || echo "")
+    if [ -n "$DOCKER_BIN" ]; then
+        "$DOCKER_BIN" run -d --rm --name seg_redis -p 6379:6379 redis:7-alpine &>/dev/null || \
+        "$DOCKER_BIN" start seg_redis &>/dev/null || true
+        sleep 2
+        echo "  ✓ Redis started via Docker"
+    else
+        echo -e "  ${RED}[ERROR]${NC} Redis not found. Start Docker Desktop or run: brew install redis && redis-server"
+        exit 1
+    fi
+fi
+
+# ── 2. Celery Worker ─────────────────────────────────────────────────────────
+echo -e "${GREEN}[2/4]${NC} Starting Celery worker (updated code) …"
+cd "$BACKEND_DIR"
+CELERY_LOG="/tmp/celery_worker.log"
+"$CELERY" -A tasks worker --loglevel=info --concurrency=1 > "$CELERY_LOG" 2>&1 &
+CELERY_PID=$!
+PIDS+=($CELERY_PID)
+sleep 2
+if kill -0 $CELERY_PID 2>/dev/null; then
+    echo "  ✓ Worker PID=$CELERY_PID (logs: $CELERY_LOG)"
+else
+    echo -e "  ${RED}[ERROR]${NC} Celery failed to start. Check: tail $CELERY_LOG"
+    exit 1
+fi
+
+# ── 3. FastAPI Server ─────────────────────────────────────────────────────────
+echo -e "${GREEN}[3/4]${NC} Starting FastAPI on :8000 (with hot-reload) …"
+"$UVICORN" main:app --host 0.0.0.0 --port 8000 --reload &
+FASTAPI_PID=$!
+PIDS+=($FASTAPI_PID)
+echo "  ✓ Backend PID=$FASTAPI_PID"
+echo "  ⚠️  Note: FastAPI hot-reloads on code save, but Celery does NOT."
+echo "     Restart this script after changing inference.py or tasks.py"
+
+# ── 4. Frontend ─────────────────────────────────────────────────────────��─────
+cd "$FRONTEND_DIR"
+# Load nvm if available
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+NPM_BIN=$(command -v npm 2>/dev/null || echo "")
+
+if [ -n "$NPM_BIN" ]; then
+    echo -e "${GREEN}[4/4]${NC} Starting Next.js on :3000 …"
+    [ ! -d "node_modules" ] && "$NPM_BIN" install --silent
+    "$NPM_BIN" run dev &
+    PIDS+=($!)
+    echo "  ✓ Frontend PID=$!"
+    FRONTEND_URL="http://localhost:3000"
+else
+    echo -e "${YELLOW}[4/4]${NC} npm not found — skipping Next.js"
+    echo "     Install Node.js: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash"
+    echo "     Then: export NVM_DIR=~/.nvm && . \$NVM_DIR/nvm.sh && nvm install 20"
+    FRONTEND_URL="N/A (install Node.js)"
+fi
+
+echo ""
+echo -e "${CYAN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "  🎬 Frontend : ${GREEN}${FRONTEND_URL}${NC}"
+echo -e "  ⚡ Backend  : ${GREEN}http://localhost:8000${NC}"
+echo -e "  📄 API Docs : ${GREEN}http://localhost:8000/docs${NC}"
+echo -e "${CYAN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "  Press ${YELLOW}Ctrl+C${NC} to stop all services"
+echo ""
+
+wait