# tryzeon/tryzeon-app architecture

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

- Interactive diagram: https://gitdiagram.com/tryzeon/tryzeon-app
- Repository: https://github.com/tryzeon/tryzeon-app

## Overview

Tryzeon’s visible product surface is a LIFF fashion app backed by Supabase Edge Functions, with a parallel LINE chatbot. The main user journey is browsing a store catalog, selecting a garment and avatar, running a virtual try-on, then managing or sharing the result; chat and wardrobe flows provide additional entry points. The graph preserves documented image analysis, voice sizing, short links, subscriptions, and analytics. Several backend capabilities are represented at their exact function-directory paths because their implementation was not sampled; corresponding links are dashed where wiring is unverified.

Main entry points: [`liff-web/src/router.tsx`](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/router.tsx) (App routing), [`supabase/functions/tryon`](https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/tryon) (Try-on function), [`liff-web/src/hooks/useTryonCoordinator.ts`](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/hooks/useTryonCoordinator.ts) (Try-on coordinator), [`liff-web/src/pages/Shop.tsx`](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/pages/Shop.tsx) (Shop and product)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_liff["LIFF app"]
  node_router["App routing<br/>[router.tsx]"]
  node_catalog["Store catalog<br/>[catalog.ts]"]
  node_shop["Shop and product<br/>[Shop.tsx]"]
  node_tryon_ui["Try-on coordinator"]
  node_gallery["Try-on gallery<br/>[gallery.ts]"]
  node_home["Wardrobe home<br/>[Home.tsx]"]
  node_chat_ui["Fashion chat<br/>[Chat.tsx]"]
  node_auth["LIFF identity<br/>[liff.ts]"]
  node_api_tryon["Try-on API<br/>[tryon.ts]"]
  node_chat_api["Chat API<br/>[chat-wire.ts]"]
end

subgraph group_edge["Edge services"]
  node_tryon_fn["Try-on function"]
  node_chat_fn["Chat function"]
  node_profile["Profile and wardrobe<br/>[user-profile.ts]"]
  node_image_analysis["Image analysis"]
  node_wardrobe_analysis["Wardrobe analysis"]
  node_voice_size["Voice sizing"]
  node_shortlinks["Store short links"]
  node_store_images["Store image service"]
  node_billing["Subscription webhook"]
  node_analytics["Product analytics"]
end

subgraph group_shared["AI and data"]
end

subgraph group_line["LINE experience"]
  node_line_webhook["LINE webhook router<br/>[router.ts]"]
  node_line_tryon["LINE try-on<br/>[tryon-handler.ts]"]
  node_line_chat["LINE chat<br/>[chat-handler.ts]"]
  node_line_api["LINE messaging<br/>[line-api.ts]"]
end

node_user(("Fashion user"))
node_catalog_db[("Catalog database")]
node_vertex["Generative AI"]
node_supabase[("Supabase services")]
node_r2[("Cloudflare R2")]

node_user -->|"uses"| node_router
node_router -->|"initializes login"| node_auth
node_router -->|"routes to"| node_shop
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_chat_ui
node_shop -.->|"loads products"| node_catalog
node_catalog -->|"queries"| node_catalog_db
node_user -->|"starts try-on"| node_tryon_ui
node_shop -->|"starts try-on"| node_tryon_ui
node_tryon_ui -->|"updates state"| node_gallery
node_tryon_ui -->|"submits job"| node_api_tryon
node_api_tryon -.->|"invokes"| node_tryon_fn
node_tryon_fn -.->|"generates image"| node_vertex
node_tryon_fn -.->|"records usage"| node_supabase
node_home -->|"renders results"| node_gallery
node_user -->|"asks for advice"| node_chat_ui
node_chat_ui -.->|"sends messages"| node_chat_api
node_chat_api -.->|"invokes"| node_chat_fn
node_chat_fn -.->|"generates advice"| node_vertex
node_chat_fn -.->|"loads context"| node_supabase
node_user -.->|"messages"| node_line_webhook
node_line_webhook -->|"dispatches try-on"| node_line_tryon
node_line_webhook -->|"dispatches chat"| node_line_chat
node_line_tryon -.->|"replies via"| node_line_api
node_line_chat -.->|"replies via"| node_line_api
node_line_tryon -->|"runs try-on"| node_supabase
node_line_chat -->|"runs chat"| node_supabase
node_image_analysis -.->|"analyzes images"| node_vertex
node_wardrobe_analysis -.->|"analyzes garments"| node_vertex
node_voice_size -.->|"parses speech"| node_vertex
node_profile -->|"reads profile"| node_supabase
node_shortlinks -->|"resolves links"| node_supabase
node_store_images -->|"uses storage"| node_supabase
node_store_images -->|"stores images"| node_r2
node_billing -.->|"updates entitlements"| node_supabase
node_tryon_fn -.->|"records try-on"| node_analytics
node_analytics -.->|"aggregates events"| node_supabase

click node_router "https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/router.tsx"
click node_catalog "https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/api/catalog.ts"
click node_shop "https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/pages/Shop.tsx"
click node_tryon_ui "https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/hooks/useTryonCoordinator.ts"
click node_gallery "https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/state/gallery.ts"
click node_home "https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/pages/Home.tsx"
click node_chat_ui "https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/pages/Chat.tsx"
click node_auth "https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/lib/liff.ts"
click node_api_tryon "https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/api/tryon.ts"
click node_chat_api "https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/api/chat-wire.ts"
click node_tryon_fn "https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/tryon"
click node_chat_fn "https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/chat"
click node_profile "https://github.com/tryzeon/tryzeon-app/blob/main/supabase/functions/_shared/user-profile.ts"
click node_image_analysis "https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/analyze-product-image"
click node_wardrobe_analysis "https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/analyze-wardrobe-image"
click node_voice_size "https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/parse-size-voice"
click node_line_webhook "https://github.com/tryzeon/tryzeon-app/blob/main/supabase/functions/line-webhook/router.ts"
click node_line_tryon "https://github.com/tryzeon/tryzeon-app/blob/main/supabase/functions/line-webhook/tryon-handler.ts"
click node_line_chat "https://github.com/tryzeon/tryzeon-app/blob/main/supabase/functions/line-webhook/chat-handler.ts"
click node_line_api "https://github.com/tryzeon/tryzeon-app/blob/main/supabase/functions/line-webhook/line-api.ts"
click node_shortlinks "https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/short-links"
click node_store_images "https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/store-images"
click node_billing "https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/revenuecat-webhook"
click node_analytics "https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions"

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_router,node_catalog,node_shop,node_tryon_ui,node_gallery,node_home,node_chat_ui,node_auth,node_api_tryon,node_chat_api,node_user toneBlue
class node_tryon_fn,node_chat_fn,node_profile,node_image_analysis,node_wardrobe_analysis,node_voice_size,node_shortlinks,node_store_images,node_billing,node_analytics,node_catalog_db,node_supabase,node_r2 toneAmber
class node_line_webhook,node_line_tryon,node_line_chat,node_line_api toneRose
class node_vertex toneIndigo
```

## Components

### LIFF app

- [App routing](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/router.tsx): `liff-web/src/router.tsx`
- [Store catalog](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/api/catalog.ts): `liff-web/src/api/catalog.ts`
- [Shop and product](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/pages/Shop.tsx): `liff-web/src/pages/Shop.tsx`
- [Try-on coordinator](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/hooks/useTryonCoordinator.ts): `liff-web/src/hooks/useTryonCoordinator.ts`
- [Try-on gallery](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/state/gallery.ts): `liff-web/src/state/gallery.ts`
- [Wardrobe home](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/pages/Home.tsx): `liff-web/src/pages/Home.tsx`
- [Fashion chat](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/pages/Chat.tsx): `liff-web/src/pages/Chat.tsx`
- [LIFF identity](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/lib/liff.ts): `liff-web/src/lib/liff.ts`
- [Try-on API](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/api/tryon.ts): `liff-web/src/api/tryon.ts`
- [Chat API](https://github.com/tryzeon/tryzeon-app/blob/main/liff-web/src/api/chat-wire.ts): `liff-web/src/api/chat-wire.ts`

### Edge services

- [Try-on function](https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/tryon): `supabase/functions/tryon`
- [Chat function](https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/chat): `supabase/functions/chat`
- [Profile and wardrobe](https://github.com/tryzeon/tryzeon-app/blob/main/supabase/functions/_shared/user-profile.ts): `supabase/functions/_shared/user-profile.ts`
- [Image analysis](https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/analyze-product-image): `supabase/functions/analyze-product-image`
- [Wardrobe analysis](https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/analyze-wardrobe-image): `supabase/functions/analyze-wardrobe-image`
- [Voice sizing](https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/parse-size-voice): `supabase/functions/parse-size-voice`
- [Store short links](https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/short-links): `supabase/functions/short-links`
- [Store image service](https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/store-images): `supabase/functions/store-images`
- [Subscription webhook](https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions/revenuecat-webhook): `supabase/functions/revenuecat-webhook`
- [Product analytics](https://github.com/tryzeon/tryzeon-app/tree/main/supabase/functions): `supabase/functions`

### LINE experience

- [LINE webhook router](https://github.com/tryzeon/tryzeon-app/blob/main/supabase/functions/line-webhook/router.ts): `supabase/functions/line-webhook/router.ts`
- [LINE try-on](https://github.com/tryzeon/tryzeon-app/blob/main/supabase/functions/line-webhook/tryon-handler.ts): `supabase/functions/line-webhook/tryon-handler.ts`
- [LINE chat](https://github.com/tryzeon/tryzeon-app/blob/main/supabase/functions/line-webhook/chat-handler.ts): `supabase/functions/line-webhook/chat-handler.ts`
- [LINE messaging](https://github.com/tryzeon/tryzeon-app/blob/main/supabase/functions/line-webhook/line-api.ts): `supabase/functions/line-webhook/line-api.ts`

### Other components

- **Fashion user**
- **Catalog database**
- **Generative AI**
- **Supabase services**
- **Cloudflare R2**

## Connections

- Fashion user → App routing: uses (evidence: `liff-web/src/router.tsx`)
- App routing → LIFF identity: initializes login (evidence: `liff-web/src/router.tsx`)
- App routing → Shop and product: routes to (evidence: `liff-web/src/router.tsx`)
- App routing → Wardrobe home: routes to (evidence: `liff-web/src/router.tsx`)
- App routing → Fashion chat: routes to (evidence: `liff-web/src/router.tsx`)
- Shop and product → Store catalog: loads products
- Store catalog → Catalog database: queries (evidence: `liff-web/src/api/catalog.ts`)
- Fashion user → Try-on coordinator: starts try-on
- Shop and product → Try-on coordinator: starts try-on
- Try-on coordinator → Try-on gallery: updates state (evidence: `liff-web/src/hooks/useTryonCoordinator.ts`)
- Try-on coordinator → Try-on API: submits job (evidence: `liff-web/src/hooks/useTryonCoordinator.ts`)
- Try-on API → Try-on function: invokes
- Try-on function → Generative AI: generates image
- Try-on function → Supabase services: records usage
- Wardrobe home → Try-on gallery: renders results (evidence: `liff-web/src/pages/Home.tsx`)
- Fashion user → Fashion chat: asks for advice
- Fashion chat → Chat API: sends messages
- Chat API → Chat function: invokes
- Chat function → Generative AI: generates advice
- Chat function → Supabase services: loads context
- Fashion user → LINE webhook router: messages
- LINE webhook router → LINE try-on: dispatches try-on (evidence: `supabase/functions/line-webhook/router.ts`)
- LINE webhook router → LINE chat: dispatches chat (evidence: `supabase/functions/line-webhook/router.ts`)
- LINE try-on → LINE messaging: replies via (evidence: `supabase/functions/line-webhook/tryon-handler.ts`)
- LINE chat → LINE messaging: replies via (evidence: `supabase/functions/line-webhook/chat-handler.ts`)
- LINE try-on → Supabase services: runs try-on (evidence: `supabase/functions/line-webhook/tryon-handler.ts`)
- LINE chat → Supabase services: runs chat (evidence: `supabase/functions/line-webhook/chat-handler.ts`)
- Image analysis → Generative AI: analyzes images
- Wardrobe analysis → Generative AI: analyzes garments
- Voice sizing → Generative AI: parses speech
- Profile and wardrobe → Supabase services: reads profile (evidence: `supabase/functions/_shared/user-profile.ts`)
- Store short links → Supabase services: resolves links (evidence: `supabase/functions/short-links/index.ts`)
- Store image service → Supabase services: uses storage (evidence: `supabase/functions/store-images/index.ts`)
- Store image service → Cloudflare R2: stores images (evidence: `supabase/functions/store-images/index.ts`)
- Subscription webhook → Supabase services: updates entitlements
- Try-on function → Product analytics: records try-on (evidence: `README.md`)
- Product analytics → Supabase services: aggregates events (evidence: `README.md`)