Crea una webcam smart in JavaScript con un modello di machine learning preaddestrato TensorFlow.js

1. Prima di iniziare

Il machine learning è una parola molto in voga al giorno d'oggi. Le sue applicazioni sembrano illimitate e sembra destinato a toccare quasi tutti i settori nel prossimo futuro. Se lavori come ingegnere o designer, front-end o back-end, e hai familiarità con JavaScript, questo codelab è stato scritto per aiutarti a iniziare ad aggiungere il machine learning al tuo set di competenze.

Prerequisiti

Questo codelab è stato scritto per ingegneri esperti che hanno già familiarità con JavaScript.

Cosa creerai

In questo codelab,

• Crea una pagina web che utilizza il machine learning direttamente nel browser web tramite TensorFlow.js per classificare e rilevare oggetti comuni (sì, anche più di uno alla volta) da un flusso live della webcam.
• Migliora la tua webcam standard per identificare gli oggetti e ottenere le coordinate del riquadro di delimitazione per ciascun oggetto trovato
• Evidenzia l'oggetto trovato nel flusso video, come mostrato di seguito:

Immagina di poter rilevare se una persona è presente in un video, in modo da poter contare quante persone erano presenti in un determinato momento per stimare l'affluenza in una determinata area durante la giornata o inviarti un avviso quando il tuo cane viene rilevato in una stanza della casa in cui non dovrebbe trovarsi mentre sei fuori. Se riuscissi a farlo, saresti a buon punto per creare la tua versione di una videocamera Google Nest che potrebbe avvisarti quando rileva un intruso (di qualsiasi tipo) utilizzando il tuo hardware personalizzato. Piuttosto comodo. È difficile da fare? No. Iniziamo a hackerare…

Cosa imparerai a fare

• Come caricare un modello TensorFlow.js preaddestrato.
• Come recuperare i dati da uno stream live della webcam e disegnarli sulla tela.
• Come classificare un frame di immagine per trovare i riquadri di delimitazione di qualsiasi oggetto che il modello è stato addestrato a riconoscere.
• Come utilizzare i dati restituiti dal modello per evidenziare gli oggetti trovati.

Questo codelab si concentra su come iniziare a utilizzare i modelli preaddestrati TensorFlow.js. Concetti e blocchi di codice non pertinenti a TensorFlow.js e al machine learning non vengono spiegati e sono forniti solo per operazioni di copia e incolla.

2. Che cos'è TensorFlow.js?

TensorFlow.js è una libreria di machine learning open source che può essere eseguita ovunque sia possibile eseguire JavaScript. Si basa sulla libreria TensorFlow originale scritta in Python e mira a ricreare questa esperienza per gli sviluppatori e questo insieme di API per l'ecosistema JavaScript.

Dove può essere utilizzata?

Data la portabilità di JavaScript, ora puoi scrivere in una sola lingua ed eseguire il machine learning con facilità su tutte le seguenti piattaforme:

• Lato client nel browser web utilizzando JavaScript vanilla
• Lato server e persino dispositivi IoT come Raspberry Pi utilizzando Node.js
• App desktop che utilizzano Electron
• App native per dispositivi mobili che utilizzano React Native

TensorFlow.js supporta anche più backend all'interno di ciascuno di questi ambienti (gli ambienti basati sull'hardware effettivo in cui può essere eseguito, ad esempio la CPU o WebGL). Un "backend" in questo contesto non indica un ambiente lato server. Il backend per l'esecuzione potrebbe essere lato client in WebGL, ad esempio, per garantire la compatibilità e mantenere la velocità di esecuzione. Al momento TensorFlow.js supporta:

• Esecuzione di WebGL sulla scheda grafica (GPU) del dispositivo: questo è il modo più veloce per eseguire modelli più grandi (di dimensioni superiori a 3 MB) con l'accelerazione GPU.
• Esecuzione di Web Assembly (WASM) sulla CPU: per migliorare le prestazioni della CPU su tutti i dispositivi, inclusi ad esempio i cellulari di vecchia generazione. Questo è più adatto a modelli più piccoli (di dimensioni inferiori a 3 MB) che possono essere eseguiti più velocemente sulla CPU con WASM rispetto a WebGL a causa dell'overhead del caricamento dei contenuti su un processore grafico.
• Esecuzione della CPU: il fallback se nessuno degli altri ambienti è disponibile. È il più lento dei tre, ma è sempre a tua disposizione.

Nota:puoi scegliere di forzare uno di questi backend se sai su quale dispositivo verrà eseguito il codice oppure puoi lasciare che TensorFlow.js decida per te se non lo specifichi.

Superpoteri lato client

L'esecuzione di TensorFlow.js nel browser web sul computer client può comportare diversi vantaggi da prendere in considerazione.

Privacy

Puoi addestrare e classificare i dati sulla macchina client senza mai inviarli a un server web di terze parti. A volte, questo potrebbe essere un requisito per rispettare le leggi locali, ad esempio il GDPR, o durante l'elaborazione di dati che l'utente potrebbe voler conservare sul proprio computer e non inviare a terzi.

Velocità

Poiché non devi inviare dati a un server remoto, l'inferenza (l'atto di classificare i dati) può essere più veloce. Ancora meglio, se l'utente ti concede l'accesso, puoi accedere direttamente ai sensori del dispositivo, come fotocamera, microfono, GPS, accelerometro e altro ancora.

Copertura e scalabilità

Con un solo clic, chiunque al mondo può fare clic su un link che gli invii, aprire la pagina web nel browser e utilizzare ciò che hai creato. Non è necessario configurare Linux lato server con driver CUDA e molto altro solo per utilizzare il sistema di machine learning.

Costo

Nessun server significa che l'unica cosa che devi pagare è una CDN per ospitare i file HTML, CSS, JS e modello. Il costo di una CDN è molto inferiore rispetto a quello di un server (potenzialmente con una scheda grafica collegata) in esecuzione 24 ore su 24, 7 giorni su 7.

Funzionalità lato server

L'utilizzo dell'implementazione Node.js di TensorFlow.js consente le seguenti funzionalità.

Supporto completo di CUDA

Sul lato server, per l'accelerazione della scheda grafica, devi installare i driver NVIDIA CUDA per consentire a TensorFlow di funzionare con la scheda grafica (a differenza del browser che utilizza WebGL, senza necessità di installazione). Tuttavia, con il supporto completo di CUDA puoi sfruttare appieno le funzionalità di basso livello della scheda grafica, ottenendo tempi di addestramento e inferenza più rapidi. Il rendimento è alla pari con l'implementazione di TensorFlow in Python, in quanto entrambi condividono lo stesso backend C++.

Dimensioni del modello

Per i modelli all'avanguardia della ricerca, potresti lavorare con modelli molto grandi, forse di dimensioni di gigabyte. Al momento questi modelli non possono essere eseguiti nel browser web a causa delle limitazioni dell'utilizzo della memoria per scheda del browser. Per eseguire questi modelli più grandi, puoi utilizzare Node.js sul tuo server con le specifiche hardware necessarie per eseguire un modello di questo tipo in modo efficiente.

IOT

Node.js è supportato su computer a scheda singola popolari come Raspberry Pi, il che significa che puoi eseguire modelli TensorFlow.js anche su questi dispositivi.

Velocità

Node.js è scritto in JavaScript, il che significa che beneficia della compilazione just-in-time. Ciò significa che spesso potresti notare miglioramenti delle prestazioni quando utilizzi Node.js, in quanto verrà ottimizzato in fase di runtime, soprattutto per qualsiasi preelaborazione che potresti eseguire. Un ottimo esempio è visibile in questo case study, che mostra come Hugging Face ha utilizzato Node.js per ottenere un aumento delle prestazioni di due volte per il proprio modello di elaborazione del linguaggio naturale.

Ora che hai compreso le nozioni di base di TensorFlow.js, dove può essere eseguito e alcuni dei suoi vantaggi, iniziamo a fare cose utili.

3. Modelli preaddestrati

TensorFlow.js fornisce una serie di modelli di machine learning (ML) pre-addestrati. Questi modelli sono stati addestrati dal team di TensorFlow.js e racchiusi in una classe facile da usare e sono un ottimo modo per fare i primi passi con il machine learning. Anziché creare e addestrare un modello per risolvere il problema, puoi importare un modello preaddestrato come punto di partenza.

Puoi trovare un elenco in continua crescita di modelli preaddestrati facili da usare nella pagina Modelli per JavaScript di TensorFlow.js. Esistono anche altri luoghi in cui puoi ottenere modelli TensorFlow convertiti che funzionano in TensorFlow.js, tra cui TensorFlow Hub.

Perché dovrei utilizzare un modello preaddestrato?

Se si adatta al tuo caso d'uso, iniziare con un modello preaddestrato popolare offre una serie di vantaggi, tra cui:

1. Non è necessario raccogliere autonomamente i dati di addestramento. Preparare i dati nel formato corretto ed etichettarli in modo che un sistema di machine learning possa utilizzarli per l'apprendimento può richiedere molto tempo e denaro.
2. La possibilità di creare rapidamente un prototipo di un'idea con costi e tempi ridotti.
   Non ha senso "reinventare la ruota" quando un modello preaddestrato può essere sufficiente per fare ciò che ti serve, consentendoti di concentrarti sull'utilizzo delle conoscenze fornite dal modello per implementare le tue idee creative.
3. Utilizzo di ricerche all'avanguardia. I modelli preaddestrati si basano spesso su ricerche popolari, il che ti consente di conoscerli e di comprenderne le prestazioni nel mondo reale.
4. Facilità d'uso e documentazione completa. A causa della popolarità di questi modelli.
5. Funzionalità di transfer learning. Alcuni modelli preaddestrati offrono funzionalità di transfer learning, ovvero la pratica di trasferire le informazioni apprese da un'attività di machine learning a un altro esempio simile. Ad esempio, un modello originariamente addestrato a riconoscere i gatti potrebbe essere riaddestrato a riconoscere i cani, se gli fornissi nuovi dati di addestramento. Sarà più veloce perché non dovrai partire da zero. Il modello può utilizzare ciò che ha già imparato per riconoscere i gatti e poi riconoscere la nuova cosa: anche i cani hanno occhi e orecchie, quindi se sa già come trovare queste caratteristiche, siamo a metà strada. Riassegna il modello ai tuoi dati in modo molto più rapido.

Che cos'è COCO-SSD?

COCO-SSD è il nome di un modello ML preaddestrato per il rilevamento di oggetti che utilizzerai durante questo codelab, il cui scopo è localizzare e identificare più oggetti in una singola immagine. In altre parole, può farti conoscere il riquadro di delimitazione degli oggetti per cui è stato addestrato a trovare la posizione in qualsiasi immagine che gli presenti. Un esempio è mostrato nell'immagine seguente:

Se nell'immagine sopra ci fosse più di un cane, ti verrebbero fornite le coordinate di due riquadri di delimitazione, che descrivono la posizione di ciascuno. COCO-SSD è stato preaddestrato per riconoscere 90 oggetti comuni di uso quotidiano, come una persona, un'auto, un gatto e così via.

Da dove deriva il nome?

Il nome può sembrare strano, ma deriva da due acronimi:

• COCO: si riferisce al fatto che è stato addestrato sul set di dati COCO (Common Objects in Context), che è disponibile senza costi per chiunque voglia scaricarlo e utilizzarlo per addestrare i propri modelli. Il set di dati contiene oltre 200.000 immagini etichettate che possono essere utilizzate per l'apprendimento.
• SSD (Single Shot MultiBox Detection): si riferisce a una parte dell'architettura del modello utilizzata nell'implementazione del modello. Non è necessario comprendere questo concetto per il codelab, ma se sei curioso puoi scoprire di più sugli SSD qui.

