Tryfit

Inspiration

The idea for Tryfit was born from the frustrating reality of online shopping—finding an outfit you love, guessing your size or how it will actually look on your body, and dealing with the disappointment and hassle of returns when it arrives. Shopping on e-commerce platforms often feels like a gamble. We wanted to bridge the gap between static product images and real life by giving shoppers a way to instantly see any outfit on themselves before clicking buy.

What it does

Tryfit is an AI-powered virtual fitting room extension that lets users preview online clothing items on their own photos instantly. Key features include:

• Interactive Try Hub: A streamlined interface to upload or select a user photo and a product image.
• Realistic Comparison: An interactive before-and-after reveal slider to inspect fit and details.
• History Gallery: A built-in gallery that automatically saves past try-ons so users can revisit previous looks.
• Credit & Top-up System: A integrated payment and credit workflow simulation supporting flexible top-up packs.

How we built it

Tryfit was engineered as a lightweight, modular browser application using clean web standards:

• Frontend UI: Built using semantic HTML5, modern CSS with custom variables for layouts, and vanilla JavaScript to handle state management, screen transitions, and DOM rendering.
• Canvas Compositing: Utilized HTML5 Canvas APIs for client-side image processing, thumbnail scaling, and shadow-masked layout previews.
• Architecture: Structured with distinct modular screens (Splash, Try Hub, Gallery, Payment, Changing Room, and Result) managed through clean event-driven state transitions.

Challenges we ran into

• Image Proportion Handling: Maintaining aspect ratios and natural alignment when scaling diverse product photos and user portrait dimensions inside preview frames and canvas elements.
• State Management in Extension Popups: Ensuring smooth navigation and history persistence across various modal screens without losing uploaded image buffers or credit balances.
• UI Responsiveness: Designing a compact, feature-rich interface that fits neatly within browser extension dimension constraints while keeping buttons, previews, and sliders intuitive to touch and drag.

Accomplishments that we're proud of

• Successfully integrating a fully functional History Gallery that stores and reloads past try-on results seamlessly.
• Designing a fluid, interactive Before/After Reveal Slider that gives users precise control over comparing their original photo with the final fit.
• Creating a polished, professional user interface featuring smooth transitions, dynamic status indicators, and an integrated credit top-up flow.

What we learned

• The importance of robust client-side state handling when building multi-screen web apps and extensions.
• How careful CSS architecture and modern pseudo-selectors (like :has()) can dramatically simplify layout styling for dynamic component states.
• Designing workflows that prioritize user feedback loops—such as loading states, toast notifications, and clear action hints—to make AI-driven interactions feel instantaneous and reliable.

What's next for Tryfit

• B2B Merchant Integration: Expanding Tryfit into an embeddable widget and SDK for fashion retailers and e-commerce stores to increase conversion rates and reduce product returns.
• Advanced AI Draping: Upgrading the underlying generation pipeline to deep-learning-based garment inpainting that dynamically adjusts clothing wrinkles, stretches, and lighting to match body posture.
• Smart Wardrobe Vault: Building out automated outfit mixing so users can combine saved tops, bottoms, and accessories into complete digital looks.

Built With

• css3
• fastapi
• html5
• opencv
• python
• supabase
• youcam