Leitfaden zur Gesichtsstilisierung für das Web

<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 .

<ph type="x-smartling-placeholder">

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: