🚀 The Problem: Privacy vs. Convenience
We've all been there: you need to remove a background from an image, so you head to a random "free" website, upload your photo, and hope they don't store your data on some mysterious server.
As a developer, I thought: "Can we do this better? Can we do this without ever sending the image to a server?"
That's why I built ImageBGRemoved.shop. It's a tool that performs high-quality background removal using AI, but here’s the kicker: it runs entirely in your browser.
🛠️ The Tech Stack
To make "Serverless AI" a reality, I used a combination of modern web technologies:
- Transformers.js: This is the magic ingredient. It allows us to run state-of-the-art machine learning models directly in the browser using ONNX Runtime.
- Next.js / React: For the slick, responsive UI.
- Web Workers: To ensure the AI processing doesn't freeze the main UI thread.
- Tailwind CSS: For that clean, modern "Dark Mode" aesthetic.
🧠 The AI Model: MODNet
After testing several models, I settled on a quantized version of MODNet. It’s a light-weight yet powerful model specifically designed for real-time portrait matting and background removal.
By using a quantized version, the model file size is small enough (a few MBs) to be downloaded quickly by the browser and stored in the local cache for subsequent uses.
💻 How It Works (The Code)
The core logic revolves around initializing the pipeline and processing the image blob. Here is a simplified version of how the inference happens:
//
import { pipeline } from '@xenova/transformers';
async function removeBackground(imageElement) {
// 1. Initialize the segmenter pipeline
const segmenter = await pipeline('image-segmentation', 'Xenova/modnet');
// 2. Process the image
const output = await segmenter(imageElement.src);
// 3. The output is a mask. We then apply this mask to the original canvas
applyMaskToCanvas(output);
}
👋 Try it yourself!
I built this tool to be a fast, free, and private alternative for daily tasks. You can try the live version here: imagebgremoved.shop.
I'm curious: what other local-first AI tools would you like to see? Let’s discuss in the comments!
Top comments (2)
Thanks for checking out my project! 🚀
I built this because I'm passionate about 'Local-first AI' and user privacy. If you're curious about how Transformers.js works or have suggestions for the UI, feel free to drop a comment below. I'll be hanging around to answer any questions!
Also, feel free to try it out at imagebgremoved.shop and let me know if it works well for your photos!
Finally, a practical and fun use case for WebRTC and AI bots! 🤖 The Mario-themed setup looks amazing too. Definitely adding this to my 'To-Build' list for the weekend.
Followed you for more OpenClaw updates! Keep up the great work, man.🤪🦄