PROJEKT

Zmiana fryzury AI do wirtualnego podglądu fryzur

Tworzenie oprogramowania na zamówienie, Skanowanie twarzy, AR na żywo z kamerą, Rekomendacje fryzur AI, Wirtualne przymierzanie, Tworzenie aplikacji mobilnych, Tworzenie aplikacji webowych

  • Branża: Usługi beauty
  • Wielka Brytania Lokalizacja: Wielka Brytania
  • Czas realizacji: 10 tygodnie
  • Technologie: JavaScript / TypeScript (Node.js), Python
3 miesięcy

Ten salon kosmetyczny pomaga klientom wybierać fryzury przed wizytą, jednak opis lub statyczne zdjęcie nie pokazują, jak dana fryzura będzie wyglądać na prawdziwej twarzy. Zmiana fryzury AI przyjmuje selfie, przesłane zdjęcie lub obraz z kamery na żywo i zwraca podgląd fryzury z zachowaniem cech twarzy użytkownika. Stylista i klient mogą porównywać opcje, oglądać efekt z kamery na żywo i zapisać wybrane zdjęcie do dalszej rozmowy.

Podsumowanie

Problem

Salon potrzebuje prostszego sposobu pokazania klientom, jak różne fryzury mogą wyglądać przed wizytą.

Rozwiązanie

Powstała aplikacja do skanowania twarzy i wirtualnego przymierzania fryzur na selfie, przesłanych zdjęciach i obrazie z kamery na żywo.

Rezultat

Oprogramowanie ma pomóc salonowi zwiększyć zainteresowanie usługami stylizacji dzięki bardziej wizualnym odpowiedziom przed podjęciem decyzji.

Historia klienta

Klientem jest salon kosmetyczny z Wielkiej Brytanii. Obsługuje osoby, które chcą porównać fryzury przed wizytą.

Salon potrzebuje prezentować fryzury na selfie, przesłanym zdjęciu lub obrazie z kamery na żywo. Rozwiązanie wspiera klientów i stylistów podczas wyboru fryzury.

Prośba była prosta: obsługiwać różne obrazy i źródła z kamery, śledzić cechy twarzy, zapewniać podgląd fryzur w czasie rzeczywistym oraz generować obrazy zachowujące wygląd klienta.

Rozwiązanie zaprojektowano jako krótką ścieżkę od skanowania twarzy przez wybór fryzury, podgląd na żywo i rekomendacje aż po zapisanie rezultatu. Z doświadczenia mogą korzystać styliści i klienci.

Klient poprosił o

  1. Obsługę selfie, przesyłanych zdjęć, obrazu z kamery na żywo i danych o wyglądzie.
  2. Śledzenie twarzy, cech twarzy, atrybutów ciała lub dłoni za pomocą AI.
  3. Wyświetlanie podglądu efektów beauty i fryzur AR w czasie rzeczywistym.
  4. Generowanie obrazów, kompozycji, awatarów lub podglądów użytkownika.

Dlaczego gotowe oprogramowanie nie wystarczyło

Gotowe platformy rzeczywistości rozszerzonej umieszczają wirtualne obiekty w obrazie z kamery, a ogólne produkty do wirtualnego przymierzania koncentrują się na generowanych obrazach. Standardowy system dopasowywania twarzy porównuje twarze, ale nie łączy transferu fryzur, zachowania cech twarzy, podglądu na żywo i rekomendacji fryzur w jednym doświadczeniu salonowym.

Opis projektu

Rozwiązanie zaprojektowano jako responsywną aplikację przeglądarkową z wersją mobilną na iOS i Androida. Przejrzysty ekran startowy umożliwia skanowanie kamerą lub przesłanie selfie, a następnie wyświetla katalog fryzur przed rozpoczęciem podglądu.

Do analizy twarzy wykorzystano skanowanie oraz punkty charakterystyczne twarzy jako podstawę wyrównania. Podgląd na żywo nakłada wybraną fryzurę na śledzoną twarz, zachowując jej cechy i odcień skóry w przetworzonym obrazie.

Ekran rekomendacji umożliwia porównywanie fryzur na podstawie obrazu twarzy użytkownika. Karty rekomendacji, miniatury, zastosowany podgląd i obszar wyjaśnień łączą wybór z rzeczywistym wyglądem użytkownika.

Końcowy ekran gromadzi wybrany podgląd w jednym miejscu, aby można było go przechwycić, pobrać lub udostępnić. Modułowa struktura pozwala także później dodać rekomendacje stylizacji, katalogi i integracje administracyjne.

