L'attività MediaPipe Face Stylizer ti consente di applicare stilizzazioni ai volti in 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 Face Stylizer fornisce un'implementazione completa di questa attività in JavaScript come riferimento. Questo codice ti aiuta a testare questa attività e a iniziare a creare la tua app di stilizzazione del viso. Puoi visualizzare, eseguire e modificare il codice di esempio di Face Stylizer utilizzando solo il browser web.
Configurazione
Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo specificamente per utilizzare Face Stylizer. Per informazioni generali sulla configurazione dell'ambiente di sviluppo web e JavaScript, inclusi i requisiti della versione della piattaforma, consulta la guida alla configurazione per il web.
Pacchetti JavaScript
Il codice di Face Stylizer è disponibile tramite il pacchetto @mediapipe/tasks-vision
NPM di MediaPipe. Puoi trovare e scaricare queste librerie seguendo le istruzioni riportate nella guida alla configurazione della piattaforma.
Puoi installare i pacchetti richiesti tramite NPM 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à di stilizzazione del viso di MediaPipe richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per Face Stylizer, consulta la sezione Modelli della panoramica dell'attività.
Seleziona e scarica un modello, quindi memorizzalo nella directory del progetto:
<dev-project-root>/app/shared/models/
Crea l'attività
Utilizza una delle funzioni di Face Stylizer createFrom...() per preparare l'attività per l'esecuzione delle inferenze. Utilizza la funzione createFromModelPath() con un percorso relativo o assoluto al file del modello addestrato. Se il modello è già caricato nella 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 ti consente di personalizzare il visualizzatore di stili per il viso con le opzioni di configurazione.
Il seguente codice 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
Face Stylizer può stilizzare i volti nelle immagini in qualsiasi formato supportato dal browser ospitante. L'attività gestisce anche la preelaborazione dell'input dei dati, tra cui il ridimensionamento, la rotazione e la normalizzazione dei valori.
Esegui l'attività
Face Stylizer utilizza il metodo stylize() per attivare le inferenze. L'attività elabora i dati, tenta di stilizzare i volti e poi genera un report sui risultati.
Le chiamate al metodo Face Stylizer stylize() 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
La funzionalità Stilizzazione viso restituisce un oggetto MPImage con una stilizzazione del volto più prominente 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 Bozzetto a colori alla seguente immagine di input:
