scrypted-detection-trainer 0.1.2

package/src/main.ts

@@ -0,0 +1,651 @@
+import sdk, {
+    ScryptedDeviceBase,
+    Settings,
+    Setting,
+    HttpRequestHandler,
+    HttpRequest,
+    HttpResponse,
+    ScryptedInterface,
+    ScryptedDeviceType,
+    ObjectsDetected,
+    ObjectDetector,
+} from '@scrypted/sdk';
+
+const { systemManager, deviceManager, mediaManager } = sdk;
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const LABELS = ['person', 'animal', 'face', 'vehicle', 'plate', 'package', 'discard'] as const;
+type Label = typeof LABELS[number];
+
+const CAPTURE_CLASSES = new Set(['person', 'cat', 'dog', 'animal', 'bird', 'face', 'vehicle', 'car', 'truck', 'bus', 'motorcycle', 'bicycle', 'plate', 'package']);
+
+const RATE_OPTIONS = ['disabled', '1 per minute', '1 per 10 seconds', 'every detection'] as const;
+type RateOption = typeof RATE_OPTIONS[number];
+
+const RATE_MS: Record<RateOption, number> = {
+    'disabled': Infinity,
+    '1 per minute': 60_000,
+    '1 per 10 seconds': 10_000,
+    'every detection': 0,
+};
+
+const MAX_CAPTURES = 2000;
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface CaptureRecord {
+    id: string;
+    cameraId: string;
+    cameraName: string;
+    timestamp: number;
+    detectedClass: string;
+    score: number;
+    boundingBox: number[];       // [x, y, w, h] in pixels
+    inputDimensions: number[];   // [width, height]
+    detectionId?: string;
+    label?: Label;               // set after review
+    reviewed: boolean;
+}
+
+// ─── Plugin ───────────────────────────────────────────────────────────────────
+
+class DetectionTrainer extends ScryptedDeviceBase implements Settings, HttpRequestHandler {
+    // Map<cameraId, lastCaptureTimestamp>
+    private lastCapture = new Map<string, number>();
+    // Map<captureId, CaptureRecord>
+    private captures = new Map<string, CaptureRecord>();
+    // Map<captureId, jpegBuffer>
+    private images = new Map<string, Buffer>();
+    // Active event listeners
+    private listeners: (() => void)[] = [];
+
+    constructor(nativeId?: string) {
+        super(nativeId);
+        this.loadState();
+        this.registerListeners();
+    }
+
+    // ── Persistence ──────────────────────────────────────────────────────────
+
+    private loadState() {
+        try {
+            const raw = this.storage.getItem('captures');
+            if (raw) {
+                const arr: CaptureRecord[] = JSON.parse(raw);
+                for (const r of arr) this.captures.set(r.id, r);
+                this.console.log(`Loaded ${this.captures.size} captures from storage.`);
+            }
+        } catch (e) {
+            this.console.warn('Could not load captures from storage:', e);
+        }
+        // images are stored as individual items
+        for (const [id] of this.captures) {
+            const raw = this.storage.getItem(`img:${id}`);
+            if (raw) this.images.set(id, Buffer.from(raw, 'base64'));
+        }
+    }
+
+    private saveCaptures() {
+        this.storage.setItem('captures', JSON.stringify([...this.captures.values()]));
+    }
+
+    private saveImage(id: string, buf: Buffer) {
+        this.storage.setItem(`img:${id}`, buf.toString('base64'));
+    }
+
+    private deleteCapture(id: string) {
+        const old = this.storage.getItem(`img:${id}`);
+        if (old) this.storage.removeItem(`img:${id}`);
+        this.captures.delete(id);
+        this.images.delete(id);
+        this.saveCaptures();
+    }
+
+    // ── Settings ─────────────────────────────────────────────────────────────
+
+    async getSettings(): Promise<Setting[]> {
+        const cameras = Object.keys(systemManager.getSystemState())
+            .map(id => systemManager.getDeviceById(id))
+            .filter(d => d &&
+                (d.type === ScryptedDeviceType.Camera || d.type === ScryptedDeviceType.Doorbell) &&
+                d.interfaces?.includes(ScryptedInterface.ObjectDetector)
+            );
+
+        const settings: Setting[] = [
+            {
+                key: 'info',
+                title: 'Detection Trainer',
+                description: `${this.captures.size} captures stored (${[...this.captures.values()].filter(c => !c.reviewed).length} pending review, ${[...this.captures.values()].filter(c => c.reviewed && c.label !== 'discard').length} labeled). Open the web UI to review and export.`,
+                readonly: true,
+                value: '',
+            },
+            {
+                key: 'open_ui',
+                title: 'Open Review UI',
+                description: 'Open the detection review and labeling interface.',
+                type: 'button',
+            },
+        ];
+
+        for (const cam of cameras) {
+            const key = `rate:${cam.id}`;
+            settings.push({
+                key,
+                title: cam.name,
+                group: 'Capture Rate per Camera',
+                description: 'How often to capture detections from this camera.',
+                value: this.storage.getItem(key) || '1 per minute',
+                choices: [...RATE_OPTIONS],
+            });
+        }
+
+        return settings;
+    }
+
+    async putSetting(key: string, value: string) {
+        if (key === 'open_ui') return;
+        this.storage.setItem(key, value);
+        if (key.startsWith('rate:')) {
+            // Re-register listeners when rates change
+            this.registerListeners();
+        }
+    }
+
+    // ── Listeners ─────────────────────────────────────────────────────────────
+
+    private registerListeners() {
+        // Remove old listeners
+        for (const remove of this.listeners) remove();
+        this.listeners = [];
+
+        const cameras = Object.keys(systemManager.getSystemState())
+            .map(id => systemManager.getDeviceById(id))
+            .filter(d => d &&
+                (d.type === ScryptedDeviceType.Camera || d.type === ScryptedDeviceType.Doorbell) &&
+                d.interfaces?.includes(ScryptedInterface.ObjectDetector)
+            );
+
+        for (const cam of cameras) {
+            const rateKey = `rate:${cam.id}`;
+            const rateLabel = (this.storage.getItem(rateKey) || '1 per minute') as RateOption;
+            if (rateLabel === 'disabled') continue;
+
+            const listener = cam.listen(ScryptedInterface.ObjectDetector, async (source, details, data) => {
+                await this.onDetection(cam.id, cam.name, data as ObjectsDetected, RATE_MS[rateLabel]);
+            });
+            this.listeners.push(() => listener.removeListener());
+        }
+
+        this.console.log(`Listening to ${this.listeners.length} camera(s).`);
+    }
+
+    // ── Detection Handler ─────────────────────────────────────────────────────
+
+    private async onDetection(cameraId: string, cameraName: string, data: ObjectsDetected, rateLimitMs: number) {
+        if (!data?.detections?.length || !data.inputDimensions) return;
+
+        // Rate limit per camera
+        const now = Date.now();
+        const last = this.lastCapture.get(cameraId) || 0;
+        if (now - last < rateLimitMs) return;
+
+        // Filter to target classes
+        const targets = data.detections.filter(d =>
+            d.className && CAPTURE_CLASSES.has(d.className.toLowerCase()) && d.boundingBox
+        );
+        if (!targets.length) return;
+
+        // Pick the highest-confidence target detection
+        const best = targets.sort((a, b) => (b.score || 0) - (a.score || 0))[0];
+
+        // Enforce max storage
+        if (this.captures.size >= MAX_CAPTURES) {
+            // Evict oldest unreviewed capture
+            const oldest = [...this.captures.values()]
+                .filter(c => !c.reviewed)
+                .sort((a, b) => a.timestamp - b.timestamp)[0];
+            if (oldest) this.deleteCapture(oldest.id);
+            else return; // All reviewed, don't evict labeled data
+        }
+
+        this.lastCapture.set(cameraId, now);
+
+        // Try to get the detection image
+        let jpeg: Buffer | undefined;
+        try {
+            if (data.detectionId) {
+                const cam = systemManager.getDeviceById(cameraId) as unknown as ObjectDetector;
+                const mo = await cam.getDetectionInput(data.detectionId);
+                jpeg = await mediaManager.convertMediaObjectToBuffer(mo, 'image/jpeg');
+            }
+        } catch (e) {
+            this.console.warn(`Could not get detection image for ${cameraName}:`, e);
+        }
+
+        if (!jpeg) return; // Skip if no image
+
+        const id = `${now}-${Math.random().toString(36).slice(2, 8)}`;
+        const record: CaptureRecord = {
+            id,
+            cameraId,
+            cameraName,
+            timestamp: now,
+            detectedClass: best.className!,
+            score: best.score || 0,
+            boundingBox: best.boundingBox as number[],
+            inputDimensions: data.inputDimensions as number[],
+            detectionId: data.detectionId,
+            reviewed: false,
+        };
+
+        this.captures.set(id, record);
+        this.images.set(id, jpeg);
+        this.saveImage(id, jpeg);
+        this.saveCaptures();
+
+        this.console.log(`Captured ${best.className} (${Math.round((best.score || 0) * 100)}%) from ${cameraName} [${this.captures.size} total]`);
+    }
+
+    // ── HTTP Handler ──────────────────────────────────────────────────────────
+
+    async onRequest(request: HttpRequest, response: HttpResponse) {
+        const url = new URL(request.url, 'http://localhost');
+        const path = url.pathname.replace(request.rootPath, '');
+
+        // Serve image
+        if (path.startsWith('/img/')) {
+            const id = path.slice(5);
+            const img = this.images.get(id);
+            if (!img) return response.send('Not found', { code: 404 });
+            return response.send(img, { headers: { 'Content-Type': 'image/jpeg', 'Cache-Control': 'max-age=3600' } });
+        }
+
+        // API: label a capture
+        if (path === '/api/label' && request.body) {
+            const rawBody = request.body as any;
+            const body = JSON.parse(typeof rawBody === 'string' ? rawBody : Buffer.isBuffer(rawBody) ? rawBody.toString() : String(rawBody));
+            const record = this.captures.get(body.id);
+            if (!record) return response.send('Not found', { code: 404 });
+            record.label = body.label as Label;
+            record.reviewed = true;
+            if (body.label === 'discard') {
+                this.deleteCapture(body.id);
+            } else {
+                this.captures.set(body.id, record);
+                this.saveCaptures();
+            }
+            return response.send(JSON.stringify({ ok: true }), { headers: { 'Content-Type': 'application/json' } });
+        }
+
+        // API: get pending captures
+        if (path === '/api/pending') {
+            const pending = [...this.captures.values()]
+                .filter(c => !c.reviewed)
+                .sort((a, b) => b.timestamp - a.timestamp)
+                .slice(0, 50);
+            return response.send(JSON.stringify(pending), { headers: { 'Content-Type': 'application/json' } });
+        }
+
+        // API: stats
+        if (path === '/api/stats') {
+            const all = [...this.captures.values()];
+            const stats = {
+                total: all.length,
+                pending: all.filter(c => !c.reviewed).length,
+                labeled: all.filter(c => c.reviewed && c.label !== 'discard').length,
+                byLabel: {} as Record<string, number>,
+                byCamera: {} as Record<string, number>,
+                byDetectedClass: {} as Record<string, number>,
+            };
+            for (const r of all) {
+                if (r.label) stats.byLabel[r.label] = (stats.byLabel[r.label] || 0) + 1;
+                stats.byCamera[r.cameraName] = (stats.byCamera[r.cameraName] || 0) + 1;
+                stats.byDetectedClass[r.detectedClass] = (stats.byDetectedClass[r.detectedClass] || 0) + 1;
+            }
+            return response.send(JSON.stringify(stats), { headers: { 'Content-Type': 'application/json' } });
+        }
+
+        // API: export YOLO dataset
+        if (path === '/api/export') {
+            const labeled = [...this.captures.values()].filter(c => c.reviewed && c.label && c.label !== 'discard');
+            if (!labeled.length) return response.send(JSON.stringify({ error: 'No labeled data yet' }), { headers: { 'Content-Type': 'application/json' }, code: 400 });
+
+            const classMap: Record<Label, number> = {
+                person: 0, animal: 1, face: 2, vehicle: 3, plate: 4, package: 5, discard: -1,
+            };
+
+            // Build a simple tarball-like structure as JSON for download
+            const dataset: { filename: string; content: string; encoding: string }[] = [];
+
+            for (const record of labeled) {
+                const img = this.images.get(record.id);
+                if (!img) continue;
+
+                const fname = `${record.id}`;
+                dataset.push({ filename: `images/${fname}.jpg`, content: img.toString('base64'), encoding: 'base64' });
+
+                const [x, y, w, h] = record.boundingBox;
+                const [imgW, imgH] = record.inputDimensions;
+                const cx = (x + w / 2) / imgW;
+                const cy = (y + h / 2) / imgH;
+                const nw = w / imgW;
+                const nh = h / imgH;
+                const classId = classMap[record.label!];
+                const labelLine = `${classId} ${cx.toFixed(6)} ${cy.toFixed(6)} ${nw.toFixed(6)} ${nh.toFixed(6)}\n`;
+                dataset.push({ filename: `labels/${fname}.txt`, content: labelLine, encoding: 'utf8' });
+            }
+
+            const yaml = [
+                'path: dataset',
+                'train: images',
+                'val: images',
+                '',
+                'nc: 6',
+                "names: ['person', 'animal', 'face', 'vehicle', 'plate', 'package']",
+                '',
+                '# Generated by Scrypted Detection Trainer',
+                `# ${labeled.length} labeled samples`,
+            ].join('\n');
+            dataset.push({ filename: 'data.yaml', content: yaml, encoding: 'utf8' });
+
+            return response.send(JSON.stringify({ files: dataset, count: labeled.length }), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+
+        // Serve Web UI
+        if (path === '/' || path === '' || path === '/index.html') {
+            return response.send(this.renderUI(), { headers: { 'Content-Type': 'text/html' } });
+        }
+
+        response.send('Not found', { code: 404 });
+    }
+
+    // ── Web UI ────────────────────────────────────────────────────────────────
+
+    private renderUI(): string {
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Detection Trainer</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f0f0f; color: #e8e8e8; min-height: 100vh; }
+  header { background: #1a1a1a; border-bottom: 1px solid #333; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
+  header h1 { font-size: 18px; font-weight: 600; color: #fff; }
+  .stats { display: flex; gap: 20px; font-size: 13px; color: #aaa; }
+  .stat span { color: #fff; font-weight: 600; }
+  .container { max-width: 1000px; margin: 0 auto; padding: 24px; }
+  .card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
+  .card-header { padding: 16px 20px; border-bottom: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: space-between; }
+  .card-header h2 { font-size: 15px; font-weight: 600; }
+  .badge { background: #333; color: #aaa; font-size: 12px; padding: 2px 8px; border-radius: 20px; }
+  .badge.orange { background: #3d2a00; color: #f90; }
+  .badge.green { background: #0d2d0d; color: #4c4; }
+
+  /* Detection card */
+  .detection { display: grid; grid-template-columns: 200px 1fr; gap: 0; border-bottom: 1px solid #222; }
+  .detection:last-child { border-bottom: none; }
+  .detection-img { position: relative; background: #111; display: flex; align-items: center; justify-content: center; min-height: 150px; }
+  .detection-img img { width: 100%; height: 150px; object-fit: cover; display: block; }
+  .detection-class { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.7); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; }
+  .detection-info { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
+  .detection-meta { font-size: 12px; color: #888; display: flex; flex-wrap: wrap; gap: 10px; }
+  .detection-meta strong { color: #ccc; }
+  .label-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
+  .label-btn { padding: 7px 14px; border-radius: 8px; border: 1px solid #444; background: #222; color: #ccc; cursor: pointer; font-size: 13px; transition: all .15s; }
+  .label-btn:hover { border-color: #666; background: #2a2a2a; color: #fff; }
+  .label-btn.person { border-color: #2a6; color: #4d9; }
+  .label-btn.person:hover { background: #0d2a1a; }
+  .label-btn.animal { border-color: #a63; color: #d85; }
+  .label-btn.animal:hover { background: #2a1a0d; }
+  .label-btn.face { border-color: #49c; color: #6be; }
+  .label-btn.face:hover { background: #0d1a2a; }
+  .label-btn.vehicle { border-color: #76b; color: #99d; }
+  .label-btn.vehicle:hover { background: #1a1a2a; }
+  .label-btn.discard { border-color: #622; color: #a44; }
+  .label-btn.discard:hover { background: #2a0d0d; }
+  .detection.labeled { opacity: 0.4; pointer-events: none; }
+  .labeled-tag { font-size: 11px; color: #4d9; background: #0d2a1a; border: 1px solid #2a6; padding: 2px 8px; border-radius: 4px; }
+
+  /* Empty state */
+  .empty { padding: 48px; text-align: center; color: #555; }
+  .empty .icon { font-size: 48px; margin-bottom: 12px; }
+
+  /* Export section */
+  .export-btn { padding: 10px 20px; background: #1a4d8a; border: none; border-radius: 8px; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500; }
+  .export-btn:hover { background: #1e5ca0; }
+  .export-btn:disabled { background: #333; color: #666; cursor: not-allowed; }
+  .export-info { font-size: 13px; color: #888; padding: 12px 20px; }
+
+  /* Progress bar */
+  .progress { height: 4px; background: #222; border-radius: 2px; overflow: hidden; margin-top: 8px; }
+  .progress-bar { height: 100%; background: #1a6; border-radius: 2px; transition: width .3s; }
+
+  .toast { position: fixed; bottom: 24px; right: 24px; background: #1a3; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity .3s; pointer-events: none; }
+  .toast.show { opacity: 1; }
+
+  .tab-bar { display: flex; gap: 2px; padding: 12px 20px 0; border-bottom: 1px solid #2a2a2a; }
+  .tab { padding: 8px 14px; font-size: 13px; color: #888; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
+  .tab.active { color: #fff; border-bottom-color: #4a9; }
+  .tab-content { padding: 20px; }
+  .tab-panel { display: none; }
+  .tab-panel.active { display: block; }
+
+  .breakdown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
+  .breakdown-item { background: #222; border-radius: 8px; padding: 12px; }
+  .breakdown-item .label { font-size: 12px; color: #888; margin-bottom: 4px; }
+  .breakdown-item .value { font-size: 20px; font-weight: 600; color: #fff; }
+</style>
+</head>
+<body>
+<header>
+  <h1>🎯 Detection Trainer</h1>
+  <div class="stats">
+    <div>Pending <span id="stat-pending">—</span></div>
+    <div>Labeled <span id="stat-labeled">—</span></div>
+    <div>Total <span id="stat-total">—</span></div>
+  </div>
+</header>
+<div class="container">
+
+  <div class="card">
+    <div class="tab-bar">
+      <div class="tab active" onclick="showTab('review')">Review</div>
+      <div class="tab" onclick="showTab('stats')">Stats</div>
+      <div class="tab" onclick="showTab('export')">Export Dataset</div>
+    </div>
+
+    <!-- Review tab -->
+    <div class="tab-panel active" id="tab-review">
+      <div id="detections-list"></div>
+    </div>
+
+    <!-- Stats tab -->
+    <div class="tab-panel" id="tab-stats">
+      <div class="tab-content">
+        <p style="font-size:13px;color:#888;margin-bottom:16px;">Breakdown of captured and labeled detections.</p>
+        <h3 style="font-size:13px;color:#aaa;margin-bottom:10px;">By Detected Class (what the model said)</h3>
+        <div class="breakdown-grid" id="stats-detected"></div>
+        <h3 style="font-size:13px;color:#aaa;margin:20px 0 10px;">By Corrected Label (what you said)</h3>
+        <div class="breakdown-grid" id="stats-label"></div>
+        <h3 style="font-size:13px;color:#aaa;margin:20px 0 10px;">By Camera</h3>
+        <div class="breakdown-grid" id="stats-camera"></div>
+      </div>
+    </div>
+
+    <!-- Export tab -->
+    <div class="tab-panel" id="tab-export">
+      <div class="tab-content">
+        <p style="font-size:13px;color:#888;margin-bottom:16px;">
+          Exports a YOLO-format dataset (images + labels + data.yaml) as a downloadable bundle.
+          Only labeled detections are included. Review more detections first to build a larger dataset.
+        </p>
+        <div id="export-stats" class="export-info">Loading…</div>
+        <div style="display:flex;gap:12px;align-items:center;margin-top:12px;">
+          <button class="export-btn" id="export-btn" onclick="exportDataset()">Download Dataset</button>
+          <span id="export-status" style="font-size:13px;color:#888;"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+const BASE = location.pathname.replace(/\\/$/, '');
+let pending = [];
+let labeledCount = 0;
+
+function showTab(name) {
+  document.querySelectorAll('.tab').forEach((t, i) => {
+    const names = ['review', 'stats', 'export'];
+    t.classList.toggle('active', names[i] === name);
+  });
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  document.getElementById('tab-' + name).classList.add('active');
+  if (name === 'stats') loadStats();
+  if (name === 'export') loadExportInfo();
+}
+
+function toast(msg, color='#1a3') {
+  const el = document.getElementById('toast');
+  el.textContent = msg;
+  el.style.background = color;
+  el.classList.add('show');
+  setTimeout(() => el.classList.remove('show'), 2500);
+}
+
+async function loadPending() {
+  const res = await fetch(BASE + '/api/pending');
+  pending = await res.json();
+
+  const statsRes = await fetch(BASE + '/api/stats');
+  const stats = await statsRes.json();
+  document.getElementById('stat-pending').textContent = stats.pending;
+  document.getElementById('stat-labeled').textContent = stats.labeled;
+  document.getElementById('stat-total').textContent = stats.total;
+
+  const list = document.getElementById('detections-list');
+  if (!pending.length) {
+    list.innerHTML = '<div class="empty"><div class="icon">✅</div><div>No pending detections to review.<br><span style="font-size:12px;color:#444">Captures will appear here as cameras detect objects.</span></div></div>';
+    return;
+  }
+
+  list.innerHTML = pending.map(r => {
+    const date = new Date(r.timestamp).toLocaleString();
+    const score = Math.round(r.score * 100);
+    return \`
+    <div class="detection" id="det-\${r.id}">
+      <div class="detection-img">
+        <img src="\${BASE}/img/\${r.id}" alt="\${r.detectedClass}" loading="lazy" onerror="this.parentElement.innerHTML='<div style=\\"padding:20px;color:#555;font-size:12px;text-align:center\\">Image unavailable</div>'">
+        <div class="detection-class">\${r.detectedClass} \${score}%</div>
+      </div>
+      <div class="detection-info">
+        <div class="detection-meta">
+          <div><strong>\${r.cameraName}</strong></div>
+          <div>\${date}</div>
+          <div>Box: \${r.boundingBox.map(v => Math.round(v)).join(', ')}</div>
+        </div>
+        <div style="font-size:12px;color:#888;">What is this actually?</div>
+        <div class="label-buttons">
+          <button class="label-btn person" onclick="label('\${r.id}', 'person')">👤 Person</button>
+          <button class="label-btn animal" onclick="label('\${r.id}', 'animal')">🐾 Animal</button>
+          <button class="label-btn face" onclick="label('\${r.id}', 'face')">😀 Face</button>
+          <button class="label-btn vehicle" onclick="label('\${r.id}', 'vehicle')">🚗 Vehicle</button>
+          <button class="label-btn" onclick="label('\${r.id}', 'plate')">🔢 Plate</button>
+          <button class="label-btn" onclick="label('\${r.id}', 'package')">📦 Package</button>
+          <button class="label-btn discard" onclick="label('\${r.id}', 'discard')">🗑 Discard</button>
+        </div>
+      </div>
+    </div>\`;
+  }).join('');
+}
+
+async function label(id, labelVal) {
+  const el = document.getElementById('det-' + id);
+  if (el) {
+    el.classList.add('labeled');
+    const btns = el.querySelectorAll('.label-btn');
+    btns.forEach(b => b.disabled = true);
+  }
+  await fetch(BASE + '/api/label', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ id, label: labelVal }),
+  });
+  toast(labelVal === 'discard' ? 'Discarded' : 'Labeled: ' + labelVal, labelVal === 'discard' ? '#633' : '#1a6');
+  setTimeout(() => {
+    if (el) el.remove();
+    loadPending();
+  }, 600);
+}
+
+async function loadStats() {
+  const res = await fetch(BASE + '/api/stats');
+  const stats = await res.json();
+
+  const renderBreakdown = (obj, container) => {
+    const el = document.getElementById(container);
+    const entries = Object.entries(obj).sort((a, b) => b[1] - a[1]);
+    el.innerHTML = entries.length
+      ? entries.map(([k, v]) => \`<div class="breakdown-item"><div class="label">\${k}</div><div class="value">\${v}</div></div>\`).join('')
+      : '<div style="color:#555;font-size:13px;">None yet</div>';
+  };
+
+  renderBreakdown(stats.byDetectedClass, 'stats-detected');
+  renderBreakdown(stats.byLabel, 'stats-label');
+  renderBreakdown(stats.byCamera, 'stats-camera');
+}
+
+async function loadExportInfo() {
+  const res = await fetch(BASE + '/api/stats');
+  const stats = await res.json();
+  document.getElementById('export-stats').textContent =
+    \`\${stats.labeled} labeled samples ready for export across \${Object.keys(stats.byCamera).length} camera(s).\`;
+}
+
+async function exportDataset() {
+  const btn = document.getElementById('export-btn');
+  const status = document.getElementById('export-status');
+  btn.disabled = true;
+  status.textContent = 'Preparing…';
+
+  try {
+    const res = await fetch(BASE + '/api/export');
+    if (!res.ok) { status.textContent = 'Nothing to export yet.'; btn.disabled = false; return; }
+    const data = await res.json();
+    if (data.error) { status.textContent = data.error; btn.disabled = false; return; }
+
+    // Build a zip-like structure using a self-extracting HTML page
+    // Actually just download as a JSON bundle that train.py can consume
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'scrypted_dataset_' + new Date().toISOString().slice(0,10) + '.json';
+    a.click();
+    URL.revokeObjectURL(url);
+    status.textContent = \`Downloaded \${data.count} samples.\`;
+    toast('Dataset downloaded!');
+  } catch (e) {
+    status.textContent = 'Export failed: ' + e.message;
+  }
+  btn.disabled = false;
+}
+
+// Initial load
+loadPending();
+// Auto-refresh pending every 30s
+setInterval(loadPending, 30_000);
+</script>
+</body>
+</html>`;
+    }
+}
+
+export default DetectionTrainer;

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "module": "Node16",
+    "target": "ES2021",
+    "resolveJsonModule": true,
+    "moduleResolution": "Node16",
+    "esModuleInterop": true,
+    "sourceMap": true
+  },
+  "include": [
+    "src/**/*"
+  ]
+}