Dostarczone kluczowe funkcje

  • Selfie, przesyłanie zdjęć i obraz z kamery na żywo
  • Skanowanie twarzy ze wskazówkami śledzenia
  • Nakładanie fryzury na śledzoną twarz na żywo
  • Rekomendacje fryzur AI
  • Ekstrakcja cech twarzy do dopasowania stylu
  • Zachowanie cech twarzy i odcienia skóry
  • Katalog fryzur i wybór stylu
  • Przechwytywanie zrzutów ekranu
  • Obrazy końcowe do pobrania i udostępnienia

Można dodać

+ Nagrywanie krótkich filmów + Edycję wideo + Transfer fryzur między obrazami twarzy + Nakładki beauty + Integrację z katalogiem stylizacji + Narzędzia administracyjne

Kto jeszcze może korzystać z tego rozwiązania

Te firmy mają podobne zadanie związane z wyborem wizualnym, a to samo rozwiązanie można dostosować do ich produktów, stylów i ścieżki klienta.

Usługa modowa i personal stylingu

Zadanie Rekomenduje stroje, kolory, dodatki lub kompletne stylizacje na podstawie cech i preferencji użytkownika.
Jak pomaga rozwiązanie Rozwiązanie może łączyć analizę twarzy lub wyglądu z wizualnymi rekomendacjami i podglądami do udostępniania.
Studia kreatywne

Firma z branży okularów, pielęgnacji paznokci lub włosów

Zadanie Musi pokazywać klientom, jak produkt lub styl może wyglądać przed zakupem albo zabiegiem.
Jak pomaga rozwiązanie Ta sama podstawa obejmująca kamerę i śledzenie twarzy może prezentować wirtualny podgląd wybranych produktów lub stylów.
Sklepy z branży urody i wellness

Sprzedawca odzieży

Zadanie Potrzebuje treści wizualnych generowanych przez AI lub opartych na awatarach, bez fizycznych sesji zdjęciowych.
Jak pomaga rozwiązanie Rozwiązanie może generować podglądy oparte na wyglądzie i przechwytywać treści wizualne do wykorzystania w kontakcie z klientem.
Sprzedaż detaliczna odzieży

Technologie

JavaScript / TypeScript (Node.js)

Warstwa aplikacji webowej i mobilnej

Ta rodzina języków obsługuje interfejs przeglądarkowy i wieloplatformową aplikację mobilną.

Python

Przetwarzanie uczenia maszynowego i obrazu

Python obsługuje biblioteki analizy twarzy i uczenia maszynowego wykorzystane w projekcie.

vue

Responsywny interfejs webowy

vue (framework do tworzenia nowoczesnych interfejsów webowych) organizuje doświadczenie w przeglądarce.

react

Komponenty interfejsu użytkownika

react (biblioteka do tworzenia interfejsów użytkownika) wspiera wymagane komponenty interfejsu.

deepar

Efekty AR w przeglądarce

deepar (webowy SDK do efektów kamery i rzeczywistości rozszerzonej) zapewnia nakładki fryzur i efektów beauty na żywo.

opencv

Przetwarzanie obrazu komputerowego

opencv (biblioteka widzenia komputerowego) wspiera przetwarzanie obrazów i klatek z kamery.

tensorflow

Modele uczenia maszynowego

tensorflow (framework uczenia maszynowego open source) wspiera przetwarzanie obrazów i cech oparte na AI.

mediapipe

Rozwiązania uczenia maszynowego

mediapipe (zestaw narzędzi do tworzenia rozwiązań uczenia maszynowego na urządzeniach mobilnych, brzegowych, w chmurze i w internecie) wspiera przetwarzanie twarzy w projekcie.

dlib

Analiza cech twarzy

dlib (zestaw narzędzi uczenia maszynowego i widzenia komputerowego) wspiera przetwarzanie cech twarzy.

@capacitor/ios and @capacitor/android

Pakowanie na iOS i Androida

Capacitor pakuje aplikację JavaScript i webową jako aplikacje mobilne na iOS i Androida.

Integracje

Device camera

Aplikacja odbiera obraz wideo z kamery na żywo i przechwytuje obrazy do skanowania twarzy oraz podglądów.

iOS and Android

Capacitor łączy aplikację z obsługiwanymi urządzeniami mobilnymi i ich kamerami.

Web browser

Responsywna wersja przeglądarkowa przetwarza przesłane selfie i obraz z kamery na żywo.

Rezultat

Przejrzysty punkt startowy dla każdego wyboru fryzury

Pierwszy ekran upraszcza początek wizyty: skanowanie kamerą lub przesłane selfie prowadzi do katalogu fryzur. Ekran zawiera wskazówki dotyczące skanowania twarzy i kafelek podglądu wybranego stylu.

Jak to działa

  1. Kamera zapewnia obraz na żywo lub aplikacja otrzymuje przesłane selfie.
  2. Moduł skanowania twarzy odczytuje twarz i pokazuje status skanowania.
  3. Katalog fryzur udostępnia przykłady, a wybrany styl pojawia się w kafelku podglądu.
  • Obraz z kamery i zdjęcia
  • Wskazówki skanowania twarzy
  • Wybór fryzury
