hoangsonww / hoangsonww/Image-Video-Tools
Feature: Batch Studio + Presets + Offline PWA + Faster Processing (Web Workers & WASM)
- Dominant language
- JavaScript
- Stars
- 29
- Forks
- 10
- PR merge metrics
- No merged PRs in 30d
Description
**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.
---
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.