# draco437/try-on architecture

> Architecture diagram of the GitHub repository draco437/try-on, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/draco437/try-on
- Repository: https://github.com/draco437/try-on

## Overview

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: [`frontend/src/api/axios.js`](https://github.com/draco437/try-on/blob/main/frontend/src/api/axios.js) (API client), [`backend/api/views.py`](https://github.com/draco437/try-on/blob/main/backend/api/views.py) (API handlers), [`backend/api/tasks.py`](https://github.com/draco437/try-on/blob/main/backend/api/tasks.py) (Try-on worker), [`backend/main/celery.py`](https://github.com/draco437/try-on/blob/main/backend/main/celery.py) (Celery setup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web application"]
  node_app["React app<br/>[App.js]"]
  node_auth["Authentication<br/>[AuthContext.js]"]
  node_http["API client<br/>[axios.js]"]
  node_uploads["Body uploads<br/>[Upload.js]"]
  node_wardrobe["Wardrobe<br/>[Wardrobe.js]"]
  node_custom["Custom clothing<br/>[Custom.js]"]
  node_quiz["Style quiz<br/>[Quiz.js]"]
  node_recommendations["Recommendations<br/>[Recommendations.js]"]
  node_tryon_ui["Try-on workflow<br/>[TryOn.js]"]
  node_result_viewer["Result viewer<br/>[ResultViewer.js]"]
end

subgraph group_api["Backend API"]
  node_routes["API routes<br/>[urls.py]"]
  node_views["API handlers<br/>[views.py]"]
  node_serializers["API serialization<br/>[serializers.py]"]
end

subgraph group_pipeline["Try-on processing"]
  node_tasks["Try-on worker<br/>[tasks.py]"]
  node_celery["Celery setup<br/>[celery.py]"]
end

subgraph group_state["Data and services"]
  node_mongo[("MongoDB<br/>[db.py]")]
  node_redis["Redis broker<br/>[settings.py]"]
  node_hf{{"Hugging Face LeFFA"}}
  node_image_store[("Image storage<br/>[tasks.py]")]
end

node_shopper(("Shopper"))

node_shopper -->|"uses"| node_app
node_app -->|"provides session"| node_auth
node_auth -->|"calls auth API"| node_http
node_uploads -->|"submits uploads"| node_http
node_wardrobe -->|"requests catalog"| node_http
node_custom -->|"submits clothing"| node_http
node_quiz -->|"submits answers"| node_http
node_recommendations -->|"requests suggestions"| node_http
node_tryon_ui -->|"starts and polls"| node_http
node_tryon_ui -->|"shows results"| node_result_viewer
node_http -->|"sends requests"| node_routes
node_routes -->|"dispatches"| node_views
node_views -->|"serializes data"| node_serializers
node_views -->|"accesses records"| node_mongo
node_views -->|"dispatches job"| node_celery
node_celery -->|"queues tasks"| node_redis
node_celery -->|"runs task"| node_tasks
node_tasks -->|"reads and updates"| node_mongo
node_tasks -.->|"requests inference"| node_hf
node_tasks -.->|"stores results"| node_image_store

click node_app "https://github.com/draco437/try-on/blob/main/frontend/src/App.js"
click node_auth "https://github.com/draco437/try-on/blob/main/frontend/src/context/AuthContext.js"
click node_http "https://github.com/draco437/try-on/blob/main/frontend/src/api/axios.js"
click node_uploads "https://github.com/draco437/try-on/blob/main/frontend/src/pages/Upload.js"
click node_wardrobe "https://github.com/draco437/try-on/blob/main/frontend/src/pages/Wardrobe.js"
click node_custom "https://github.com/draco437/try-on/blob/main/frontend/src/pages/Custom.js"
click node_quiz "https://github.com/draco437/try-on/blob/main/frontend/src/pages/Quiz.js"
click node_recommendations "https://github.com/draco437/try-on/blob/main/frontend/src/pages/Recommendations.js"
click node_tryon_ui "https://github.com/draco437/try-on/blob/main/frontend/src/pages/TryOn.js"
click node_result_viewer "https://github.com/draco437/try-on/blob/main/frontend/src/components/ResultViewer.js"
click node_routes "https://github.com/draco437/try-on/blob/main/backend/api/urls.py"
click node_views "https://github.com/draco437/try-on/blob/main/backend/api/views.py"
click node_serializers "https://github.com/draco437/try-on/blob/main/backend/api/serializers.py"
click node_tasks "https://github.com/draco437/try-on/blob/main/backend/api/tasks.py"
click node_celery "https://github.com/draco437/try-on/blob/main/backend/main/celery.py"
click node_mongo "https://github.com/draco437/try-on/blob/main/backend/api/db.py"
click node_redis "https://github.com/draco437/try-on/blob/main/backend/main/settings.py"
click node_image_store "https://github.com/draco437/try-on/blob/main/backend/api/tasks.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_auth,node_http,node_uploads,node_wardrobe,node_custom,node_quiz,node_recommendations,node_tryon_ui,node_result_viewer toneBlue
class node_routes,node_views,node_serializers toneAmber
class node_tasks,node_celery toneMint
class node_mongo,node_redis,node_hf,node_image_store toneRose
class node_shopper toneIndigo
```

## Components

### Web application

- [React app](https://github.com/draco437/try-on/blob/main/frontend/src/App.js): `frontend/src/App.js`
- [Authentication](https://github.com/draco437/try-on/blob/main/frontend/src/context/AuthContext.js): `frontend/src/context/AuthContext.js`
- [API client](https://github.com/draco437/try-on/blob/main/frontend/src/api/axios.js): `frontend/src/api/axios.js`
- [Body uploads](https://github.com/draco437/try-on/blob/main/frontend/src/pages/Upload.js): `frontend/src/pages/Upload.js`
- [Wardrobe](https://github.com/draco437/try-on/blob/main/frontend/src/pages/Wardrobe.js): `frontend/src/pages/Wardrobe.js`
- [Custom clothing](https://github.com/draco437/try-on/blob/main/frontend/src/pages/Custom.js): `frontend/src/pages/Custom.js`
- [Style quiz](https://github.com/draco437/try-on/blob/main/frontend/src/pages/Quiz.js): `frontend/src/pages/Quiz.js`
- [Recommendations](https://github.com/draco437/try-on/blob/main/frontend/src/pages/Recommendations.js): `frontend/src/pages/Recommendations.js`
- [Try-on workflow](https://github.com/draco437/try-on/blob/main/frontend/src/pages/TryOn.js): `frontend/src/pages/TryOn.js`
- [Result viewer](https://github.com/draco437/try-on/blob/main/frontend/src/components/ResultViewer.js): `frontend/src/components/ResultViewer.js`

### Backend API

- [API routes](https://github.com/draco437/try-on/blob/main/backend/api/urls.py): `backend/api/urls.py`
- [API handlers](https://github.com/draco437/try-on/blob/main/backend/api/views.py): `backend/api/views.py`
- [API serialization](https://github.com/draco437/try-on/blob/main/backend/api/serializers.py): `backend/api/serializers.py`

### Try-on processing

- [Try-on worker](https://github.com/draco437/try-on/blob/main/backend/api/tasks.py): `backend/api/tasks.py`
- [Celery setup](https://github.com/draco437/try-on/blob/main/backend/main/celery.py): `backend/main/celery.py`

### Data and services

- [MongoDB](https://github.com/draco437/try-on/blob/main/backend/api/db.py): `backend/api/db.py`
- [Redis broker](https://github.com/draco437/try-on/blob/main/backend/main/settings.py): `backend/main/settings.py`
- **Hugging Face LeFFA**
- [Image storage](https://github.com/draco437/try-on/blob/main/backend/api/tasks.py): `backend/api/tasks.py`

### Other components

- **Shopper**

## Connections

- 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