Zadanie Stylizatora twarzy MediaPipe umożliwia stosowanie stylów twarzy do twarzy na zdjęciu. Możesz tu tworzyć wirtualne awatary w różnych stylach.
Przykładowy kod opisany w tych instrukcjach jest dostępny na GitHub. Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w sekcji Omówienie.
Przykładowy kod
Przykładowy kod stylizatora twarzy umożliwia pełną implementację tego zadania w JavaScript. Ten kod ułatwia przetestowanie tego zadania i rozpoczęcie tworzenia własnej aplikacji do stylizacji twarzy. Możesz wyświetlić, uruchomić i edytować przykładowy kod stylizatora twarzy tylko w przeglądarce.
Konfiguracja
W tej sekcji opisujemy najważniejsze czynności, jakie należy wykonać, aby skonfigurować środowisko programistyczne pod kątem używania stylizatora twarzy. Ogólne informacje o konfigurowaniu środowiska programistycznego sieciowego i JavaScript, w tym o wymaganiach dotyczących wersji platformy, znajdziesz w przewodniku konfiguracji dla witryn internetowych.
Pakiety JavaScript
Kod stylizatora twarzy jest dostępny w pakiecie MediaPipe @mediapipe/tasks-vision
NPM. Aby znaleźć i pobrać te biblioteki, wykonaj instrukcje podane w przewodniku po konfiguracji dotyczącym platformy.
Wymagane pakiety możesz zainstalować za pomocą NPM przy użyciu tego polecenia:
npm install @mediapipe/tasks-vision
Aby zaimportować kod zadania przy użyciu usługi sieci dostarczania treści (CDN), dodaj ten kod do tagu <head> w pliku HTML:
<!-- You can replace JSDeliver with another CDN if you prefer -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Model
Zadanie Stylizatora twarzy MediaPipe wymaga wytrenowanego modelu zgodnego z tym zadaniem. Więcej informacji o dostępnych wytrenowanych modelach dotyczących stylizatora twarzy znajdziesz w omówieniu zadań w sekcji poświęconej modelom.
Wybierz i pobierz model, a następnie zapisz go w katalogu projektu:
<dev-project-root>/app/shared/models/
Tworzenie zadania
Użyj jednej z funkcji stylizatora twarzy createFrom...()
, aby przygotować zadanie do przeprowadzania wnioskowania. Użyj funkcji createFromModelPath()
ze ścieżką względną lub bezwzględną do wytrenowanego pliku modelu. Jeśli model jest już załadowany do pamięci, możesz użyć metody createFromModelBuffer()
.
Poniższy przykładowy kod pokazuje, jak skonfigurować zadanie za pomocą funkcji createFromOptions()
. Funkcja createFromOptions
umożliwia dostosowanie stylizatora twarzy za pomocą opcji konfiguracji.
Poniższy kod pokazuje, jak skompilować i skonfigurować zadanie z opcjami niestandardowymi:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facestylizer = await FaceStylizer.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_stylizer/blaze_face_stylizer/float32/latest/face_stylizer_color_sketch.task"
},
});
Przygotuj dane
Stylizator twarzy może stylizować twarze na obrazach w dowolnym formacie obsługiwanym przez przeglądarkę hosta. Zadaniem tego zadania jest również wstępne przetwarzanie danych wejściowych, w tym zmiana rozmiaru, rotacja i normalizacja wartości.
Uruchamianie zadania
Stylizator twarzy aktywuje wnioskowanie przy użyciu metody stylize()
. Zadanie przetwarza dane, próbuje określić styl twarzy, a potem zgłasza wyniki.
Wywołania metody Stylizacja twarzy stylize()
są uruchamiane synchronicznie i blokują wątek interfejsu użytkownika.
Ten kod pokazuje, jak wykonywać przetwarzanie za pomocą modelu zadań:
const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);
Obsługa i wyświetlanie wyników
Stylizator twarzy zwraca obiekt MPImage
ze stylizacją najbardziej widocznej twarzy na zdjęciu wejściowym.
Poniżej znajdziesz przykład danych wyjściowych z tego zadania:
Powyższe dane wyjściowe utworzono przez zastosowanie modelu Szkic kolorów do tego obrazu wejściowego: