Open-source AI-powered passport photo studio
Upload → Auto-process → Generate a print-ready sheet — in seconds.
SnapPass AI is a free, open-source web application that lets anyone generate professional passport-quality photos from any selfie or portrait.
No expensive studio. No complicated software. Just upload, click, and print.
| Step | Description |
|---|---|
| 📤 Upload | Drag & drop or browse any portrait photo |
| 🧠 AI Process | Background removal, face centering, DPI optimisation |
| 📐 Customise | Choose country standard (India, USA, UK, Schengen…) |
| 🖨️ Print | Download a print-ready A4 sheet with multiple photos |
⚠️ This project is in active early development. The frontend scaffold is complete and functional. The backend and Python AI service stubs are ready for contributors to build on.
| Layer | Status |
|---|---|
| Frontend (React) | ✅ Scaffold complete — fully navigable |
| Backend (Express) | 🟡 Scaffold ready — needs controller logic |
| Python AI Service | 🟡 Structure ready — needs OpenCV / rembg logic |
| Database (MongoDB) | 🔲 Structure planned — not yet implemented |
| Layer | Technology |
|---|---|
| Frontend | React.js, React Router DOM, Vanilla CSS |
| Backend | Node.js, Express.js, Multer |
| AI Microservice | Python, Flask, OpenCV, Pillow, rembg |
| Database (planned) | MongoDB |
snappass-ai/
│
├── frontend/ # React.js web app
│ └── src/
│ ├── components/
│ │ ├── layout/
│ │ │ ├── Navbar.js # Top navigation bar
│ │ │ └── Footer.js # Site footer
│ │ ├── UploadBox.js # Drag-and-drop upload
│ │ ├── PhotoPreview.js # Before/after photo viewer
│ │ ├── BackgroundSelector.js # BG colour picker
│ │ ├── SizeSelector.js # Country preset dropdown
│ │ ├── QuantityInput.js # Number of photos stepper
│ │ ├── PrintButton.js # Download/print CTA
│ │ └── LoadingSpinner.js # Reusable spinner
│ ├── pages/
│ │ ├── HomePage.js # Landing page
│ │ ├── UploadPage.js # Step 1 — upload
│ │ ├── EditorPage.js # Step 2 — AI editor
│ │ ├── PrintPreviewPage.js # Step 3 — preview & print
│ │ └── AdminDashboard.js # Admin panel
│ ├── hooks/
│ │ ├── usePhotoUpload.js # Upload state management
│ │ └── useImageProcessor.js # AI processing state
│ ├── services/
│ │ ├── api.js # Axios base instance
│ │ └── photoService.js # All photo API calls
│ ├── utils/
│ │ ├── fileValidation.js # Client-side validation
│ │ └── formatters.js # String/number formatting
│ └── routes/
│ └── AppRoutes.js # Central route config
│
├── backend/ # Express.js REST API
│ └── src/
│ ├── config/app.config.js
│ ├── controllers/
│ │ ├── upload.controller.js
│ │ ├── image.controller.js
│ │ └── print.controller.js
│ ├── routes/
│ │ ├── upload.routes.js
│ │ ├── image.routes.js
│ │ └── print.routes.js
│ └── middlewares/
│ ├── upload.middleware.js
│ ├── error.middleware.js
│ └── validate.middleware.js
│
└── python-ai-service/ # Python Flask AI microservice
├── app/
│ └── services/
│ ├── bg_remove.py # rembg background removal
│ ├── face_center.py # OpenCV face detection
│ ├── dpi_optimizer.py # DPI resize logic
│ └── sheet_generator.py # A4 sheet layout
└── requirements.txt
Make sure you have these installed:
git clone https://github.com/souma9830/SnapPass-AI.git
cd SnapPass-AIcd frontend
npm install
npm startOpen http://localhost:3000 in your browser.
cd backend
npm install
npm run devBackend runs at http://localhost:5000.
Health check: GET http://localhost:5000/health
cd python-ai-service
pip install -r requirements.txt
python main.pyAI service runs at http://localhost:8000.
Home
└── /upload (Upload your photo)
└── /editor (Choose background + size → AI process)
└── /print-preview (Set quantity → Download A4 sheet)
| Method | Endpoint | Description |
|---|---|---|
POST |
/api/upload |
Upload photo |
GET |
/api/upload/:id |
Get upload metadata |
POST |
/api/process |
AI process photo |
GET |
/api/process/preview/:filename |
Get processed preview |
POST |
/api/print/generate-sheet |
Generate A4 print sheet |
GET |
/api/print/presets |
List size presets |
GET |
/health |
Backend health check |
| Preset ID | Standard | Dimensions |
|---|---|---|
35x45 |
India / UK Passport | 35 × 45 mm |
51x51 |
USA Visa | 51 × 51 mm |
33x48 |
Schengen Visa | 33 × 48 mm |
40x60 |
China Visa | 40 × 60 mm |
2x2in |
US Passport | 2 × 2 inches |
REACT_APP_API_URL=http://localhost:5000/apiPORT=5000
NODE_ENV=development
AI_SERVICE_URL=http://localhost:8000
UPLOAD_DIR=uploads
MAX_FILE_SIZE=10485760
CORS_ORIGIN=http://localhost:3000- React frontend scaffold with all pages & components
- Express backend scaffold with all routes & controllers
- Python AI service structure
- Background removal using
rembg - Face detection & auto-centering using OpenCV
- DPI optimisation & resize to standard dimensions
- A4 print sheet generation using Pillow
- MongoDB database integration
- User session & upload history
- Real-time image preview after AI processing
- Admin dashboard with live statistics
- Multi-file batch upload support
- Docker Compose setup
- CI/CD pipeline
- Deploy guide (Vercel + Render + Railway)
- PWA support
- Dark mode
We ❤️ contributions! Whether you're fixing bugs, building features, improving docs, or designing UI elements — every contribution matters.
👉 Read the full guide: CONTRIBUTING.md
Quick summary:
- Fork the repo
- Create a branch:
git checkout -b feature/your-feature-name - Make your changes
- Open a Pull Request to
master
New to open source? Look for issues tagged:
good first issue— small, well-defined taskshelp wanted— features awaiting a contributordocumentation— improve docs and comments
This project is licensed under the MIT License — see LICENSE for details.
You are free to use, modify, and distribute this project for both personal and commercial use.
Soumadeep — @souma9830
⭐ If you find this useful, please star the repository — it helps others discover the project!