PROJEKT

AI-frisyrväxlare för virtuella frisyrförhandsvisningar

Anpassad programvaruutveckling, Ansiktsskanning, AR via livekamera, AI-rekommendationer för frisyrer, Virtuell provning, Utveckling av mobilappar, Utveckling av webbapplikationer

  • Bransch: Skönhetstjänster
  • Storbritannien Plats: Storbritannien
  • Leveranstid: 10 veckor
  • Teknik: JavaScript / TypeScript (Node.js), Python
3 månader

Den här skönhetssalongen hjälper kunder att välja frisyr före ett besök, men en skriftlig beskrivning eller statisk bild visar inte hur en frisyr passar ett verkligt ansikte. AI-frisyrväxlaren tar emot en selfie, uppladdad bild eller livekameraflöde och visar en frisyrförhandsvisning där användarens ansiktsdrag bevaras. Stylist och kund kan jämföra alternativ, se en livekameraeffekt och spara en vald bild för vidare diskussion.

Sammanfattning

Problem

Salongen behöver ett tydligare sätt att visa kunder hur olika frisyrer kan se ut före ett besök.

Lösning

Lösningen blev en applikation för ansiktsskanning och virtuell frisyrprovning med selfies, uppladdade bilder och livekameraflöden.

Resultat

Programvaran är utformad för att hjälpa salongen öka intresset för stylingtjänster genom mer visuella beslutsunderlag.

Kundberättelse

Kunden är en skönhetssalong från Storbritannien. Salongen arbetar med kunder som vill jämföra frisyralternativ före ett besök.

Salongen behöver visa frisyrer från en selfie, uppladdad bild eller livekameraflöde. Lösningen hjälper både kunder och stylister vid valet av frisyr.

Beställningen var enkel: ta emot flera bild- och kameraingångar, spåra ansiktsdrag, visa frisyrer i realtid och skapa bilder som bevarar kundens utseende.

Lösningen utformades kring en kort väg från ansiktsskanning till frisyrval, liveförhandsvisning, rekommendationer och sparat resultat. Upplevelsen stöder både salongens stylister och kunder.

Kunden efterfrågade

  1. Ta emot selfies, uppladdningar, livekameraflöden och utseendedata.
  2. Spåra ansikten, ansiktsdrag, kroppsegenskaper eller händer med AI.
  3. Visa AR-förhandsvisningar av skönhetseffekter och frisyrer i realtid.
  4. Skapa bilder, kompositioner, avatarer eller förhandsvisningar av användaren.

Varför färdig programvara inte räckte

Färdiga AR-plattformar placerar virtuella objekt i en kameravy, medan generella virtuella provningsprodukter fokuserar på skapade bilder. Ett generiskt ansiktsmatchningssystem jämför ansikten men kombinerar inte frisyröverföring, bevarande av ansiktsdrag, liveförhandsvisningar och frisyrrekommendationer i en enda salongsupplevelse.

Projektöversikt

Lösningen utformades kring en responsiv webbläsarupplevelse med mobilstöd för iOS och Android. En tydlig startsida tar emot en kameraskanning eller uppladdad selfie och visar en frisyrkatalog innan förhandsvisningen börjar.

För ansiktsanalysen användes ansiktsskanning och ansiktslandmärken som grund för justering. Liveförhandsvisningen placerar den valda frisyren över det spårade ansiktet samtidigt som ansiktsdrag och hudton bevaras i den bearbetade bilden.

Rekommendationsskärmen utformades för att jämföra frisyrer utifrån användarens ansiktsbild. Rekommendationskort, miniatyrbilder, en tillämpad förhandsvisning och ett förklaringsfält håller valet kopplat till användarens eget utseende.

Den sista skärmen samlar den valda förhandsvisningen på ett ställe för fotografering, nedladdning eller delning. Den modulära strukturen ger även utrymme för framtida stylingrekommendationer, kataloger och administrativa kopplingar.

Viktiga levererade funktioner

  • Selfie-, foto- och livekameraingång
  • Ansiktsskanning med vägledning för spårning
  • Liveöverlägg av frisyr på ett spårat ansikte
  • AI-rekommendationer för frisyrer
  • Extrahering av ansiktsdrag för stilmatchning
  • Bevarande av ansiktsdrag och hudton
  • Frisyrkatalog och stilväljare
  • Skärmdump
  • Nedladdningsbara och delbara slutbilder

