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
- computer-vision
- css3
- font
- gemini-api
- google-analytics-4
- google-generative-ai
- html5
- javascript
- stripe
- tailwind-css
- vue.js
Log in or sign up for Devpost to join the conversation.