Introduction
Removing backgrounds from images is a common need. but many solutions require uploading your image to a server. What if you could run it fully in the browser, with no backend, no API keys, and full privacy? That’s exactly what this project does.
Using Transformers.js, I built a background removal web app that runs client-side. The model runs locally in your browser, and the processed image never leaves your device.
In this post, I walk you through it step by step, from project setup to UI, and finally to background-removal logic.
💻 You can access the full source code on GitHub and try it yourself: bg-remover Repository
Prerequisites
- Node.js (v16+ recommended)
- npm or yarn
- A modern browser (for WASM or WebGPU — depending on your config)
Initialise the project with Vite
To get started quickly, I used Vite to scaffold a minimal web project:
npm create vite@latest bg-remover -- --template vanilla
cd bg-remover
npm install
I’ll assume vanilla JS, HTML and CSS for simplicity.
After installing the dependencies, you can now start the server with
npm run dev
2. Install Transformers.js
Transformers.js brings the power of Hugging Face,running segmentation, classification directly in the browser using ONNX runtime under the hood. So you have to add the NPM module with
npm install @huggingface/transformers
3. Build the HTML & UI
We want get into the details Here as it’s actually a very simple UI that you can see here , you will find below the links to the html and style files
HTML : index.html
Style: Style.css
4. Main Logic: Load model, process image, remove background
Step 1: Import Transformers.js modules
-
AutoProcessor→ handles preprocessing of your input image to the format the model expects. -
AutoModel→ loads the actual model that will perform the task (background removal / segmentation).
Basically, the processor prepares the image, the model predicts the foreground mask.
Step 2: Initialize the Model and Processor
In this step, we load the pretrained background-removal model and its processor. Both are configurable, which means you can tweak preprocessing settings, input size, normalization, etc.
-
model_type: “custom” → allows you to load models that don’t include a standard config.json. -
do_normalize / image_mean / image_std→ normalize pixel values for better model accuracy. -
do_resize / size→ resize input images to the model’s expected dimensions. -
do_rescale / rescale_factor→ scale pixel values from 0–255 to 0–1. -
resample→ resizing algorithm
Key idea: By changing these config values, you can adapt the preprocessing to different models or custom training data without changing the model code itself
Step 3: Listen for image uploads
We attach a listener to the file input element ()that triggers when the user selects an image. An Image object is created from the file, using URL.createObjectURL(file) to generate a temporary local URL without uploading anything. Once the image is loaded (img.onload), we call predict() with the image to perform background removal.
Step 4: Remove the background
Once the user uploads an image, we can preprocess it, run the model, and apply the background mask:
- Preprocessing: Converts the uploaded image into the format expected by the model.
- Prediction: The model outputs a mask indicating the foreground.
- Post-processing: The mask is resized to the original image size and applied as an alpha channel to remove the background.
- Display: The final image is drawn on a
for the user to see.
5. Try It Yourself
Clone the repository and run it locally:
git clone https://github.com/gallaouim/bg-remover.git
cd bg-remover
npm install
npm run dev
Upload an image and watch the background disappear directly in your browser!
✅ Summary
You’ve learned how to build a fully client-side background removal app using Transformers.js. The key steps are: load a model, preprocess the image, predict a mask, and render the final image on a canvas
