Remove Background

An advanced, full-stack web application designed to remove backgrounds from images and GIFs seamlessly. Powered by state-of-the-art AI (rembg with the u2net model) and a robust React frontend, this tool not only automates background removal but also gives you fine-grained control over the results using an intuitive, layer-based masking editor.

---

Features at a Glance

• Automated AI Background Removal: Instantly process single images or multi-frame GIFs with okay accuracy.
• Advanced Mask Editor: Manually touch up the AI's work with standard drawing and erasing brush tools.
• Magic Wand Tool: Instantly select and modify contiguous color regions using a custom Breadth-First Search (BFS) Flood Fill algorithm.
• Alpha Preview: Toggle a high-contrast black-and-white preview mode for precise silhouette masking.
• Project Export & Import: Save your entire editing session as a .bgproj file and pick up right where you left off later without re-uploading original media.
• Modern UI/UX: A responsive, glassmorphism-inspired interface featuring Dark and Light themes.

---

Prerequisites

To run the application, you'll need the following installed on your system:

• Docker (Highly Recommended)
• Node.js (v18+, if running manually)
• Python (3.10+, if running manually)

---

Quick Setup

Option 1: Docker (Recommended)

The easiest way to get started is by using Docker Compose.

# Run this from the project root
docker-compose up -d --build

This command builds the frontend and backend containers and starts the application via docker-compose.yml. Once finished, open your browser and navigate to http://localhost:5173 (or simply http://localhost).

Option 2: Manual Setup

If you prefer to run the services locally without Docker:

1. Backend Setup

cd backend
python -m venv venv

# Windows:
venv\Scripts\activate 
# Mac/Linux: 
# source venv/bin/activate

pip install -r requirements.txt
uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload

2. Frontend Setup

cd frontend
npm install
npm run dev

---

Deep Dive: Architecture & Tools

The application follows a decoupled client-server architecture, relying on React/Vite for the frontend and FastAPI for the backend engine.

graph TD
    subgraph Frontend [React + Vite Frontend]
        UI[User Interface]
        W[Workspace/Mask Editor]
        T[Timeline/Frames]
        S[Zustand State Store]
    end

    subgraph Backend [FastAPI Backend]
        API[API Router]
        AI[Rembg Engine]
        Comp[Image Compositor]
        Session[Session Store]
    end

    UI -->|File Uploads| API
    W -->|Mask Patches Base64| API
    API -->|Images & GIFs| AI
    AI -->|Background Removed| Comp
    W -->|Flood Fill Data| Comp
    API -->|Session Data .bgproj| Session

Loading

The Masking Engine

The core of the manual editing experience is driven by our custom compositing engine. When you use a brush or the Magic Wand, the frontend generates a precise mask patch and sends it to the backend to composite the layers.

sequenceDiagram
    participant User
    participant Frontend
    participant Backend

    User->>Frontend: Clicks 'Magic Wand' on image
    Frontend->>Frontend: Runs BFS Flood Fill on original ImageData
    Frontend->>Frontend: Generates Base64 mask patch
    Frontend->>Backend: POST /api/masks/patch (Mask + Mode)
    Backend->>Backend: Loads cached frame & alpha channel
    Backend->>Backend: Composites new mask (Restore/Erase)
    Backend-->>Frontend: 200 OK
    Frontend->>User: Updates UI with new Result Frame

Loading

Magic Wand Tool (BFS Flood Fill)

The Magic Wand leverages a client-side Breadth-First Search (BFS) algorithm to detect continuous color regions based on a given Tolerance level. Instead of sending every pixel interaction to the server, the frontend computes the exact area to be masked in milliseconds using Typed Arrays (Int32Array, Uint8Array) to avoid garbage collection overhead, ensuring a smooth, real-time experience even on high-resolution images.

Project State Management (.bgproj)

Projects are fully serializable. The backend maintains a temporary session directory for all active edits, original frames, alpha channels, and undo/redo histories. When you click Save Proj, the backend securely zips this directory and streams it to the client as a .bgproj file. Uploading this file extracts the state back into the session manager, allowing for seamless workflow resumption.