Tutorial di Edge TensorFlow.js

Terminologia: consulta la pagina Terminologia di AutoML Vision Edge per un elenco dei termini utilizzati in questo tutorial.

Cosa creerai

In questo tutorial scaricherai un modello Rilevamento di oggetti 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 AutoML Vision Edge Object Detection 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:

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

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/iod/${model-name}/* ${local-folder}

Nota: se invece scarichi i file tramite l'interfaccia utente, questi verranno rinominati con un timestamp e dovrai modificare i nomi ripristinando il formato originale.

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="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.jpg">
   <script>
   async function run() {
     const model = await tf.automl.loadObjectDetection('model.json');
     const img = document.getElementById('salad');
     const options = {score: 0.5, iou: 0.5, topk: 20};
     const predictions = await model.detect(img, options);
     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>

3. (Facoltativo) Sostituisci l'attributo percorso src del tag <img> in modo che punti alla tua immagine.

   Nota: se utilizzi un bundler js con Gestione dei partner di rete, puoi utilizzare le importazioni ES6 anziché un tag <script>.

Esegui l'app web

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

Python

python -m http.server 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.

Il risultato è un elenco ordinato di oggetti di previsione:

[
  {
    "box": {
      "left": 105.1,
      "top": 22.2,
      "width": 70.6,
      "height": 55.7
    },
    "label": "Tomato",
    "score": 0.972
  },
  ...
]

Per ulteriori informazioni sull'API, consulta la documentazione del pacchetto AutoML NPM.

Per avere idee su come tracciare i riquadri di delimitazione sulla parte superiore dell'immagine, consulta questo esempio di codice che sovrappone testo e caselle all'immagine utilizzando SVG.

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="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.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.loadObjectDetection('model.json');
const img = document.getElementById('salad');
const options = {score: 0.5, iou: 0.5, topk: 20};
const predictions = await model.detect(img, options);

Puoi specificare un modello con tf.automl.loadObjectDetection(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.detect(img, options). Questa funzione esegue una singola immagine nel modello e restituisce gli oggetti previsti. L'input per questa funzione è un elemento immagine html, un elemento video o un tensore 3D.

La funzione model.detect(img, options) prende anche l'argomento options facoltativo con le possibili specifiche:

• score: punteggio di probabilità compreso tra 0 e 1. Il valore predefinito è 0,5. Le caselle con un punteggio inferiore a questa soglia verranno ignorate.
• topk: vengono restituiti solo gli oggetti topk con maggiore probabilità. Il numero effettivo di oggetti potrebbe essere inferiore a questo numero.

• iou - Intersezione sulla soglia di unione. IoU è una metrica compresa tra 0 e 1 utilizzata per misurare la sovrapposizione di due riquadri. I riquadri previsti non si sovrapporranno oltre la soglia specificata.

  Consulta la pagina Valutazione dei modelli per ulteriori informazioni sulla valutazione dei modelli utilizzando Intersection over Union (IoU).

Per ulteriori informazioni sull'API, consulta la documentazione del pacchetto AutoML NPM.

Che cosa succede dopo?

Hai completato un tutorial dell'app web Rilevamento di oggetti TensorFlow.js utilizzando un modello Edge. Hai eseguito l'app web in un browser web e eseguito una previsione di rilevamento di oggetti 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:

• Visualizza una demo che utilizza SVG per sovrapporre all'immagine i riquadri previsti con probabilità.
• Scopri di più su TensorFlow.js.
• Scopri di più sulla libreria AutoML NPM tramite la documentazione ufficiale.
• Scopri di più su TensorFlow in generale tramite i suoi tutorial.