PROJECT

AI-haarstijlkiezer voor virtuele haarstijlvoorbeelden

Maatwerksoftwareontwikkeling, Gezichtsscanning, Live camera-AR, AI-haarstijladviezen, Virtueel passen, Mobiele appontwikkeling, Webapplicatieontwikkeling

  • Industrie: Schoonheidsdiensten
  • Verenigd Koninkrijk Locatie: Verenigd Koninkrijk
  • Doorlooptijd: 10 weken
  • Technologieën: JavaScript / TypeScript (Node.js), Python
3 maanden

Deze schoonheidssalon helpt klanten bij het kiezen van een haarstijl vóór een afspraak, maar een geschreven beschrijving of statische afbeelding laat niet zien hoe een stijl bij een echt gezicht past. De AI-haarstijlkiezer gebruikt een selfie, geüploade foto of live camerabeeld en geeft een haarstijlpreview waarin de gezichtskenmerken van de gebruiker zichtbaar blijven. De stylist en klant kunnen opties vergelijken, een live camera-effect bekijken en een geselecteerde afbeelding opslaan om te bespreken.

Samenvatting

Probleem

De salon heeft een duidelijkere manier nodig om klanten vóór hun afspraak te laten zien hoe verschillende haarstijlen eruit kunnen zien.

Oplossing

De oplossing werd een applicatie voor gezichtsscanning en virtueel passen van haarstijlen met selfies, geüploade foto's en live camerabeelden.

Resultaat

De software helpt de salon om interesse in stylingdiensten te vergroten met meer visuele informatie vóór een beslissing.

Klantverhaal

De klant is een schoonheidssalon uit het Verenigd Koninkrijk. De salon helpt klanten die vóór een afspraak verschillende haarstijlopties willen vergelijken.

De salon moet stijlen kunnen tonen op basis van een selfie, geüploade foto of live camerabeeld. Dit ondersteunt klanten en stylisten bij het kiezen van een haarstijl.

De vraag was eenvoudig: accepteer verschillende beeld- en camera-inputs, volg gezichtskenmerken, toon realtime haarstijlpreviews en genereer afbeeldingen waarin het uiterlijk van de klant behouden blijft.

De oplossing is opgebouwd rond een korte route van gezichtsscan naar stijlselectie, live preview, aanbevelingen en opgeslagen resultaat. De ervaring ondersteunt zowel salonstylisten als klanten.

De klant vroeg om

  1. Selfies, uploads, live camerabeelden en uiterlijke kenmerken accepteren.
  2. Gezichten, gezichtskenmerken, lichaamskenmerken of handen volgen met AI.
  3. Realtime AR-previews van beauty-effecten en haarstijlen tonen.
  4. Afbeeldingen, composities, avatars of gebruikerspreviews genereren.

Waarom kant-en-klare software niet voldeed

Kant-en-klare augmented-realityplatforms plaatsen virtuele objecten in een camerabeeld, terwijl algemene virtuele-pasproducten zich richten op gegenereerde afbeeldingen. Een generiek gezichtsvergelijkingssysteem vergelijkt gezichten, maar combineert geen haarstijltransformatie, behoud van gezichtskenmerken, live previews en haarstijladviezen in één salonervaring.

Projectoverzicht

De oplossing is ontworpen als een responsieve browserervaring, met een mobiele versie voor iOS en Android. Een duidelijk startscherm accepteert een camerascan of geüploade selfie en toont een haarstijlcatalogus voordat de preview begint.

Voor gezichtsanalyse vormen gezichtsscans en gezichtskenmerken de basis voor uitlijning. De live preview plaatst een geselecteerde haarstijl over het getraceerde gezicht, terwijl gezichtskenmerken en huidtint behouden blijven in de verwerkte weergave.

Het aanbevelingsscherm is ontworpen om stijlen te vergelijken op basis van de gezichtsafbeelding van de gebruiker. Aanbevelingskaarten, miniaturen, een toegepaste preview en een uitleg houden de keuze verbonden met het eigen uiterlijk van de gebruiker.

Het laatste scherm brengt de geselecteerde preview samen om deze vast te leggen, te downloaden of te delen. De modulaire structuur biedt ook ruimte voor latere stijladviezen, catalogi en administratieve koppelingen.

Geleverde kernfuncties

  • Selfie-, foto-upload- en live camera-input
  • Gezichtsscanning met begeleiding bij het volgen
  • Live haarstijl-overlay op een gevolgd gezicht
  • AI-haarstijladviezen
  • Extractie van gezichtskenmerken voor stijlmatching
  • Behoud van gezichtskenmerken en huidtint
  • Haarstijlcatalogus en stijlselectie
  • Screenshots maken
  • Downloadbare en deelbare eindafbeeldingen

Kan worden toegevoegd

+ Korte video-opname + Videobewerking + Haarstijltransformatie tussen gezichtsafbeeldingen + Beauty-overlays + Koppeling met stylingcatalogus + Administratieve tools

Wie deze oplossing nog meer kan gebruiken

Deze bedrijven hebben een vergelijkbare visuele keuzetaak. Dezelfde oplossing kan worden aangepast aan hun producten, stijlen en klanttraject.

Een mode- en personal-stylingservice

Taak Het beveelt outfits, kleuren, accessoires of complete looks aan op basis van kenmerken en voorkeuren van de gebruiker.
Hoe de oplossing helpt De oplossing kan gezichts- of uiterlijke analyse koppelen aan visuele aanbevelingen en deelbare previews.

Een optiek-, nagelverzorgings- of haarbedrijf

Taak Het moet klanten vóór aankoop of behandeling laten zien hoe een product of stijl eruit kan zien.
Hoe de oplossing helpt Dezelfde camera- en gezichtstrackingbasis kan virtuele paspreviews voor geselecteerde producten of stijlen tonen.

Een moderetailer

Taak Het heeft door AI gegenereerde of avatargebaseerde visuele content nodig zonder fysieke fotoshoots.
Hoe de oplossing helpt De oplossing kan uiterlijksgebaseerde previews genereren en visuele content vastleggen voor gebruik richting klanten.

Technologiestack

JavaScript / TypeScript (Node.js)

Web- en mobiele applicatielaag

Deze taalfamilie ondersteunt de browserinterface en cross-platform mobiele applicatie.

Python

Machinelearning- en beeldverwerking

Python ondersteunt de gezichtsanalyse- en machinelearningbibliotheken die in het project worden gebruikt.

vue

Responsieve webinterface

vue (een framework voor het bouwen van moderne webinterfaces) structureert de browserervaring.

react

Gebruikersinterfacecomponenten

react (een bibliotheek voor het bouwen van gebruikersinterfaces) ondersteunt waar nodig interfacecomponenten.

deepar

AR-effecten in de browser

deepar (een web-SDK voor camera-effecten en augmented reality) levert live haarstijl- en beauty-overlays.

opencv

Computer vision-verwerking

opencv (een computer vision-bibliotheek) ondersteunt de verwerking van afbeeldingen en cameraframes.

tensorflow

Machinelearningmodellen

tensorflow (een open-source machinelearningframework) ondersteunt AI-gebaseerde beeld- en kenmerkverwerking.

mediapipe

Machinelearningoplossingen

mediapipe (een toolkit voor machinelearningoplossingen op mobiel, edge, cloud en web) ondersteunt de gezichtsverwerking van het project.

dlib

Analyse van gezichtskenmerken

dlib (een toolkit voor machinelearning en computer vision) ondersteunt de verwerking van gezichtskenmerken.

@capacitor/ios and @capacitor/android

iOS- en Android-packaging

Capacitor verpakt de JavaScript- en webervaring als mobiele applicaties voor iOS en Android.

Integraties

Device camera

De applicatie ontvangt live cameravideo en legt afbeeldingen vast voor gezichtsscans en previews.

iOS and Android

Capacitor verbindt de applicatie met ondersteunde mobiele apparaten en hun camera's.

Web browser

De responsieve browserversie verwerkt geüploade selfies en live camerabeelden.

Het resultaat

Een duidelijk startpunt voor elke haarstijlkeuze

Het eerste scherm houdt het startpunt voor de salonklant eenvoudig: een camerascan of geüploade selfie leidt naar de haarlstijlcatalogus. Het scherm bevat begeleiding bij de gezichtsscan en een previewtegel voor de geselecteerde stijl.

Hoe het werkt

  1. De camera levert een livebeeld of de applicatie ontvangt een geüploade selfie.
  2. De gezichtsscanmodule leest het gezicht en toont de scanstatus.
  3. De haarstijlcatalogus levert voorbeelden en de geselecteerde stijl verschijnt in de previewtegel.
  • Camera- en fotoinvoer
  • Begeleiding bij gezichtsscan
  • Haarstijlselectie
Scan een gezicht en kies een haarstijl

Scan een gezicht en kies een haarstijl

Functies op dit scherm
Afbeeldingen maken met de camera Gezichtsscanning AI-haarstijladvies

Een live preview die op het gevolgde gezicht is uitgelijnd

Het tweede scherm zet de gekozen stijl om in een realtime camerapreview. Gezichtskenmerken of een gezichtsmesh houden de haarstijl-overlay uitgelijnd terwijl het camerabeeld verandert.

De preview is bedoeld voor snelle vergelijking, met een stijlselector, resetknop en opnameoptie in hetzelfde beeld.

Hoe het werkt

  1. De live camerafeed levert het huidige beeld.
  2. deepar (een web-SDK voor AR-effecten) en de gezichtstrackingmodule bepalen de positie en kenmerken van het gezicht.
  3. De geselecteerde haarstijl wordt overgebracht naar het gevolgde gezicht, terwijl de gezichtskenmerken zichtbaar blijven in het verwerkte previewframe.
  • Frame met gezichtstracking
  • Toegepaste haarstijl-overlay
  • Opname- en resetbediening
Bekijk de live haarstijlpreview

Bekijk de live haarstijlpreview

Functies op dit scherm
Realtime gezichtsdetectie Afbeeldingen realtime verwerken Haarstijlen overbrengen Gezichtskenmerken behouden

Aanbevelingen die verbonden blijven met het gezicht van de gebruiker

Het aanbevelingsscherm toont haarlstijlopties die zijn gegenereerd op basis van de gezichtsafbeelding van de gebruiker. Met kaarten, miniaturen en een toegepaste preview kan de salonklant stijlen vergelijken.

Een uitlegveld toont de reden voor de aanbeveling naast de toegepaste preview.

Hoe het werkt

  1. De geüploade of vastgelegde gezichtsafbeelding levert de input voor kenmerkextractie.
  2. De aanbevelingsmodule analyseert gezichtskenmerken en retourneert aanbevolen haarstijlen.
  3. De toegepaste haarstijlpreview en uitleg van de aanbeveling tonen het geselecteerde resultaat.
  • Gezichtspreview
  • Aanbevelingskaarten
  • Haarstijlminiaturen
Vergelijk aanbevolen haarstijlen

Vergelijk aanbevolen haarstijlen

Functies op dit scherm
Extractie van gezichtskenmerken AI-haarstijladvies Uitleg van aanbevelingen

Een opgeslagen resultaat voor het volgende gesprek

Het laatste scherm maakt van een geselecteerde preview een deelbare afbeelding. De salonstylist of klant kan een screenshot maken, een korte opname voorbereiden, de eindafbeelding downloaden of deze delen.

Het scherm biedt de geselecteerde preview aan om te downloaden of te delen.

Hoe het werkt

  1. De gegenereerde haarstijlpreview verschijnt als eindpreview.
  2. De opnamemodule maakt een screenshot of korte bewerkte video.
  3. De applicatie levert een downloadbare en deelbare eindafbeelding.
  • Screenshots maken
  • Bediening voor video-opname
  • Downloaden en delen
Sla het haarstijlresultaat op en deel het

Sla het haarstijlresultaat op en deel het

Functies op dit scherm
Screenshots maken

Wat de oplossing biedt

Met deze oplossing kan de salon:

  • Haarstijlopties tonen op het eigen gezicht van de klant
  • Live camerapreviews bieden tijdens een stylinggesprek
  • AI-aanbevolen haarstijlen vergelijken op basis van een gezichtsafbeelding
  • Gezichtskenmerken behouden in gegenereerde haarstijlpreviews
  • Afbeeldingen opslaan om te downloaden of te delen
  • Een visueler traject naar beslissingen over stylingdiensten creëren

Tot slot

Uiteindelijk is de oplossing ontwikkeld om onzekerheid weg te nemen in het traject van het uiterlijk van een klant naar een haarstijlkeuze en om meer interesse in stylingdiensten te ondersteunen.

Veelgestelde vragen

Overweegt u een vergelijkbaar systeem te bouwen? Lees de antwoorden hieronder om te zien hoe de belangrijkste productkeuzes samenhangen.