🏖️ Built a Privacy-First Background Removal Tool Running Entirely in the Browser with Transformers.js

Show and Tell
1

:beach_with_umbrella: Built a Privacy-First Background Removal Tool Running Entirely in the Browser with Transformers.js

Hey everyone! :waving_hand:

I’d like to share a personal project I built that demonstrates the power of running AI models directly in the browser using Transformers.js. It’s a background removal tool that processes images entirely client-side, with no server required!

:rocket: What it does

The tool removes backgrounds from images using AI, but with a twist - everything runs locally in your browser. No files are uploaded to any server, ensuring complete privacy and instant processing.

Live WebApp: semfundos.lusrodri.me
Repository: github.com/LuSrodri/canva-copy

:wrench: Technical Stack

  • Transformers.js: The core library that makes this possible
  • RMBG-1.4 model: Open-source model for background removal
  • Pipeline API: Using the background-removal pipeline
  • Pure client-side processing: No backend required

:light_bulb: Key Implementation Details

The most interesting part was working with the Pipeline API. Initially, I encountered an issue where the output had unexpected semi-transparency. After opening an issue in the Transformers.js repository (big thanks to the maintainers for the help!), I discovered that post-processing was needed to normalize the pixels.

Here’s a simplified version of the core implementation:

// Initialize the pipeline
const pipeline = await pipeline('background-removal');

// Process the image
const result = await pipeline(imageData);

// Post-process to normalize pixels (this was the key!)
const processedResult = normalizePixels(result);

By the way, I have recived a mention in the Transformers.js 3.4.1 version realese.

:bullseye: Why This Approach?

  1. Privacy-first: No data leaves your device
  2. Instant processing: No network delays
  3. Open-source: Built entirely with open-source tools
  4. Accessible: Works in any modern browser

:construction: Current Challenges & Next Steps

  • Adding solid color backgrounds: Next feature to implement
  • Expanding functionality: Planning to add more AI-powered image editing tools

:folded_hands: Credits

Huge thanks to the Hugging Face team for making Transformers.js possible and to the open-source community for the RMBG-1.4 model. This project wouldn’t exist without these amazing tools!

Would love to hear your thoughts and feedback! :rocket:

The long-term goal is to create a privacy-first, AI-powered alternative to traditional online image editors, running everything locally in the browser.

Other materials

1 Like