How ramjani09/tryoniq works
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: TryOnApp.js Try-on flow · route.js Analysis route · gemini.js Gemini adapter · page.js App page
Components 11
Fitting experience
- App page
app/page.js - Try-on flow
components/TryOnApp.js - UI components
components/ui.js
Fit recommendations
- Fashion catalog
lib/data.js - Rack matching
lib/recommend.js - Analysis route
app/api/analyze/route.js
Look visualization
- Photo compositor
lib/tryonCanvas.js - Fitting result
components/TryOnApp.js
AI integration
- Gemini adapter
lib/gemini.js
Other components
- Shopper
- Google Gemini API
Connections 15
- 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