Guida alla stilizzazione dei volti per il web

L'attività Stilizzazione facciale di MediaPipe consente di applicare stilizzazioni dei volti ai volti di un'immagine. Puoi utilizzare questa attività per creare avatar virtuali in vari stili.

L'esempio di codice descritto in queste istruzioni è disponibile su GitHub. 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 Stilista facciale 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 la stilizzazione dei volti. Puoi visualizzare, eseguire e modificare il codice di esempio dello Stylizer per il viso utilizzando solo il browser web.

Configurazione

In questa sezione vengono descritti i passaggi chiave per configurare l'ambiente di sviluppo in modo specifico per l'utilizzo di Stilista per il viso. 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 dello stilista per il viso è 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à con 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 -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Modello

L'attività MediaPipe Face Stylizer richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per lo stilista del viso, 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 stilista del viso per preparare l'attività all'esecuzione delle inferenze. Utilizza la funzione createFromModelPath() con un percorso relativo o assoluto al file del modello addestrato. Se il modello è già 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 lo stilista del viso con 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 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"
      },
    });

Preparazione dei dati

Lo stilo per il viso può stilizzare i volti nelle immagini in qualsiasi formato supportato dal browser host. L'attività gestisce anche la pre-elaborazione dell'input, tra cui il ridimensionamento, la rotazione e la normalizzazione dei valori.

Esegui l'attività

Lo stilista per il viso utilizza il metodo stylize() per attivare le inferenze. L'attività elabora i dati, tenta di stilizzare i volti e poi registra i risultati. Le chiamate al metodo stylize() di Stilista facciale vengono eseguite in modo sincrono e bloccano il thread dell'interfaccia utente.

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

const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);

Gestire e visualizzare i risultati

Lo stilo per il viso restituisce un oggetto MPImage con una stilizzazione del volto più in evidenza all'interno dell'immagine di input.

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

L'output riportato sopra è stato creato applicando il modello Schizzo a colori alla seguente immagine di input: