A modern web application that uses artificial intelligence to automatically remove backgrounds from images. Built with React and TensorFlow.js, this application processes images directly in the browser, ensuring privacy and fast results.
- 🎯 Real-time background removal
- 🔒 Client-side processing (no server uploads required)
- 📱 Responsive design
- ⚡ Fast processing using WebGL acceleration
- 💾 One-click download of processed images
- 🖼️ Support for common image formats (PNG, JPEG, etc.)
- Frontend Framework: React 18 with TypeScript
- AI Model: TensorFlow.js with BodyPix model
- Styling: Tailwind CSS
- Icons: Lucide React
- Build Tool: Vite
- Language: TypeScript
- Node.js 16.x or later
- npm 7.x or later
- Clone the repository
git clone https://github.com/JeremiasVillane/ai-bg-remover.git
cd ai-bg-remover- Install dependencies
pnpm install- Start the development server
pnpm run dev- Open your browser and navigate to
http://localhost:5173
- The application uses the BodyPix model from TensorFlow.js to detect people in images
- When an image is uploaded, it's processed entirely in the browser using WebGL acceleration
- The model creates a segmentation mask to identify the person in the image
- The background is made transparent while preserving the subject
- The resulting image can be downloaded as a PNG with transparent background
- The AI model is loaded when the application starts
- WebGL backend is used for optimal performance
- Image processing happens in real-time using the device's GPU when available
- The model is automatically cleaned up when the component unmounts
The application works best in modern browsers that support:
- WebGL
- Canvas API
- File API
- Blob API
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- TensorFlow.js team for the excellent BodyPix model
- React team for the amazing framework
- Tailwind CSS team for the utility-first CSS framework