Zadanie MediaPipe Stylizer pozwala stosować style twarzy do twarzy na zdjęciu. Możesz używać tego zadania do tworzenia wirtualnych awatarów w różnych stylach.
Przykładowy kod opisany w tych instrukcjach jest dostępny na GitHub Więcej informacji o funkcjach, modelach i opcjach konfiguracji zapoznaj się z Przeglądem.
Przykładowy kod
Przykładowy kod Stylizatora twarzy zapewnia pełną implementację tego w JavaScripcie. Ten kod pomoże Ci przetestować to zadanie i zacznij tworzyć własną aplikację do stylizacji twarzy. Możesz wyświetlać, uruchamiać edytuj stylizator twarzy przykład kod tylko w przeglądarce. przeglądarki.
Konfiguracja
W tej sekcji znajdziesz najważniejsze czynności, które musisz wykonać, aby skonfigurować środowisko programistyczne. aby używać Stylizatora twarzy. Ogólne informacje o konfigurowaniu środowisko programistyczne stron internetowych i JavaScriptu, w tym wersja platformy wymagania znajdziesz w przewodniku konfiguracji witryn internetowych.
Pakiety JavaScript
Kod stylizatora twarzy jest dostępny w narzędziu MediaPipe @mediapipe/tasks-vision
Pakiet NPM. Możesz znaleźć
pobierz te biblioteki, postępując zgodnie z instrukcjami na platformie Konfiguracja
.
Wymagane pakiety możesz zainstalować za pomocą NPM za pomocą tego polecenia:
npm install @mediapipe/tasks-vision
Jeśli chcesz zaimportować kod zadania za pomocą sieci dostarczania treści (CDN) , dodaj następujący kod do sekcji <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 zgodnego z tym zadanie. Więcej informacji o dostępnych wytrenowanych modelach dotyczących stylizacji twarzy znajdziesz tutaj zapoznaj się z omówieniem zadania sekcją Modele.
Wybierz i pobierz model, a następnie zapisz go w katalogu projektu:
<dev-project-root>/app/shared/models/
Tworzenie zadania
Aby przygotować zadanie, użyj jednej z funkcji Stylizatora twarzy createFrom...()
prowadzone zależności. Używaj funkcji createFromModelPath()
z parametrami względnymi lub
bezwzględna ścieżka do pliku wytrenowanego modelu. Jeśli model jest już wczytany do
pamięci, możesz użyć metody createFromModelBuffer()
.
Poniższy przykładowy kod pokazuje użycie funkcji createFromOptions()
do
skonfigurować zadanie. Funkcja createFromOptions
pozwala dostosować
Stylizator twarzy z opcjami konfiguracji.
Poniższy kod pokazuje, jak utworzyć i skonfigurować zadanie z niestandardowym użyciem opcje:
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 gospodarza przeglądarki. Zadanie obejmuje również wstępne przetwarzanie danych wejściowych, w tym zmianę rozmiaru, rotacji i normalizacji wartości.
Uruchamianie zadania
Styl twarzy używa metody stylize()
do aktywowania wnioskowania. Zadanie
przetwarza dane, próbuje stylizować twarze, a następnie zgłasza wyniki.
Wywołania metody stylize()
Stylizatora twarzy są uruchamiane synchronicznie i blokują
wątku interfejsu.
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ą o największej
wyraźną twarz na obrazie wejściowym.
Poniżej znajdziesz przykładowe dane wyjściowe tego zadania:
Powyższy wynik został utworzony przez zastosowanie szkicu kolorów. do następującego obrazu wejściowego: