Mit der MediaPipe-Aufgabe „Gesichtsstilisierung“ können Sie Gesichter in einem Bild stilisieren. Mit dieser Aufgabe können Sie virtuelle Avatare in verschiedenen Stilen erstellen.
Das in dieser Anleitung beschriebene Codebeispiel ist auf GitHub verfügbar. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.
Codebeispiel
Der Beispielcode für den Face Stylizer bietet eine vollständige Implementierung dieser Aufgabe in JavaScript als Referenz. Mit diesem Code können Sie diese Aufgabe testen und mit dem Erstellen Ihrer eigenen App zum Stilisieren von Gesichtern beginnen. Sie können den Beispielcode für den Face Stylizer ganz einfach in Ihrem Webbrowser aufrufen, ausführen und bearbeiten.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zur Einrichtung Ihrer Entwicklungsumgebung speziell für die Verwendung von Face Stylizer beschrieben. Allgemeine Informationen zum Einrichten Ihrer Web- und JavaScript-Entwicklungsumgebung, einschließlich Anforderungen an die Plattformversion, finden Sie im Einrichtungsleitfaden für das Web.
JavaScript-Pakete
Der Code für den Face-Styler ist über das @mediapipe/tasks-vision MediaPipe-NPM-Paket verfügbar. Folgen Sie der Anleitung im Einrichtungsleitfaden, um diese Bibliotheken zu finden und herunterzuladen.
Sie können die erforderlichen Pakete über NPM mit dem folgenden Befehl installieren:
npm install @mediapipe/tasks-vision
Wenn Sie den Aufgabencode mit einem CDN-Dienst (Content Delivery Network) importieren möchten, fügen Sie in Ihrer HTML-Datei im <head>-Tag den folgenden Code ein:
<!-- 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>
Modell
Für die MediaPipe-Aufgabe „Gesichtsstilisierung“ ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für den Face-Styler finden Sie in der Aufgabenübersicht im Abschnitt „Modelle“.
Wählen Sie ein Modell aus, laden Sie es herunter und speichern Sie es in Ihrem Projektverzeichnis:
<dev-project-root>/app/shared/models/
Aufgabe erstellen
Verwenden Sie eine der createFrom...()-Funktionen des Face-Stylizers, um die Aufgabe für die Durchführung von Inferenzen vorzubereiten. Verwenden Sie die Funktion createFromModelPath() mit einem relativen oder absoluten Pfad zur Datei des trainierten Modells. Wenn Ihr Modell bereits in den Arbeitsspeicher geladen ist, können Sie die Methode createFromModelBuffer() verwenden.
Im folgenden Codebeispiel wird gezeigt, wie die Aufgabe mit der Funktion createFromOptions() eingerichtet wird. Mit der Funktion createFromOptions können Sie den Face-Styler mit Konfigurationsoptionen anpassen.
Im folgenden Code wird gezeigt, wie die Aufgabe mit benutzerdefinierten Optionen erstellt und konfiguriert wird:
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"
},
});
Daten vorbereiten
Mit dem Tool „Gesichtsstilisierung“ können Gesichter in Bildern in jedem vom Host-Browser unterstützten Format gestaltet werden. Die Aufgabe umfasst auch die Vorverarbeitung der Dateneingabe, einschließlich Größenänderung, Drehung und Wertnormalisierung.
Aufgabe ausführen
Der Face-Styler verwendet die Methode stylize(), um Inferenzen auszulösen. Die Aufgabe verarbeitet die Daten, versucht, Gesichter zu stilisieren, und meldet dann die Ergebnisse.
Aufrufe der Methode stylize() des Face-Stylers werden synchron ausgeführt und blockieren den UI-Thread.
Im folgenden Code wird gezeigt, wie die Verarbeitung mit dem Aufgabenmodell ausgeführt wird:
const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);
Ergebnisse verarbeiten und anzeigen
Der Gesichtsstilizer gibt ein MPImage-Objekt mit einer Stilisierung des auffälligsten Gesichts im Eingabebild zurück.
Im Folgenden finden Sie ein Beispiel für die Ausgabedaten dieser Aufgabe:
Die obige Ausgabe wurde erstellt, indem das Modell Farbskizze auf das folgende Eingabebild angewendet wurde:
