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:
