VFit

Inspiration

Shopping online means guessing how clothes will actually look on you. I wanted to build a tool where anyone could upload a photo of themselves and a garment, and see a realistic preview of the outfit on them — useful for shopping decisions, outfit planning, or content creation.

What it does

Users upload a photo of a person and a photo of a garment, choose a garment category and style preset, and get an AI-generated try-on result showing the garment on the person — with a before/after comparison slider and download option. It supports both English and Chinese interfaces.

How I built it

The frontend is built with Next.js 16 (App Router) and TypeScript, styled with Tailwind CSS 4 in a light, editorial-inspired UI. On upload, the backend API preprocesses both images with Sharp (normalizing size and aspect ratio), then calls the Hugging Face Gradio Space yisol/IDM-VTON via @gradio/client to generate the try-on result, which is returned as base64 and rendered with a comparison slider. The whole app is containerized with Docker for deployment on Zeabur.

Challenges I ran into

Getting reliable results from the IDM-VTON model required careful image preprocessing — pose, garment background, and how the garment is described in English all noticeably affect output quality. I also had to work around Hugging Face Space cold-start latency (1-3 minutes on first request) and handle Node DNS resolution quirks during local development on macOS.

What's next for VFit

Adding a user system, a garment/product library, and usage-based pricing to turn the current MVP into a full SaaS product for e-commerce "try-before-buy" use cases.

Built With

• css
• docker
• face
• gradio
• hugging
• next.js
• sharp
• tailwind
• typescript