<ph type="x-smartling-placeholder">
Mit der Aufgabe „MediaPipe Face Stylizer“ können Sie Gesichterstilisierungen auf Gesichter in einem Bild anwenden. Mit dieser Aufgabe können Sie virtuelle Avatare in verschiedenen Stilen erstellen.
Das in dieser Anleitung beschriebene Codebeispiel ist auf GitHub Weitere Informationen zu Funktionen, Modellen und Konfigurationsoptionen Sehen Sie sich die Übersicht an.
Codebeispiel
Der Beispielcode für Face Stylizer ermöglicht eine vollständige Implementierung dieses in JavaScript ausführen. Mit diesem Code können Sie diese Aufgabe testen und mit der Entwicklung deiner eigenen App zur Gesichtsstilisierung. Sie können Daten abrufen, ausführen und Bearbeiten Sie das Beispiel Face Stylizer“ nur mithilfe der Web- Browser.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung beschrieben. um den Gesichtsstil zu verwenden. Allgemeine Informationen zum Einrichten der Web- und JavaScript-Entwicklungsumgebung, einschließlich Plattformversion finden Sie im Einrichtungsleitfaden für das Web.
JavaScript-Pakete
Der Face Stylizer-Code ist über MediaPipe @mediapipe/tasks-vision
verfügbar
NPM-Paket. Sie finden und
können Sie diese Bibliotheken herunterladen. Folgen Sie dazu der Anleitung auf der Plattform
.
Sie können die erforderlichen Pakete mit dem folgenden Befehl über NPM installieren:
npm install @mediapipe/tasks-vision
Wenn Sie den Aufgabencode mit einem Content Delivery Network (CDN) importieren möchten Dienst hinzufügen, fügen Sie den folgenden Code in den <head>-Abschnitt Tag in Ihrer HTML-Datei:
<!-- 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 Aufgabe „MediaPipe Face Stylizer“ ist ein trainiertes Modell erforderlich, das mit diesem für die Aufgabe. Weitere Informationen zu verfügbaren trainierten Modellen für den Face Stylizer findest du unter in der Aufgabenübersicht im Abschnitt „Modelle“.
Wählen Sie ein Modell aus, laden Sie es herunter und speichern Sie es dann in Ihrem Projektverzeichnis:
<dev-project-root>/app/shared/models/
Aufgabe erstellen
Verwenden Sie eine der createFrom...()
-Funktionen für den Gesichtsstil, um die Aufgabe auf
ausgeführte Inferenzen. Die createFromModelPath()
-Funktion mit einem relativen oder
absoluten Pfad zur Datei des trainierten Modells führt. Wenn Ihr Modell bereits in
Arbeitsspeicher, können Sie die Methode createFromModelBuffer()
verwenden.
Im Codebeispiel unten wird gezeigt, wie Sie mit der Funktion createFromOptions()
die Aufgabe eingerichtet haben. Mit der Funktion createFromOptions
können Sie die
Face Stylizer mit Konfigurationsoptionen
Der folgende Code zeigt, wie Sie die Aufgabe mit benutzerdefinierten Optionen:
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
Face Stylizer kann Gesichter in Bildern in jedem vom Host unterstützten Format stilisieren Browser. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertnormalisierung.
Aufgabe ausführen
Der Face Stylizer verwendet die Methode stylize()
, um Inferenzen auszulösen. Die Aufgabe
verarbeitet die Daten, versucht, Gesichter zu stilisieren, und meldet dann die Ergebnisse.
Aufrufe der Face Stylizer-Methode stylize()
werden synchron ausgeführt und blockieren den
Benutzeroberflächen-Threads.
Der folgende Code zeigt, 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 Face Stylizer gibt ein MPImage
-Objekt mit dem
auffälliges Gesicht im Eingabebild.
Im Folgenden sehen Sie ein Beispiel für die Ausgabedaten dieser Aufgabe:
Die obige Ausgabe wurde durch Anwenden der Farbskizze erstellt. in das folgende Eingabebild ein: