feat: web UI label page, Falcon Perception MLX, API server

data_label_factory/serve.py

@@ -0,0 +1,364 @@
+"""
+serve.py — REST API server for data-label-factory.
+
+The web UI frontend calls this server to run the labeling pipeline.
+Wraps the same logic as the MCP tools but over HTTP.
+
+Usage:
+    python3 -m data_label_factory.serve --port 8400
+
+Endpoints:
+    GET  /api/providers          — list registered providers + status
+    POST /api/auto               — create project from samples + description
+    POST /api/filter             — filter a single image
+    POST /api/label              — label a single image
+    POST /api/verify             — verify a bbox crop
+    POST /api/score              — score a COCO annotation file
+    POST /api/upload             — upload sample images
+    GET  /api/experiments        — list experiments
+"""
+
+from __future__ import annotations
+
+import base64
+import io
+import json
+import os
+import shutil
+import tempfile
+import time
+import traceback
+from datetime import datetime
+from pathlib import Path
+from typing import Any
+
+try:
+    from fastapi import FastAPI, UploadFile, File, Form, HTTPException
+    from fastapi.middleware.cors import CORSMiddleware
+    from fastapi.responses import JSONResponse, FileResponse
+    from fastapi.staticfiles import StaticFiles
+except ImportError:
+    raise ImportError("FastAPI required: pip install fastapi uvicorn python-multipart")
+
+app = FastAPI(title="data-label-factory", version="0.2.0")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+UPLOAD_DIR = Path(os.environ.get("DLF_UPLOAD_DIR", "/tmp/dlf-uploads"))
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
+
+# ─── Providers ──────────────────────────────────────────────
+
+@app.get("/api/providers")
+def get_providers():
+    from .providers import list_providers, create_provider
+    results = []
+    for name in list_providers():
+        try:
+            p = create_provider(name)
+            st = p.status()
+            results.append({
+                "name": name,
+                "alive": st.get("alive", False),
+                "capabilities": sorted(p.capabilities),
+                "info": str(st.get("info", ""))[:200],
+            })
+        except Exception as e:
+            results.append({"name": name, "alive": False, "error": str(e)})
+    return {"providers": results}
+
+
+# ─── Auto project ──────────────────────────────────────────
+
+@app.post("/api/auto")
+async def auto_project(
+    description: str = Form(...),
+    samples: list[UploadFile] = File(default=[]),
+):
+    """Create a project from uploaded samples + description."""
+    # Save uploaded files
+    session_id = f"session_{int(time.time())}"
+    session_dir = UPLOAD_DIR / session_id
+    session_dir.mkdir(parents=True, exist_ok=True)
+
+    saved_paths = []
+    for f in samples:
+        dest = session_dir / f.filename
+        with open(dest, "wb") as out:
+            out.write(await f.read())
+        saved_paths.append(str(dest))
+
+    from .auto import auto_project as _auto, detect_content_type
+    content_type = detect_content_type(description)
+
+    try:
+        config = _auto(
+            samples=str(session_dir) if saved_paths else [],
+            description=description,
+            output="",
+            analyze=False,  # skip VLM analysis for speed in web UI
+        )
+    except Exception as e:
+        raise HTTPException(500, str(e))
+
+    return {
+        "session_id": session_id,
+        "content_type": content_type,
+        "config": config,
+        "n_samples": len(saved_paths),
+        "sample_dir": str(session_dir),
+    }
+
+
+# ─── Filter ────────────────────────────────────────────────
+
+@app.post("/api/filter")
+async def filter_image(
+    image: UploadFile = File(...),
+    prompt: str = Form(default="Does this image show the target object? Answer YES or NO."),
+    backend: str = Form(default="qwen"),
+):
+    """Filter a single image via a VLM backend."""
+    from .providers import create_provider
+
+    # Save temp file
+    suffix = Path(image.filename).suffix or ".jpg"
+    with tempfile.NamedTemporaryFile(suffix=suffix, delete=False, dir=str(UPLOAD_DIR)) as f:
+        f.write(await image.read())
+        tmp_path = f.name
+
+    try:
+        provider = create_provider(backend)
+        result = provider.filter_image(tmp_path, prompt)
+        return {
+            "verdict": result.verdict,
+            "raw_answer": result.raw_answer,
+            "elapsed": round(result.elapsed, 2),
+            "confidence": result.confidence,
+            "backend": backend,
+        }
+    except Exception as e:
+        raise HTTPException(500, str(e))
+    finally:
+        os.unlink(tmp_path)
+
+
+# ─── Label ──────────���──────────────────────────────────────
+
+@app.post("/api/label")
+async def label_image(
+    image: UploadFile = File(...),
+    queries: str = Form(default="object"),
+    backend: str = Form(default="falcon"),
+):
+    """Label a single image — returns COCO-style bboxes."""
+    from .providers import create_provider
+    from PIL import Image
+
+    suffix = Path(image.filename).suffix or ".jpg"
+    with tempfile.NamedTemporaryFile(suffix=suffix, delete=False, dir=str(UPLOAD_DIR)) as f:
+        f.write(await image.read())
+        tmp_path = f.name
+
+    try:
+        provider = create_provider(backend)
+        im = Image.open(tmp_path)
+        iw, ih = im.size
+        query_list = [q.strip() for q in queries.split(",")]
+        result = provider.label_image(tmp_path, query_list, image_wh=(iw, ih))
+
+        # Also run metrics on the annotations
+        from .metrics import verify_bbox_rules
+        scored_anns = []
+        for ann in result.annotations:
+            vr = verify_bbox_rules(ann["bbox"], (iw, ih), score=ann.get("score", 1.0))
+            scored_anns.append({
+                **ann,
+                "pass_rate": round(vr.pass_rate, 2),
+                "failed_rules": vr.failed_rules,
+            })
+
+        return {
+            "annotations": scored_anns,
+            "elapsed": round(result.elapsed, 2),
+            "backend": backend,
+            "image_size": [iw, ih],
+            "n_detections": len(scored_anns),
+        }
+    except Exception as e:
+        raise HTTPException(500, str(e))
+    finally:
+        os.unlink(tmp_path)
+
+
+# ─── Verify ────────────────────────────────────────────────
+
+@app.post("/api/verify")
+async def verify_bbox(
+    image: UploadFile = File(...),
+    bbox: str = Form(...),  # JSON: [x, y, w, h]
+    query: str = Form(default="object"),
+    backend: str = Form(default="qwen"),
+):
+    """Verify a single bbox crop."""
+    from .providers import create_provider
+
+    suffix = Path(image.filename).suffix or ".jpg"
+    with tempfile.NamedTemporaryFile(suffix=suffix, delete=False, dir=str(UPLOAD_DIR)) as f:
+        f.write(await image.read())
+        tmp_path = f.name
+
+    try:
+        provider = create_provider(backend)
+        bbox_list = json.loads(bbox)
+        result = provider.verify_bbox(tmp_path, bbox_list, query)
+        return {
+            "verdict": result.verdict,
+            "raw_answer": result.raw_answer,
+            "elapsed": round(result.elapsed, 2),
+            "confidence": result.confidence,
+            "backend": backend,
+        }
+    except Exception as e:
+        raise HTTPException(500, str(e))
+    finally:
+        os.unlink(tmp_path)
+
+
+# ─── Score ─────────────────────────────────────────────────
+
+@app.post("/api/score")
+async def score_coco(coco_file: UploadFile = File(...)):
+    """Score a COCO annotation file with deterministic metrics."""
+    from .metrics import score_coco as _score
+    content = await coco_file.read()
+    coco = json.loads(content)
+    score = _score(coco)
+    return {
+        "total_images": score.total_images,
+        "total_annotations": score.total_annotations,
+        "pass_rate": round(score.pass_rate, 4),
+        "mean_score": round(score.mean_score, 4),
+        "mean_area_ratio": round(score.mean_area_ratio, 4),
+        "rule_breakdown": {k: round(v, 4) for k, v in score.rule_breakdown.items()},
+        "per_category": score.per_category,
+    }
+
+
+# ─── Batch pipeline ───────────────────────────────────────
+
+@app.post("/api/pipeline")
+async def run_pipeline(
+    description: str = Form(...),
+    backend: str = Form(default="gemma"),
+    samples: list[UploadFile] = File(default=[]),
+):
+    """Full pipeline: upload samples → auto project → filter → return results."""
+    from .providers import create_provider
+    from .auto import detect_content_type, CONTENT_PROFILES
+
+    session_id = f"pipeline_{int(time.time())}"
+    session_dir = UPLOAD_DIR / session_id
+    session_dir.mkdir(parents=True, exist_ok=True)
+
+    # Save uploads
+    saved = []
+    for f in samples:
+        dest = session_dir / f.filename
+        with open(dest, "wb") as out:
+            out.write(await f.read())
+        saved.append({"name": f.filename, "path": str(dest)})
+
+    content_type = detect_content_type(description)
+    profile = CONTENT_PROFILES.get(content_type, CONTENT_PROFILES["generic"])
+
+    # Use the recommended filter backend or override
+    filter_backend = backend if backend != "auto" else profile["filter_backend"]
+
+    try:
+        provider = create_provider(filter_backend)
+    except Exception as e:
+        return {"error": f"Backend {filter_backend} not available: {e}"}
+
+    prompt = (
+        f"Look at this image. Does it show a {description}? "
+        "Answer with exactly one word: YES or NO."
+    )
+
+    results = []
+    t0 = time.time()
+    for item in saved:
+        try:
+            fr = provider.filter_image(item["path"], prompt)
+            results.append({
+                "name": item["name"],
+                "verdict": fr.verdict,
+                "raw_answer": fr.raw_answer,
+                "elapsed": round(fr.elapsed, 2),
+                "confidence": fr.confidence,
+            })
+        except Exception as e:
+            results.append({
+                "name": item["name"],
+                "verdict": "ERROR",
+                "raw_answer": str(e)[:100],
+                "elapsed": 0,
+                "confidence": 0,
+            })
+
+    elapsed_total = time.time() - t0
+    counts = {}
+    for r in results:
+        counts[r["verdict"]] = counts.get(r["verdict"], 0) + 1
+
+    return {
+        "session_id": session_id,
+        "content_type": content_type,
+        "backend": filter_backend,
+        "prompt": prompt,
+        "n_images": len(saved),
+        "elapsed_total": round(elapsed_total, 1),
+        "counts": counts,
+        "results": results,
+    }
+
+
+# ─── Experiments ───────────────────────────────────────────
+
+@app.get("/api/experiments")
+def list_experiments_api():
+    from .experiments import list_experiments
+    return {"experiments": list_experiments()}
+
+
+# ─── Health ────────────────────────────────────────────────
+
+@app.get("/api/health")
+def health():
+    return {"status": "ok", "version": "0.2.0", "timestamp": datetime.now().isoformat()}
+
+
+# ─── Main ──────────────────────────────────────────────────
+
+def main():
+    import argparse
+    import uvicorn
+
+    p = argparse.ArgumentParser(prog="data_label_factory.serve")
+    p.add_argument("--host", default="0.0.0.0")
+    p.add_argument("--port", type=int, default=8400)
+    args = p.parse_args()
+
+    print(f"data-label-factory API server on http://{args.host}:{args.port}")
+    print(f"  Docs: http://localhost:{args.port}/docs")
+    uvicorn.run(app, host=args.host, port=args.port)
+
+
+if __name__ == "__main__":
+    main()

research/v2-expert-sniper-integration.md

@@ -191,9 +191,111 @@ Optional extras:
 - `[mcp]` — `mcp`
 - `[flywheel]` — `opencv-python`, `numpy`
 
+## Falcon Perception on MLX
+
+Falcon Perception is now running natively on MLX via `mlx-vlm` 0.4.4.
+
+**Setup (Mac Mini M4):**
+```bash
+# Install Miniforge (user-local, no admin needed)
+curl -fsSL https://github.com/conda-forge/miniforge/releases/latest/download/Miniforge3-MacOSX-arm64.sh -o /tmp/miniforge.sh
+bash /tmp/miniforge.sh -b -p ~/miniforge3
+
+# Install mlx-vlm (latest, with falcon_perception + gemma4 support)
+~/miniforge3/bin/pip install mlx mlx-vlm python-multipart
+
+# Convert Falcon Perception weights to MLX format
+~/miniforge3/bin/python3 -c "
+from mlx_vlm import convert
+convert('tiiuae/Falcon-Perception', '~/models/falcon-perception-mlx', trust_remote_code=True)
+"
+
+# Test
+~/miniforge3/bin/python3 -c "
+from mlx_vlm import load
+model, processor = load('~/models/falcon-perception-mlx', trust_remote_code=True)
+# model.generate_perception(processor, image=img, query='object', max_new_tokens=256)
+"
+```
+
+**Result:** 18 detections on a stop-sign image (stop signs, signs, poles) in 42.8s.
+
+**Important:** Requires Python 3.10+ (the HF model code uses `float | list` syntax).
+The Mac Mini shipped with Python 3.9 — Miniforge provides 3.13 without needing admin.
+
+## Web UI — Label Page
+
+The web UI at `/label` provides a visual interface to the full pipeline.
+
+### Quick Start
+
+```bash
+# Terminal 1: Start the Python API server
+cd data-label-factory
+GEMMA_URL=http://192.168.1.244:8500 python3 -m data_label_factory.serve --port 8400
+
+# Terminal 2: Start the Next.js web UI
+cd data-label-factory/web
+npm install    # first time only
+PORT=3030 npm run dev
+
+# Open http://localhost:3030/label
+```
+
+### How to Use
+
+1. **Check providers** — The status bar at the top shows which backends are alive
+   (green = ready, gray = offline). Gemma + Falcon need the Expert Sniper running.
+
+2. **Describe your target** — Type what you want to detect in the text field:
+   `stop signs`, `fire hydrants`, `trading cards`, etc.
+
+3. **Upload images** — Drag and drop images onto the upload area, or click to
+   select files. Thumbnails appear in the center column.
+
+4. **Pick backends** — Choose a filter backend (Gemma, Qwen, OpenRouter) and a
+   label backend (Falcon, WildDet3D, Chandra, Flywheel) from the dropdowns.
+
+5. **Filter All** — Click to run YES/NO classification on every image. Results
+   appear as color-coded badges (green YES, red NO) with timing. The summary
+   bar at the bottom shows counts and a progress bar.
+
+6. **Label individual images** — Click the "Label" button on any image to run
+   bbox detection. The canvas on the right draws color-coded bounding boxes
+   with category labels and confidence scores.
+
+7. **Review annotations** — Below the canvas, each detection shows:
+   - Category name and confidence percentage
+   - Pixel coordinates `[x, y, w, h]`
+   - Quality pass rate from deterministic metrics (green = all rules pass)
+
+### Architecture
+
+```
+Browser (localhost:3030/label)
+    ↓ fetch
+Next.js API route (/api/dlf)
+    ↓ proxy
+Python API server (localhost:8400)
+    ↓ provider registry
+Expert Sniper (192.168.1.244:8500)
+    ├── Gemma 4 26B (filter/verify)
+    └── Falcon Perception (label/bbox)
+```
+
+### Environment Variables
+
+| Var | Default | Purpose |
+|-----|---------|---------|
+| `GEMMA_URL` | `http://localhost:8500` | Expert Sniper endpoint |
+| `QWEN_URL` | `http://localhost:8291` | Qwen VLM endpoint |
+| `OPENROUTER_API_KEY` | (none) | OpenRouter cloud models |
+| `DLF_API_URL` | `http://localhost:8400` | Python API (for Next.js proxy) |
+| `DLF_UPLOAD_DIR` | `/tmp/dlf-uploads` | Temp upload storage |
+
 ## What's Next
 
 1. **Batch benchmark:** Run all 157 stop-sign images through Qwen vs Expert Sniper vs OpenRouter
-2. **Falcon Perception on MLX:** The latest mlx-vlm main branch has `falcon_perception` model support — need MLX-converted weights (current weights are PyTorch)
-3. **Pipeline v2 integration:** Wire `label-v2` into the full `pipeline` command
-4. **Web UI review:** Extend canvas viewer to show provider source per annotation
+2. **Pipeline v2 integration:** Wire `label-v2` into the full `pipeline` command
+3. **Web UI improvements:** Live progress streaming, batch label, export COCO from UI
+4. **Publish Falcon MLX weights:** Upload converted weights to HuggingFace so others skip the conversion step

web/app/api/dlf/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const DLF_API = process.env.DLF_API_URL || "http://localhost:8400";
+
+export async function GET(req: NextRequest) {
+  const path = req.nextUrl.searchParams.get("path") || "/api/health";
+  try {
+    const res = await fetch(`${DLF_API}${path}`, { cache: "no-store" });
+    const data = await res.json();
+    return NextResponse.json(data);
+  } catch (e: any) {
+    return NextResponse.json({ error: e.message }, { status: 502 });
+  }
+}
+
+export async function POST(req: NextRequest) {
+  const path = req.nextUrl.searchParams.get("path") || "/api/filter";
+  try {
+    const formData = await req.formData();
+    const res = await fetch(`${DLF_API}${path}`, {
+      method: "POST",
+      body: formData,
+    });
+    const data = await res.json();
+    return NextResponse.json(data);
+  } catch (e: any) {
+    return NextResponse.json({ error: e.message }, { status: 502 });
+  }
+}

