Tutorial di Edge TensorFlow.js

Cosa creerai

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

Obiettivi

Scriverai il codice JavaScript per:

  • Esegui un modello preaddestrato di classificazione delle immagini periferiche di AutoML Vision 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 di AutoML Vision Edge che segue Modello dispositivo Edge Guida rapida.

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

screenshot del modello TensorFlow.js esportato aggiornato

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

  • un file dict.txt con etichette
  • un file model.json
  • *.bin file dei pesi
Esempio di cartella Tensorflow.js

Scarica i file del modello

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

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

Scrivi una piccola app web

Dopo aver archiviato i file del modello TensorFlow.js in locale, puoi scrivi la tua app web:

  1. Passa alla directory locale in cui sono archiviati i file del modello se non l'hai ancora fatto.

  2. Crea un file index.html nella stessa directory locale con quanto segue 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 File index.html:

Python

python3 -m SimpleHTTPServer 8000

Node.js

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

http-server -p 8000

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

Previsione di TensorFlow.js nel browser

Come funziona?

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

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

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

Il pacchetto AutoML NPM fornisce un insieme di API per caricare ed eseguire i modelli prodotti AutoML Vision Edge. Il pacchetto si occupa delle attività di pre-elaborazione la post-elaborazione necessaria per eseguire il modello, ad esempio la capacità di alimentare un'immagine o video, normalizzando i valori pixel e restituendo un oggetto ordinato con etichette e punteggi.

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

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

Durante il test devi sostituire l'immagine src con il percorso della tua immagine del modello.

Successivamente, caricherai 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);

Devi specificare un modello con tf.automl.loadImageClassification(url). Questa funzione utilizza un URL assoluto o relativo per l'elemento model.json esportato in questo caso un percorso relativo, in quanto il file index.html e i file del modello si trovano nella stessa directory.

Puoi ottenere le tue previsioni chiamando model.classify(image). Questa funzione esegue una singola immagine attraverso e restituisce la previsione. L'input per questa funzione è un'immagine HTML elemento, elemento video o un Tensore 3D.

Passaggi successivi

Hai completato un tutorial del corso web Classificazione delle immagini TensorFlow.js utilizzando un modello Edge. Hai eseguito l'app web in un browser web e creato una utilizzando il tuo modello Edge personalizzato e un'immagine caricate dal web. Hai quindi esaminato parti del codice campione la funzionalità di base.

Passaggi successivi: