DEV Community

Cover image for I built a background remover that runs entirely in your browser using Transformers.js
Lucas Santos Rodrigues
Lucas Santos Rodrigues

Posted on

I built a background remover that runs entirely in your browser using Transformers.js

I've always wanted to run AI directly in the browser — no servers, no API keys, just local, fast, and private.

Thanks to Hugging Face's Transformers.js, this is now totally possible. And I decided to test it by building a tool that many developers and content creators eventually need: a background remover.

It runs entirely in-browser, using Web Workers and modern JS — no sign-up, no data sent to a server.

⚙️ How it works

Transformers.js provides a simple pipeline for background removal. Here's all you need:

// Initialize the pipeline
const segmenter = await pipeline('background-removal', 'briaai/RMBG-1.4', { dtype: 'fp32' });

// Process the image
const result = await segmenter(imageURL);

// Done ✅ Use the result however you want
Enter fullscreen mode Exit fullscreen mode

I chose the RMBG-1.4 model with fp32 to keep compatibility high across devices (especially CPU) while maintaining solid quality.

I turned this into a real app you can try instantly: Background free.

Want to explore the code? Here’s the source: Look at my GitHub canva-copy repository.


If you’re curious, I also posted about the process in the Hugging Face community: Discuss Thread.

Top comments (0)