# ramjani09/tryoniq architecture

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

- Interactive diagram: https://gitdiagram.com/ramjani09/tryoniq
- Repository: https://github.com/ramjani09/tryoniq

## Overview

TryOn IQ is a web fitting-room experience. A shopper starts a session, uploads or chooses a photo, supplies style and fit preferences, and requests AI rack recommendations. The shopper selects a garment, previews it over the photo, adds accessories, and views a finished look. The sampled code shows a server analysis route backed by Gemini and a client-side canvas renderer; the interface also describes a built-in recommendation fallback. Some client wiring is in omitted excerpts, so only documented or directly sampled connections are shown.

Main entry points: [`components/TryOnApp.js`](https://github.com/ramjani09/tryoniq/blob/main/components/TryOnApp.js) (Try-on flow), [`app/api/analyze/route.js`](https://github.com/ramjani09/tryoniq/blob/main/app/api/analyze/route.js) (Analysis route), [`lib/gemini.js`](https://github.com/ramjani09/tryoniq/blob/main/lib/gemini.js) (Gemini adapter), [`app/page.js`](https://github.com/ramjani09/tryoniq/blob/main/app/page.js) (App page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Fitting experience"]
  node_page["App page<br/>[page.js]"]
  node_tryon["Try-on flow<br/>[TryOnApp.js]"]
  node_ui["UI components<br/>[ui.js]"]
end

subgraph group_recommendation["Fit recommendations"]
  node_catalog["Fashion catalog<br/>[data.js]"]
  node_matcher["Rack matching<br/>[recommend.js]"]
  node_analyze["Analysis route<br/>[route.js]"]
end

subgraph group_visualization["Look visualization"]
  node_canvas["Photo compositor<br/>[tryonCanvas.js]"]
  node_final["Fitting result<br/>[TryOnApp.js]"]
end

subgraph group_integration["AI integration"]
  node_gemini["Gemini adapter<br/>[gemini.js]"]
end

node_shopper(("Shopper"))
node_google["Google Gemini API"]

node_shopper -->|"opens"| node_page
node_page -->|"renders"| node_tryon
node_tryon -->|"renders with"| node_ui
node_tryon -->|"reads"| node_catalog
node_tryon -->|"requests analysis"| node_analyze
node_analyze -->|"reads catalog"| node_catalog
node_analyze -->|"calls"| node_gemini
node_gemini -->|"requests analysis"| node_google
node_google -->|"returns analysis"| node_gemini
node_gemini -->|"returns results"| node_analyze
node_analyze -->|"returns results"| node_tryon
node_tryon -->|"matches rack"| node_matcher
node_tryon -->|"generates preview"| node_canvas
node_canvas -->|"returns image"| node_final
node_tryon -->|"assembles look"| node_final

click node_page "https://github.com/ramjani09/tryoniq/blob/main/app/page.js"
click node_tryon "https://github.com/ramjani09/tryoniq/blob/main/components/TryOnApp.js"
click node_ui "https://github.com/ramjani09/tryoniq/blob/main/components/ui.js"
click node_catalog "https://github.com/ramjani09/tryoniq/blob/main/lib/data.js"
click node_matcher "https://github.com/ramjani09/tryoniq/blob/main/lib/recommend.js"
click node_analyze "https://github.com/ramjani09/tryoniq/blob/main/app/api/analyze/route.js"
click node_gemini "https://github.com/ramjani09/tryoniq/blob/main/lib/gemini.js"
click node_canvas "https://github.com/ramjani09/tryoniq/blob/main/lib/tryonCanvas.js"
click node_final "https://github.com/ramjani09/tryoniq/blob/main/components/TryOnApp.js"

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_page,node_tryon,node_ui toneBlue
class node_catalog,node_matcher,node_analyze toneAmber
class node_canvas,node_final,node_google toneMint
class node_gemini toneRose
class node_shopper toneIndigo
```

## Components

### Fitting experience

- [App page](https://github.com/ramjani09/tryoniq/blob/main/app/page.js): `app/page.js`
- [Try-on flow](https://github.com/ramjani09/tryoniq/blob/main/components/TryOnApp.js): `components/TryOnApp.js`
- [UI components](https://github.com/ramjani09/tryoniq/blob/main/components/ui.js): `components/ui.js`

### Fit recommendations

- [Fashion catalog](https://github.com/ramjani09/tryoniq/blob/main/lib/data.js): `lib/data.js`
- [Rack matching](https://github.com/ramjani09/tryoniq/blob/main/lib/recommend.js): `lib/recommend.js`
- [Analysis route](https://github.com/ramjani09/tryoniq/blob/main/app/api/analyze/route.js): `app/api/analyze/route.js`

### Look visualization

- [Photo compositor](https://github.com/ramjani09/tryoniq/blob/main/lib/tryonCanvas.js): `lib/tryonCanvas.js`
- [Fitting result](https://github.com/ramjani09/tryoniq/blob/main/components/TryOnApp.js): `components/TryOnApp.js`

### AI integration

- [Gemini adapter](https://github.com/ramjani09/tryoniq/blob/main/lib/gemini.js): `lib/gemini.js`

### Other components

- **Shopper**
- **Google Gemini API**

## Connections

- Shopper → App page: opens
- App page → Try-on flow: renders
- Try-on flow → UI components: renders with
- Try-on flow → Fashion catalog: reads
- Try-on flow → Analysis route: requests analysis
- Analysis route → Fashion catalog: reads catalog
- Analysis route → Gemini adapter: calls
- Gemini adapter → Google Gemini API: requests analysis
- Google Gemini API → Gemini adapter: returns analysis
- Gemini adapter → Analysis route: returns results
- Analysis route → Try-on flow: returns results
- Try-on flow → Rack matching: matches rack
- Try-on flow → Photo compositor: generates preview
- Photo compositor → Fitting result: returns image
- Try-on flow → Fitting result: assembles look