Kan läggas till

+ Inspelning av korta videor + Videoredigering + Frisyröverföring mellan ansiktsbilder + Skönhetsöverlägg + Koppling till stylingkatalog + Administrativa verktyg

Vem mer kan använda lösningen

Dessa företag har en liknande visuell valsituation, och samma lösning kan anpassas till deras produkter, stilar och kundresa.

En mode- och personlig stylingtjänst

Uppgift Den rekommenderar kläder, färger, accessoarer eller kompletta looks utifrån användarens egenskaper och preferenser.
Så hjälper lösningen Lösningen kan koppla ansikts- eller utseendeanalys till visuella rekommendationer och delbara förhandsvisningar.
Kreativa studior

Ett företag inom glasögon, nagelvård eller hår

Uppgift Företaget behöver visa kunder hur en produkt eller stil kan se ut före köp eller behandling.
Så hjälper lösningen Samma grund för kamera och ansiktsspårning kan visa virtuella provningar av utvalda produkter eller stilar.
Skönhets- och välmåendebutiker

En modeåterförsäljare

Uppgift Företaget behöver AI-genererat eller avatarbaserat visuellt innehåll utan fysiska fotograferingar.
Så hjälper lösningen Lösningen kan skapa utseendebaserade förhandsvisningar och fånga visuellt innehåll för kundvänd användning.
Modehandel

Teknikstack

JavaScript / TypeScript (Node.js)

Webb- och mobilapplikationslager

Detta språkekosystem stöder webbläsargränssnittet och den plattformsoberoende mobilapplikationen.

Python

Maskininlärning och bildbehandling

Python stöder de ansiktsanalys- och maskininlärningsbibliotek som används i projektet.

vue

Responsivt webbgränssnitt

vue (ett ramverk för moderna webbgränssnitt) strukturerar webbläsarupplevelsen.

react

Användargränssnittskomponenter

react (ett bibliotek för att bygga användargränssnitt) stöder gränssnittskomponenter där det behövs.

deepar

AR-effekter i webbläsaren

deepar (ett webb-SDK för kameraeffekter och förstärkt verklighet) tillhandahåller liveöverlägg för frisyrer och skönhet.

opencv

Datorseendebehandling

opencv (ett datorseendebibliotek) stöder bearbetning av bilder och kameraframar.

tensorflow

Maskininlärningsmodeller

tensorflow (ett maskininlärningsramverk med öppen källkod) stöder AI-baserad bild- och funktionsbehandling.

mediapipe

Maskininlärningslösningar

mediapipe (ett verktyg för maskininlärningslösningar på mobil, edge, moln och webb) stöder projektets ansiktsbehandling.

dlib

Analys av ansiktsdrag

dlib (ett verktyg för maskininlärning och datorseende) stöder bearbetning av ansiktsdrag.

@capacitor/ios and @capacitor/android

Paketering för iOS och Android

Capacitor paketerar JavaScript- och webblösningen som mobilapplikationer för iOS och Android.

Integrationer

Device camera

Applikationen tar emot livevideo från kameran och fångar bilder för ansiktsskanning och förhandsvisningar.

iOS and Android

Capacitor kopplar applikationen till kompatibla mobila enheter och deras kameror.

Web browser

Den responsiva webbläsarversionen bearbetar uppladdade selfies och livekameraflöden.

Resultatet

En tydlig startpunkt för varje frisyrval

Den första skärmen gör startpunkten enkel för salongens kund: en kameraskanning eller uppladdad selfie leder till frisyrkatalogen. Skärmen innehåller vägledning för ansiktsskanning och en förhandsvisning av vald stil.

Så fungerar det

  1. Kameran tillhandahåller ett liveflöde eller så tar applikationen emot en uppladdad selfie.
  2. Ansiktsskanningsmodulen läser av ansiktet och visar skanningens status.
  3. Frisyrkatalogen visar exempel och den valda stilen visas i förhandsvisningen.
  • Kamera- och fotoingång
  • Vägledning för ansiktsskanning
  • Frisyrval
Skanna ett ansikte och välj en frisyr

Skanna ett ansikte och välj en frisyr

Funktioner på den här skärmen
Ta bilder med kameran Ansiktsskanning AI-rekommendation för frisyr

En liveförhandsvisning som följer det spårade ansiktet

Den andra skärmen omvandlar den valda stilen till en kameraförhandsvisning i realtid. Ansiktslandmärken eller ett ansiktsnät håller frisyröverlägget på plats när kamerabilden ändras.

Förhandsvisningen är gjord för snabba jämförelser, med stilväljare, återställningskontroll och fångstalternativ i samma vy.

Så fungerar det

  1. Livekameraflödet tillhandahåller den aktuella bilden.
  2. deepar (ett webb-SDK för AR-effekter) och ansiktsspårningsmodulen identifierar ansiktets position och landmärken.
  3. Den valda frisyren överförs till det spårade ansiktet samtidigt som ansiktsdragen bevaras i den bearbetade förhandsvisningen.
  • Ansiktsspårningsram
  • Tillämpat frisyröverlägg
  • Kontroller för fångst och återställning
Visa frisyrförhandsvisningen live

Visa frisyrförhandsvisningen live

Funktioner på den här skärmen
Ansiktsidentifiering i realtid Bearbeta bilder i realtid Överföra frisyrer Bevara ansiktsdrag

Rekommendationer kopplade till användarens ansikte

Rekommendationsskärmen visar frisyralternativ som skapats utifrån användarens ansiktsbild. Kort, miniatyrbilder och en tillämpad förhandsvisning låter salongens kund jämföra frisyrer.

Ett förklaringsfält visar rekommendationens motivering bredvid den tillämpade förhandsvisningen.

Så fungerar det

  1. Den uppladdade eller fångade ansiktsbilden används för att extrahera egenskaper.
  2. Rekommendationsmodulen analyserar ansiktsdrag och returnerar rekommenderade frisyrer.
  3. Den tillämpade frisyrförhandsvisningen och rekommendationens motivering visar det valda resultatet.
  • Ansiktsförhandsvisning
  • Rekommendationskort
  • Frisyrminiatyrer
Jämför rekommenderade frisyrer

Jämför rekommenderade frisyrer

Funktioner på den här skärmen
Extrahering av ansiktsdrag AI-rekommendation för frisyr Förklaring av rekommendationen

Ett sparat resultat för nästa samtal

Den sista skärmen omvandlar en vald förhandsvisning till en delbar bild. Stylisten eller kunden kan ta en skärmdump, spela in en kort video, ladda ner slutbilden eller dela den.

Skärmen visar den valda förhandsvisningen för nedladdning eller delning.

Så fungerar det

  1. Den skapade frisyrbilden visas som den slutliga förhandsvisningen.
  2. Fångstmodulen skapar en skärmdump eller en kort redigerad video.
  3. Applikationen tillhandahåller en nedladdningsbar och delbar slutbild.
  • Skärmdump
  • Kontroller för videoinspelning
  • Ladda ner och dela
Spara och dela frisyrresultatet

Spara och dela frisyrresultatet

Funktioner på den här skärmen
Ta skärmdumpar

Vad lösningen ger

Med den här lösningen kan salongen:

  • Visa frisyralternativ på kundens eget ansikte
  • Erbjuda liveförhandsvisningar under stylingsamtal
  • Jämföra AI-rekommenderade frisyrer utifrån en ansiktsbild
  • Bevara ansiktsdrag i skapade frisyrförhandsvisningar
  • Spara bilder för nedladdning eller delning
  • Skapa en mer visuell väg till beslut om stylingtjänster

Till sist

Till sist utformades lösningen för att minska osäkerheten på vägen från kundens utseende till frisyrvalet och stödja ett större intresse för stylingtjänster.

VANLIGA FRÅGOR

Funderar du på att bygga ett liknande system? Läs svaren nedan för att se hur de viktigaste produktbesluten hänger ihop.

Behöver du något liknande? Låt oss prata
Eller bläddra bland fler projekt