1. Introduzione
Hai creato un modello di machine learning personalizzato con TensorFlow.js, ma ora devi ospitarlo da qualche parte per utilizzarlo sul sito web che preferisci. Esistono molte opzioni per farlo, ma oggi vedremo quanto è facile utilizzare Firebase Hosting, che può anche offrirti alcuni vantaggi aggiuntivi, come il controllo delle versioni, la pubblicazione di modelli tramite una connessione sicura e altro ancora.
Cosa creerai
In questo codelab creerai un sistema end-to-end completo in grado di ospitare ed eseguire un modello TensorFlow.js salvato personalizzato insieme ai relativi asset, come HTML, CSS e JavaScript. Creeremo un modello leggero molto semplice in grado di prevedere un valore di output numerico dato un valore di input (ad es. qual è il prezzo di una casa data la sua metratura) e lo ospiteremo tramite Firebase Hosting in modo che possa essere utilizzato su larga scala.
Cosa imparerai a fare
- Come salvare un modello TensorFlow.js personalizzato nel formato corretto
- Come configurare un account Firebase per l'hosting
- Come eseguire il deployment degli asset in Firebase Hosting
- Come eseguire il deployment di nuove versioni di un modello.
Nota: questo codelab si concentra su come prendere un modello addestrato personalizzato e ospitarlo per il deployment, anziché su un corso per creare l'architettura del modello perfetta, quindi procederemo rapidamente con la creazione del modello di machine learning stesso con un esempio banale. I principi rimarranno gli stessi, indipendentemente dal modello che creerai.
Condividi con noi i tuoi contenuti
Se hai realizzato qualcosa di interessante utilizzando questo stack, faccelo sapere. Ci piacerebbe vedere le tue creazioni.
Tagga i nostri account sui social media utilizzando l'hashtag #MadeWithTFJS per avere la possibilità che il tuo progetto venga pubblicato sul nostro blog TensorFlow o in eventi futuri come i nostri Show & Tell.
2. Che cos'è Firebase Hosting?
Firebase Hosting offre un hosting di livello di produzione rapido e sicuro per la tua app web, i tuoi contenuti statici / dinamici e i tuoi microservizi
Con un unico comando, puoi eseguire rapidamente il deployment di app web e pubblicare contenuti su una rete CDN (Content Delivery Network) globale, assicurandoti che i tuoi contenuti siano disponibili con bassa latenza quasi ovunque. Puoi anche accoppiare Firebase Hosting con Cloud Functions o Cloud Run per creare e ospitare anche microservizi, ma questo esula dall'ambito di questo codelab.
Funzionalità principali di Firebase Hosting
- Pubblica contenuti su una connessione sicura: il web moderno è sicuro. Spesso, per accedere ai sensori lato client, il sito deve essere pubblicato in un contesto sicuro. La tecnologia SSL senza necessità di configurazione è integrata in Firebase Hosting, in modo che i contenuti siano sempre disponibili in totale sicurezza per tutti i file ospitati.
- Ospita contenuti statici e dinamici, oltre a microservizi con supporto per l'autenticazione, in modo che solo gli utenti che hanno eseguito l'accesso possano caricare / visualizzare questi file, se vuoi.
- Pubblica contenuti rapidamente: ogni file caricato viene memorizzato nella cache delle unità SSD sui server edge della rete CDN a livello globale. Ovunque si trovino gli utenti, i contenuti vengono distribuiti in tempi rapidi.
- Esegui il deployment di nuove versioni con un solo comando: utilizzando l'interfaccia a riga di comando di Firebase, puoi rendere la tua app operativa in pochi secondi.
- Rollback con un solo clic: la rapidità di deployment è senza dubbio vantaggiosa, ma la capacità di annullare gli errori lo è forse di più. Firebase Hosting fornisce il controllo completo delle versioni e la gestione delle release grazie ai rollback che richiedono un solo clic.
Che tu stia eseguendo il deployment di una semplice pagina di destinazione dell'app o di una complessa app web progressiva (PWA), Hosting ti offre l'infrastruttura, le funzionalità e gli strumenti personalizzati per il deployment e la gestione di siti web e app.
Per impostazione predefinita, ogni progetto Firebase ha sottodomini senza costi sui domini web.app e firebaseapp.com. Questi due siti pubblicano gli stessi contenuti e la stessa configurazione di deployment. Se vuoi, puoi anche collegare il tuo nome di dominio a un sito ospitato su Firebase.
Passaggi per l'implementazione
- Configura un progetto
- Installare e configurare l'interfaccia a riga di comando di Firebase
- Eseguire il deployment del sito
- Link all'app web Firebase per il monitoraggio delle prestazioni (facoltativo)
Ma prima di poter fare tutto questo, abbiamo bisogno di un modello di machine learning e di un'app web da implementare. Creiamone uno.
3. Un semplice modello di machine learning per prevedere i prezzi delle case
Ai fini di questo esercizio, creeremo un modello di ML molto semplice che prevede valori numerici. A scopo illustrativo, proveremo a utilizzare il machine learning per prevedere il valore di una casa fittizia in base alle sue dimensioni in metri quadrati. Infatti, per questa demo moltiplicheremo semplicemente per 1000 i metri quadrati della casa per ottenere il valore previsto per i nostri dati di addestramento, ma il machine learning dovrà imparare questo valore da solo.
In realtà, sceglieresti di utilizzare dati reali che potrebbero avere relazioni più complesse (ad esempio, per le case più piccole, il valore in dollari viene stimato moltiplicando la superficie per 500, ma dopo una determinata soglia il moltiplicatore diventa gradualmente 1000 e così via) e potresti aver bisogno di un modello più avanzato per apprendere il modo migliore per prevedere questi valori.
Il modello che creeremo oggi (regressione lineare) potrebbe essere utilizzato per prevedere molte altre cose, se si dispone di dati reali sufficienti, ed è semplice da utilizzare per il nostro caso d'uso ipotetico riportato sopra. Tuttavia, oggi ci concentreremo su come salvare e implementare un modello anziché progettarne e ottimizzarne uno per un determinato caso d'uso. Iniziamo!
Dati di addestramento e test
Tutti i modelli ML iniziano con l'ottenimento di alcuni dati di addestramento di esempio che possiamo utilizzare per insegnare al modello a prevedere i valori in futuro. In genere, puoi estrarre questi dati da un database, una cartella di file, un file CSV e altro ancora, ma qui codificheremo direttamente 20 esempi come array in JavaScript, come mostrato di seguito. Ti consigliamo di replicare questo codice in un ambiente in cui ti trovi a tuo agio a programmare, ad esempio Glitch.com, o nel tuo editor di testo locale se riesci a eseguire un server su localhost.
model.js
// House square footage.
const data = [800, 850, 900, 950, 980, 1000, 1050, 1075, 1100, 1150, 1200, 1250, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000];
// Estimated dollar cost of house for each piece of data above (1000x square footage).
const answers = [800000, 850000, 900000, 950000, 980000, 1000000, 1050000, 1075000, 1100000, 1150000, 1200000, 1250000 , 1300000, 1400000, 1500000, 1600000, 1700000, 1800000, 1900000, 2000000];
// Testing data separate from training data.
const dataTest = [886, 1225, 500];
const answersTest = [886000, 1225000, 500000];
Come puoi vedere, per ogni dato abbiamo un valore di risposta corrispondente, che è il valore che cercheremo di prevedere in futuro (puoi immaginarli come i valori x e y di un semplice grafico 2D).
Quindi, per il valore 800,vogliamo produrre una stima della risposta di output di 800.000 $. Per il valore 900, l'output sarà 900.000 $e così via. In sostanza, il numero viene moltiplicato per 1000. Tuttavia, il modello ML non conosce questa semplice relazione di 1000 * N e deve apprenderla da solo dagli esempi che forniamo.
Tieni presente che abbiamo anche alcuni dati di test completamente separati dai dati di addestramento. Ciò consente di valutare il modello addestrato per vedere come si comporta con dati che non ha mai visto prima.
Caricheremo questo script insieme alla libreria TensorFlow.js utilizzando il seguente codice HTML:
train.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Training Model</title>
<meta charset="utf-8">
</head>
<body>
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
<!-- Import our JS code to train the model -->
<script src="/model.js" defer></script>
</body>
</html>
Addestramento del modello
A questo punto, addestra il modello aggiungendo il codice riportato di seguito al codice JS esistente sopra alla fine del file.
Sono stati aggiunti commenti per i più curiosi, ma come accennato questo codelab riguarda principalmente l'hosting di un modello salvato. Alla fine sono disponibili altri codelab se vuoi comprendere la creazione di modelli in modo più dettagliato. Per il momento puoi copiare e incollare il codice nel tuo progetto.
model.js
// Create Tensor representations of our vanilla JS arrays above
// so can be used to train our model.
const trainTensors = {
data: tf.tensor2d(data, [data.length, 1]),
answer: tf.tensor2d(answers, [answers.length, 1])
};
const testTensors = {
data: tf.tensor2d(dataTest, [dataTest.length, 1]),
answer: tf.tensor2d(answersTest, [answersTest.length, 1])
};
// Now actually create and define model architecture.
const model = tf.sequential();
// We will use one dense layer with 1 neuron and an input of
// a single value.
model.add(tf.layers.dense({inputShape: [1], units: 1}));
// Choose a learning rate that is suitable for the data we are using.
const LEARNING_RATE = 0.0001;
train();
async function train() {
// Compile the model with the defined learning rate and specify
// our loss function to use.
model.compile({
optimizer: tf.train.sgd(LEARNING_RATE),
loss: 'meanAbsoluteError'
});
// Finally do the training itself over 500 iterations of the data.
// As we have so little training data we use batch size of 1.
// We also set for the data to be shuffled each time we try
// and learn from it.
let results = await model.fit(trainTensors.data, trainTensors.answer, {epochs: 500, batchSize: 1, shuffle: true});
// Once trained we can evaluate the model.
evaluate();
}
async function evaluate(stuff) {
// Predict answer for a single piece of data.
model.predict(tf.tensor2d([[768]])).print();
}
Utilizzando il codice riportato sopra, siamo riusciti ad addestrare un modello in grado di prevedere un valore di output dato il valore di input. Se esegui il codice riportato sopra, ottieni una previsione di 768.073 per il valore di input 768, che viene stampato nella console per gli sviluppatori del browser (premi F12 per aprirla, se non è già aperta). Si tratta di una stima piuttosto buona del prezzo della casa, dato che abbiamo fornito esempi 1000 volte superiori all'input. Nota: il valore previsto potrebbe essere leggermente diverso, il che è normale.
Se siamo soddisfatti di questo rendimento, non ci resta che salvare il modello su disco per poterlo caricare su Firebase Hosting.
Salvataggio del modello
L'aggiunta del codice riportato di seguito alla fine della funzione di valutazione (dopo model.predict) sopra ci consente di esportare il modello risultante dopo il completamento dell'addestramento direttamente dal browser web e salvarlo su disco, in modo da poterlo ospitare in un secondo momento e utilizzarlo in futuro senza doverlo riaddestrare ogni volta che carichiamo la pagina.
model.js
await model.save('downloads://my-model');
Se ora visiti train.html ed esegui la pagina, il modello dovrebbe essere addestrato (potrebbe richiedere alcuni secondi) e al termine ti verrà chiesto di scaricare il modello addestrato risultante.
4. Configurazione di Firebase
Accedi a Firebase e crea un progetto
Se non hai mai utilizzato Firebase, la registrazione è semplice e puoi utilizzare il tuo Account Google. Vai alla pagina https://firebase.google.com/ e accedi con il tuo normale Account Google che vuoi utilizzare. Una volta reindirizzato alla home page, fai clic su "Vai alla console" in alto a destra nella pagina:
Una volta reindirizzato alla console, dovresti visualizzare una pagina di destinazione simile a questa:
Fai clic su Aggiungi progetto come mostrato per creare un nuovo progetto Firebase, assegna un nome univoco al progetto, accetta i termini e fai clic su Continua.
A questo punto ti verrà chiesto se vuoi aggiungere Analytics al tuo progetto. Se vuoi accedere a queste analisi, attiva questa opzione e fai clic su Continua come mostrato:
Se tutto è andato bene, dovresti visualizzare una pagina con il progetto pronto, come mostrato di seguito:
Bene! Abbiamo un progetto. Fai clic su Continua per accedere alla console del progetto appena creato. Tieni la pagina aperta per utilizzarla in un secondo momento, ma per ora dobbiamo installare alcuni strumenti.
Installazione e connessione dell'interfaccia a riga di comando
Firebase è disponibile come pacchetto Node NPM che puoi installare e utilizzare tramite l'interfaccia a riga di comando (CLI), il che semplifica il deployment di file e cartelle locali su Firebase Hosting. Per il tutorial di oggi utilizzeremo un ambiente Linux, ma se hai Windows o Mac, puoi seguire le istruzioni riportate qui per configurare gli strumenti della CLI sul tuo dispositivo.
Su Linux, tuttavia, installeremo prima NPM e Node.js se non sono già presenti (segui queste istruzioni se utilizzi altri ambienti) utilizzando i seguenti tre comandi in una finestra del terminale:
Terminal della riga di comando:
sudo apt update
Terminal della riga di comando:
sudo apt install nodejs
Terminal della riga di comando:
sudo apt install npm
Ora che hai installato Node.js e NPM, devi semplicemente eseguire il comando seguente in una finestra del terminale per installare gli strumenti a riga di comando Firebase:
Terminal della riga di comando:
sudo npm install -g firebase-tools
Bene. Ora siamo pronti a connettere il nostro progetto Firebase al nostro sistema per poter eseguire il push dei file e altro ancora.
Accesso a Firebase
Accedi a Firebase utilizzando il tuo Account Google eseguendo questo comando:
Terminal della riga di comando:
firebase login
Ti verrà chiesto di concedere l'accesso al tuo account Google Firebase come mostrato di seguito:
Consenti questa operazione e dovresti finalmente visualizzare una connessione riuscita degli strumenti a riga di comando al tuo account Firebase:
Chiudi la finestra e torna al terminale della riga di comando in cui stavi digitando in precedenza. Ora dovrebbe essere pronto ad accettare nuovi comandi, come mostrato (abbiamo nascosto tutte le informazioni private nello screenshot):
Complimenti! Ora siamo pronti a trasferire i file al progetto creato dalla nostra macchina locale.
Inizializzazione del progetto per il deployment in Firebase Hosting
Per connettere la cartella locale al progetto Firebase, esegui il comando seguente dalla radice della directory del progetto locale (la cartella che vuoi utilizzare per caricare i file durante il deployment).
Terminal della riga di comando:
firebase init
Dopo aver eseguito questo comando, segui le istruzioni nel terminale per completare la configurazione come mostrato di seguito:
Qui possiamo semplicemente selezionare Hosting utilizzando la freccia giù sulla tastiera, quindi premere la barra spaziatrice per selezionare e poi Invio per confermare.
Ora possiamo selezionare il progetto esistente che abbiamo creato in precedenza da utilizzare:
Premi Invio su "Usa un progetto esistente" e poi selezionalo utilizzando il tasto Freccia giù come mostrato di seguito:
Infine, premi Invio per utilizzarlo, quindi accetta i valori predefiniti nella schermata finale visualizzata e seleziona "No" per configurare l'app come applicazione a pagina singola:
In questo modo potrai ospitare più pagine HTML, se lo desideri.
Ora che l'inizializzazione è completata, noterai che sono stati creati un file firebase.json e una cartella "public" nella directory da cui abbiamo eseguito i comandi precedenti.
Ora non ci resta che spostare i file che vogliamo distribuire nella cartella pubblica che abbiamo creato e saremo pronti per la distribuzione. Facciamolo subito.
5. Creazione della pagina web TensorFlow.js
Caricamento del modello salvato in corso…
Innanzitutto, assicuriamoci di copiare il modello di machine learning che abbiamo salvato in precedenza nel codelab nella cartella pubblica che abbiamo appena creato con Firebase. Trascina semplicemente i file salvati in questa cartella come mostrato:
Noterai anche che Firebase ha creato i file index.html e 404.html. Modifichiamo index.html utilizzando il tuo editor di testo preferito sul tuo computer in modo da poter aggiungere il nostro codice personalizzato come mostrato:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World - TensorFlow.js</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TensorFlow.js Hello World</h1>
<p>Check the console (Press F12) to see predictions!</p>
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
<!-- Import the page's JavaScript to do some stuff -->
<script src="script.js" defer></script>
</body>
</html>
Nel nuovo codice per index.html riportato sopra, specifichiamo un foglio di stile in modo da poter aggiungere uno stile alla nostra pagina in un secondo momento, se lo desideriamo, e anche script.js per ospitare il codice che dobbiamo scrivere per utilizzare il modello TensorFlow.js salvato.
Procediamo ora a creare questi file e a compilarli come segue in modo che facciano qualcosa di utile:
style.css
/** Leave blank for now **/
script.js
// Load our saved model from current directory (which will be
// hosted via Firebase Hosting)
async function predict() {
// Relative URL provided for my-model.json.
const model = await tf.loadLayersModel('my-model.json');
// Once model is loaded, let's try using it to make a prediction!
// Print to developer console for now.
model.predict(tf.tensor2d([[1337]])).print();
}
predict();
Se hai seguito correttamente i passaggi, ora dovresti visualizzare i seguenti file modificati nella cartella pubblica che abbiamo creato:
Ora non ci resta che eseguire il deployment dei file per verificare che funzioni.
6. Deployment del modello e del sito web
Pubblicazione
Torna alla finestra del terminale che hai aperto nella cartella del progetto Firebase della tua macchina locale (questa è la cartella che contiene la cartella "public" sopra insieme ai file di inizializzazione di Firebase).
Digita quanto segue per eseguire il deployment dei file della cartella pubblica:
Terminal della riga di comando:
firebase deploy
Lascia che il comando del terminale venga completato e dovresti avere una release completata correttamente insieme all'URL che puoi utilizzare:
Nell'esempio riportato sopra, l'URL finale per visualizzare il nostro deployment è:
https://tensorflow-js-demo.web.app (ma il tuo URL sarà il nome del progetto che hai creato).
Apri questo URL in un browser web per verificare che funzioni. In caso di esito positivo, nella console per sviluppatori della pagina che apri dovrebbe essere visualizzato un messaggio simile a questo (premi F12 per aprire la console per sviluppatori).
Come puoi vedere, la pagina viene caricata sul dominio di deployment e possiamo vedere correttamente la previsione del nostro modello per 1337 piedi quadrati, che risulta essere pari a 1.336.999,25 $, una stima molto buona, dato che ci aspettavamo che fosse 1000 volte il valore dei piedi quadrati. Ovviamente possiamo fare tutte le previsioni che vogliamo se creiamo una bella interfaccia utente per chiamare il modello e tutto questo verrà eseguito interamente in JavaScript, mantenendo le tue query private e sicure.
Ora che il modello è stato implementato e ospitato, puoi condividere il sito web con chiunque nel mondo e chiunque potrà utilizzare la tua applicazione sul proprio computer. Ovviamente, potresti voler aggiungere un'interfaccia utente migliore e renderla più accattivante, ma questo va oltre lo scopo di questo tutorial. Non esiste un limite alle possibili app web che puoi ospitare in questo modo, basate sul machine learning e che possono funzionare con un solo clic senza richiedere alcuna installazione. Ti invitiamo a pensare ad altre situazioni che potrebbero trarre vantaggio da un modello di machine learning nel browser.
Monitoraggio dell'utilizzo
Oltre a Google Analytics, che puoi aggiungere al codice del tuo sito web, Firebase offre anche il controllo delle versioni e le statistiche di utilizzo tramite la console per il tuo progetto. Dopo il deployment, vedrai un messaggio simile a questo, che puoi controllare di tanto in tanto in base alle esigenze:
Come puoi vedere, per impostazione predefinita, nel livello senza costi hai a disposizione 10 GB di larghezza di banda al mese per i file ospitati. Se il tuo sito è più popolare, potresti dover aggiungere un account di fatturazione per utilizzare più di questo in un determinato mese. Puoi consultare i piani Firebase per progetti più grandi qui, anche se la maggior parte degli utenti occasionali per i prototipi probabilmente non supererà il livello senza costi se il modello è piccolo e l'utilizzo è basso. Questo è un ottimo modo per testare e verificare che soddisfi le tue esigenze prima di passare a un piano a pagamento man mano che la tua attività o la tua idea cresce.
7. Complimenti
Congratulazioni, hai fatto i primi passi nell'utilizzo di TensorFlow.js con Firebase per creare ed eseguire il deployment di un modello di machine learning personalizzato, in modo da poterlo condividere con il mondo. Immagina tutte le altre cose che potresti creare utilizzando questo approccio potente e scalabile, pronto per i casi d'uso di produzione, se vuoi, poiché Firebase si adatta automaticamente alla domanda, quindi non importa se 10 o 10.000 utenti vogliono utilizzarlo, funzionerà.
Se modifichi uno dei tuoi file, esegui nuovamente il deployment dell'app utilizzando firebase deploy come in precedenza e assicurati di svuotare la cache del browser per ottenere la nuova versione dei file al successivo caricamento della pagina. Se hai aperto gli strumenti per sviluppatori, puoi forzare questa operazione nella scheda Rete durante i test per semplificare la procedura selezionando la casella di controllo "Disattiva cache" nella parte superiore della scheda:
Riepilogo
In questo codelab:
- Definito e addestrato un modello TensorFlow.js personalizzato completamente da zero per prevedere i prezzi delle case.
- Hai eseguito la registrazione, la configurazione e l'installazione di Firebase e degli strumenti dell'interfaccia a riga di comando di Firebase sulla tua macchina di sviluppo.
- È stato eseguito il deployment e il lancio di un sito web funzionante che carica il modello addestrato del passaggio 1 e lo utilizza in un'applicazione web reale accessibile a chiunque, ovunque nel mondo, su larga scala.
Passaggi successivi
Ora che hai una base di partenza funzionante, quali idee creative puoi trovare per estendere questo boilerplate di deployment del modello di machine learning?
Ci piacerebbe vederti utilizzare questa funzionalità con i tuoi dati. Pensa al settore o all'area in cui vivi o lavori. Come potresti eseguire l'addestramento su questi dati per fare previsioni che potrebbero essere utili a te (o ad altri) in futuro? Gli immobili non sono l'unico esempio e ti invitiamo ad applicare questo approccio anche alle tue sfide. Buon hacking!
Ricordati di taggarci in tutto ciò che crei utilizzando l'hashtag #MadeWithTFJS (fai clic su questo link per trovare l'ispirazione per le tue creazioni) per avere la possibilità di essere pubblicati sui social media o persino di essere presentati in occasione di eventi TensorFlow futuri. Ci piacerebbe vedere cosa realizzi e, naturalmente, contattare l'autore di questo codelab in caso di feedback o domande.
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