I built a privacy-first face blurring tool that runs entirely in your browser

#webdev #programming #productivity #javascript

Every photo you share online might expose more than you intend — faces of your kids, strangers in the background, license plates, addresses on envelopes, watermarks with your name.

I wanted a tool that:

Blurs faces automatically
Detects text like license plates and watermarks
Never uploads my photos anywhere
Works on mobile
Is 100% free
Existing tools either upload to a server (no thanks) or require manual editing. So I built BlurIt — a fully client-side face and text blurring app.

How it works
Face detection uses SSD MobileNet V1 via TensorFlow.js — a multi-scale single-shot detector that catches small, distant, and partial faces even in crowd scenes. I implemented multi-scale quadrant detection (running the model on the full image + 4 overlapping zoomed quadrants) to catch background faces that single-pass detection misses.

Text detection uses Tesseract.js v7 with image preprocessing (2x upscaling + grayscale + contrast normalization) and multi-PSM detection (PSM 3 for structured text, PSM 1 for rotated/sideways text, PSM 11 for scattered text like watermarks).

Both models run locally in the browser via WebAssembly — your photos never leave your device. The model weights are self-hosted (same-origin), so there are zero third-party network requests for user data.

The privacy architecture
text

User drops photo
↓
Browser decodes (createImageBitmap)
↓
Canvas + ML model (local WASM)
↓
User taps to blur
↓
Canvas renders pixelate/gaussian/black
↓
Download — done
No server. No API. No database. No analytics. No tracking. The only things stored are your theme preference and a one-time terms acceptance in localStorage.

The UX
I took inspiration from iLoveIMG — minimal, plug-and-play:

Icon-only sidebar (3 cycle buttons: Tool, Style, Strength)
Tap detected faces/text to toggle blur
Manual brush for anything auto-detect misses
3 blur styles: pixelate, gaussian, black box
3 intensities: light, medium, heavy
Oval + rectangle brush shapes
What I learned
Client-side ML is viable — SSD MobileNet V1 runs in ~2-3 seconds in a real browser. TensorFlow.js + WebGL makes it fast.
Tesseract struggles with photo-embedded text — it's trained on documents, not scene text. Upscaling + grayscale + contrast normalization helps a lot, but it won't match server-side Vision APIs. That's the privacy tradeoff.
Multi-scale detection matters — single-pass face detection misses small background faces. Running on quadrants (2x zoom) catches them.
Web Workers are essential — OCR and ML inference must run off the main thread or the UI freezes.
Try it
BlurIt is live and free: https://blurit-lime.vercel.app
Open source: https://github.com/JeffreyHamilton6399/blurit

Your photos are yours. BlurIt just helps you protect them. 🛡️