Zeskanuj twarz i wybierz fryzurę

Zeskanuj twarz i wybierz fryzurę

Funkcje na tym ekranie
Przechwytywanie obrazów kamerą Skanowanie twarzy Rekomendacja fryzury AI

Podgląd na żywo dopasowany do śledzonej twarzy

Drugi ekran zamienia wybrany styl w podgląd z kamery w czasie rzeczywistym. Punkty charakterystyczne twarzy lub siatka twarzy utrzymują nakładkę fryzury we właściwym miejscu, gdy obraz z kamery się zmienia.

Podgląd służy do szybkiego porównywania i zawiera w tym samym widoku wybór stylu, przycisk resetowania oraz opcję przechwycenia obrazu.

Jak to działa

  1. Obraz z kamery na żywo dostarcza bieżący obraz.
  2. deepar (SDK webowych efektów AR) i moduł śledzenia twarzy rozpoznają położenie twarzy oraz jej punkty charakterystyczne.
  3. Wybrana fryzura zostaje przeniesiona na śledzoną twarz, a cechy twarzy pozostają widoczne w przetworzonej klatce podglądu.
  • Śledzenie twarzy
  • Zastosowana nakładka fryzury
  • Przyciski przechwytywania i resetowania
Zobacz podgląd fryzury na żywo

Zobacz podgląd fryzury na żywo

Funkcje na tym ekranie
Wykrywanie twarzy w czasie rzeczywistym Przetwarzanie obrazów w czasie rzeczywistym Transfer fryzur Zachowanie cech twarzy

Rekomendacje powiązane z twarzą użytkownika

Ekran rekomendacji prezentuje opcje fryzur wygenerowane na podstawie obrazu twarzy użytkownika. Karty, miniatury i zastosowany podgląd pozwalają klientowi porównywać style.

Obszar wyjaśnień prezentuje uzasadnienie rekomendacji obok zastosowanego podglądu.

Jak to działa

  1. Przesłany lub przechwycony obraz twarzy dostarcza dane do ekstrakcji cech.
  2. Moduł rekomendacji analizuje cechy twarzy i zwraca rekomendowane fryzury.
  3. Zastosowany podgląd fryzury i wyjaśnienie rekomendacji pokazują wybrany rezultat.
  • Podgląd twarzy
  • Karty rekomendacji
  • Miniatury fryzur
Porównaj rekomendowane fryzury

Porównaj rekomendowane fryzury

Funkcje na tym ekranie
Ekstrakcja cech twarzy Rekomendacja fryzury AI Wyjaśnienie rekomendacji

Zapisany rezultat do dalszej rozmowy

Końcowy ekran zamienia wybrany podgląd w obraz do udostępnienia. Stylista lub klient może wykonać zrzut ekranu, przygotować krótkie nagranie, pobrać końcowy obraz lub go udostępnić.

Ekran udostępnia wybrany podgląd do pobrania lub udostępnienia.

Jak to działa

  1. Wygenerowany obraz podglądu fryzury pojawia się jako podgląd końcowy.
  2. Moduł przechwytywania tworzy zrzut ekranu lub krótki edytowany film.
  3. Aplikacja udostępnia końcowy obraz do pobrania i udostępnienia.
  • Przechwytywanie zrzutów ekranu
  • Elementy sterowania nagrywaniem wideo
  • Pobieranie i udostępnianie
Zapisz i udostępnij efekt stylizacji

Zapisz i udostępnij efekt stylizacji

Funkcje na tym ekranie
Przechwytywanie zrzutów ekranu

Co zapewnia rozwiązanie

Dzięki temu rozwiązaniu salon może:

  • Pokazywać fryzury na własnej twarzy klienta
  • Oferować podgląd z kamery na żywo podczas rozmowy o stylizacji
  • Porównywać fryzury rekomendowane przez AI na podstawie obrazu twarzy
  • Zachowywać cechy twarzy w wygenerowanych podglądach fryzur
  • Zapisywać obrazy do pobrania lub udostępnienia
  • Tworzyć bardziej wizualną ścieżkę podejmowania decyzji dotyczących usług stylizacji

Podsumowanie

Ostatecznie rozwiązanie ma ograniczyć niepewność na drodze od wyglądu klienta do decyzji o fryzurze i wspierać większe zainteresowanie usługami stylizacji.

FAQ

Myślisz o stworzeniu podobnego systemu? Przeczytaj odpowiedzi poniżej, aby zobaczyć, jak łączą się najważniejsze decyzje dotyczące produktu.

Potrzebujesz czegoś podobnego? Porozmawiajmy
Lub zobacz więcej projektów