Upload 16 files

web/src/components/DetectPanel.tsx

@@ -9,6 +9,7 @@ export default function DetectPanel() {
   const [videoName, setVideoName] = useState('');
   const [key, setKey] = useState('');
   const [maxFrames, setMaxFrames] = useState(10);
+  const [cropResilient, setCropResilient] = useState(false);
   const [processing, setProcessing] = useState(false);
   const [progress, setProgress] = useState({ phase: '', current: 0, total: 0 });
   const [result, setResult] = useState<AutoDetectResult | null>(null);
@@ -48,7 +49,7 @@ export default function DetectPanel() {
       });
 
       setProgress({ phase: 'Trying all presets', current: 0, total: 0 });
-      const detection = autoDetectMultiFrame(yPlanes, width, height, key);
+      const detection = autoDetectMultiFrame(yPlanes, width, height, key, { cropResilient });
 
       setResult(detection);
     } catch (e) {
@@ -127,6 +128,22 @@ export default function DetectPanel() {
         </div>
       </div>
 
+      <div className="flex items-center gap-3">
+        <label className="relative inline-flex cursor-pointer items-center">
+          <input
+            type="checkbox"
+            checked={cropResilient}
+            onChange={(e) => setCropResilient(e.target.checked)}
+            className="peer sr-only"
+          />
+          <div className="h-5 w-9 rounded-full bg-zinc-700 after:absolute after:left-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:bg-zinc-400 after:transition-all peer-checked:bg-violet-600 peer-checked:after:translate-x-full peer-checked:after:bg-white" />
+        </label>
+        <div>
+          <span className="text-sm text-zinc-300">Crop-resilient detection</span>
+          <p className="text-[10px] text-zinc-600">Slower — brute-forces DWT alignment for cropped videos</p>
+        </div>
+      </div>
+
       <p className="text-xs text-zinc-500">
         All presets will be tried automatically. No need to know which preset was used during embedding.
       </p>

web/src/components/EmbedPanel.tsx

@@ -41,6 +41,8 @@ export default function EmbedPanel() {
     width: number;
     height: number;
     fps: number;
+    embedTimeMs: number;
+    pixelsPerSecond: number;
   } | null>(null);
   const fileRef = useRef<HTMLInputElement>(null);
 
@@ -105,6 +107,8 @@ export default function EmbedPanel() {
         width: embedResult.width,
         height: embedResult.height,
         fps: embedResult.fps,
+        embedTimeMs: embedResult.embedTimeMs,
+        pixelsPerSecond: embedResult.pixelsPerSecond,
       });
     } catch (e) {
       console.error('Embed error:', e);
@@ -246,6 +250,8 @@ export default function EmbedPanel() {
               <h3 className="text-sm font-semibold text-emerald-400">✅ Embedding Complete</h3>
               <p className="mt-1 text-xs text-zinc-500">
                 {result.frames} frames processed — Average PSNR: {result.psnr.toFixed(1)} dB
+                <br />
+                Embedded in {(result.embedTimeMs / 1000).toFixed(1)}s — {(result.pixelsPerSecond / 1e6).toFixed(1)} Mpx/s
               </p>
             </div>
             <button

web/src/components/HowItWorks.tsx

@@ -590,15 +590,15 @@ const stages: Stage[] = [
     title: 'Payload Encoding',
     description: 'Error-correcting payload encoding',
     explanation: [
-      'The raw 32-bit payload (e.g. 0xDEADBEEF) is first protected with a 16-bit CRC checksum for integrity verification, expanding to 48 bits. Then BCH(63,48,2) error-correcting coding adds parity bits, yielding 63 coded bits that can correct up to 2 bit errors.',
+      'The raw 32-bit payload (e.g. 0xDEADBEEF) is first protected with a 4-bit CRC checksum for integrity verification, expanding to 36 bits. Then BCH(63,36,5) error-correcting coding adds parity bits, yielding 63 coded bits that can correct up to 5 bit errors.',
       'Finally, the 63 bits are pseudo-randomly interleaved using a key-derived permutation. This spreads burst errors (from localized damage) across the codeword, converting them into scattered errors that BCH can correct more effectively.',
     ],
     draw(g, w, h) {
       const cy = h / 2;
       const steps = [
         { label: '32-bit', label2: 'payload', bits: '32', color: C.blue, desc: '0xDEADBEEF' },
-        { label: 'CRC-16', label2: 'append', bits: '48', color: C.violet, desc: '+16 check bits' },
-        { label: 'BCH', label2: '(63,48,t=2)', bits: '63', color: C.emerald, desc: 'correct 2 errors' },
+        { label: 'CRC-4', label2: 'append', bits: '36', color: C.violet, desc: '+4 check bits' },
+        { label: 'BCH', label2: '(63,36,t=5)', bits: '63', color: C.emerald, desc: 'correct 5 errors' },
         { label: 'Keyed', label2: 'interleave', bits: '63', color: C.amber, desc: 'spread burst errors' },
       ];
       const pad = 30;

web/src/components/RobustnessTest.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
-import { autoDetectMultiFrame } from '@core/detector.js';
-import { attackReencode, attackDownscale, attackBrightness, attackContrast, attackSaturation } from '../lib/video-io.js';
+import { autoDetectMultiFrame, type DetectOptions } from '@core/detector.js';
+import { attackReencode, attackDownscale, attackBrightness, attackContrast, attackSaturation, attackCrop } from '../lib/video-io.js';
 
 type TestStatus = 'idle' | 'running' | 'pass' | 'fail' | 'error';
 
@@ -22,6 +22,7 @@ interface TestDef {
   label: string;
   category: string;
   run: (blob: Blob, w: number, h: number) => Promise<{ yPlanes: Uint8Array[]; width: number; height: number }>;
+  detectOptions?: DetectOptions;
 }
 
 const TESTS: TestDef[] = [
@@ -32,6 +33,7 @@ const TESTS: TestDef[] = [
   { label: 'CRF 38', category: 'Re-encode', run: (b, w, h) => attackReencode(b, 38, w, h) },
   { label: 'CRF 43', category: 'Re-encode', run: (b, w, h) => attackReencode(b, 43, w, h) },
   // Downscale
+  { label: '25%', category: 'Downscale', run: (b, w, h) => attackDownscale(b, 25, w, h) },
   { label: '50%', category: 'Downscale', run: (b, w, h) => attackDownscale(b, 50, w, h) },
   { label: '75%', category: 'Downscale', run: (b, w, h) => attackDownscale(b, 75, w, h) },
   { label: '90%', category: 'Downscale', run: (b, w, h) => attackDownscale(b, 90, w, h) },
@@ -47,6 +49,23 @@ const TESTS: TestDef[] = [
   { label: '0x', category: 'Saturation', run: (b, w, h) => attackSaturation(b, 0, w, h) },
   { label: '0.5x', category: 'Saturation', run: (b, w, h) => attackSaturation(b, 0.5, w, h) },
   { label: '2.0x', category: 'Saturation', run: (b, w, h) => attackSaturation(b, 2.0, w, h) },
+  // Crop (~5-10% from edges)
+  { label: '5%', category: 'Crop', run: (b, w, h) => {
+    const px = Math.round(Math.min(w, h) * 0.05);
+    return attackCrop(b, px, px, px, px, w, h);
+  }, detectOptions: { cropResilient: true } },
+  { label: '10%', category: 'Crop', run: (b, w, h) => {
+    const px = Math.round(Math.min(w, h) * 0.10);
+    return attackCrop(b, px, px, px, px, w, h);
+  }, detectOptions: { cropResilient: true } },
+  { label: '15%', category: 'Crop', run: (b, w, h) => {
+    const px = Math.round(Math.min(w, h) * 0.15);
+    return attackCrop(b, px, px, px, px, w, h);
+  }, detectOptions: { cropResilient: true } },
+  { label: '20%', category: 'Crop', run: (b, w, h) => {
+    const px = Math.round(Math.min(w, h) * 0.20);
+    return attackCrop(b, px, px, px, px, w, h);
+  }, detectOptions: { cropResilient: true } },
 ];
 
 function payloadToHex(payload: Uint8Array): string {
@@ -56,6 +75,7 @@ function payloadToHex(payload: Uint8Array): string {
 export default function RobustnessTest({ blob, width, height, payload, secretKey }: RobustnessTestProps) {
   const [results, setResults] = useState<Record<number, TestResult>>({});
   const [runningAll, setRunningAll] = useState(false);
+  const [progress, setProgress] = useState(0);
 
   const expectedHex = payload.replace(/^0x/, '').toUpperCase();
 
@@ -69,7 +89,7 @@ export default function RobustnessTest({ blob, width, height, payload, secretKey
       const step = Math.max(1, Math.floor(attacked.yPlanes.length / 10));
       const sampled = attacked.yPlanes.filter((_, i) => i % step === 0).slice(0, 10);
 
-      const detection = autoDetectMultiFrame(sampled, attacked.width, attacked.height, secretKey);
+      const detection = autoDetectMultiFrame(sampled, attacked.width, attacked.height, secretKey, test.detectOptions);
 
       const detectedHex = detection.payload ? payloadToHex(detection.payload) : '';
       const match = detection.detected && detectedHex === expectedHex;
@@ -90,13 +110,15 @@ export default function RobustnessTest({ blob, width, height, payload, secretKey
 
   const runAll = useCallback(async () => {
     setRunningAll(true);
+    setProgress(0);
     for (let i = 0; i < TESTS.length; i++) {
       await runTest(i);
+      setProgress((i + 1) / TESTS.length);
     }
     setRunningAll(false);
   }, [runTest]);
 
-  const categories = ['Re-encode', 'Downscale', 'Brightness', 'Contrast', 'Saturation'];
+  const categories = ['Re-encode', 'Downscale', 'Brightness', 'Contrast', 'Saturation', 'Crop'];
 
   return (
     <div className="space-y-4">
@@ -112,7 +134,7 @@ export default function RobustnessTest({ blob, width, height, payload, secretKey
           {runningAll ? (
             <span className="flex items-center gap-1.5">
               <span className="h-3 w-3 animate-spin rounded-full border-[1.5px] border-zinc-500 border-t-zinc-200" />
-              Running...
+              {Math.round(progress * 100)}%
             </span>
           ) : (
             'Run All Tests'
@@ -120,6 +142,15 @@ export default function RobustnessTest({ blob, width, height, payload, secretKey
         </button>
       </div>
 
+      {runningAll && (
+        <div className="h-1 w-full overflow-hidden rounded-full bg-zinc-800">
+          <div
+            className="h-full rounded-full bg-zinc-500 transition-all duration-300"
+            style={{ width: `${progress * 100}%` }}
+          />
+        </div>
+      )}
+
       <div className="space-y-3">
         {categories.map((cat) => {
           const catTests = TESTS.map((t, i) => ({ ...t, idx: i })).filter((t) => t.category === cat);

web/src/lib/video-io.ts

@@ -65,6 +65,8 @@ export interface StreamEmbedResult {
   avgPsnr: number;
   sampleOriginal: ImageData[];
   sampleWatermarked: ImageData[];
+  embedTimeMs: number;
+  pixelsPerSecond: number;
 }
 
 /** Number of frames to accumulate before flushing to H.264 encoder */
@@ -85,6 +87,8 @@ export async function streamExtractAndEmbed(
   comparisonSample: number,
   onProgress?: (phase: string, current: number, total: number) => void
 ): Promise<StreamEmbedResult> {
+  const t0 = performance.now();
+
   const video = document.createElement('video');
   video.src = videoUrl;
   video.muted = true;
@@ -283,6 +287,9 @@ export async function streamExtractAndEmbed(
     try { await ffmpeg.deleteFile('audio_track.m4a'); } catch { /* no-op */ }
   }
 
+  const embedTimeMs = performance.now() - t0;
+  const pixelsPerSecond = (width * height * totalFrames) / (embedTimeMs / 1000);
+
   return {
     blob,
     width,
@@ -292,6 +299,8 @@ export async function streamExtractAndEmbed(
     avgPsnr: totalPsnr / totalFrames,
     sampleOriginal,
     sampleWatermarked,
+    embedTimeMs,
+    pixelsPerSecond,
   };
 }
 
@@ -451,3 +460,26 @@ export async function attackSaturation(blob: Blob, factor: number, width: number
   return runAttackPipeline(blob, ['-vf', `eq=saturation=${factor}`, '-crf', '18'], width, height);
 }
 
+/** Attack: crop by given pixel amounts from each edge */
+export async function attackCrop(
+  blob: Blob,
+  cropLeft: number,
+  cropTop: number,
+  cropRight: number,
+  cropBottom: number,
+  width: number,
+  height: number,
+): Promise<AttackYPlanes> {
+  const outW = width - cropLeft - cropRight;
+  const outH = height - cropTop - cropBottom;
+  // Ensure even dimensions for libx264
+  const w = outW % 2 === 0 ? outW : outW - 1;
+  const h = outH % 2 === 0 ? outH : outH - 1;
+  return runAttackPipeline(
+    blob,
+    ['-vf', `crop=${w}:${h}:${cropLeft}:${cropTop}`, '-crf', '18'],
+    w,
+    h,
+  );
+}
+