web/app/label/page.tsx

@@ -0,0 +1,574 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from "react";
+
+const DLF_API = "/api/dlf";
+
+type Provider = {
+  name: string;
+  alive: boolean;
+  capabilities: string[];
+  info?: string;
+};
+
+type FilterResult = {
+  name: string;
+  verdict: string;
+  raw_answer: string;
+  elapsed: number;
+  confidence: number;
+};
+
+type Annotation = {
+  bbox: number[];
+  category: string;
+  score: number;
+  pass_rate?: number;
+  failed_rules?: string[];
+  source?: string;
+};
+
+type LabelResult = {
+  annotations: Annotation[];
+  elapsed: number;
+  backend: string;
+  image_size: number[];
+  n_detections: number;
+};
+
+// ── Colors ──
+const VERDICT_COLORS: Record<string, string> = {
+  YES: "bg-emerald-500/20 text-emerald-400 border-emerald-500/40",
+  NO: "bg-red-500/20 text-red-400 border-red-500/40",
+  UNKNOWN: "bg-yellow-500/20 text-yellow-400 border-yellow-500/40",
+  ERROR: "bg-red-800/20 text-red-300 border-red-800/40",
+};
+
+const BBOX_COLORS = [
+  "#ff4060", "#20c8ff", "#ffc800", "#60ff60",
+  "#c860ff", "#ff8000", "#00c8c8", "#ff60ff",
+];
+
+export default function LabelPage() {
+  const [providers, setProviders] = useState<Provider[]>([]);
+  const [files, setFiles] = useState<File[]>([]);
+  const [previews, setPreviews] = useState<string[]>([]);
+  const [description, setDescription] = useState("");
+  const [filterBackend, setFilterBackend] = useState("gemma");
+  const [labelBackend, setLabelBackend] = useState("falcon");
+  const [filterResults, setFilterResults] = useState<FilterResult[]>([]);
+  const [labelResults, setLabelResults] = useState<Map<string, LabelResult>>(new Map());
+  const [selectedImage, setSelectedImage] = useState<number | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [loadingMsg, setLoadingMsg] = useState("");
+  const [apiStatus, setApiStatus] = useState<"checking" | "up" | "down">("checking");
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Check API + providers on mount
+  useEffect(() => {
+    fetch(`${DLF_API}?path=/api/health`)
+      .then((r) => r.json())
+      .then((d) => {
+        if (d.status === "ok") {
+          setApiStatus("up");
+          fetch(`${DLF_API}?path=/api/providers`)
+            .then((r) => r.json())
+            .then((d) => setProviders(d.providers || []));
+        } else {
+          setApiStatus("down");
+        }
+      })
+      .catch(() => setApiStatus("down"));
+  }, []);
+
+  // Handle file selection
+  const onFilesSelected = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = Array.from(e.target.files || []);
+    setFiles(selected);
+    setPreviews(selected.map((f) => URL.createObjectURL(f)));
+    setFilterResults([]);
+    setLabelResults(new Map());
+    setSelectedImage(null);
+  }, []);
+
+  // Handle drop
+  const onDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const dropped = Array.from(e.dataTransfer.files).filter((f) =>
+      f.type.startsWith("image/")
+    );
+    if (dropped.length) {
+      setFiles(dropped);
+      setPreviews(dropped.map((f) => URL.createObjectURL(f)));
+      setFilterResults([]);
+      setLabelResults(new Map());
+      setSelectedImage(null);
+    }
+  }, []);
+
+  // Run filter on all images
+  const runFilter = async () => {
+    if (!files.length || !description) return;
+    setLoading(true);
+    setFilterResults([]);
+
+    const prompt = `Look at this image. Does it show a ${description}? Answer with exactly one word: YES or NO.`;
+    const results: FilterResult[] = [];
+
+    for (let i = 0; i < files.length; i++) {
+      setLoadingMsg(`Filtering ${i + 1}/${files.length}...`);
+      const form = new FormData();
+      form.append("image", files[i]);
+      form.append("prompt", prompt);
+      form.append("backend", filterBackend);
+
+      try {
+        const res = await fetch(`${DLF_API}?path=/api/filter`, {
+          method: "POST",
+          body: form,
+        });
+        const data = await res.json();
+        results.push({ name: files[i].name, ...data });
+      } catch (e: any) {
+        results.push({
+          name: files[i].name,
+          verdict: "ERROR",
+          raw_answer: e.message,
+          elapsed: 0,
+          confidence: 0,
+        });
+      }
+      setFilterResults([...results]);
+    }
+    setLoading(false);
+    setLoadingMsg("");
+  };
+
+  // Run label on a single image
+  const runLabel = async (idx: number) => {
+    if (!files[idx]) return;
+    setLoading(true);
+    setLoadingMsg(`Labeling ${files[idx].name}...`);
+    setSelectedImage(idx);
+
+    const form = new FormData();
+    form.append("image", files[idx]);
+    form.append("queries", description);
+    form.append("backend", labelBackend);
+
+    try {
+      const res = await fetch(`${DLF_API}?path=/api/label`, {
+        method: "POST",
+        body: form,
+      });
+      const data: LabelResult = await res.json();
+      setLabelResults((prev) => new Map(prev).set(files[idx].name, data));
+      drawAnnotations(idx, data);
+    } catch (e: any) {
+      console.error(e);
+    }
+    setLoading(false);
+    setLoadingMsg("");
+  };
+
+  // Draw bboxes on canvas
+  const drawAnnotations = (idx: number, result: LabelResult) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const img = new Image();
+    img.onload = () => {
+      const scale = Math.min(800 / img.width, 600 / img.height, 1);
+      canvas.width = img.width * scale;
+      canvas.height = img.height * scale;
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+      result.annotations.forEach((ann, i) => {
+        const [x, y, w, h] = ann.bbox;
+        const sx = scale;
+        const color = BBOX_COLORS[i % BBOX_COLORS.length];
+
+        // Box
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 3;
+        ctx.strokeRect(x * sx, y * sx, w * sx, h * sx);
+
+        // Label bg
+        const label = `${ann.category} ${(ann.score * 100).toFixed(0)}%`;
+        ctx.font = "bold 14px monospace";
+        const tw = ctx.measureText(label).width;
+        ctx.fillStyle = color;
+        ctx.fillRect(x * sx, y * sx - 20, tw + 8, 20);
+
+        // Label text
+        ctx.fillStyle = "#fff";
+        ctx.fillText(label, x * sx + 4, y * sx - 5);
+
+        // Failed rules indicator
+        if (ann.failed_rules && ann.failed_rules.length > 0) {
+          ctx.strokeStyle = "#ff0000";
+          ctx.lineWidth = 1;
+          ctx.setLineDash([4, 4]);
+          ctx.strokeRect(x * sx - 2, y * sx - 2, w * sx + 4, h * sx + 4);
+          ctx.setLineDash([]);
+        }
+      });
+    };
+    img.src = previews[idx];
+  };
+
+  // Re-draw when selecting an already-labeled image
+  useEffect(() => {
+    if (selectedImage !== null && files[selectedImage]) {
+      const result = labelResults.get(files[selectedImage].name);
+      if (result) drawAnnotations(selectedImage, result);
+    }
+  }, [selectedImage]);
+
+  const aliveFilterBackends = providers.filter(
+    (p) => p.alive && p.capabilities.includes("filter")
+  );
+  const aliveLabelBackends = providers.filter(
+    (p) => p.alive && p.capabilities.includes("label")
+  );
+
+  const yesCount = filterResults.filter((r) => r.verdict === "YES").length;
+  const noCount = filterResults.filter((r) => r.verdict === "NO").length;
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-zinc-100 p-6">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">
+              data-label-factory
+            </h1>
+            <p className="text-zinc-400 mt-1">
+              Upload images, describe your target, pick a model, get labels.
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <div
+              className={`w-3 h-3 rounded-full ${
+                apiStatus === "up"
+                  ? "bg-emerald-500"
+                  : apiStatus === "down"
+                  ? "bg-red-500"
+                  : "bg-yellow-500 animate-pulse"
+              }`}
+            />
+            <span className="text-sm text-zinc-500">
+              {apiStatus === "up"
+                ? "API connected"
+                : apiStatus === "down"
+                ? "API offline — start: python3 -m data_label_factory.serve"
+                : "Checking..."}
+            </span>
+          </div>
+        </div>
+
+        {/* Providers status bar */}
+        {providers.length > 0 && (
+          <div className="flex gap-2 mb-6 flex-wrap">
+            {providers.map((p) => (
+              <div
+                key={p.name}
+                className={`px-3 py-1.5 rounded-lg text-xs font-mono border ${
+                  p.alive
+                    ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-400"
+                    : "border-zinc-700 bg-zinc-900 text-zinc-600"
+                }`}
+              >
+                {p.alive ? "\u2713" : "\u2717"} {p.name}{" "}
+                <span className="text-zinc-500">
+                  [{p.capabilities.join(",")}]
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Left panel — Controls */}
+          <div className="space-y-4">
+            {/* Description */}
+            <div>
+              <label className="block text-sm font-medium text-zinc-400 mb-1">
+                What are you labeling?
+              </label>
+              <input
+                type="text"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="e.g. stop signs, fire hydrants, trading cards..."
+                className="w-full px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 text-zinc-100 placeholder:text-zinc-600 focus:border-blue-500 focus:outline-none"
+              />
+            </div>
+
+            {/* Upload */}
+            <div
+              onDrop={onDrop}
+              onDragOver={(e) => e.preventDefault()}
+              onClick={() => fileInputRef.current?.click()}
+              className="border-2 border-dashed border-zinc-700 rounded-lg p-8 text-center cursor-pointer hover:border-blue-500/50 transition-colors"
+            >
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                accept="image/*"
+                onChange={onFilesSelected}
+                className="hidden"
+              />
+              <p className="text-zinc-400">
+                {files.length
+                  ? `${files.length} images selected`
+                  : "Drop images here or click to select"}
+              </p>
+            </div>
+
+            {/* Backend selectors */}
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs text-zinc-500 mb-1">
+                  Filter backend
+                </label>
+                <select
+                  value={filterBackend}
+                  onChange={(e) => setFilterBackend(e.target.value)}
+                  className="w-full px-3 py-2 rounded bg-zinc-900 border border-zinc-700 text-sm"
+                >
+                  {aliveFilterBackends.length ? (
+                    aliveFilterBackends.map((p) => (
+                      <option key={p.name} value={p.name}>
+                        {p.name}
+                      </option>
+                    ))
+                  ) : (
+                    <>
+                      <option value="qwen">qwen</option>
+                      <option value="gemma">gemma</option>
+                      <option value="openrouter">openrouter</option>
+                      <option value="chandra">chandra</option>
+                    </>
+                  )}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs text-zinc-500 mb-1">
+                  Label backend
+                </label>
+                <select
+                  value={labelBackend}
+                  onChange={(e) => setLabelBackend(e.target.value)}
+                  className="w-full px-3 py-2 rounded bg-zinc-900 border border-zinc-700 text-sm"
+                >
+                  {aliveLabelBackends.length ? (
+                    aliveLabelBackends.map((p) => (
+                      <option key={p.name} value={p.name}>
+                        {p.name}
+                      </option>
+                    ))
+                  ) : (
+                    <>
+                      <option value="falcon">falcon</option>
+                      <option value="wilddet3d">wilddet3d</option>
+                      <option value="chandra">chandra</option>
+                      <option value="flywheel">flywheel</option>
+                    </>
+                  )}
+                </select>
+              </div>
+            </div>
+
+            {/* Action buttons */}
+            <div className="flex gap-3">
+              <button
+                onClick={runFilter}
+                disabled={loading || !files.length || !description}
+                className="flex-1 px-4 py-3 bg-blue-600 hover:bg-blue-500 disabled:bg-zinc-800 disabled:text-zinc-600 rounded-lg font-medium transition-colors"
+              >
+                {loading ? loadingMsg : "Filter All"}
+              </button>
+            </div>
+
+            {/* Filter summary */}
+            {filterResults.length > 0 && (
+              <div className="bg-zinc-900 rounded-lg p-4 border border-zinc-800">
+                <div className="flex justify-between text-sm mb-2">
+                  <span className="text-zinc-400">Filter results</span>
+                  <span className="text-zinc-500">
+                    {filterResults.length} images
+                  </span>
+                </div>
+                <div className="flex gap-4 text-lg font-mono">
+                  <span className="text-emerald-400">{yesCount} YES</span>
+                  <span className="text-red-400">{noCount} NO</span>
+                  <span className="text-zinc-500">
+                    {filterResults.length - yesCount - noCount} other
+                  </span>
+                </div>
+                <div className="w-full bg-zinc-800 rounded-full h-2 mt-2">
+                  <div
+                    className="bg-emerald-500 h-2 rounded-full transition-all"
+                    style={{
+                      width: `${(yesCount / Math.max(filterResults.length, 1)) * 100}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Center panel — Image grid + filter results */}
+          <div className="space-y-2 max-h-[80vh] overflow-y-auto">
+            {previews.map((src, i) => {
+              const fr = filterResults[i];
+              const lr = labelResults.get(files[i]?.name);
+              return (
+                <div
+                  key={i}
+                  onClick={() => {
+                    setSelectedImage(i);
+                    if (lr) drawAnnotations(i, lr);
+                  }}
+                  className={`flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-colors ${
+                    selectedImage === i
+                      ? "bg-zinc-800 border border-blue-500/50"
+                      : "bg-zinc-900/50 border border-zinc-800 hover:bg-zinc-800/50"
+                  }`}
+                >
+                  <img
+                    src={src}
+                    alt=""
+                    className="w-16 h-16 object-cover rounded"
+                  />
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-zinc-300 truncate">
+                      {files[i]?.name}
+                    </p>
+                    {fr && (
+                      <div className="flex items-center gap-2 mt-1">
+                        <span
+                          className={`px-2 py-0.5 rounded text-xs font-mono border ${
+                            VERDICT_COLORS[fr.verdict] || VERDICT_COLORS.UNKNOWN
+                          }`}
+                        >
+                          {fr.verdict}
+                        </span>
+                        <span className="text-xs text-zinc-500">
+                          {fr.elapsed}s
+                        </span>
+                      </div>
+                    )}
+                    {lr && (
+                      <p className="text-xs text-zinc-500 mt-0.5">
+                        {lr.n_detections} detections via {lr.backend}
+                      </p>
+                    )}
+                  </div>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      runLabel(i);
+                    }}
+                    disabled={loading}
+                    className="px-3 py-1.5 text-xs bg-zinc-700 hover:bg-zinc-600 disabled:opacity-30 rounded"
+                  >
+                    Label
+                  </button>
+                </div>
+              );
+            })}
+            {previews.length === 0 && (
+              <div className="text-center text-zinc-600 py-20">
+                Upload images to get started
+              </div>
+            )}
+          </div>
+
+          {/* Right panel — Canvas + annotations */}
+          <div className="space-y-4">
+            <canvas
+              ref={canvasRef}
+              className="w-full rounded-lg bg-zinc-900 border border-zinc-800"
+              width={800}
+              height={600}
+            />
+
+            {selectedImage !== null && files[selectedImage] && (
+              <div>
+                {(() => {
+                  const lr = labelResults.get(files[selectedImage].name);
+                  if (!lr) return null;
+                  return (
+                    <div className="space-y-2">
+                      <div className="flex justify-between text-sm">
+                        <span className="text-zinc-400">
+                          {lr.n_detections} detections
+                        </span>
+                        <span className="text-zinc-500">
+                          {lr.elapsed}s via {lr.backend}
+                        </span>
+                      </div>
+                      {lr.annotations.map((ann, i) => (
+                        <div
+                          key={i}
+                          className="flex items-center gap-2 px-3 py-2 bg-zinc-900 rounded border border-zinc-800 text-sm"
+                        >
+                          <div
+                            className="w-3 h-3 rounded-full flex-shrink-0"
+                            style={{
+                              backgroundColor:
+                                BBOX_COLORS[i % BBOX_COLORS.length],
+                            }}
+                          />
+                          <span className="font-mono text-zinc-300">
+                            {ann.category}
+                          </span>
+                          <span className="text-zinc-500">
+                            {(ann.score * 100).toFixed(0)}%
+                          </span>
+                          <span className="text-zinc-600 text-xs ml-auto">
+                            [{ann.bbox.map((v) => Math.round(v)).join(", ")}]
+                          </span>
+                          {ann.pass_rate !== undefined && (
+                            <span
+                              className={`text-xs px-1.5 py-0.5 rounded ${
+                                ann.pass_rate >= 1
+                                  ? "bg-emerald-500/20 text-emerald-400"
+                                  : "bg-yellow-500/20 text-yellow-400"
+                              }`}
+                            >
+                              {(ann.pass_rate * 100).toFixed(0)}%
+                            </span>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  );
+                })()}
+
+                {!labelResults.get(files[selectedImage].name) && (
+                  <div className="text-center text-zinc-600 py-8">
+                    Click "Label" on an image to see detections
+                  </div>
+                )}
+              </div>
+            )}
+
+            {selectedImage === null && (
+              <div className="text-center text-zinc-600 py-8">
+                Select an image to view / label
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}