Feature: Batch Studio + Presets + Offline PWA + Faster Processing (Web Workers & WASM)

[hoangsonww]

Summary
Introduce a Batch Studio to process multiple files at once (resize/crop/convert/watermark/filter/silence), add one-click Presets, make the app installable & fully offline (PWA), and speed up heavy tasks via Web Workers + WASM (e.g., ffmpeg.wasm, ONNX Runtime Web for background removal).

---

Goals

• Power users: Process dozens/hundreds of media files consistently with presets.
• Speed: Move CPU-heavy work off the main thread; leverage WASM for image/video ops.
• Reliability: Run offline with cached models/binaries; resume interrupted batches.
• UX: Drag-drop folders, progress bars, per-item status, safe failure modes.

---

Scope (MVP)

1) Batch Studio

• Drag-and-drop multiple files/folders (images + videos).
• Select a preset (see below) → apply to all items.
• Per-item preview (first frame for video), queue, progress, cancel/retry.
• Output: download all (zip) or per-file.

2) Presets

• Built-in:

  • Social: IG Post 1080x1080 JPEG 85%
  • Web: 2x responsive PNG→WEBP+AVIF
  • YouTube Thumb: 1280x720 + watermark
  • Video: Remove audio + MP4 H.264

• User-defined presets (stored in localStorage/IndexedDB): chainable steps
  resize -> crop -> filter -> watermark -> convert (+ for video: mute/thumbs).

3) Offline PWA

• Installable (manifest & icons); Service Worker caching:

  • Core UI, fonts, CSS/JS
  • ffmpeg.wasm core files
  • Background-removal model files

• “Offline ready” badge + degraded mode messaging when models aren’t cached yet.

4) Performance

• Web Workers for all heavy ops (resize, filters, watermark rasterization, encoding).

• WASM backends:

  • ffmpeg.wasm for: mute audio, thumbnail capture, format transcode, concat (future).
  • ONNX Runtime Web (or TensorFlow.js if already used) for background removal.

• Tiling large images to avoid memory spikes; back-pressure on queue.

5) Safety & UX

• Live ETA + MB processed/sec dashboard.
• Conflict-free filenames (basename__preset__n.ext).
• Safe limits (e.g., max canvas area), early warnings, and graceful fallback to CPU/canvas.
• A11y: focus order, keyboardable controls, visible progress for screen readers.

---

Architecture Notes

• Worker bridge: postMessage with transferable ArrayBuffer (avoid cloning).

• Data storage:

  • Small prefs/presets → localStorage.
  • Cached binaries/models & batch session state → IndexedDB (via idb helper).

• Zip packaging: Use fflate in a Worker to stream zip creation.

• Feature flags: Query string or local toggle (e.g., ?wasm=0 to debug fallback).

---

API/Modules (Front-end only)

• workers/imageWorker.ts: resize/crop/filter/watermark via OffscreenCanvas/CanvasKit (if available).
• workers/ffmpegWorker.ts: mute audio, transcode, thumbnails (ffmpeg.wasm FS).
• workers/bgRemovalWorker.ts: load/cold-cache ONNX model, run segmentation/matting.
• core/presets.ts: schema + CRUD (validate preset pipelines).
• core/batch.ts: queue, concurrency (e.g., 2 videos + 4 images at once), retries, pause/resume.
• core/pwa.ts: service worker registration + cache warm-up (preload models on user consent).

---

UI Additions

• /batch route:

  • Dropzone (files/folders), preset picker, queue table (filename, ops, status, size in/out).
  • Global controls: start/pause/cancel, export as Zip.

• /presets:

  • Create/edit: step builder with live preview.

• Topbar: Install PWA button, “Offline ready” pill, Settings (WASM/worker toggles).

---

Acceptance Criteria

• Drag-drop ≥100 mixed files works without blocking UI.
• Preset applies identical steps to all items; per-item failures don’t stop the batch.
• Audio removal and video thumbnails run via ffmpeg.wasm Worker.
• Background removal runs in a Worker with model cached; offline execution after cache warm-up.
• App is installable; first run online, subsequent fully offline (except external uploads).
• Export zip ≤2 GB works; memory stays below safe thresholds (no tab crashes).

---

Security & Privacy

• All processing client-side; no uploads.
• Clear cache controls (purge models/binaries).
• Sanitize watermark text; clamp canvas sizes; deny HEIC/AVIF decode if unsupported.

---

Tasks

Core

• Add Service Worker + manifest; cache strategy (stale-while-revalidate + prefetch toggle).
• Implement BatchQueue with concurrency & back-pressure.
• Workerize image ops (OffscreenCanvas path, main-thread fallback).
• Integrate ffmpeg.wasm in Worker; stream logs, progress.
• Integrate ONNX Runtime Web/TensorFlow.js model in Worker; cache model shards.

Features

• Batch Studio UI + queue table + previews.
• Preset system (CRUD, import/export JSON).
• Zip export (fflate in Worker).
• Progress HUD + ETA + throughput.
• Settings panel (limits, concurrency, WASM toggles).

UX/A11y

• Keyboard navigation, ARIA for progress.
• Error toasts with actionable tips; per-item retry.

Testing

• Unit: preset validation, filename resolver, image math (aspect/tiling).
• Integration: 50-item batch end-to-end (CI in headless).
• Performance: time-to-first-frame for ffmpeg.wasm, large image tiling.
• Offline: Cypress run with network disabled after warm-up.

Docs

• README: Batch Studio, Presets, Offline usage, troubleshooting.
• “Why Workers & WASM?” section + size/caching notes.

---