PROJEKT

KI-Frisurenwechsler für virtuelle Frisurenvorschauen

Individuelle Softwareentwicklung, Gesichtsscan, Live-Kamera-AR, KI-Frisurenempfehlungen, Virtuelle Anprobe, Entwicklung mobiler Apps, Entwicklung von Webanwendungen

  • Branche: Beauty-Dienstleistungen
  • Vereinigtes Königreich Standort: Vereinigtes Königreich
  • Umsetzungszeit: 10 Wochen
  • Technologien: JavaScript / TypeScript (Node.js), Python
3 Monate

Dieser Schönheitssalon hilft Gästen, vor einem Termin Frisuren auszuwählen. Eine schriftliche Beschreibung oder ein statisches Bild zeigt jedoch nicht, wie eine Frisur zu einem echten Gesicht passt. Der KI-Frisurenwechsler verarbeitet ein Selfie, ein hochgeladenes Foto oder ein Live-Kamerabild und erstellt eine Frisurenvorschau mit den Gesichtszügen des Nutzers. Stylist und Gast können Optionen vergleichen, einen Live-Kameraeffekt ansehen und ein ausgewähltes Bild zur Besprechung speichern.

Zusammenfassung

Problem

Der Salon benötigt eine anschaulichere Möglichkeit, Gästen vor einem Termin verschiedene Frisuren zu zeigen.

Lösung

Die Lösung wurde zu einer Anwendung für Gesichtsscan und virtuelle Frisurenanprobe mit Selfies, hochgeladenen Fotos und Live-Kamerabildern.

Ergebnis

Die Software soll dem Salon helfen, mit anschaulicheren Antworten vor der Entscheidung das Interesse an Styling-Dienstleistungen zu steigern.

Kundengeschichte

Der Kunde ist ein Schönheitssalon aus dem Vereinigten Königreich. Er arbeitet mit Gästen, die vor einem Termin verschiedene Frisuren vergleichen möchten.

Der Salon muss Frisuren anhand eines Selfies, eines hochgeladenen Fotos oder eines Live-Kamerabildes zeigen. Die Lösung unterstützt Gäste und Stylisten bei der Frisurenauswahl.

Die Anfrage war einfach: mehrere Bild- und Kameraquellen akzeptieren, Gesichtszüge erfassen, Frisuren in Echtzeit anzeigen und Bilder erstellen, die das Erscheinungsbild des Gastes bewahren.

Die Lösung wurde auf einen kurzen Ablauf vom Gesichtsscan über die Frisurenauswahl und Live-Vorschau bis zu Empfehlungen und gespeichertem Ergebnis ausgerichtet. Die Anwendung unterstützt Stylisten und Gäste.

Der Kunde wünschte

  1. Selfies, Uploads, Live-Kamerabilder und Erscheinungsdaten akzeptieren.
  2. Gesichter, Gesichtszüge, Körpermerkmale oder Hände mit KI erfassen.
  3. AR-Vorschauen für Beauty-Effekte und Frisuren in Echtzeit anzeigen.
  4. Bilder, Kompositionen, Avatare oder Vorschauen des Nutzers erstellen.

Warum Standardsoftware nicht passte

Fertige Augmented-Reality-Plattformen platzieren virtuelle Objekte im Kamerabild, während allgemeine Lösungen für virtuelle Anproben auf generierte Bilder ausgerichtet sind. Ein generisches Gesichtsvergleichssystem vergleicht Gesichter, kombiniert jedoch nicht Frisurenübertragung, Bewahrung der Gesichtszüge, Live-Vorschauen und Frisurenempfehlungen in einer einzigen Salonanwendung.

Projektübersicht

Die Lösung wurde als responsive Browser-Anwendung mit einem mobilen Ablauf für iOS und Android entwickelt. Ein klarer Startbildschirm akzeptiert einen Kamerascan oder ein Selfie und zeigt vor der Vorschau einen Frisurenkatalog.

Für die Gesichtsanalyse dienen Gesichtsscan und Gesichtsmerkmale als Grundlage für die Ausrichtung. Die Live-Vorschau legt die ausgewählte Frisur über das erfasste Gesicht und bewahrt dabei Gesichtszüge und Hautton in der bearbeiteten Darstellung.

Der Empfehlungsbildschirm vergleicht Frisuren anhand des Gesichtsbildes. Empfehlungskarten, Miniaturbilder, eine angewendete Vorschau und ein Erklärungsbereich verbinden die Auswahl mit dem eigenen Erscheinungsbild.

Der Abschlussbildschirm bündelt die ausgewählte Vorschau zum Aufnehmen, Herunterladen oder Teilen. Die modulare Struktur lässt außerdem Raum für spätere Styling-Empfehlungen, Kataloge und Verwaltungsanbindungen.

