Inspiration

We've all been there: sitting in a barber's chair, unsure if the haircut we saw on a celebrity would actually suit us. Once the scissors start moving, there's no going back. I wanted to eliminate this "haircut gamble" by creating TryHair.ai. The goal was simple: provide a photorealistic, AI-powered way to visualize any hairstyle before making a permanent change.

What it does

TryHair.ai is a comprehensive grooming assistant that uses generative AI to help users make confident decisions.

  • AI Face Shape Analyzer: Automatically detects facial contours to suggest styles that balance your features.
  • Virtual Try-On: Leverages advanced AI models to seamlessly blend hundreds of hairstyles (from classic fades to modern trends) with the user's uploaded photo.
  • Real-time Previews: Provides high-fidelity results that respect natural lighting and skin tones.

How I built it

The project was built as a full-stack web application:

  • Frontend: Built with Vue.js for a reactive and fast user experience. Styled using Tailwind CSS to ensure a mobile-first, sleek design.
  • AI Core: Integrated Google Gemini API and other generative models to handle complex image synthesis and face shape detection.
  • Payments: Implemented Stripe for a seamless credit-based monetization system.
  • Analytics: Configured Google Analytics 4 (GA4) to track user behavior and conversion funnels, such as generation blocked reasons and face detection accuracy.

Challenges I ran into

  • Photorealistic Blending: Getting AI hair to look like it's growing naturally from the scalp (rather than looking like a "sticker") required significant prompt engineering and post-processing.
  • Mobile UX Quirks: Solving the "Mobile Safari" file upload positioning issue was a major hurdle—ensuring the file picker appeared consistently in the center of the upload area regardless of where the user tapped.
  • SEO Optimization: Balancing a fast-loading SPA with the need for rich, searchable content to capture trends like "Kentucky Derby hairstyles" or "Olivia Rodrigo GUTS tour looks."

Accomplishments that I'm proud of

  • Successfully achieving a high-fidelity output that preserves the user's unique facial features.
  • Building a scalable architecture that handles thousands of concurrent image generations.
  • Seeing real users from all over the world use the tool to prepare for big life events.

What I learned

This project taught me a lot about the intersection of Generative AI and UX design. I learned that even the best AI model needs a well-thought-out user flow (like providing face shape analysis before the try-on) to provide real value.

What's next for TryHair.ai: AI Hairstyle & Face Shape Analyzer

  • Real-time AR Try-on: Implementing live camera filters using WebGL/Three.js.
  • AI Stylist Chatbot: A GPT-powered advisor that gives personalized grooming tips based on your results.
  • Expanded Library: Adding more diverse hairstyles for all ethnicities and hair textures.

Built With

Share this project:

Updates