Tutorial di Edge TensorFlow.js

Cosa creerai

In questo tutorial scaricherai un modello di classificazione delle immagini TensorFlow.js addestrato ed esportato utilizzando AutoML Vision Edge. Poi creerai una pagina web che carichi il modello ed esegue una previsione su un'immagine.

Obiettivi

Dovrai scrivere il codice JavaScript in:

  • Esegui un modello di classificazione delle immagini Edge di AutoML Vision preaddestrato in una pagina web utilizzando la libreria TensorFlow.js.

Prima di iniziare

Addestra un modello da AutoML Vision Edge

Prima di poter eseguire il deployment di un modello su un dispositivo Edge, devi addestrare ed esportare un modello TensorFlow.js da AutoML Vision Edge seguendo la guida rapida sui modelli di dispositivi Edge.

Nel passaggio finale, esporta il modello in TensorFlow.js:

screenshot aggiornato del modello di esportazione TensorFlow.js

Dopo aver completato la guida rapida, dovresti avere i seguenti file esportati in Google Cloud Storage:

  • un file dict.txt con etichette
  • un file model.json
  • *.bin file del peso
Esempio di cartella TensorFlow.js

Scarica i file del modello

Copia i file esportati da Google Cloud Storage in una directory locale:

gsutil cp gs://${cloud-storage-bucket}/model-export/icn/${model-name}/* ${local-folder}

Scrivi una piccola app web

Dopo aver archiviato i file modello TensorFlow.js in locale, puoi scrivere l'app web:

  1. Vai alla directory locale in cui sono archiviati i file del modello, se non l'hai già fatto.

  2. Crea un file index.html nella stessa directory locale con i seguenti contenuti:

    index.html

    Esempi di codice

    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>
<img id="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">
<script>
async function run() {
  const model = await tf.automl.loadImageClassification('model.json');
  const image = document.getElementById('daisy');
  const predictions = await model.classify(image);
  console.log(predictions);
  // Show the resulting object on the page.
  const pre = document.createElement('pre');
  pre.textContent = JSON.stringify(predictions, null, 2);
  document.body.append(pre);
}
run();
</script>

Esegui l'app web

Avvia un semplice server HTTP sulla porta 8000 dalla directory con il file index.html:

Python

python3 -m SimpleHTTPServer 8000

Node.js

Se utilizzi Node.js, installa il pacchetto http-server a livello globale ed esegui:

http-server -p 8000

Apri http://localhost:8000 nel browser e vedrai il risultato della previsione nella console (Visualizza > Sviluppatore > Console JavaScript), nonché nella pagina.

Previsione TensorFlow.js nel browser

Come funziona?

Ora che l'app è in esecuzione, puoi scoprire cosa sta facendo il codice.

I primi due tag script caricano la libreria TensorFlow.js e la libreria AutoML, disponibili nel gestore di pacchetti Gestione dei pacchetti.

<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>

Il pacchetto AutoML NPM fornisce un set di API per caricare ed eseguire i modelli prodotti da AutoML Vision Edge. Il pacchetto si occupa di tutte le operazioni di pre-elaborazione o post-elaborazione necessarie per eseguire il modello, ad esempio la possibilità di fornire un feed di un elemento immagine o video, la normalizzazione dei valori dei pixel e la restituzione di un oggetto ordinato con etichette e punteggi.

Il tag immagine carica un'immagine di test da un percorso di pubblicazione Google Cloud Storage:

<img id="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">

Quando testi il modello, devi sostituire l'immagine src con il percorso della tua immagine.

Quindi, carica il modello ed esegui una previsione con l'immagine:

const model = await tf.automl.loadImageClassification('model.json');
const image = document.getElementById('daisy');
const predictions = await model.classify(image);

Puoi specificare un modello con tf.automl.loadImageClassification(url). Questa funzione prende un URL assoluto o relativo al file model.json esportato, che in questo caso è un percorso relativo poiché il file index.html e i file del modello si trovano nella stessa directory.

Puoi ottenere le tue previsioni chiamando il numero model.classify(image). Questa funzione esegue una singola immagine nel modello e restituisce la previsione. L'input per questa funzione è un elemento immagine html, un elemento video o un tensore 3D.

Che cosa succede dopo?

Hai completato un tutorial dell'app web TensorFlow.js Image Classification utilizzando un modello Edge. Hai eseguito l'app web in un browser web e hai eseguito una previsione di classificazione utilizzando il modello Edge personalizzato e un'immagine che hai caricato dal web. Hai quindi esaminato parti del codice campione per capire la funzionalità sottostante.

Prossimi step: