Skip to content

Clothing AI Try-On — User Guide

This guide explains how to use the WEARFITS Clothing AI Try-On application. The experience is built around a personal digital twin: an AI-generated representation of your face and body that clothing items are virtually fitted onto. Once your twin exists it is reused across all sessions, so the setup cost is a one-time investment.

1. Quick Overview

The application follows a three-step process:

  1. Create your Digital Twin — A one-time setup that generates your AI body representation from a face photo and either body measurements or a full-body photo.
  2. Select Items — Browse the garment catalog and pick the clothing you want to try on.
  3. Virtually Fit — The AI renders the selected items onto your twin and displays the result in various poses.

2. Creating Your Digital Twin

When the application opens for the first time, or after resetting a previous twin, you are guided through the profile creation flow.

Step 1: Face Capture

  • Grant camera permissions when prompted by the browser.
  • Align your face within the on-screen guide overlay.
  • Tap the Capture button when the face is correctly positioned.
  • Tip: Use a well-lit environment and avoid strong backlighting for the best facial match.

Step 2: Body Mode

You have two options for defining your body shape.

Option A: Size Mode (Default)

Size mode derives your body shape from standard garment size data. No photo is required.

Field Details
Gender Select Male or Female
Height Slider or direct input; range 140 cm – 210 cm
Clothing Size XS, S, M, L, XL, 2XL, or 3XL

Option B: Photo Mode

Photo mode uses a full-body image to compute a more precise body shape. When this option is available:

  • Upload a full-body photo taken from the front.
  • Stand straight with arms slightly away from the body — an A-pose or T-pose is ideal.
  • Ensure the entire body is visible from head to toe in the frame.
  • Use a plain or uncluttered background; avoid very loose or baggy clothing in the reference photo.

3. Virtual Fitting Room

Once your digital twin has been created, you enter the fitting room where you can browse items and generate try-on renders.

  • Category bar — Switch between Tops, Bottoms, and Full-length outfits using the navigation tabs at the top of the panel.
  • Pose selector — Change the standing pose of your twin (e.g., Default, Walking Pose) to evaluate how fabric drapes and moves.
  • Product panel — Browse available items in grid or list view on the side of the screen.

Trying On Clothes

  1. Select an item — Click a product thumbnail to add it to your active selection. A Tops and a Bottoms item can be selected simultaneously to preview a complete outfit.
  2. Combine items — Select a top and a bottom at the same time to try on a coordinated look.
  3. Generate the fitting — Click the Try On button (bottom right corner). The button is active only when at least one item is selected and your digital twin has finished loading.
  4. Wait for processing — The AI rendering takes a few moments. A progress indicator is displayed during this time.

Resetting or Editing Your Twin

To update your body data or reference photo, click the Profile or Back button in the top-left corner. This clears the current digital twin and restarts the profile creation flow from Step 1.

4. 3D Shoe Try-On (AR)

The shoe section (accessible at /shoes or via the dedicated button) provides a separate AR-oriented pipeline for footwear.

  • Image upload — Upload up to four reference photos of the shoe from different angles.
  • Optional GLB mesh — Advanced users can drag and drop a .glb base mesh file to use as the 3D foundation for the shoe model.
  • Output — The pipeline produces a 3D model ready for AR visualization, viewable directly in the browser.

5. FAQ & Troubleshooting

Why is the "Try On" button disabled?

Two conditions must both be true before the button becomes active:

  • At least one clothing item must be selected in the fitting room.
  • Your digital twin must have finished generating — the twin is ready when your silhouette appears on screen.

Camera is not working

  • Open your browser's site settings and confirm that Camera is set to Allow for the current site.
  • On mobile, check that no other application is using the camera in the background.
  • If you are inside an embedded iframe, ensure the host page includes allow="camera" on the <iframe> element.

"Body Extraction Failed" error

This error occurs during Photo Mode processing when the body cannot be cleanly isolated from the image.

  • Make sure your entire body — from head to toe — is visible in the frame.
  • Use a plain, uncluttered background.
  • Avoid very loose or baggy clothing in the reference photo, as it can obscure the body outline.

6. Usage Limits

Limit Value
Fittings per hour 10
Fittings per day 20
Twin storage duration 30 days (browser cookies)

Your digital twin is saved in your browser's cookies and automatically loaded on your next visit for up to 30 days. Clearing your browser cookies or cache will remove the saved twin and require you to recreate your profile.