How draco437/try-on works
Try-On AI is a virtual wardrobe application: a shopper signs in, uploads body views, browses or adds clothing, and starts a virtual try-on. The React TryOn page submits a job and polls for its status; the backend’s asynchronous worker processes available views with the remote LeFFA service and returns results, falling back to original photos on processing failure. The README also describes outfit quiz and recommendations. Backend view, serializer, and upload details were not sampled, so their internal wiring is shown only where the product flow or configuration supports it.
Main entry points: axios.js API client · views.py API handlers · tasks.py Try-on worker · celery.py Celery setup
Components 20
Web application
- React app
frontend/src/App.js - Authentication
frontend/src/context/AuthContext.js - API client
frontend/src/api/axios.js - Body uploads
frontend/src/pages/Upload.js - Wardrobe
frontend/src/pages/Wardrobe.js - Custom clothing
frontend/src/pages/Custom.js - Style quiz
frontend/src/pages/Quiz.js - Recommendations
frontend/src/pages/Recommendations.js - Try-on workflow
frontend/src/pages/TryOn.js - Result viewer
frontend/src/components/ResultViewer.js
Backend API
- API routes
backend/api/urls.py - API handlers
backend/api/views.py - API serialization
backend/api/serializers.py
Try-on processing
- Try-on worker
backend/api/tasks.py - Celery setup
backend/main/celery.py
Data and services
- MongoDB
backend/api/db.py - Redis broker
backend/main/settings.py - Hugging Face LeFFA
- Image storage
backend/api/tasks.py
Other components
- Shopper
Connections 20
- Shopper → React app: uses
- React app → Authentication: provides session
- Authentication → API client: calls auth API
- Body uploads → API client: submits uploads
- Wardrobe → API client: requests catalog
- Custom clothing → API client: submits clothing
- Style quiz → API client: submits answers
- Recommendations → API client: requests suggestions
- Try-on workflow → API client: starts and polls
- Try-on workflow → Result viewer: shows results
- API client → API routes: sends requests
- API routes → API handlers: dispatches
- API handlers → API serialization: serializes data
- API handlers → MongoDB: accesses records
- API handlers → Celery setup: dispatches job
- Celery setup → Redis broker: queues tasks
- Celery setup → Try-on worker: runs task
- Try-on worker → MongoDB: reads and updates
- Try-on worker → Hugging Face LeFFA: requests inference
- Try-on worker → Image storage: stores results