Zadanie MediaPipe Face Stylizer umożliwia stylizowanie twarzy na obrazie. Za pomocą tego zadania możesz tworzyć wirtualnych awatarów 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 związanych z tym zadaniem znajdziesz w sekcji Omówienie.
Przykładowy kod
Przykładowy kod usługi Face Stylizer zawiera kompletną implementację tego zadania w języku JavaScript. Ten kod pomoże Ci przetestować to zadanie i rozpocząć tworzenie własnej aplikacji do stylizacji twarzy. Możesz wyświetlać, uruchamiać i edytować przykładowy kod Face Stylizer za pomocą przeglądarki.
Konfiguracja
W tej sekcji opisaliśmy kluczowe kroki konfigurowania środowiska programistycznego, które są niezbędne do korzystania z Face Stylizera. Informacje ogólne o konfigurowaniu środowiska programowania stron internetowych i JavaScriptu, w tym wymagania dotyczące wersji platformy, znajdziesz w przewodniku po konfiguracji dla stron internetowych.
Pakiety JavaScript
Kod Face Stylizer jest dostępny w pakiecie @mediapipe/tasks-vision
NPM MediaPipe. Te biblioteki możesz znaleźć i pobrać, wykonując instrukcje podane w przewodniku po konfiguracji platformy.
Wymagane pakiety możesz zainstalować za pomocą NPM, używając tego polecenia:
npm install @mediapipe/tasks-vision
Jeśli chcesz zaimportować kod zadania za pomocą usługi sieci dystrybucji treści (CDN), dodaj ten kod w 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 MediaPipe Face Stylizer wymaga wytrenowanego modelu, który jest zgodny z tym zadaniem. Więcej informacji o dostępnych wytrenowanych modelach usługi Face Stylizer znajdziesz w sekcji Modele w omówieniu zadania.
Wybierz i pobierz model, a potem zapisz go w katalogu projektu:
<dev-project-root>/app/shared/models/
Tworzenie zadania
Użyj jednej z funkcji Face Stylizera createFrom...(), aby przygotować zadanie do wykonywania wnioskowań. Użyj funkcji createFromModelPath() z względną lub bezwzględną ścieżką do wytrenowanego pliku modelu. Jeśli model został już załadowany do pamięci, możesz użyć metody createFromModelBuffer().
Przykładowy kod poniżej pokazuje użycie funkcji createFromOptions() do konfigurowania zadania. Funkcja createFromOptions umożliwia dostosowywanie Face Stylizera za pomocą opcji konfiguracji.
Poniższy kod pokazuje, jak utworzyć i skonfigurować zadanie za pomocą opcji niestandardowych:
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
Narzędzie Face Stylizer może stylizować twarze na obrazach w dowolnym formacie obsługiwanym przez przeglądarkę hosta. Zadanie to obejmuje też wstępną obróbkę danych wejściowych, w tym zmianę rozmiaru, obrót i normalizację wartości.
Uruchamianie zadania
Stylizator twarzy używa metody stylize() do wywoływania wniosków. Zadanie przetwarza dane, próbuje stylizować twarze, a potem przekazuje wyniki.
Wywołania metody Face Stylizera stylize() są wykonywane synchronicznie i blokują wątek interfejsu użytkownika.
Poniższy kod pokazuje, jak wykonać przetwarzanie za pomocą modelu zadania:
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 wyróżniającej się twarzy na obrazie wejściowym.
Poniżej znajdziesz przykład danych wyjściowych z tego zadania:
Wynik powyżej został utworzony przez zastosowanie modelu Rysunek kolorem do tego obrazu wejściowego:
