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

1. Introduzione

Ultimo aggiornamento: 11/04/2022

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

Ho bisogno di un dispositivo Coral?

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 della webcam nelle categorie definite nel modello che hai addestrato.
• Utilizza un acceleratore Coral per aumentare le prestazioni, se disponibile.
• Utilizza WebNN per aumentare il rendimento, se supportato sulla tua piattaforma.

Cosa imparerai a fare

• 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 modelli su un dispositivo Coral.
• Come accelerare l'inferenza del modello utilizzando una Coral Edge TPU.
• Come accelerare l'inferenza del modello con WebNN.

Questo codelab si concentra su TFLite in Node.js. Concetti e 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 serviranno:

• Un computer con una webcam.
• Per Coral, consigliamo un Raspberry Pi con Raspberry Pi OS (64 bit) con desktop.
• 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 Coral USB Accelerator per velocizzare il modello.

2. Configurazione

Ottieni il codice

Abbiamo inserito tutto il codice necessario per questo progetto in un repository Git. Per iniziare, prendi 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 desktop. In questo modo è facile collegare un acceleratore Coral.

Consigliato vivamente: utilizza Git per clonare il repository su 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 checkpoint per i passaggi di questo codelab.

Tra gli altri file nel repository ci sono i pacchetti NPM da cui dipende tfjs-tflite-node-codelab. Non dovrai modificare nessuno di questi file, ma dovrai eseguire alcuni dei relativi test per assicurarti che l'ambiente sia configurato correttamente.

Installa la libreria di runtime Edge TPU

I dispositivi Coral richiedono l'installazione della libreria runtime Edge TPU prima dell'uso. Installalo seguendo le istruzioni per la tua piattaforma.

Su Linux / Raspberry Pi

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

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

# 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 possono essere installati eseguendo lo script install.sh o install.bat nell'archivio dopo il download.

Riavviare il dispositivo

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

Verificare che il dispositivo Coral sia rilevato

Per verificare che il dispositivo Coral venga rilevato e funzioni, 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, collega 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 riportate su nodejs.org. Assicurati di installare una versione maggiore o uguale a 12. L'esecuzione di apt install nodejs potrebbe installare Node 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 tuo 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 dei binding di Coral. Se la versione di Python funziona, ma questi test continuano a non superare la verifica, comunicacelo inviando una segnalazione di bug.

Esegui il codice di avvio

Ora puoi eseguire il codice di avvio. Per iniziare, segui questi passaggi.

1. Vai alla directory starter_code nella 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 il feed video della webcam del computer.

Nota:se utilizzi una scheda di sviluppo Coral e npm install genera un errore ENOMEM, esegui npm rebuild && npm install per ricompilare 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 la gestione degli errori è minima. Se scegli di riutilizzare parte del codice in un'app di produzione, assicurati di gestire eventuali errori e di testare completamente tutto il codice.

Esplora il codice di avvio

Questo codice di avvio contiene molti file, ma l'unico che devi modificare è renderer.js. Controlla ciò che viene visualizzato nella pagina, inclusi il feed video e gli elementi HTML, ed è qui che aggiungi il modello di machine learning all'app. Tra gli altri file c'è un file index.html, ma la sua unica funzione è 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, inclusi i contenuti da mostrare quando viene aperta e le azioni da eseguire quando viene chiusa, ma non dovrai apportare modifiche.

Apri il debugger

Potresti dover eseguire il debug dell'app mentre segui questo codelab. Poiché questa app è basata su Electron, ha il debugger di Chrome integrato. Nella maggior parte delle piattaforme, puoi aprirlo 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 qui, quindi passiamo subito all'addestramento del classificatore di immagini.

3. Addestra un classificatore di immagini

In questa sezione, addestri 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 delle etichette. Per questo codelab, utilizzerai Teachable Machine per addestrare un modello nel browser. Per accelerare l'addestramento per questa sezione, puoi utilizzare un computer desktop o laptop anziché Raspberry Pi, ma dovrai copiare i file risultanti su Raspberry Pi.

Ora puoi addestrare un modello. Se non sai con certezza quale tipo di modello addestrare, un modello semplice da addestrare è un rilevatore di persone, che rileva semplicemente se una persona è inquadrata.

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

Al termine dell'addestramento del modello, dovresti vedere un'anteprima dell'output del modello.

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

5. Quando l'accuratezza del modello ti soddisfa, fai clic su Esporta modello. Dovrai scaricare due versioni separate del modello.
6. Esporta il modello come modello TensorFlow Lite a virgola mobile. Viene scaricato un file denominato converted_tflite.zip. che viene eseguito sulla CPU.
7. Esporta il modello come modello Tensorflow Lite EdgeTPU. Verrà scaricato un file denominato converted_edgetpu.zip che viene eseguito su Coral Edge TPU.

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

4. Esegui il modello di CPU nella tua app

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

Aggiungere il file del modello all'app

Decomprimi il file del modello converted_tflite.zip scaricato durante l'addestramento del classificatore. L'archivio contiene 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 nella modeldirectory.

Installa le dipendenze

Il caricamento di un modello e l'elaborazione preliminare degli input richiedono alcune dipendenze da TensorFlow.js:

• tfjs-tflite-node: il pacchetto di TensorFlow.js per l'esecuzione di modelli TFLite in Node.js.
• @tensorflow/tfjs: il 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 puoi caricare il modello. tfjs-tflite-node fornisce la funzione loadTFLiteModel per farlo. Può caricare modelli da un percorso file, un ArrayBuffer o un URL TF Hub. Per caricare il modello e i relativi pesi, aggiungi questo codice 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 richiede tre passaggi. Innanzitutto, estrai ed elabora un frame di input dalla webcam. Poi esegui il modello su quel frame e ottieni una previsione. Dopodiché, visualizza la previsione sulla pagina.

Preelaborare l'input della webcam

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

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 ogni frame, aggiungi quanto segue a run():

CODELAB parte 1: acquisisci i frame della webcam qui.

const image = await tensorCam.capture();

Devi anche preelaborare ogni frame per renderlo compatibile con il modello. Il modello utilizzato in questo codelab ha una forma di input [1, 224, 224, 3], quindi prevede un'immagine RGB di 224 x 224 pixel. tensorCam.capture() restituisce una forma di [224, 224, 3], quindi devi aggiungere una dimensione aggiuntiva all'inizio 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. Puoi dividere il tensore di input per 127 per modificare il suo intervallo da [0, 255] a [0, ~2] e poi sottrarre 1 per ottenere l'intervallo desiderato [-1, ~1]. Aggiungi queste righe a tf.tidy() nella funzione run():

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

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 l'uso. tf.tidy() esegue questa operazione automaticamente per il codice contenuto nel callback, ma non supporta le funzioni asincrone. Dovrai eliminare manualmente il tensore dell'immagine creato in precedenza chiamando il relativo metodo dispose().

CODELAB parte 1: elimina i frame della webcam qui.

image.dispose();

Esegui il modello e visualizza i risultati

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

Questo codice utilizza anche stats.js per misurare il tempo necessario per la previsione effettuando chiamate a stats.begin e stats.end intorno a 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 e dovresti visualizzare le classificazioni del modello.

Prestazioni

Nella configurazione attuale, il modello viene eseguito sulla CPU. Questa impostazione è adatta ai computer desktop e alla maggior parte dei laptop, ma potrebbe non essere ideale se la esegui su Raspberry Pi o un altro dispositivo a basso consumo energetico. Su Raspberry Pi 4, probabilmente vedrai circa 10 FPS, che potrebbero non essere sufficienti per alcune applicazioni. Per ottenere prestazioni migliori senza utilizzare una macchina più veloce, puoi utilizzare silicio specifico per l'applicazione sotto forma di Coral Edge TPU.

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 se vuoi iniziare da zero.

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

Aggiungere il file del modello Coral all'app

Decomprimi il file del modello converted_edgetpu.zip che hai scaricato durante l'addestramento del classificatore. L'archivio include 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

Per eseguire i modelli Coral è necessaria la libreria runtime Edge TPU. Prima di continuare, assicurati di averlo installato seguendo le istruzioni di configurazione.

I dispositivi Coral vengono accessi 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 nella parte superiore del file renderer.js:

CODELAB parte 2: importa il delegato qui.

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

Carica il modello

Ora puoi caricare il modello Coral. Esegui questa operazione nello stesso modo del modello di CPU, tranne che ora passi le 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.

Aggiungere un pulsante per passare dalla CPU a Coral

Aggiungi il modello Coral insieme al modello di CPU che hai aggiunto nella sezione precedente. Se li esegui contemporaneamente, è difficile vedere le differenze di rendimento, quindi un pulsante di attivazione/disattivazione consente di passare dall'esecuzione di Coral a quella della CPU.

Aggiungi il pulsante con questo codice:

CODELAB parte 2: crea qui il pulsante del delegato.

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);

Colleghiamo questa condizione alla funzione run(). Quando useCoralDelegate è false, deve essere eseguita la versione della CPU. In caso contrario, esegue la versione Coral (ma per ora non farà nulla). Inserisci il codice di esecuzione del modello di CPU in un'istruzione if. Tieni presente che il tensore expanded viene escluso dall'istruzione if perché viene utilizzato dal modello Coral.

CODELAB parte 2: controlla 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 compreso tra 0 e 100 prima di essere visualizzato.

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

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 e dovresti visualizzare le classificazioni dell'acceleratore Coral.

Puoi passare dall'inferenza di Coral a quella della CPU premendo il pulsante. Potresti notare che le classifiche di confidenza del modello Coral sono meno precise di quelle del modello CPU e di solito terminano con un numero decimale pari. Questa perdita di precisione è un compromesso per l'esecuzione di un modello quantizzato su Coral. In genere non ha importanza nella pratica, ma è un aspetto da tenere presente.

Una nota sul rendimento

La frequenza fotogrammi che vedi include la pre-elaborazione e la post-elaborazione, quindi non è rappresentativa delle capacità dell'hardware Coral. Puoi farti un'idea più precisa del rendimento facendo clic sul misuratore FPS finché non viene visualizzata la latenza (in millisecondi), che misura solo la chiamata a model.predict. Tuttavia, include comunque il tempo necessario per spostare i tensori nei binding C nativi di TFLite e poi sul dispositivo Coral, quindi non è una misurazione perfetta. Per benchmark delle prestazioni più accurati scritti in C++, consulta la pagina dei benchmark di EdgeTPU.

Inoltre, tieni presente che il video è stato registrato su un laptop anziché su Raspberry Pi, quindi potresti notare un FPS diverso.

Velocizzare la pre-elaborazione di Coral

In alcuni casi, puoi velocizzare la preelaborazione cambiando i backend TFJS. Il backend predefinito è WebGL, ideale per operazioni di grandi dimensioni e parallelizzabili, ma questa app non esegue molte operazioni di questo tipo nella fase di pre-elaborazione (l'unica op 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 nella parte superiore del file.

tf.setBackend(‘cpu');

Ciò influisce anche sul pre-elaborazione per il modello TFLite CPU, che è parallelizzato, quindi il modello viene eseguito molto più lentamente con questa modifica.

6. Accelerare il modello di CPU con WebNN

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

Installare OpenVINO Toolkit

Il toolkit OpenVINO utilizza l'hardware di machine learning integrato nei processori Intel per accelerare i modelli. Puoi scaricare una versione precompilata da Intel o compilarla dal codice sorgente. Esistono diversi modi per installare OpenVINO, ma ai fini di questo codelab ti consigliamo di utilizzare lo script 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) o eseguendo il comando setupvars.sh (Linux) o setupvars.bat (Windows) che si trova nella directory webnn-tflite-delegate.

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

Verificare il funzionamento del delegato WebNN

Per verificare che il delegato WebNN funzioni correttamente, esegui i test di integrazione per il pacchetto webnn-tflite-delegate che si trova nella directory principale 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.

Se vedi un output simile a questo, 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.

Questo output indica molto probabilmente che non hai impostato le variabili di ambiente di OpenVINO. Per ora, puoi impostarli eseguendo il comando setupvars.sh (Linux) o setupvars.bat (Windows), ma ti consigliamo di impostarli 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 altri comandi di questo codelab dal prompt dei comandi di Windows.

Installare il delegato WebNN

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

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

npm install --save webnn-tflite-delegate

Quindi, importa il delegato aggiungendo questa riga nella parte superiore 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 consente di scegliere quale utilizzare.

Carica il modello

Ora puoi caricare il modello con il delegato WebNN abilitato. Per Coral, dovevi caricare un file del modello diverso, ma WebNN supporta lo stesso formato del modello di TFLite. Aggiungi WebNNDelegate all'elenco dei delegati passati al modello per attivarlo:

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é si tratta dello stesso modello.

Aggiungere un pulsante per passare da TfLite CPU a WebNN

Ora che la versione WebNN del modello è pronta, aggiungi un pulsante per passare dall'inferenza della CPU WebNN a quella di TfLite. Se le esegui contemporaneamente, è difficile notare le differenze di rendimento.

Aggiungi il pulsante con questo codice (tieni presente che i modelli non verranno ancora cambiati):

CODELAB parte 2: crea qui il pulsante del delegato.

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 utilizzi per configurare le impostazioni di 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 da una all'altra. Aggiungi questo codice dopo il codice 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 menu a discesa con le opzioni Predefinita, GPU e CPU. La scelta di una di queste opzioni non ha alcun effetto al momento, poiché il menu a discesa non è ancora stato collegato.

Fare in modo che il menu a discesa cambi il dispositivo

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

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 da WebNN alla CPU TfLite non cambia ancora il modello. Per cambiare modello, devi prima rinominare la variabile model rispetto a quando hai caricato il modello TfLite CPU 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: controlla se utilizzare il delegato qui.

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

Ora, quando esegui l'app, il pulsante passa da TfLite CPU a WebNN e viceversa.

Puoi anche passare dall'inferenza della CPU WebNN a quella della GPU se hai una GPU Intel integrata.

Una nota sul rendimento

La frequenza fotogrammi visualizzata include la pre-elaborazione e la post-elaborazione, pertanto non è rappresentativa delle funzionalità di WebNN. Puoi farti un'idea più precisa del rendimento facendo clic sul misuratore FPS finché non viene visualizzata la latenza (in millisecondi), che misura solo la chiamata a model.predict. Tuttavia, include comunque il tempo necessario per spostare i tensori nei binding C nativi di TFLite, quindi non è 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 una varietà di immagini. Puoi anche addestrare un nuovo modello su Teachable Machine per classificare qualcosa di completamente diverso.

Riepilogo

In questo codelab hai imparato:

• 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 modelli su un dispositivo Coral.
• Come accelerare l'inferenza del modello utilizzando una Coral Edge TPU.
• Come accelerare l'inferenza del modello con WebNN.

Passaggi successivi

Ora che hai una base di partenza funzionante, quali idee creative puoi trovare per estendere questo runner del modello di machine learning a un caso d'uso reale su cui potresti lavorare? Forse potresti rivoluzionare il settore in cui lavori con un'inferenza rapida ed economica o modificare un tostapane in modo che smetta di tostare quando il pane sembra perfetto. Le possibilità sono infinite.

Per andare oltre e scoprire di più su come Teachable Machine ha addestrato il modello che hai utilizzato, consulta il nostro codelab sull'apprendimento per trasferimento. Se stai cercando altri modelli che funzionano con Coral, come il riconoscimento vocale e la stima della posa, consulta coral.ai/models. Puoi trovare anche le versioni per CPU di questi modelli e molti altri su TensorFlow Hub.

Condividi con noi i tuoi contenuti

Puoi facilmente estendere ciò che hai creato oggi anche ad altri casi d'uso creativi e ti invitiamo a pensare fuori dagli schemi e a continuare a sperimentare.

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

Siti web da visitare

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