ImgPixel is a powerful web application for AI-powered background removal using the U²-Net deep learning model. Built with React, TypeScript, and FastAPI, it offers a privacy-first solution where all image processing happens locally on your machine.

• 🔑 Key Features
• 💻 Tech Stack
• 🚀 Getting Started
• 📂 Project Structure
• 💡 Usage Examples
• 🛠️ Technical Details
• 🧠 Training Your Own Model
• 📞 Support
• 📄 License
• 🙏 Acknowledgments

• All image processing happens on your local server. Images never leave your infrastructure, ensuring complete data privacy and security.

• Powered by a robust FastAPI backend with proper error handling, file validation, and automatic temporary file cleanup to keep your storage managed.

• Choose from multiple export formats (PNG, JPG, WebP) and resolutions (Original, HD, Full HD, 4K) while maintaining aspect ratios.

• Automatically detects and utilizes NVIDIA GPUs (CUDA) for faster processing, seamlessly falling back to CPU when unavailable.

• Features a clean, responsive interface with drag-and-drop uploads and an interactive before/after comparison slider to verify results instantly.

• A completely self-hosted solution. No external API subscriptions, rate limits, or hidden costs.

Frontend:
Backend:
AI / ML:

Ensure you have the following installed:

• Node.js: v16 or higher
• Python: v3.8 or higher
• Git

1. Clone the repository

   git clone https://github.com/ObsCure9277/ImgPixel.git
   cd ImgPixel

2. Download the U²-Net model weights

   Download the pre-trained model (176MB) and place it in the backend/models directory:

   # Windows (PowerShell)
   mkdir -Force backend\models
   curl -L -o backend\models\u2net.pth https://github.com/xuebinqin/U-2-Net/releases/download/1.0/u2net.pth
   
   # macOS/Linux
   mkdir -p backend/models
   curl -L -o backend/models/u2net.pth https://github.com/xuebinqin/U-2-Net/releases/download/1.0/u2net.pth

3. Set up the backend

   cd backend
   python -m venv venv
   
   # Windows
   venv\Scripts\activate
   # macOS/Linux
   source venv/bin/activate
   
   pip install -r requirements.txt

4. Set up the frontend

   cd ../frontend
   npm install

You'll need two terminal windows - one for the backend and one for the frontend.

Terminal 1 - Backend Server:

cd backend
# Activate virtual environment (if not already active)
# Windows: venv\Scripts\activate
# macOS/Linux: source venv/bin/activate

uvicorn src.main:app --reload --host 0.0.0.0 --port 5000

Backend runs at http://localhost:5000

Terminal 2 - Frontend Dev Server:

cd frontend
npm start

Frontend runs at http://localhost:3000

ImgPixel/
├── backend/
│   ├── models/              # Pre-trained U²-Net model weights
│   ├── outputs/             # Processed images
│   ├── uploads/             # Temporary uploads
│   ├── src/
│   │   ├── main.py                # FastAPI application
│   │   ├── background_removal.py  # Inference logic
│   │   ├── u2net_model.py         # Neural network architecture
│   │   └── ...
│   └── requirements.txt
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── ImageUpload.tsx       # Drag-and-drop area
│   │   │   ├── ImageComparison.tsx   # Before/after slider
│   │   │   ├── Export.tsx            # Export options
│   │   └── App.tsx
│   └── package.json
└── README.md

1. Open http://localhost:3000 in your browser.
2. Upload: Drag and drop an image or click to select.
3. Configure: Select your desired format (PNG, JPG, WebP) and resolution.
4. Process: Click "Remove Background".
5. Download: Use the slider to compare, then click "Download" to save.

You can also use the backend purely as an API:

Remove background from an image:

curl -X POST "http://localhost:5000/api/remove-background" \
  -F "file=@image.jpg" \
  -F "resolution=original"

Response:

{
  "success": true,
  "output_file": "uuid_output.png",
  "message": "Background removed successfully"
}

• Frontend: React 19, TypeScript, Create React App
• Backend: Python 3.8+, FastAPI
• AI Model: U²-Net (PyTorch)
• Image Processing: Pillow (PIL), NumPy

• Name: U²-Net (Nested U-Structure)
• Task: Salient Object Detection
• Input Size: 320x320 (automatically resized)
• Output: Binary probability mask

The repository includes scripts to train the model on your own dataset.

1. Prepare Data: Place images in backend/src/data/images/ and masks in backend/src/data/mask/.
2. Train:

   cd backend
   python src/train.py

3. Visualize:

   tensorboard --logdir=backend/runs

• Issues: Report bugs or suggest features on GitHub Issues.
• Discussions: Join the conversation in GitHub Discussions.
• Docs: Visit http://localhost:5000/docs for interactive API documentation when running the backend.

This project is open source and available under the MIT License.

• U²-Net: Going Deeper with Nested U-Structure for Salient Object Detection by Xuebin Qin et al.
• The open source communities behind FastAPI, React, and PyTorch.

Made with ❤️ by ObsCure9277