Inspiration
Whenever I go to the barber, I struggle to decide what haircut to get. I'll find hairstyles online that look great, but I never know how they'd look on me.
I tried several hairstyle preview apps, but many changed my facial features or produced unrealistic results. I wanted a way to preview different haircuts on my own face, customize them, and show my barber exactly what I wanted.
That's why I built BarberCopilot.
What it does
BarberCopilot lets users preview haircuts using their own photos. They can upload front, side, and back views, then customize five settings: top length, side guard, fade height, texture, and fringe direction.
I built two generation modes:
- Standard AI: Generates hairstyle previews based on the uploaded photo and haircut settings.
- CV-Guided AI: Uses facial landmarks, hair segmentation, and editing masks to guide front-view generation while helping preserve facial features.
Users can generate previews from multiple angles and create a Barber Card containing the images, haircut specifications, and instructions. The card can be downloaded or saved as a PDF to bring to a barber.
How I built it
Frontend — React, Vite, JavaScript, CSS
I built the interface using React and Vite, with photo uploads, haircut customization controls, generation options, and a results gallery. I also created the printable Barber Card.
Backend — Python and FastAPI
I used FastAPI to handle uploaded photos, image processing, and requests to the image-generation API.
Computer Vision — MediaPipe, OpenCV, NumPy
I used MediaPipe to detect facial landmarks and segment hair from the rest of the image. I then used OpenCV and NumPy to create editing masks, experimenting with dilation and feathering to make the edits smoother.
I also built visualization tools to inspect landmarks, segmentation results, and masks while debugging.
Generative AI — OpenAI Image Generation API
I integrated OpenAI's image-generation API and created prompts based on the selected hairstyle, customization settings, and camera angle.
For CV-guided front-view generation, I provide the original photo and an editing mask. Side and back previews use standard AI generation with angle-specific prompts.
Deployment — Vercel, Render, Docker, GitHub
I deployed the frontend on Vercel and the backend on Render. I used Docker for backend dependencies and GitHub for version control.
Challenges I ran into
Preserving facial features
My first attempts relied mostly on prompts, but the AI sometimes changed the person's face. I added facial landmark detection, hair segmentation, and editing masks to better control which areas were modified.
Creating editing masks
I had to balance giving the AI enough room to change the hairstyle without including too much of the face. I experimented with mask dilation, feathering, and facial-region protection.
Multiple camera angles
I added support for front, side, and back photos so users could see more than one perspective. Each angle is currently generated separately, so consistency between views is still a limitation.
Deployment issues
The backend worked locally but initially failed on Render because MediaPipe required a missing Linux graphics library. I solved this using Docker and also worked through CORS and environment-variable issues.
Time constraints
I originally considered building a 3D hairstyle simulator, but I decided to focus on a complete, working application with multi-angle previews and a Barber Card.
Accomplishments that I'm proud of
I'm proud that I turned a problem I've personally experienced into a working, publicly deployed application.
My favorite accomplishments include:
- Building facial landmark detection and hair segmentation with MediaPipe.
- Creating a CV-guided image-editing pipeline.
- Adding customizable hairstyles and multi-angle previews.
- Building debugging tools for computer-vision analysis.
- Creating a Barber Card that prints as a single-page PDF.
- Deploying the complete application online.
I'm especially proud of the Barber Card because it makes BarberCopilot useful beyond just generating images.
What I learned
Before BarberCopilot, I had experience with Python, React, and backend development, but little experience with computer vision or image generation.
I learned how facial landmarks, segmentation, and editing masks can help guide AI image editing. I also learned that generating an image is much easier than controlling exactly what changes.
Deployment taught me how to debug Linux dependency issues, use Docker, and connect separately hosted frontend and backend services.
I also realized how important UI design is. Even a technically complicated application needs to be easy for people to use.
What's next for BarberCopilot
I'd like to continue improving BarberCopilot by:
- Adding more hairstyles and supporting more hair types.
- Improving consistency between front, side, and back previews.
- Exploring an interactive 3D hairstyle viewer.
- Adding hairstyle recommendations based on facial features.
- Improving hair texture and facial identity preservation.
- Allowing barbers to review and adjust haircut specifications.
My goal is to make BarberCopilot a practical tool that helps people choose haircuts confidently and communicate their preferences to their barber.
