How tryzeon/tryzeon-app works
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: router.tsx App routing · tryon Try-on function · useTryonCoordinator.ts Try-on coordinator · Shop.tsx Shop and product
Components 29
LIFF app
- App routing
liff-web/src/router.tsx - Store catalog
liff-web/src/api/catalog.ts - Shop and product
liff-web/src/pages/Shop.tsx - Try-on coordinator
liff-web/src/hooks/useTryonCoordinator.ts - Try-on gallery
liff-web/src/state/gallery.ts - Wardrobe home
liff-web/src/pages/Home.tsx - Fashion chat
liff-web/src/pages/Chat.tsx - LIFF identity
liff-web/src/lib/liff.ts - Try-on API
liff-web/src/api/tryon.ts - Chat API
liff-web/src/api/chat-wire.ts
Edge services
- Try-on function
supabase/functions/tryon - Chat function
supabase/functions/chat - Profile and wardrobe
supabase/functions/_shared/user-profile.ts - Image analysis
supabase/functions/analyze-product-image - Wardrobe analysis
supabase/functions/analyze-wardrobe-image - Voice sizing
supabase/functions/parse-size-voice - Store short links
supabase/functions/short-links - Store image service
supabase/functions/store-images - Subscription webhook
supabase/functions/revenuecat-webhook - Product analytics
supabase/functions
LINE experience
- LINE webhook router
supabase/functions/line-webhook/router.ts - LINE try-on
supabase/functions/line-webhook/tryon-handler.ts - LINE chat
supabase/functions/line-webhook/chat-handler.ts - LINE messaging
supabase/functions/line-webhook/line-api.ts
Other components
- Fashion user
- Catalog database
- Generative AI
- Supabase services
- Cloudflare R2
Connections 37
- Fashion user → App routing: uses
liff-web/src/router.tsx - App routing → LIFF identity: initializes login
liff-web/src/router.tsx - App routing → Shop and product: routes to
liff-web/src/router.tsx - App routing → Wardrobe home: routes to
liff-web/src/router.tsx - App routing → Fashion chat: routes to
liff-web/src/router.tsx - Shop and product → Store catalog: loads products
- Store catalog → Catalog database: queries
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
liff-web/src/hooks/useTryonCoordinator.ts - Try-on coordinator → Try-on API: submits job
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
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
supabase/functions/line-webhook/router.ts - LINE webhook router → LINE chat: dispatches chat
supabase/functions/line-webhook/router.ts - LINE try-on → LINE messaging: replies via
supabase/functions/line-webhook/tryon-handler.ts - LINE chat → LINE messaging: replies via
supabase/functions/line-webhook/chat-handler.ts - LINE try-on → Supabase services: runs try-on
supabase/functions/line-webhook/tryon-handler.ts - LINE chat → Supabase services: runs chat
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
supabase/functions/_shared/user-profile.ts - Store short links → Supabase services: resolves links
supabase/functions/short-links/index.ts - Store image service → Supabase services: uses storage
supabase/functions/store-images/index.ts - Store image service → Cloudflare R2: stores images
supabase/functions/store-images/index.ts - Subscription webhook → Supabase services: updates entitlements
- Try-on function → Product analytics: records try-on
README.md - Product analytics → Supabase services: aggregates events
README.md