Tryon.io - Virtual Try-On MVP

AI-powered virtual clothing try-on using IDM-VTON model via Replicate API.

Tech Stack

• Vite - Fast build tool
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS v4 - Styling
• shadcn/ui - Component library
• Replicate API - AI model hosting (IDM-VTON)

Project Structure

src/
├── api/                    # API modules
│   └── replicate.ts        # Replicate API calls
├── assets/                 # Static assets
│   └── models/             # Stock model images
├── components/             # Shared components
│   └── ui/                 # shadcn/ui components
├── features/               # Feature modules
│   └── tryon/              # Virtual try-on feature
│       ├── components/     # Feature-specific components
│       └── hooks/          # Feature-specific hooks
├── hooks/                  # Shared hooks
│   └── useTryOn.ts         # Try-on generation hook
├── lib/                    # Utilities
│   └── utils.ts            # Helper functions
└── types/                  # TypeScript types
    └── index.ts            # Shared type definitions

Setup

# Install dependencies
yarn

# Copy environment variables
cp .env.example .env

# Add your Replicate API key to .env
VITE_REPLICATE_API_KEY=your_key_here

# Start development server
yarn dev

Environment Variables

Variable	Description
VITE_REPLICATE_API_KEY	Your Replicate API key

---

Implementation Plan

Phase 1: Core UI Components

• ImageUploader - Drag & drop + click to upload

  • Preview uploaded image
  • Clear/replace functionality
  • File type validation (jpg, png, webp)
  • Max file size handling

• ModelSelector - Choose model photo

  • Upload custom photo option
  • Grid of 3-4 stock models
  • Selected state indicator

• CategorySelector - Garment type dropdown

  • upper_body (shirts, jackets, tops)
  • lower_body (pants, shorts, skirts)
  • dresses (full body garments)

• ResultDisplay - Show generated image

  • Loading state with progress
  • Error state handling
  • Download button
  • Share functionality (optional)

Phase 2: Main Try-On Page

• Layout - Two-column responsive design

  • Left: Inputs (garment, model, category)
  • Right: Result preview

• Generate Flow

  1. User uploads garment image
  2. User selects/uploads model photo
  3. User selects category
  4. Click "Generate" button
  5. Show loading state
  6. Display result with download option

Phase 3: API Integration

• Replicate Connection

  • Create prediction endpoint
  • Poll for results
  • Handle errors gracefully

• Image Handling

  • Convert uploads to base64
  • Handle URL inputs
  • Optimize image sizes

Phase 4: Polish & Deploy

• UX Improvements

  • Loading animations
  • Error messages
  • Success feedback

• Deployment

  • Build optimization
  • Deploy to Vercel/Netlify

---

API Reference

IDM-VTON Model

Model: cuuupid/idm-vton

Inputs:

Parameter	Type	Description
human_img	string	Model/person image (URL or base64)
garm_img	string	Garment image (URL or base64)
category	string	upper_body, lower_body, or dresses
crop	boolean	Auto-crop human image (default: false)
seed	number	Random seed for reproducibility
steps	number	Inference steps (default: 30)

Output: Generated try-on image URL

---

Development Commands

yarn dev           # Start dev server
yarn build         # Production build
yarn preview       # Preview production build
yarn lint          # Run ESLint
yarn lint:fix      # Fix auto-fixable lint issues
yarn format        # Format code with Prettier
yarn format:check  # Check formatting
yarn typecheck     # Run TypeScript type checking

---

Code Quality

This project uses a strict linting setup to ensure high-quality code.

ESLint Plugins

Plugin	Purpose
typescript-eslint (strict)	Strict TypeScript rules, no unsafe any
eslint-plugin-sonarjs	Code smells, cognitive complexity, bugs
eslint-plugin-unicorn	100+ best practice rules
eslint-plugin-react	React-specific rules
eslint-plugin-react-hooks	Hooks rules
eslint-plugin-jsx-a11y	Accessibility (WCAG)
eslint-config-prettier	Prettier compatibility

Quality Rules Enforced

• Cognitive complexity: Max 15 per function
• Cyclomatic complexity: Max 10
• Max function lines: 100
• Max parameters: 4
• Max nesting depth: 4
• No duplicate strings: Threshold of 3
• No console.log: Only warn/error allowed
• Strict TypeScript: No unsafe any, strict nulls

Prettier Config

• No semicolons
• Single quotes
• 2 space indent
• 100 char line width
• Trailing commas (ES5)

License

Private - All rights reserved