• 

  large_crowd_example_output_(high_detection_redaction_with_blur)

• 

  example_output_(low_detection_redaction_with_pixelate)

• 

  detection_and_redaction_with_masked_crowds

• 

  UI_high_detection_example_large_crowd

• 

  live preview feature example

• 

  about page

• 

  Spanish about page

🧙‍♂️ About the Project: Media Vizard

Media Vizard is a privacy-first face redaction tool that runs entirely in your browser — no uploads, no tracking, no compromise.

Inspired by the growing need for accessible, ethical, and offline-friendly privacy tools, this app was designed for activists, journalists, and everyday users who want to quickly anonymize faces in images — especially in crowded scenes — without relying on external servers or AI APIs.

Key goals:

• Full client-side redaction with no server calls
• High-performance face detection in crowd photos
• Accurate detection across diverse skin tones and masks
• Usable on mobile and low-power devices
• Zero metadata leakage (EXIF removal included)

What I Learned

This project deepened my expertise with:

• Multi-model client-side ML using TensorFlow.js + MediaPipe
• Efficient canvas-based redaction (blur, pixelate, blackout)
• Memory-safe image handling with Tensor disposal and garbage collection
• Real-time UX challenges for crowded visual layouts
• Progressive enhancement and graceful fallback models

How I Built It

Frontend stack:

• ⚛️ React + TypeScript (Vite)
• 🎨 Custom UI with Tailwind + accessible HTML5 elements
• 🧠 Client-side ML with @tensorflow/tfjs, @tensorflow-models/face-detection, and a custom fallback computer vision layer
• 🖼 Canvas-based image processing and metadata stripping

Optimizations:

• Custom resizing pipeline for mobile performance
• Ensemble detection pipeline with confidence thresholding and suppression
• Manual face selection overlay UI for edge cases where automatic detection struggles
• UX tested on iPhone, Android, and desktop

Constraints:

• Must run entirely within Bolt.dev (no server-side inference allowed)
• Fast cold start and limited bundle overhead
• Compatible with Netlify-style deployment

Built With

• blazeface
• blob
• bolt
• canvas
• css
• filereader
• html5
• javascript
• mediapipe
• react
• tailwind-css
• tensorflow-models/face-detection
• tensorflow.js
• typescript
• vite
• webgl