Guida al rilevamento dei punti di riferimento dei volti per il web

L'attività Indicatore del volto di MediaPipe ti consente di rilevare i punti di riferimento e le espressioni facciali all'interno di immagini e video. Con questa attività puoi identificare le espressioni facciali umane, applicare filtri ed effetti facciali e creare avatar virtuali. Questa attività utilizza modelli di machine learning (ML) che possono funzionare con immagini singole o un flusso continuo di immagini. L'attività genera punti di riferimento tridimensionali dei volti, i punteggi di miscelazione (coefficienti che rappresentano l'espressione facciale) per dedurre le superfici facciali dettagliate in tempo reale e le matrici di trasformazione per eseguire le trasformazioni richieste per il rendering degli effetti.

Queste istruzioni mostrano come utilizzare lo strumento di riferimento dei volti per le app web e JavaScript. Per ulteriori informazioni sulle funzionalità, sui modelli e sulle opzioni di configurazione di questa attività, consulta la Panoramica.

Esempio di codice

Il codice di esempio per Riferimento per volto fornisce un'implementazione completa di questa attività in JavaScript come riferimento. Questo codice ti consente di testare questa attività e di iniziare a creare la tua app per l'indicatore dei volti. Puoi visualizzare, eseguire e modificare il codice di esempio di Face Scoreer usando semplicemente il tuo browser web.

Configurazione

In questa sezione vengono descritti i passaggi chiave per configurare l'ambiente di sviluppo in modo specifico per l'utilizzo di Riferimento volto. Per informazioni generali sulla configurazione dell'ambiente di sviluppo web e JavaScript, inclusi i requisiti di versione della piattaforma, consulta la Guida alla configurazione per il web.

Pacchetti JavaScript

Il codice del punto di riferimento del volto è disponibile tramite il pacchetto @mediapipe/tasks-vision NPM di MediaPipe. Puoi trovare e scaricare queste librerie seguendo le istruzioni nella Guida alla configurazione della piattaforma.

Puoi installare i pacchetti richiesti tramite Gestione dei partner di rete utilizzando il seguente comando:

npm install @mediapipe/tasks-vision

Se vuoi importare il codice dell'attività tramite un servizio di rete CDN (Content Delivery Network), aggiungi il seguente codice nel tag <head> del file HTML:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Modello

L'attività Riferimento per volti di MediaPipe richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per l'indicatore di riferimento dei volti, consulta la sezione Modelli della panoramica dell'attività.

Seleziona e scarica un modello, quindi archivialo all'interno della directory del progetto:

<dev-project-root>/app/shared/models/

Creare l'attività

Utilizza una delle funzioni createFrom...() dello strumento di riferimento dei volti per preparare l'attività per l'esecuzione di inferenze. Utilizza la funzione createFromModelPath() con un percorso relativo o assoluto al file del modello addestrato. Se il modello è già stato caricato in memoria, puoi utilizzare il metodo createFromModelBuffer().

L'esempio di codice riportato di seguito mostra l'utilizzo della funzione createFromOptions() per configurare l'attività. La funzione createFromOptions consente di personalizzare l'indicatore di riferimento del volto con opzioni di configurazione. Per ulteriori informazioni, consulta Opzioni di configurazione.

Il codice seguente mostra come creare e configurare l'attività con opzioni personalizzate:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const faceLandmarker = await faceLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

Opzioni di configurazione

Questa attività prevede le seguenti opzioni di configurazione per le applicazioni web e JavaScript:

Nome opzione Descrizione Intervallo di valori Valore predefinito
running_mode Imposta la modalità di esecuzione per l'attività. Esistono due modalità:

IMAGE: la modalità per gli input di singole immagini.

VIDEO: la modalità per i fotogrammi decodificati di un video o durante un live streaming di dati di input, ad esempio da una videocamera.
{IMAGE, VIDEO} IMAGE
numFaces Il numero massimo di volti che possono essere rilevati dall'FaceLandmarker. Il perfezionamento viene applicato solo quando num_faces è impostato su 1. Integer > 0 1
minFaceDetectionConfidence Il punteggio di affidabilità minimo affinché il rilevamento dei volti venga considerato efficace. Float [0.0,1.0] 0.5
minFacePresenceConfidence Il punteggio di affidabilità minimo del punteggio della presenza di un volto nel rilevamento dei punti di riferimento del volto. Float [0.0,1.0] 0.5
minTrackingConfidence Il punteggio di affidabilità minimo affinché il monitoraggio dei volti venga considerato efficace. Float [0.0,1.0] 0.5
outputFaceBlendshapes Consente di impostare l'output delle forme dei volti in Tracciato dei volti. Le forme di fusione dei volti vengono utilizzate per il rendering del modello del volto 3D. Boolean False
outputFacialTransformationMatrixes Indica se FaceLandMark restituisce la matrice di trasformazione facciale. FaceLandMark utilizza la matrice per trasformare i punti di riferimento dei volti da un modello del volto canonico al volto rilevato, in modo che gli utenti possano applicare effetti sui punti di riferimento rilevati. Boolean False

Preparazione dei dati

La funzionalità di riferimento per i volti può rilevare i volti nelle immagini in qualsiasi formato supportato dal browser host. L'attività gestisce anche la pre-elaborazione dell'input, come ridimensionamento, rotazione e normalizzazione del valore. Per contrassegnare i volti nei video, puoi utilizzare l'API per elaborare rapidamente un fotogramma alla volta, utilizzando il timestamp del fotogramma per determinare quando i volti compaiono nel video.

Esegui l'attività

L'indicatore di riferimento dei volti utilizza i metodi detect() (con modalità di corsa IMAGE) e detectForVideo() (con modalità di corsa VIDEO) per attivare le inferenze. L'attività elabora i dati, tenta di assegnare un punto di riferimento ai volti e quindi registra i risultati.

Le chiamate ai metodi del punto di riferimento detect() e detectForVideo() vengono eseguite in modo sincrono e bloccano il thread dell'interfaccia utente. Se rilevi volti nei fotogrammi video della fotocamera di un dispositivo, ogni rilevamento blocca il thread principale. Puoi evitare che ciò accada implementando i web worker per l'esecuzione dei metodi detect() e detectForVideo() su un altro thread.

Il seguente codice mostra come eseguire l'elaborazione con il modello di attività:

Immagine

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

Video

await faceLandmarker.setOptions({ runningMode: "VIDEO" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const faceLandmarkerResult = faceLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Per un'implementazione più completa dell'esecuzione di un'attività Riferimento volti, vedi l'esempio di codice.

Gestire e visualizzare i risultati

La funzionalità di riferimento per i volti restituisce un oggetto risultato per ogni esecuzione di rilevamento. L'oggetto risultato contiene un mesh per i volti per ogni volto rilevato, con coordinate per ogni punto di riferimento dei volti. Facoltativamente, l'oggetto risultato può anche contenere forme di fusione, che denotano le espressioni facciali, e una matrice di trasformazione facciale per applicare effetti del volto sui punti di riferimento rilevati.

Di seguito è riportato un esempio dei dati di output di questa attività:

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

L'immagine seguente mostra una visualizzazione dell'output dell'attività:

Il codice di esempio di Punti di riferimento volti mostra come visualizzare i risultati restituiti dall'attività. Consulta l'esempio di codice