PROJECT

AI hairstyle changer for virtual hairstyle previews

Custom software development, Face scanning, Live camera AR, AI hairstyle recommendations, Virtual try-on, Mobile app development, Web application development

  • Industry: Beauty services
  • United Kingdom Location: United Kingdom
  • Delivery time: 10 weeks
  • Technologies: JavaScript / TypeScript (Node.js), Python
3 months

This beauty salon helps guests choose hairstyles before an appointment, but a written description or static image does not show how a style fits a real face. The AI hairstyle changer takes a selfie, uploaded photo, or live camera feed and returns a hairstyle preview with the user's facial features represented in the result. The salon stylist and guest can compare options, view a live camera effect, and save a selected image for discussion.

Summary

Problem

The salon needs a clearer way to show guests how different hairstyles may look before an appointment.

Solution

The solution became a face-scanning and virtual hairstyle try-on application for selfies, uploaded photos, and live camera feeds.

Result

The software is made to help the salon increase interest in styling services with more visual answers before a decision.

Client story

The client is a beauty salon from the United Kingdom. It works with guests who want to compare hairstyle options before an appointment.

The salon needs to show styles from a selfie, uploaded photo, or live camera feed. It supports guests and stylists during hairstyle selection.

The request was simple: accept several image and camera inputs, track facial features, provide real-time hairstyle previews, and generate images that preserve the guest's appearance.

The solution was shaped around a short path from face scan to style selection, live preview, recommendations, and saved result. The experience supports salon stylists and guests.

The client asked for

  1. Accept selfies, uploads, live camera feeds, and appearance data.
  2. Track faces, facial features, body attributes, or hands with AI.
  3. Show real-time AR previews of beauty effects and hairstyles.
  4. Generate images, composites, avatars, or previews of the user.

Why ready-made software did not fit

Ready-made augmented-reality platforms place virtual objects into a camera view, while general virtual try-on products focus on generated images. A generic face-matching system compares faces but does not combine hairstyle transfer, facial-feature preservation, live previews, and hairstyle recommendations in one salon experience.

Project overview

The solution was designed around a responsive browser experience with a mobile path for iOS and Android. A clear opening screen accepts a camera scan or uploaded selfie and presents a hairstyle catalogue before the preview begins.

To handle face analysis, face scanning and face landmarks were provided as the basis for alignment. The live preview places a selected hairstyle over the tracked face while preserving facial features and skin tone in the processed representation.

The recommendation screen was designed to compare styles from the user's face image. Recommendation cards, thumbnails, an applied preview, and an explanation area keep the choice connected to the user's own appearance.

The final screen brings the selected preview into one place for capture, download, or sharing. The modular structure also leaves room for later styling recommendations, catalogues, and administrative connections.

Key features delivered

  • Selfie, photo upload, and live camera input
  • Face scanning with tracking guidance
  • Live hairstyle overlay on a tracked face
  • AI hairstyle recommendations
  • Face feature extraction for style matching
  • Facial-feature and skin-tone preservation
  • Hairstyle catalogue and style selector
  • Screenshot capture
  • Downloadable and shareable final images

Can be added

+ Short-video recording + Video editing + Hairstyle transfer between face images + Beauty overlays + Styling catalogue connection + Administrative tools

Who else can use this solution

These businesses have a similar visual-choice task, and the same solution can be adapted to their products, styles, and customer journey.

A fashion and personal-styling service

Task It recommends outfits, colors, accessories, or complete looks from a user's attributes and preferences.
How the solution helps The solution can connect face or appearance analysis with visual recommendations and shareable previews.
Creative studios

An eyewear, nail-care, or hair business

Task It needs to show customers how a product or style may look before purchase or treatment.
How the solution helps The same camera and face-tracking foundation can present virtual try-on previews for selected products or styles.
Beauty and wellness shops

A fashion retailer

Task It needs AI-generated or avatar-based visual content without physical photoshoots.
How the solution helps The solution can generate appearance-based previews and capture visual content for customer-facing use.
Fashion retail

Technology stack

JavaScript / TypeScript (Node.js)

Web and mobile application layer

This language family supports the browser interface and cross-platform mobile application.

Python

Machine-learning and vision processing

Python supports the face-analysis and machine-learning libraries used in the project.

vue

Responsive web interface

vue (a framework for building modern web interfaces) structures the browser experience.

react

User interface components

react (a library for building user interfaces) supports interface components where required.

deepar

Browser AR effects

deepar (a web SDK for camera effects and augmented reality) provides live hairstyle and beauty overlays.

opencv

Computer-vision processing

opencv (a computer-vision library) supports image and camera-frame processing.

tensorflow

Machine-learning models

tensorflow (an open-source machine-learning framework) supports AI-based image and feature processing.

mediapipe

Machine-learning solutions

mediapipe (a toolkit for building machine-learning solutions on mobile, edge, cloud, and web) supports the project's face-processing work.

dlib

Face feature analysis

dlib (a machine-learning and computer-vision toolkit) supports facial feature processing.

@capacitor/ios and @capacitor/android

IOS and Android packaging

Capacitor packages the JavaScript and web experience as mobile applications for iOS and Android.

Integrations

Device camera

The application receives live camera video and captures images for face scanning and previews.

iOS and Android

Capacitor connects the application with supported mobile devices and their cameras.

Web browser

The responsive browser version processes uploaded selfies and live camera feeds.

The result

A clear starting point for each hairstyle choice

The first screen keeps the salon guest's starting point simple: a camera scan or uploaded selfie leads into the hairstyle catalogue. The screen includes face-scan guidance and a selected-style preview tile.

How it works

  1. The camera provides a live feed or the application receives an uploaded selfie.
  2. The face-scanning module reads the face and shows the scan status.
  3. The hairstyle catalogue provides samples and the selected style appears in the preview tile.
  • Camera and photo input
  • Face-scan guidance
  • Hairstyle selection
Scan a face and select a hairstyle

Scan a face and select a hairstyle

Functions on this screen
Capture images using camera Face Scanning AI Hairstyle Recommendation

A live preview aligned to the tracked face

The second screen turns the chosen style into a real-time camera preview. Face landmarks or a face mesh keep the hairstyle overlay aligned as the camera image changes.

The preview is made for quick comparison, with a style selector, reset control, and capture option in the same view.

How it works

  1. The live camera feed provides the current image.
  2. deepar (a web AR effects SDK) and the face-tracking module identify the face position and landmarks.
  3. The selected hairstyle is transferred to the tracked face while facial features remain represented in the processed preview frame.
  • Face-tracking frame
  • Applied hairstyle overlay
  • Capture and reset controls
View the live hairstyle preview

View the live hairstyle preview

Functions on this screen
Real-time face detection Process images in real time Transfer hairstyles Maintain facial features

Recommendations that stay connected to the user's face

The recommendation screen presents hairstyle options generated from the user's face image. Cards, thumbnails, and an applied preview let the salon guest compare styles.

An explanation area presents the recommendation explanation alongside the applied preview.

How it works

  1. The uploaded or captured face image provides the input for feature extraction.
  2. The recommendation module analyzes face features and returns recommended hairstyles.
  3. The applied hairstyle preview and recommendation explanation show the selected result.
  • Face preview
  • Recommendation cards
  • Hairstyle thumbnails
Compare recommended hairstyles

Compare recommended hairstyles

Functions on this screen
Face Feature Extraction AI Hairstyle Recommendation Recommendation Explanation

A saved result for the next conversation

The final screen turns a selected preview into a shareable image. The salon stylist or guest can capture a screenshot, prepare a short recording, download the final image, or share it.

The screen provides the selected preview for download or sharing.

How it works

  1. The generated hairstyle preview image appears as the final preview.
  2. The capture module creates a screenshot or short edited video.
  3. The application provides a downloadable final image and a shareable final image.
  • Screenshot capture
  • Video recording controls
  • Download and share
Save and share the hairstyle result

Save and share the hairstyle result

Functions on this screen
Capture Screenshots

What the solution gives

With this solution, the salon can:

  • Show hairstyle options on a guest's own face
  • Offer live camera previews during a styling discussion
  • Compare AI-recommended hairstyles from a face image
  • Preserve facial features in generated hairstyle previews
  • Save images for download or sharing
  • Create a more visual path to styling-service decisions

In the end

In the end, the solution was made to take uncertainty out of the path from a guest's appearance to a hairstyle decision and support more styling-service interest.

FAQ

Thinking about building a similar system? Read the answers below to see how the main product decisions fit together.

Need something similar? Let's talk
Or browse more projects