4. Configurazione

Che cosa ti serve

• Un browser web moderno.
• Conoscenza di base di HTML, CSS, JavaScript e Chrome DevTools (visualizzazione dell'output della console).

Iniziamo a programmare

Sono stati creati modelli boilerplate da cui partire per Glitch.com o Codepen.io. Puoi clonare uno dei due modelli come stato di base per questo lab di codifica con un solo clic.

Su Glitch, fai clic sul pulsante Remixa per creare una fork e un nuovo insieme di file che puoi modificare.

In alternativa, su Codepen, fai clic su fork in basso a destra dello schermo.

Questo scheletro molto semplice fornisce i seguenti file:

• Pagina HTML (index.html)
• Foglio di stile (style.css)
• File in cui scrivere il codice JavaScript (script.js)

Per comodità, nel file HTML è stata aggiunta un'importazione per la libreria TensorFlow.js. Ha questo aspetto:

index.html

<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>

Alternativa: utilizza il tuo web editor preferito o lavora in locale

Se vuoi scaricare il codice e lavorare in locale o su un altro editor online, crea i tre file denominati sopra nella stessa directory e copia e incolla il codice dal boilerplate di Glitch in ciascuno di essi.

Attenzione:se esegui l'app localmente, anziché su un altro sito come Codepen.io o simili, assicurati di pubblicare i file da un web server e non di fare doppio clic su index.html per aprirli utilizzando il protocollo file://.

5. Compila la struttura HTML

Tutti i prototipi richiedono una struttura HTML di base. Lo utilizzerai in un secondo momento per eseguire il rendering dell'output del modello di machine learning. Configuriamolo ora:

• Un titolo per la pagina
• Testo descrittivo
• Un pulsante per attivare la webcam
• Un tag video per il rendering dello stream della webcam

Per configurare queste funzionalità, apri index.html e incolla il seguente codice al posto di quello esistente:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Multiple object detection using pre trained model in TensorFlow.js</title>
    <meta charset="utf-8">
    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>  
  <body>
    <h1>Multiple object detection using pre trained model in TensorFlow.js</h1>

    <p>Wait for the model to load before clicking the button to enable the webcam - at which point it will become visible to use.</p>
    
    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="camView">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay muted width="640" height="480"></video>
      </div>
    </section>

    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
    <!-- Load the coco-ssd model to use to recognize things in images -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
    
    <!-- Import the page's JavaScript to do some stuff -->
    <script src="script.js" defer></script>
  </body>
</html>

Comprendere il codice

Nota alcuni elementi chiave che hai aggiunto:

• Hai aggiunto un tag <h1> e alcuni tag <p> per l'intestazione, nonché alcune informazioni su come utilizzare la pagina. Niente di speciale qui.

Hai anche aggiunto un tag di sezione che rappresenta lo spazio demo:

index.html

    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="webcam">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay width="640" height="480"></video>
      </div>
    </section>

• Inizialmente, assegnerai a questo section la classe "invisible". In questo modo puoi mostrare visivamente all'utente quando il modello è pronto ed è sicuro fare clic sul pulsante Attiva webcam.
• Hai aggiunto il pulsante Attiva webcam, a cui applicherai uno stile nel CSS.
• Hai anche aggiunto un tag video, a cui trasmetterai in streaming l'input della webcam. Lo configurerai a breve nel codice JavaScript.

Se visualizzi l'anteprima dell'output in questo momento, dovrebbe avere un aspetto simile a questo:

Suggerimento:puoi visualizzare l'anteprima del tuo lavoro su Glitch.com facendo clic sul menu a discesa Mostra in alto a sinistra dello schermo e selezionando Accanto al codice.

6. Aggiungi stile

Valori predefiniti degli elementi

Innanzitutto, aggiungiamo gli stili per gli elementi HTML che abbiamo appena aggiunto per assicurarci che vengano visualizzati correttamente:

style.css

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  color: #3D3D3D;
}

