Utilizza le TPU Coral Edge per eseguire modelli TFlite in Node con TensorFlow.js

1. Introduzione

Ultimo aggiornamento: 2022-04-11

In questo codelab, imparerai ad addestrare un modello di classificazione delle immagini utilizzando Teachable Machine e a eseguirlo con l'accelerazione hardware Coral utilizzando TensorFlow.js, una libreria di machine learning potente e flessibile per JavaScript. Creerai un'app Electron che visualizza le immagini da una webcam e le classifica utilizzando una TPU con bordo corallo. Una versione completamente funzionante di questo codelab è disponibile nel repo GitHub di sig-tfjs.

Devo avere un dispositivo corallo?

No. Puoi provare questo codelab senza un dispositivo Coral e ottenere comunque buone prestazioni su un computer desktop utilizzando l'acceleratore WebNN.

Cosa creerai

In questo codelab, creerai un'app Electron che classifica le immagini. La tua app:

• Classifica le immagini provenienti dalla webcam nelle categorie definite nel modello che hai addestrato.
• Utilizza un acceleratore corallo per aumentare le prestazioni, se disponibile.
• Utilizza WebNN per aumentare le prestazioni, se supportato dalla tua piattaforma.

Cosa imparerai a fare

• Come installare e configurare il pacchetto di Gestione dei partner di rete tfjs-tflite-node per eseguire modelli TFLite in Node.js.
• Come installare la libreria di runtime Edge TPU per eseguire i modelli su un dispositivo Coral.
• Come accelerare l'inferenza del modello utilizzando una TPU con bordi coralli.
• Come accelerare l'inferenza del modello con WebNN.

Questo codelab è incentrato su TFLite in Node.js. I concetti e i blocchi di codice non pertinenti sono trattati solo superficialmente e sono forniti solo per operazioni di copia e incolla.

Che cosa ti serve

Per completare questo codelab, ti servono:

• Un computer con una webcam.
• Per Coral, consigliamo un Raspberry Pi con Raspberry Pi OS (64 bit) con computer.
• Per WebNN, consigliamo una macchina Intel x86-64 con Ubuntu 20.04 o Windows 10.
• Versione di Node.js >= 12.
• Conoscenza di JavaScript.
• (Consigliato) Un acceleratore USB corallo per velocizzare il modello.

2. Configurazione

Ottieni il codice

Abbiamo inserito tutto il codice necessario per questo progetto in un repository Git. Per iniziare, recupera il codice e aprilo nel tuo ambiente di sviluppo preferito. Per questo codelab, ti consigliamo di utilizzare un Raspberry Pi con Raspberry Pi OS (64 bit) con computer. In questo modo è più semplice collegare un acceleratore di Corallo.

Vivamente consigliato: usa Git per clonare il repository su un Raspberry Pi

Per ottenere il codice, apri una nuova finestra del terminale e clona il repository:

git clone https://github.com/tensorflow/sig-tfjs.git

Tutti i file che devi modificare per il codelab si trovano nella directory tfjs-tflite-node-codelab (all'interno di sig-tfjs). In questa directory troverai le sottodirectory denominate starter_code, cpu_inference_working, coral_inference_working e webnn_inference_working. Questi sono i punti di controllo per i passaggi di questo codelab.

Tra gli altri file nel repository ci sono i pacchetti di Gestione dei partner di rete da cui dipende tfjs-tflite-node-codelab. Non dovrai modificare nessuno di questi file, ma dovrai eseguire alcuni dei loro test per assicurarti che il tuo ambiente sia configurato correttamente.

Installare la libreria di runtime Edge TPU

I dispositivi Coral richiedono l'installazione della libreria di runtime Edge TPU prima dell'utilizzo. Installalo seguendo le istruzioni relative alla tua piattaforma.

Su Linux / Raspberry Pi

Su Linux, la libreria è disponibile nel PPA di Google come pacchetto Debian, libedgetpu1-std, per architetture x86-64 e Armv8 (64 bit). Se il tuo processore utilizza un'architettura diversa, dovrai compilarla dal codice sorgente.

Esegui questo comando per aggiungere il PPA Coral di Google e installare la libreria runtime Edge TPU.

# None of this is needed on Coral boards
# This repo is needed for almost all packages below
echo "deb https://packages.cloud.google.com/apt coral-edgetpu-stable main" | sudo tee /etc/apt/sources.list.d/coral-edgetpu.list
# This repo is needed for only python3-coral-cloudiot and python3-coral-enviro
echo "deb https://packages.cloud.google.com/apt coral-cloud-stable main" | sudo tee /etc/apt/sources.list.d/coral-cloud.list

curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -

sudo apt-get update
sudo apt-get install libedgetpu1-std

Su Windows / altri sistemi operativi

I file binari precompilati sono disponibili per le versioni x86-64 di MacOS e Windows e, una volta scaricato, possono essere installati eseguendo lo script install.sh o install.bat nell'archivio.

Riavviare il dispositivo

Una volta installato il runtime Edge TPU, riavvia il dispositivo per attivare la nuova regola udev Coral aggiunta dal programma di installazione.

Verificare che il dispositivo Coral venga rilevato

Per verificare che il tuo dispositivo Coral sia rilevato e funzionante, esegui i test di integrazione per il pacchetto coral-tflite-delegate. Questo pacchetto si trova nella directory radice del repository. Per eseguire i test di integrazione, inserisci l'acceleratore Coral ed esegui questi comandi nella directory del pacchetto:

npx yarn
npx yarn build-deps
npx yarn test-integration

Nota: se npx non è disponibile, assicurati di aver installato Node.js. Puoi installare Node seguendo le istruzioni su nodejs.org. Assicurati di installare una versione successiva o uguale alla 12. L'esecuzione di apt install nodejs potrebbe installare il nodo 10, che non deve essere utilizzato per questo codelab.

Dovresti vedere un output simile al seguente:

yarn run v1.22.17
$ yarn build && yarn test-integration-dev
$ tsc
$ jasmine --config=jasmine-integration.json
Platform node has already been set. Overwriting the platform with node.
Randomized with seed 78904
Started

============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
WARNING: converting 'int32' to 'uint8'
.


1 spec, 0 failures
Finished in 2.777 seconds
Randomized with seed 78904 (jasmine --random=true --seed=78904)
Done in 6.36s.

Non preoccuparti di installare @tensorflow/tfjs-node, come indicato nei log, poiché eseguirai il modello in TFLite.

Se invece l'output contiene Encountered unresolved custom op: edgetpu-custom-op, il dispositivo Coral non è stato rilevato. Assicurati di aver installato la libreria di runtime Edge TPU e di aver collegato il dispositivo Coral al computer. Puoi anche seguire la guida introduttiva di Coral per testare la versione Python delle associazioni di Coral. Se la versione Python funziona, ma i test continuano a non riuscire, comunicacelo inviando una segnalazione di bug.

Esegui il codice di avvio

A questo punto puoi eseguire il codice di avvio. Per iniziare, segui questi passaggi.

1. Passa alla directory starter_code all'interno della directory tfjs-tflite-node-codelab.
2. esegui npm install per installare le dipendenze.
3. Esegui npm start per avviare il progetto. Dovrebbe aprirsi un'app che mostra un feed video dalla webcam del tuo computer.

Nota: se utilizzi una scheda di sviluppo Coral e npm install genera un errore ENOMEM, esegui npm rebuild && npm install per ricreare i pacchetti danneggiati.

Qual è il nostro punto di partenza?

Il nostro punto di partenza è un'app fotocamera Electron di base progettata per questo codelab. Il codice è stato semplificato per mostrare i concetti nel codelab e ha una gestione degli errori ridotta. Se scegli di riutilizzare qualsiasi codice in un'app di produzione, assicurati di gestire gli eventuali errori e di testare completamente tutto il codice.

Esplora il codice di avvio

Il codice iniziale contiene molti file, ma l'unico che devi modificare è renderer.js. Controlla cosa viene visualizzato nella pagina, inclusi il feed video e gli elementi HTML, ed è qui che aggiungi il tuo modello di machine learning all'app. Tra gli altri file c'è un file index.html, ma non serve altro che caricare il file renderer.js. È presente anche un file main.js, che è il punto di ingresso per Electron. Controlla il ciclo di vita dell'app, incluso cosa mostrare quando viene aperta e cosa fare quando è chiusa, ma non devi apportare modifiche.

Aprire il debugger

Potresti dover eseguire il debug della tua app mentre segui questo codelab. Questa app è basata su Electron, pertanto ha il debugger di Chrome integrato. Nella maggior parte delle piattaforme, puoi aprirla con Ctrl+Maiusc+I. Fai clic sulla scheda Console per visualizzare i log e i messaggi di errore dell'app.

Non c'è molto altro da esplorare, quindi iniziamo subito ad addestrare il classificatore di immagini.

3. Addestra un classificatore di immagini

In questa sezione addestrerai le versioni TFLite e Coral di un modello di classificazione delle immagini personalizzato.

Addestrare il classificatore

Un classificatore di immagini prende le immagini di input e assegna loro le etichette. Per questo codelab, utilizzerai Teachable Machine per addestrare un modello nel tuo browser. Per velocizzare l'addestramento di questa sezione, puoi usare un computer desktop o un laptop anziché un Raspberry Pi, ma dovrai copiare i file risultanti sul Pi.

Ora è tutto pronto per addestrare un modello. Se non sai con certezza quale tipo di modello addestrare, un modello facile da addestrare è un rilevatore di persone, che rileva semplicemente se una persona è nell'inquadratura.

1. Apri la pagina di formazione Teachable Machine in una nuova scheda.
2. Seleziona Progetto immagine e poi Modello di immagine standard.
3. Aggiungi esempi di immagini per ogni corso. L'utilizzo dell'ingresso della webcam è il modo più semplice per farlo. Puoi anche rinominare i corsi.
4. Quando hai raccolto dati sufficienti per ogni classe (di solito sono sufficienti 50 campioni), premi Addestra modello.

Al termine dell'addestramento del modello, dovrebbe essere visualizzata un'anteprima dell'output del modello.

Prova a assegnare al modello input diversi. Se trovi un input classificato in modo errato, aggiungilo ai dati di addestramento e addestra nuovamente il modello.

5. Quando sei soddisfatto della precisione del modello, fai clic su Esporta modello. Devi scaricare due versioni separate del modello.
6. Esporta il modello come modello in virgola mobile TensorFlow Lite. Verrà scaricato un file denominato converted_tflite.zip. in esecuzione sulla CPU.
7. Esporta il modello come modello Tensorflow Lite EdgeTPU. Verrà scaricato un file denominato converted_edgetpu.zip che viene eseguito sulla TPU Coral Edge.

Suggerimento:per una maggiore precisione, utilizza una varietà di rotazioni, posizioni e sfondi nelle immagini di esempio. Utilizza un laptop, se ne hai uno, per raccogliere questi campioni più facilmente.

4. Esegui il modello di CPU nella tua app

Ora che hai addestrato un modello, è il momento di aggiungerlo alla tua app. Entro la fine di questa sezione, l'app sarà in grado di eseguire il tuo modello utilizzando la CPU del dispositivo.

Aggiungere il file del modello all'app

Decomprimi il file del modello converted_tflite.zip che hai scaricato quando hai addestrato il classificatore. Nell'archivio sono presenti due file. model_uquant.tflite è il modello TFLite salvato, inclusi il grafico e i pesi del modello. labels.txt contiene le etichette leggibili per le classi previste dal modello. Inserisci entrambi i file in modeldirectory.

Installa le dipendenze

Il caricamento di un modello e gli input di pre-elaborazione richiedono alcune dipendenze da TensorFlow.js:

• tfjs-tflite-node: pacchetto TensorFlow.js per l'esecuzione di modelli TFLite in Node.js.
• @tensorflow/tfjs: pacchetto principale di TensorFlow.js.

@tensorflow/tfjs è già installato, ma devi installare tfjs-tflite-node con questo comando:

npm install --save tfjs-tflite-node

Una volta installato, aggiungilo all'app nella parte superiore di renderer.js:

CODELAB parte 1: importa tfjs-tflite-node.

const {loadTFLiteModel} = require('tfjs-tflite-node');

Carica il modello

Ora è tutto pronto per caricare il modello. A questo scopo, tfjs-tflite-node fornisce la funzione loadTFLiteModel. Può caricare modelli da un percorso file, da un Arraybu o da un URL TFHub. Per caricare il modello e i relativi pesi, aggiungi quanto segue alla funzione main:

CODELAB parte 1: carica il modello qui.

const modelPath = './model/model_unquant.tflite';
const model = await loadTFLiteModel(modelPath);
const labels = fs.readFileSync('./model/labels.txt', 'utf8')
      .split('\n');

Esegui il modello

L'esecuzione del modello prevede tre passaggi. Innanzitutto, esegui il pull e la pre-elaborazione di un frame di input dalla webcam. Quindi, esegui il modello su quel frame e ottieni una previsione. Dopodiché, la previsione verrà visualizzata sulla pagina.

Pre-elabora l'input della webcam

Al momento, la webcam è solo un elemento HTML e i frame visualizzati non sono disponibili per il file renderer.js JavaScript. Per estrarre i frame dalla webcam, TensorFlow.js fornisce tf.data.webcam, che offre un metodo capture() facile da usare per acquisire fotogrammi dalla fotocamera.

Per utilizzarlo, aggiungi questo codice di configurazione a main():

CODELAB parte 1: configura tf.data.webcam qui.

const tensorCam = await tf.data.webcam(webcam);

Quindi, per acquisire un'immagine a ogni frame, aggiungi quanto segue a run():

CODELAB parte 1: acquisisci i frame della webcam qui.

const image = await tensorCam.capture();

Devi anche pre-elaborare ogni frame affinché sia compatibile con il modello. Il modello utilizzato da questo codelab ha una forma di input [1, 224, 224, 3], quindi prevede un'immagine RGB di 224 x 224 pixel. tensorCam.capture()avvale alla forma [224, 224, 3], quindi devi aggiungere un'ulteriore dimensione nella parte anteriore del tensore con tf.expandDims. Inoltre, il modello di CPU prevede un input Float32 compreso tra -1 e 1, ma la webcam acquisisce valori compresi tra 0 e 255. È possibile dividere il tensore di input per 127 per modificarne l'intervallo da [0, 255] a [0, ~2] e quindi sottrarre 1 per ottenere l'intervallo desiderato [-1, ~1]. Per farlo, aggiungi queste righe a tf.tidy() nella funzione run():

CODELAB parte 1: pre-elabora qui i frame della webcam.

const expanded = tf.expandDims(image, 0);
const divided = tf.div(expanded, tf.scalar(127));
const normalized = tf.sub(divided, tf.scalar(1));

È importante smaltire i tensori dopo averli utilizzati. tf.tidy() esegue automaticamente questa operazione per il codice contenuto nel callback, ma non supporta le funzioni asincrone. Dovrai eliminare manualmente il tensore dell'immagine che hai creato in precedenza chiamando il relativo metodo dispose().

CODELAB parte 1: elimina qui i frame della webcam.

image.dispose();

Eseguire il modello e visualizzare i risultati

Per eseguire il modello sull'input pre-elaborato, chiama model.predict() sul tensore normalizzato. Restituisce un tensore unidimensionale contenente la probabilità prevista per ogni etichetta. Moltiplica questa probabilità per 100 per ottenere la probabilità percentuale di ogni etichetta e utilizza la funzione showPrediction inclusa nel codice iniziale per mostrare la previsione del modello sullo schermo.

Questo codice utilizza anche stats.js per calcolare il tempo necessario per la previsione effettuando chiamate a stats.begin e stats.end intorno al giorno model.predict.

CODELAB parte 1: esegui il modello e visualizza i risultati qui.

stats.begin();
const prediction = model.predict(normalized);
stats.end();
const percentage = tf.mul(prediction, tf.scalar(100));
showPrediction(percentage.dataSync(), labels);

Esegui di nuovo l'app con yarn start. Dovresti vedere le classificazioni del modello.

Prestazioni

Poiché al momento è configurato, il modello viene eseguito sulla CPU. Questo va bene per i computer desktop e la maggior parte dei laptop, ma potrebbe non essere desiderabile se lo esegui su un Raspberry Pi o un altro dispositivo a bassa potenza. Su un Raspberry Pi 4, probabilmente vedrai circa 10 FPS, che potrebbero non essere abbastanza veloci per alcune applicazioni. Per ottenere prestazioni migliori senza utilizzare una macchina più veloce, puoi utilizzare il silicio specifico per l'applicazione sotto forma di TPU Coral Edge.

5. Esegui il modello Coral nella tua app

Se non hai un dispositivo Coral, puoi saltare questa sezione.

Questo passaggio del codelab si basa sul codice che hai scritto nella sezione precedente, ma puoi utilizzare il checkpoint cpu_inference_working per iniziare con uno slate chiaro.

I passaggi per eseguire il modello Coral sono quasi identici a quelli per l'esecuzione del modello CPU. La differenza principale è il formato del modello. Poiché Coral supporta solo i tensori uint8, il modello è quantizzato. Questo influisce sui tensori di input passati al modello e sui tensori di output che restituisce. Un'altra differenza è che i modelli devono essere compilati utilizzando il compilatore Edge TPU per essere eseguiti su una TPU corallo. TeachableMachine ha già completato questo passaggio, ma puoi scoprire come farlo per altri modelli visitando la documentazione di Coral.

Aggiungi il file del modello Coral all'app

Decomprimi il file del modello converted_edgetpu.zip che hai scaricato quando hai addestrato il classificatore. Nell'archivio sono inclusi due file. model_edgetpu.tflite è il modello TFLite salvato, inclusi il grafico e i pesi del modello. labels.txt contiene le etichette leggibili per le classi previste dal modello. Inserisci il file del modello nella directory coral_model.

Installa le dipendenze

L'esecuzione dei modelli Coral richiede la libreria di runtime Edge TPU. Assicurati di averla installata seguendo le istruzioni di configurazione prima di continuare.

Si accede ai dispositivi Coral come delegati TFLite. Per accedervi da JavaScript, installa il pacchetto coral-tflite-delegate:

npm install --save coral-tflite-delegate

Quindi, importa il delegato aggiungendo questa riga all'inizio del file renderer.js:

CODELAB parte 2: importa il delegato qui.

const {CoralDelegate} = require('coral-tflite-delegate');

Carica il modello

Ora è tutto pronto per caricare il modello Coral. Esegui questa operazione come per il modello CPU, con la differenza che ora passi opzioni alla funzione loadTFLiteModel per caricare il delegato Coral.

CODELAB parte 2: carica qui il modello delegato.

const coralModelPath = './coral_model/model_edgetpu.tflite';
const options = {delegates: [new CoralDelegate()]};
const coralModel = await loadTFLiteModel(coralModelPath, options);

Non è necessario caricare le etichette perché sono le stesse del modello di CPU.

Aggiungi un pulsante per passare dalla CPU alla modalità corallo e viceversa

Aggiungi il modello Coral insieme al modello di CPU aggiunto nella sezione precedente. Eseguirle contemporaneamente rende difficile vedere le differenze di prestazioni, quindi un pulsante di attivazione/disattivazione consente di passare dall'esecuzione di Coral a quella della CPU e viceversa.

Aggiungi il pulsante con questo codice:

CODELAB parte 2: crea il pulsante Delega qui.

let useCoralDelegate = false;
const toggleCoralButton = document.createElement('button');
function toggleCoral() {
  useCoralDelegate = !useCoralDelegate;
  toggleCoralButton.innerText = useCoralDelegate
      ? 'Using Coral. Press to switch to CPU.'
      : 'Using CPU. Press to switch to Coral.';
}
toggleCoralButton.addEventListener('click', toggleCoral);
toggleCoral();
document.body.appendChild(toggleCoralButton);

Aggreghiamo questa condizione nella funzione run(). Quando useCoralDelegate è false, dovrebbe eseguire la versione della CPU. Altrimenti, esegue la versione Coral (ma per il momento non funzionerà). Esegui il wrapping del codice per l'esecuzione del modello CPU in un'istruzione if. Tieni presente che il tensore expanded non viene inserito nell'istruzione if perché viene utilizzato dal modello Coral.

CODELAB parte 2: verifica se utilizzare il delegato qui.

// NOTE: Don't just copy-paste this code into the app.
// You'll need to edit the code from the CPU section.
const expanded = tf.expandDims(image, 0);
if (useCoralDelegate) {
  // CODELAB part 2: Run Coral prediction here.
} else {
  const divided = tf.div(expanded, tf.scalar(127));
  const normalized = tf.sub(divided, tf.scalar(1));
  stats.begin();
  const prediction = model.predict(normalized);
  stats.end();
  const percentage = tf.mul(prediction, tf.scalar(100));
  showPrediction(percentage.dataSync(), labels);
}

Esegui il modello

La versione Coral del modello prevede tensori uint8 da 0 a 255, quindi il suo input non deve essere normalizzato. Tuttavia, l'output è anche un tensore uint8 nell'intervallo da 0 a 255. Deve essere convertito in un numero in virgola mobile da 0 a 100 prima di essere visualizzato.

CODELAB parte 2: esegui la previsione di Coral qui. (Fa parte dello snippet di codice precedente)

stats.begin();
const prediction = coralModel.predict(expanded);
stats.end();
const percentage = tf.div(tf.mul(prediction, tf.scalar(100)), tf.scalar(255));
showPrediction(percentage.dataSync(), labels);

Esegui di nuovo l'app con yarn start; l'app dovrebbe visualizzare le classificazioni dall'acceleratore Coral.

Puoi passare dall'inferenza corallo a quella della CPU premendo il pulsante. Potresti notare che i ranking di confidenza del modello Coral sono meno precisi di quelli del modello CPU e di solito terminano con una posizione decimale uniforme. Questa perdita di precisione è un compromesso rispetto all'esecuzione di un modello quantizzato su Coral. Di solito non ha importanza nella pratica, ma è una cosa da tenere a mente.

Nota sulle prestazioni

La frequenza fotogrammi visualizzata include pre-elaborazione e post-elaborazione, quindi non è rappresentativa di ciò di cui è in grado l'hardware Coral. Puoi farti un'idea migliore delle prestazioni facendo clic sull'indicatore FPS finché non viene visualizzata la latenza (in millisecondi), che misura solo la chiamata a model.predict. Tuttavia, è incluso il tempo necessario per spostare i Tensor sulle associazioni C native TFLite e quindi sul dispositivo Coral, quindi non si tratta di una misurazione perfetta. Per benchmark di prestazioni più accurati scritti in C++, consulta la pagina dei benchmark EdgeTPU.

Inoltre, il video è stato registrato su un laptop anziché su un Raspberry Pi, quindi potresti vedere un FPS diverso.

Velocizzare la pre-elaborazione dei coralli

In alcuni casi, puoi accelerare la pre-elaborazione cambiando i backend TFJS. Il backend predefinito è WebGL, ideale per operazioni parallelizzabili di grandi dimensioni, ma questa app non ne svolge gran parte nella fase di pre-elaborazione (l'unica operazione che utilizza è expandDims, che non è parallela). Puoi passare al backend della CPU per evitare la latenza aggiuntiva dello spostamento dei tensori da e verso la GPU aggiungendo questa riga dopo le importazioni all'inizio del file.

tf.setBackend(‘cpu');

Questo influisce anche sulla pre-elaborazione del modello CPU TFLite, che è parallelizzato, in modo che il modello venga eseguito molto più lentamente con questa modifica.

6. Accelera il modello CPU con WebNN

Se non hai un acceleratore Coral o se vuoi solo provare un altro modo per velocizzare il modello, puoi utilizzare il delegato TFLite WebNN. Questo delegato utilizza hardware di machine learning integrato nei processori Intel per accelerare l'inferenza del modello con il toolkit OpenVINO. Di conseguenza, presenta requisiti aggiuntivi che non sono stati trattati nella sezione di configurazione di questo codelab e dovrai installare il toolkit OpenVINO. Prima di procedere, assicurati di verificare la configurazione con le piattaforme di sistema di destinazione supportate, ma tieni presente che il delegato WebNN non supporta ancora macOS.

Installa il toolkit OpenVINO

Il toolkit OpenVINO utilizza hardware di machine learning integrato nei processori Intel per accelerare i modelli. Puoi scaricare una versione precompilata da Intel o crearla dal codice sorgente. Esistono diversi modi per installare OpenVINO, ma ai fini di questo codelab, ti consigliamo di utilizzare lo script del programma di installazione per Windows o Linux. Assicurati di installare la versione del runtime LTS 2021.4.2, poiché altre versioni potrebbero non essere compatibili. Dopo aver eseguito il programma di installazione, assicurati di configurare le variabili di ambiente della shell come descritto nelle istruzioni di installazione per Linux o Windows ( soluzione permanente) oppure eseguendo il comando setupvars.sh (Linux) o setupvars.bat (Windows) che si trova nella directory webnn-tflite-delegate.

Nota su Windows: il comando setupvars.bat non supporta Git bash, quindi assicurati di eseguirlo e gli altri comandi di questo codelab dal prompt dei comandi di Windows.

Verificare che il delegato WebNN funzioni

Per verificare che il delegato WebNN funzioni correttamente, esegui i test di integrazione per il pacchetto webnn-tflite-delegate che si trova nella directory radice del repository. Per eseguire i test di integrazione, esegui questi comandi nella directory del pacchetto:

# In webnn-tflite-delegate/
npx yarn
npx yarn test-integration

Dovresti vedere un output simile al seguente:

WebNN delegate: WebNN device set to 0.
INFO: Created TensorFlow Lite WebNN delegate for device Default and power Default.

============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
label: wine bottle
score:  0.934505045413971
.


1 spec, 0 failures
Finished in 0.446 seconds
Randomized with seed 58441 (jasmine --random=true --seed=58441)
Done in 8.07s.

Un output simile al seguente indica un errore di configurazione:

Platform node has already been set. Overwriting the platform with node.
Randomized with seed 05938
Started
error Command failed with exit code 3221225477.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Molto probabilmente questo output indica che non hai impostato le variabili di ambiente di OpenVINO. Per il momento, puoi impostarle eseguendo il comando setupvars.sh (Linux) o setupvars.bat (Windows), ma ti consigliamo di impostarle in modo permanente seguendo le istruzioni per Linux o Windows ( soluzione permanente). Se utilizzi Windows, il

setupvars.bat

non supporta Git bash, quindi assicurati di eseguirlo e gli altri comandi di questo codelab dal prompt dei comandi di Windows.

Installa il delegato WebNN

Con OpenVINO installato, ora puoi accelerare il modello di CPU con WebNN. Questa sezione del codelab si basa sul codice che hai scritto nella sezione "Esegui il modello CPU nella tua app" . Puoi utilizzare il codice che hai scritto in questo passaggio, ma se hai già completato la sezione Corallo, utilizza invece il checkpoint cpu_inference_working per iniziare con uno slate chiaro.

La parte Node.js del delegato WebNN è distribuita su npmjs. Per installarlo, esegui questo comando:

npm install --save webnn-tflite-delegate

Quindi, importa il delegato aggiungendo questa riga all'inizio del file renderer.js:

CODELAB parte 2: importa il delegato qui.

const {WebNNDelegate, WebNNDevice} = require('webnn-tflite-delegate');

Il delegato WebNN supporta l'esecuzione sulla CPU o sulla GPU. WebNNDevice ti permette di scegliere quale utilizzare.

Carica il modello

Ora è tutto pronto per caricare il modello con il delegato WebNN abilitato. Per Coral, hai dovuto caricare un file del modello diverso, ma WebNN supporta lo stesso formato di modello di TFLite. Aggiungi WebNNDelega all'elenco dei delegati passati al modello per abilitarlo:

CODELAB parte 2: carica qui il modello delegato.

let webnnModel = await loadTFLiteModel(modelPath, {
  delegates: [new WebNNDelegate({webnnDevice: WebNNDevice.DEFAULT})],
});

Non è necessario caricare di nuovo le etichette perché il modello è lo stesso.

Aggiungi un pulsante per passare dalla CPU TfLite a WebNN e viceversa

Ora che la versione WebNN del modello è pronta, aggiungi un pulsante per passare dall'inferenza CPU WebNN a TfLite e viceversa. Per eseguire entrambi contemporaneamente, è difficile vedere le differenze di prestazioni.

Aggiungi il pulsante con questo codice (tieni presente che non cambierà ancora modello):

CODELAB parte 2: crea il pulsante Delega qui.

let useWebNNDelegate = false;
const divElem = document.createElement('div');
const toggleWebNNButton = document.createElement('button');
function toggleWebNN() {
  useWebNNDelegate = !useWebNNDelegate;
  toggleWebNNButton.innerHTML = useWebNNDelegate
      ? 'Using WebNN. Press to switch to TFLite CPU.'
      : 'Using TFLite CPU. Press to switch to WebNN.';
  divElem.hidden = useWebNNDelegate ? false : true;
}

toggleWebNNButton.addEventListener('click', toggleWebNN);
toggleWebNN();
document.body.appendChild(toggleWebNNButton);
document.body.appendChild(divElem);

Questo codice aggiunge anche un elemento div che puoi utilizzare per configurare le impostazioni WebNN nella sezione successiva.

Aggiungere un menu a discesa per passare da un dispositivo WebNN all'altro

WebNN supporta l'esecuzione su CPU e GPU, quindi aggiungi un menu a discesa per passare dall'una all'altra. Aggiungi questo codice dopo quello che crea il pulsante:

// Create elements for WebNN device selection
divElem.innerHTML = '<br/>WebNN Device: ';
const selectElem = document.createElement('select');
divElem.appendChild(selectElem);

const webnnDevices = ['Default', 'GPU', 'CPU'];
// append the options
for (let i = 0; i < webnnDevices.length; i++) {
  var optionElem = document.createElement('option');
  optionElem.value = i;
  optionElem.text = webnnDevices[i];
  selectElem.appendChild(optionElem);
}

Ora, se esegui l'app, vedrai un elenco a discesa Predefinita, GPU e CPU. Al momento la scelta di una di queste opzioni non comporta alcun effetto, in quanto il menu a discesa non è ancora stato collegato.

Modificare il dispositivo tramite il menu a discesa

Per collegare il menu a discesa in modo che modifichi il dispositivo WebNN utilizzato, aggiungi un listener all'evento change dell'elemento del selettore del menu a discesa. Quando il valore selezionato cambia, ricrea il modello WebNN con il dispositivo WebNN corrispondente selezionato nelle opzioni di delega.

Aggiungi il seguente codice dopo il codice che ha aggiunto il menu a discesa:

selectElem.addEventListener('change', async () => {
  let webnnDevice;
  switch(selectElem.value) {
    case '1':
      webnnDevice = WebNNDevice.GPU;
      break;
    case '2':
      webnnDevice = WebNNDevice.CPU;
      break;
    default:
      webnnDevice = WebNNDevice.DEFAULT;
      break;
  }
  webnnModel = await loadTFLiteModel(modelPath, {
    delegates: [new WebNNDelegate({webnnDevice})],
  });
});

Con questa modifica, il menu a discesa crea un nuovo modello con le impostazioni corrette ogni volta che viene modificato. Ora è il momento di collegare il modello WebNN e utilizzarlo per l'inferenza.

Esegui il modello WebNN

Il modello WebNN è pronto per essere utilizzato, ma il pulsante per passare dalla CPU WebNN alla CPU TfLite non esegue ancora il passaggio del modello. Per cambiare modello, devi prima rinominare la variabile model da quando hai caricato il modello di CPU TfLite nella prima sezione del codelab.

Modifica la riga seguente...

const model = await loadTFLiteModel(modelPath);

...in modo che corrisponda a questa riga.

const cpuModel = await loadTFLiteModel(modelPath);

Con la variabile model rinominata in cpuModel, aggiungila alla funzione run per scegliere il modello corretto in base allo stato del pulsante:

CODELAB parte 2: verifica se utilizzare il delegato qui.

let model;
if (useWebNNDelegate) {
  model = webnnModel;
} else {
  model = cpuModel;
}

Ora, quando esegui l'app, il pulsante consente di passare dalla CPU TfLite a WebNN e viceversa.

Puoi anche passare dalla CPU WebNN all'inferenza GPU e viceversa se disponi di una GPU Intel integrata.

Nota sulle prestazioni

La frequenza frame visualizzata include pre-elaborazione e post-elaborazione, quindi non è rappresentativa di ciò di cui è in grado WebNN. Puoi farti un'idea migliore delle prestazioni facendo clic sull'indicatore FPS finché non viene visualizzata la latenza (in millisecondi), che misura solo la chiamata a model.predict. Tuttavia, è incluso il tempo necessario per spostare i Tensor nelle associazioni C native TFLite, quindi non si tratta di una misurazione perfetta.

7. Complimenti

Complimenti! Hai appena completato il tuo primo progetto Coral / WebNN utilizzando tfjs-tflite-node in Electron.

Provalo e testalo su diverse immagini. Puoi anche addestrare un nuovo modello su TeachableMachine per classificare qualcosa di completamente diverso.

Riepilogo

In questo codelab hai appreso:

• Come installare e configurare il pacchetto npm tfjs-tflite-node per eseguire modelli TFLite in Node.js.
• Come installare la libreria di runtime Edge TPU per eseguire i modelli su un dispositivo Coral.
• Come accelerare l'inferenza del modello utilizzando una TPU con bordi coralli.
• Come accelerare l'inferenza del modello con WebNN.

Passaggi successivi

Ora che hai una base operativa, quali idee creative puoi trovare per estendere questo modello di machine learning a un caso d'uso reale a cui potresti lavorare? Forse potresti rivoluzionare il settore in cui lavori con inferenze rapide ed economiche oppure potresti modificare un tostapane in modo che smetta di tostare quando il pane sembra giusto. Le possibilità sono infinite.

Per andare oltre e scoprire di più su come TeachableMachine ha addestrato il modello che hai utilizzato, dai un'occhiata al nostro codelab su Transfer Learning. Se cerchi altri modelli compatibili con Coral, come il riconoscimento vocale e la stima della posizione, dai un'occhiata a coral.ai/models. Puoi anche trovare le versioni CPU di questi modelli e di molti altri in TensorFlow Hub.

Condividi con noi ciò che crei

Puoi facilmente estendere ciò che hai realizzato oggi anche per altri casi d'uso creativi. Ti incoraggiamo a pensare in modo originale e a continuare ad hackerare.

Ricordati di taggarci sui social media utilizzando l'hashtag #MadeWithTFJS per avere la possibilità che il tuo progetto venga inserito nel blog di TensorFlow o addirittura eventi futuri. Ci piacerebbe vedere cosa realizzi.

Siti web da controllare

• Sito web ufficiale TensorFlow.js
• Modelli predefiniti TensorFlow.js
• API TensorFlow.js
• TensorFlow.js Show & Racconta