Umgesetzte Kernfunktionen

  • Selfie-, Foto- und Live-Kameraeingabe
  • Gesichtsscan mit Führung zur Erfassung
  • Live-Frisurenoverlay auf einem erfassten Gesicht
  • KI-Frisurenempfehlungen
  • Extraktion von Gesichtsmerkmalen für den Stilabgleich
  • Bewahrung von Gesichtszügen und Hautton
  • Frisurenkatalog und Stilauswahl
  • Screenshot-Aufnahme
  • Herunterladbare und teilbare Abschlussbilder

Erweiterbar um

+ Kurzvideoaufnahme + Videobearbeitung + Frisurenübertragung zwischen Gesichtsbildern + Beauty-Overlays + Anbindung an einen Stylingkatalog + Verwaltungswerkzeuge

Wer kann diese Lösung ebenfalls nutzen?

Diese Unternehmen haben eine ähnliche visuelle Auswahlaufgabe. Die Lösung lässt sich an ihre Produkte, Stile und Kundenreise anpassen.

Ein Mode- und Personal-Styling-Service

Aufgabe Empfiehlt Outfits, Farben, Accessoires oder komplette Looks anhand der Merkmale und Vorlieben des Nutzers.
So hilft die Lösung Die Lösung kann Gesichts- oder Erscheinungsanalysen mit visuellen Empfehlungen und teilbaren Vorschauen verbinden.

Ein Brillen-, Nagelpflege- oder Haarpflegeunternehmen

Aufgabe Muss Kunden zeigen, wie ein Produkt oder Stil vor dem Kauf oder der Behandlung aussehen könnte.
So hilft die Lösung Dieselbe Kamera- und Gesichtserkennungsgrundlage kann virtuelle Anproben ausgewählter Produkte oder Stile anzeigen.

Ein Modehändler

Aufgabe Benötigt KI-generierte oder avatarbasierte visuelle Inhalte ohne physische Fotoshootings.
So hilft die Lösung Die Lösung kann erscheinungsbasierte Vorschauen erstellen und visuelle Inhalte für Kunden generieren.

Technologie-Stack

JavaScript / TypeScript (Node.js)

Web- und mobile Anwendungsebene

Diese Sprachfamilie unterstützt die Browseroberfläche und die plattformübergreifende mobile Anwendung.

Python

Verarbeitung durch maschinelles Lernen und Bildanalyse

Python unterstützt die im Projekt verwendeten Bibliotheken für Gesichtsanalyse und maschinelles Lernen.

vue

Responsive Weboberfläche

vue (ein Framework für moderne Weboberflächen) strukturiert die Browseranwendung.

react

Benutzeroberflächenkomponenten

react (eine Bibliothek für Benutzeroberflächen) unterstützt die erforderlichen UI-Komponenten.

deepar

AR-Effekte im Browser

deepar (ein Web-SDK für Kameraeffekte und Augmented Reality) stellt Live-Frisuren- und Beauty-Overlays bereit.

opencv

Bildverarbeitung

opencv (eine Bibliothek für Bildverarbeitung) unterstützt die Verarbeitung von Bildern und Kamerabildern.

tensorflow

Modelle für maschinelles Lernen

tensorflow (ein Open-Source-Framework für maschinelles Lernen) unterstützt KI-basierte Bild- und Merkmalsverarbeitung.

mediapipe

Lösungen für maschinelles Lernen

mediapipe (ein Toolkit für Lösungen des maschinellen Lernens auf Mobilgeräten, Edge, in der Cloud und im Web) unterstützt die Gesichtsverarbeitung des Projekts.

dlib

Analyse von Gesichtsmerkmalen

dlib (ein Toolkit für maschinelles Lernen und Bildverarbeitung) unterstützt die Verarbeitung von Gesichtsmerkmalen.

@capacitor/ios and @capacitor/android

Bereitstellung für iOS und Android

Capacitor bündelt die JavaScript- und Webanwendung als mobile Apps für iOS und Android.

Integrationen

Device camera

Die Anwendung empfängt Live-Kameravideos und nimmt Bilder für Gesichtsscans und Vorschauen auf.

iOS and Android

Capacitor verbindet die Anwendung mit unterstützten Mobilgeräten und deren Kameras.

Web browser

Die responsive Browserversion verarbeitet hochgeladene Selfies und Live-Kamerabilder.

Das Ergebnis

Ein klarer Startpunkt für jede Frisurenauswahl

Der erste Bildschirm hält den Einstieg für den Salonbesucher einfach: Ein Kamerascan oder Selfie führt zum Frisurenkatalog. Der Bildschirm enthält eine Anleitung zum Gesichtsscan und eine Vorschaukachel für den ausgewählten Stil.

So funktioniert es

  1. Die Kamera liefert ein Livebild oder die Anwendung erhält ein hochgeladenes Selfie.
  2. Das Gesichtsscanmodul erfasst das Gesicht und zeigt den Scanstatus.
  3. Der Frisurenkatalog stellt Beispiele bereit und der ausgewählte Stil erscheint in der Vorschaukachel.
  • Kamera- und Fotoeingabe
  • Anleitung zum Gesichtsscan
  • Frisurenauswahl
Gesicht scannen und Frisur auswählen

Gesicht scannen und Frisur auswählen

Funktionen auf diesem Bildschirm
Bilder mit der Kamera aufnehmen Gesichtsscan KI-Frisurenempfehlung

Eine Live-Vorschau, ausgerichtet am erfassten Gesicht

Der zweite Bildschirm verwandelt den gewählten Stil in eine Kameravorschau in Echtzeit. Gesichtsmerkmale oder ein Gesichtsmesh halten das Frisurenoverlay ausgerichtet, während sich das Kamerabild verändert.

Die Vorschau ermöglicht einen schnellen Vergleich mit Stilauswahl, Zurücksetzen und Aufnahmeoption in derselben Ansicht.

So funktioniert es

  1. Das Live-Kamerabild liefert das aktuelle Bild.
  2. deepar (ein Web-SDK für AR-Effekte) und das Gesichtserkennungsmodul bestimmen Gesichtsposition und -merkmale.
  3. Die ausgewählte Frisur wird auf das erfasste Gesicht übertragen, während die Gesichtszüge in der bearbeiteten Vorschau erhalten bleiben.
  • Gesichtserfassungsrahmen
  • Angewendetes Frisurenoverlay
  • Aufnahme- und Zurücksetzen-Steuerung
Live-Frisurenvorschau ansehen

Live-Frisurenvorschau ansehen

Funktionen auf diesem Bildschirm
Gesichtserkennung in Echtzeit Bilder in Echtzeit verarbeiten Frisuren übertragen Gesichtszüge bewahren

Empfehlungen, die mit dem Gesicht des Nutzers verbunden bleiben

Der Empfehlungsbildschirm zeigt Frisurenoptionen an, die aus dem Gesichtsbild des Nutzers erstellt wurden. Karten, Miniaturbilder und eine angewendete Vorschau ermöglichen den Vergleich.

Ein Erklärungsbereich zeigt die Empfehlung neben der angewendeten Vorschau.

So funktioniert es

  1. Das hochgeladene oder aufgenommene Gesichtsbild dient als Grundlage für die Merkmalsextraktion.
  2. Das Empfehlungsmodul analysiert Gesichtsmerkmale und liefert empfohlene Frisuren.
  3. Die angewendete Frisurenvorschau und die Erklärung zeigen das ausgewählte Ergebnis.
  • Gesichtsvorschau
  • Empfehlungskarten
  • Frisuren-Miniaturbilder
Empfohlene Frisuren vergleichen

Empfohlene Frisuren vergleichen

Funktionen auf diesem Bildschirm
Extraktion von Gesichtsmerkmalen KI-Frisurenempfehlung Erklärung der Empfehlung

Ein gespeichertes Ergebnis für das nächste Gespräch

Der Abschlussbildschirm verwandelt eine ausgewählte Vorschau in ein teilbares Bild. Der Stylist oder Gast kann einen Screenshot aufnehmen, eine kurze Aufnahme erstellen, das finale Bild herunterladen oder teilen.

Der Bildschirm stellt die ausgewählte Vorschau zum Herunterladen oder Teilen bereit.

So funktioniert es

  1. Das generierte Bild der Frisurenvorschau erscheint als Abschlussvorschau.
  2. Das Aufnahmemodul erstellt einen Screenshot oder ein kurzes bearbeitetes Video.
  3. Die Anwendung stellt ein herunterladbares und ein teilbares Abschlussbild bereit.
  • Screenshot-Aufnahme
  • Steuerung für Videoaufnahmen
  • Herunterladen und Teilen
Frisurenergebnis speichern und teilen

Frisurenergebnis speichern und teilen

Funktionen auf diesem Bildschirm
Screenshots aufnehmen

Was die Lösung ermöglicht

Mit dieser Lösung kann der Salon:

  • Frisurenoptionen auf dem eigenen Gesicht des Gastes zeigen
  • Live-Kameravorschauen während der Stylingberatung anbieten
  • KI-empfohlene Frisuren anhand eines Gesichtsbildes vergleichen
  • Gesichtszüge in generierten Frisurenvorschauen bewahren
  • Bilder zum Herunterladen oder Teilen speichern
  • Einen anschaulicheren Weg zu Entscheidungen über Styling-Dienstleistungen schaffen

Letztendlich

Letztendlich wurde die Lösung entwickelt, um die Unsicherheit auf dem Weg vom Erscheinungsbild des Gastes zur Frisurenentscheidung zu verringern und das Interesse an Styling-Dienstleistungen zu unterstützen.

FAQ

Sie möchten ein ähnliches System entwickeln? Lesen Sie die Antworten unten, um zu erfahren, wie die wichtigsten Produktentscheidungen zusammenspielen.