h1 {
  font-style: italic;
  color: #FF6F00;
}

video {
  display: block;
}

section {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

Successivamente, aggiungi alcune classi CSS utili per gestire i vari stati dell'interfaccia utente, ad esempio quando vogliamo nascondere il pulsante o rendere l'area demo non disponibile se il modello non è ancora pronto.

style.css

.removed {
  display: none;
}

.invisible {
  opacity: 0.2;
}

.camView {
  position: relative;
  float: left;
  width: calc(100% - 20px);
  margin: 10px;
  cursor: pointer;
}

.camView p {
  position: absolute;
  padding: 5px;
  background-color: rgba(255, 111, 0, 0.85);
  color: #FFF;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  z-index: 2;
  font-size: 12px;
}

.highlighter {
  background: rgba(0, 255, 0, 0.25);
  border: 1px dashed #fff;
  z-index: 1;
  position: absolute;
}

Bene. Questo è tutto ciò che ti serve. Se hai sovrascritto correttamente gli stili con i due snippet di codice riportati sopra, l'anteprima live dovrebbe ora avere questo aspetto:

Nota come il testo dell'area demo e il pulsante non siano disponibili, poiché per impostazione predefinita all'HTML è applicata la classe "invisible". Utilizzerai JavaScript per rimuovere questa classe una volta che il modello è pronto per essere utilizzato.

7. Crea lo scheletro JavaScript

Suggerimento:il codice riportato di seguito è mostrato in ordine, ma suddiviso in parti più piccole per una spiegazione più approfondita. Se copi e incolli ogni segmento alla fine del file JavaScript ogni volta o sostituisci una funzione vuota definita dal passaggio precedente come consigliato, tutto dovrebbe funzionare correttamente :-)

Fare riferimento agli elementi DOM chiave

Innanzitutto, assicurati di poter accedere alle parti principali della pagina che dovrai manipolare o a cui dovrai accedere in un secondo momento nel nostro codice:

script.js

const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');

Verificare il supporto della webcam

Ora puoi aggiungere alcune funzioni di assistenza per verificare se il browser che utilizzi supporta l'accesso allo stream della webcam tramite getUserMedia:

script.js

// Check if webcam access is supported.
function getUserMediaSupported() {
  return !!(navigator.mediaDevices &&
    navigator.mediaDevices.getUserMedia);
}

// If webcam supported, add event listener to button for when user
// wants to activate it to call enableCam function which we will 
// define in the next step.
if (getUserMediaSupported()) {
  enableWebcamButton.addEventListener('click', enableCam);
} else {
  console.warn('getUserMedia() is not supported by your browser');
}

// Placeholder function for next step. Paste over this in the next step.
function enableCam(event) {
}

Recupero dello stream della webcam

Successivamente, compila il codice per la funzione enableCam precedentemente vuota che abbiamo definito sopra copiando e incollando il codice seguente:

Attenzione:assicurati di copiare il codice riportato di seguito e di incollarlo sopra la funzione enableCam che abbiamo definito nel passaggio precedente, anziché aggiungerlo alla fine del file.

script.js

// Enable the live webcam view and start classification.
function enableCam(event) {
  // Only continue if the COCO-SSD has finished loading.
  if (!model) {
    return;
  }
  
  // Hide the button once clicked.
  event.target.classList.add('removed');  
  
  // getUsermedia parameters to force video but not audio.
  const constraints = {
    video: true
  };

  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    video.srcObject = stream;
    video.addEventListener('loadeddata', predictWebcam);
  });
}

Infine, aggiungi del codice temporaneo per verificare se la webcam funziona.

Il codice riportato di seguito simula il caricamento del modello e attiva il pulsante della videocamera, in modo che tu possa farci clic. Sostituirai tutto questo codice nel passaggio successivo, quindi preparati a eliminarlo di nuovo tra un attimo:

script.js

// Placeholder function for next step.
function predictWebcam() {
}

// Pretend model has loaded so we can try out the webcam code.
var model = true;
demosSection.classList.remove('invisible');

Fai una prova! A questo punto, se esegui il codice attuale così com'è e fai clic sul pulsante quando diventa disponibile, dovresti vedere una visualizzazione live della webcam dopo aver accettato l'accesso alla webcam nel browser web (che di solito viene visualizzato in alto a sinistra nel browser come popup).

Bene. Se hai eseguito il codice e fatto clic sul pulsante così com'è, dovresti vedere un risultato simile a questo:

8. Utilizzo del modello di machine learning

Caricamento del modello

Ora puoi caricare il modello COCO-SSD.

Al termine dell'inizializzazione, attiva l'area demo e il pulsante sulla tua pagina web (incolla questo codice sopra il codice temporaneo che hai aggiunto alla fine dell'ultimo passaggio):

script.js

// Store the resulting model in the global scope of our app.
var model = undefined;

// Before we can use COCO-SSD class we must wait for it to finish
// loading. Machine Learning models can be large and take a moment 
// to get everything needed to run.
// Note: cocoSsd is an external object loaded from our index.html
// script tag import so ignore any warning in Glitch.
cocoSsd.load().then(function (loadedModel) {
  model = loadedModel;
  // Show demo section now model is ready to use.
  demosSection.classList.remove('invisible');
});

Dopo aver aggiunto il codice riportato sopra e aggiornato la visualizzazione in diretta, noterai che alcuni secondi dopo il caricamento della pagina (a seconda della velocità della rete), il pulsante Attiva webcam viene visualizzato automaticamente quando il modello è pronto per l'uso. Tuttavia, hai incollato anche la funzione predictWebcam. Ora è il momento di definire completamente questa funzione, perché al momento il nostro codice non fa nulla.

Passiamo al passaggio successivo.

Classificare un frame della webcam

Esegui il codice riportato di seguito per consentire all'app di acquisire continuamente un frame dallo stream della webcam quando il browser è pronto e passarlo al modello per la classificazione.

Il modello analizzerà quindi i risultati, disegnerà un tag <p> alle coordinate restituite e imposterà il testo sull'etichetta dell'oggetto, se supera un determinato livello di affidabilità.

script.js

var children = [];

function predictWebcam() {
  // Now let's start classifying a frame in the stream.
  model.detect(video).then(function (predictions) {
    // Remove any highlighting we did previous frame.
    for (let i = 0; i < children.length; i++) {
      liveView.removeChild(children[i]);
    }
    children.splice(0);
    
    // Now lets loop through predictions and draw them to the live view if
    // they have a high confidence score.
    for (let n = 0; n < predictions.length; n++) {
      // If we are over 66% sure we are sure we classified it right, draw it!
      if (predictions[n].score > 0.66) {
        const p = document.createElement('p');
        p.innerText = predictions[n].class  + ' - with ' 
            + Math.round(parseFloat(predictions[n].score) * 100) 
            + '% confidence.';
        p.style = 'margin-left: ' + predictions[n].bbox[0] + 'px; margin-top: '
            + (predictions[n].bbox[1] - 10) + 'px; width: ' 
            + (predictions[n].bbox[2] - 10) + 'px; top: 0; left: 0;';

        const highlighter = document.createElement('div');
        highlighter.setAttribute('class', 'highlighter');
        highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '
            + predictions[n].bbox[1] + 'px; width: ' 
            + predictions[n].bbox[2] + 'px; height: '
            + predictions[n].bbox[3] + 'px;';

        liveView.appendChild(highlighter);
        liveView.appendChild(p);
        children.push(highlighter);
        children.push(p);
      }
    }
    
    // Call this function again to keep predicting when the browser is ready.
    window.requestAnimationFrame(predictWebcam);
  });
}

La chiamata davvero importante in questo nuovo codice è model.detect().

Tutti i modelli predefiniti per TensorFlow.js hanno una funzione come questa (il cui nome può variare da modello a modello, quindi consulta la documentazione per i dettagli) che esegue effettivamente l'inferenza di machine learning.

L'inferenza è semplicemente l'atto di prendere un input, eseguirlo tramite il modello di machine learning (essenzialmente molte operazioni matematiche) e fornire alcuni risultati. Con i modelli predefiniti di TensorFlow.js, restituiamo le nostre previsioni sotto forma di oggetti JSON, quindi è facile da usare.

Puoi trovare tutti i dettagli di questa funzione di previsione nella nostra documentazione GitHub per il modello COCO-SSD qui. Questa funzione svolge un lavoro pesante dietro le quinte: può accettare qualsiasi oggetto "simile a un'immagine" come parametro, ad esempio un'immagine, un video, un canvas e così via. L'utilizzo di modelli predefiniti può farti risparmiare molto tempo e fatica, perché non dovrai scrivere questo codice da solo e potrai utilizzarlo "out of the box".

L'esecuzione di questo codice dovrebbe ora restituire un'immagine simile alla seguente:

Infine, ecco un esempio di codice che rileva più oggetti contemporaneamente:

Bene! Puoi immaginare quanto sarebbe semplice creare un dispositivo come Nest Cam utilizzando un vecchio smartphone per ricevere un avviso quando il tuo cane è sul divano o il tuo gatto sul sofà. Se hai problemi con il codice, controlla la mia versione funzionante finale qui per verificare se hai copiato qualcosa in modo errato.

9. Complimenti

Congratulazioni, hai fatto i primi passi nell'utilizzo di TensorFlow.js e del machine learning nel browser web. Ora tocca a te prendere questi umili inizi e trasformarli in qualcosa di creativo. Cosa realizzerai?

Riepilogo

In questo codelab:

• Hai appreso i vantaggi dell'utilizzo di TensorFlow.js rispetto ad altre forme di TensorFlow.
• Hai imparato le situazioni in cui potresti voler iniziare con un modello di machine learning preaddestrato.
• Creazione di una pagina web completamente funzionante in grado di classificare gli oggetti in tempo reale utilizzando la webcam, tra cui:
• Creare una struttura HTML per i contenuti
• Definizione degli stili per elementi e classi HTML
• Configurazione di JavaScript scaffolding per interagire con l'HTML e rilevare la presenza di una webcam
• Caricamento di un modello TensorFlow.js preaddestrato
• Utilizzando il modello caricato per eseguire classificazioni continue dello stream della webcam e disegnando un riquadro di delimitazione intorno agli oggetti nell'immagine.

Passaggi successivi

Condividi con noi le tue creazioni. Puoi estendere facilmente ciò che hai creato per questo codelab anche ad altri casi d'uso creativi. Ti invitiamo a pensare fuori dagli schemi e a continuare a sperimentare anche dopo aver terminato.

• Dai un'occhiata a tutti gli oggetti che questo modello può riconoscere e pensa a come potresti utilizzare queste informazioni per eseguire un'azione. Quali idee creative potrebbero essere implementate estendendo ciò che hai creato oggi?

Forse potresti aggiungere un semplice livello lato server per inviare una notifica a un altro dispositivo quando rileva un determinato oggetto a tua scelta utilizzando i websocket. Sarebbe un ottimo modo per riciclare un vecchio smartphone e dargli un nuovo scopo. Le possibilità sono illimitate.

• Tagga i tuoi progetti sui social media utilizzando l'hashtag #MadeWithTFJS per avere la possibilità di vederli pubblicati sul nostro blog di TensorFlow o addirittura presentati in occasione di eventi TensorFlow futuri.

Altre codelab su TensorFlow.js per approfondire l'argomento

• Scrivere una rete neurale da zero in TensorFlow.js
• Riconoscimento audio tramite il trasferimento di conoscenze in TensorFlow.js
• Classificazione di immagini personalizzata utilizzando il trasferimento di apprendimento in TensorFlow.js

Siti web da visitare

• Sito web ufficiale di TensorFlow.js
• Modelli TensorFlow.js predefiniti
• API TensorFlow.js
• Demo di TensorFlow.js