TensorFlow.js: Mit Firebase Hosting ein ML-Modell in großem Maßstab bereitstellen und hosten

1. Einführung

Sie haben mit TensorFlow.js ein benutzerdefiniertes Modell für maschinelles Lernen erstellt, müssen es aber jetzt irgendwo hosten, damit Sie es auf einer Website Ihrer Wahl verwenden können. Dafür gibt es viele Möglichkeiten. Heute sehen wir uns an, wie einfach es ist, Firebase Hosting zu verwenden. Das bietet Ihnen auch einige zusätzliche Vorteile wie die Versionsverwaltung und das Bereitstellen von Modellen über eine sichere Verbindung.

Umfang

In diesem Codelab erstellen Sie ein vollständiges End-to-End-System, das ein benutzerdefiniertes gespeichertes TensorFlow.js-Modell zusammen mit den zugehörigen Assets wie HTML, CSS und JavaScript hosten und ausführen kann. Wir erstellen ein sehr einfaches, schlankes Modell, das anhand eines Eingabewerts einen numerischen Ausgabewert vorhersagen kann (z.B. den Preis eines Hauses anhand seiner Quadratmeterzahl), und hosten es über Firebase Hosting, damit es in großem Umfang verwendet werden kann.

Lerninhalte

  • Benutzerdefiniertes TensorFlow.js-Modell im richtigen Format speichern
  • Firebase-Konto für Hosting einrichten
  • Assets in Firebase Hosting bereitstellen
  • Neue Versionen eines Modells bereitstellen

Hinweis: In diesem Codelab geht es darum, wie Sie ein benutzerdefiniertes trainiertes Modell hosten, um es bereitzustellen. Es ist kein Kurs zur Erstellung der perfekten Modellarchitektur. Daher werden wir die Erstellung des Machine-Learning-Modells selbst anhand eines einfachen Beispiels schnell durchgehen. Die Prinzipien sind unabhängig davon, welches Modell Sie selbst erstellen, immer dieselben.

Teilen Sie uns mit, was Sie erstellen

Wenn Sie mit diesem Stack etwas Cooles erstellt haben, lassen Sie es uns wissen. Wir würden uns freuen, wenn Sie uns Ihre Kreationen zeigen.

Taggen Sie uns in den sozialen Medien mit dem Hashtag #MadeWithTFJS, damit Ihr Projekt im TensorFlow-Blog oder bei zukünftigen Veranstaltungen wie unseren Show & Tells vorgestellt wird.

2. Was ist Firebase Hosting?

Firebase Hosting bietet schnelles und sicheres Hosting in Produktionsqualität für Ihre Webanwendung, statische / dynamische Inhalte und Mikrodienste.

Mit einem einzigen Befehl können Sie Webanwendungen schnell bereitstellen und Inhalte über ein globales CDN (Content Delivery Network) bereitstellen. So sind Ihre Inhalte fast überall mit niedriger Latenz verfügbar. Sie können Firebase Hosting auch mit Cloud Functions oder Cloud Run von Firebase kombinieren, um Mikrodienste zu erstellen und zu hosten. Das geht jedoch über den Rahmen dieses Codelabs hinaus.

Wichtige Funktionen von Firebase Hosting

  • Inhalte über eine sichere Verbindung bereitstellen – das moderne Web ist sicher. Häufig muss die Website über einen sicheren Kontext bereitgestellt werden, um clientseitig auf Sensoren zuzugreifen. SSL ist ohne zusätzlichen Konfigurationsaufwand in Firebase Hosting eingebunden, d. h. Inhalte werden immer sicher bereitgestellt.
  • Statische und dynamische Inhalte sowie Mikrodienste mit Unterstützung für die Authentifizierung hosten, sodass nur angemeldete Nutzer diese Dateien laden / anzeigen können.
  • Inhalte schnell bereitstellen: Jede Datei, die Sie hochladen, wird auf SSDs an den CDN-Rändern in der ganzen Welt im Cache gespeichert. Inhalte werden unabhängig vom Standort der Nutzer schnell bereitgestellt.
  • Neue Versionen mit einem Befehl bereitstellen: Mit der Firebase-Befehlszeile können Sie Ihre App in wenigen Sekunden bereitstellen.
  • Rollback mit einem Klick: Schnelle Deployments sind gut, noch besser ist es jedoch, Fehler rückgängig machen zu können. Firebase Hosting umfasst eine vollständige Versions- und Releaseverwaltung durch Rollbacks mit nur einem Klick.

Ganz gleich, ob Sie eine einfache App-Landingpage oder eine komplexe Progressive Web-App (PWA) bereitstellen – mit Hosting erhalten Sie die Infrastruktur, Funktionen und Tools, die für die Bereitstellung und Verwaltung von Websites und Apps erforderlich sind.

Standardmäßig hat jedes Firebase-Projekt kostenlose Subdomains für die Domains web.app und firebaseapp.com. Auf diesen beiden Websites werden dieselben bereitgestellten Inhalte und Konfigurationen verwendet. Sie können bei Bedarf auch Ihren eigenen Domainnamen mit einer auf Firebase gehosteten Website verknüpfen.

Implementierungsschritte

Bevor wir das tun können, benötigen wir jedoch ein Machine-Learning-Modell und eine Web-App, die bereitgestellt werden sollen. Lass uns also eins erstellen.

3. Ein einfaches Machine-Learning-Modell zur Vorhersage von Immobilienpreisen

In dieser Übung erstellen wir ein sehr einfaches ML-Modell, das numerische Werte vorhersagt. Wir versuchen, den Wert eines fiktiven Hauses anhand seiner Größe in Quadratfuß vorherzusagen. Dies dient nur zur Veranschaulichung. Für diese Demo multiplizieren wir die Quadratmeter des Hauses einfach mit 1.000, um den vorhergesagten Wert für unsere Trainingsdaten zu erhalten. Das Machine-Learning-Modell muss dies jedoch selbst lernen.

In der Realität würden Sie echte Daten verwenden, die möglicherweise komplexere Beziehungen aufweisen (z. B. ist der geschätzte Dollarwert bei kleineren Häusern vielleicht nur 500-mal so hoch wie die Größe, aber nach einem bestimmten Schwellenwert wird er allmählich 1.000-mal so hoch). Möglicherweise benötigen Sie ein komplexeres Modell, um die beste Methode zur Vorhersage dieser Werte zu ermitteln.

Das Modell, das wir heute erstellen (lineare Regression), könnte mit genügend Daten aus der realen Welt verwendet werden, um viele andere Dinge vorherzusagen. Außerdem ist es für unseren hypothetischen Anwendungsfall oben einfach zu verwenden. Heute konzentrieren wir uns jedoch darauf, wie Sie ein Modell speichern und bereitstellen können, anstatt es für einen bestimmten Anwendungsfall zu entwerfen und zu optimieren. Legen wir los!

Trainings- und Testdaten

Alle ML-Modelle beginnen mit dem Abrufen von Trainingsbeispieldaten, mit denen wir dem Modell beibringen können, Werte in der Zukunft vorherzusagen. Normalerweise würden Sie solche Daten aus einer Datenbank, einem Ordner mit Dateien, einer CSV-Datei usw. abrufen. Hier werden jedoch 20 Beispiele direkt als Array in JavaScript hartcodiert, wie unten gezeigt. Wir empfehlen, diesen Code in einer Umgebung zu replizieren, in der Sie derzeit gerne programmieren, z. B. Glitch.com, oder in Ihrem eigenen Texteditor lokal, wenn Sie einen Server auf localhost ausführen können.

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];

Wie Sie sehen, haben wir für jeden Datensatz einen entsprechenden Antwortwert, den wir in Zukunft vorhersagen möchten. Sie können sich diese Werte als die x- und y-Werte in einem einfachen 2D-Diagramm vorstellen.

Für den Wert 800 möchten wir also eine geschätzte Antwort von 800.000 $ausgeben. Für den Wert 900 würden wir 900.000 $ausgeben usw. Die Zahl wird im Grunde mit 1.000 multipliziert. Das ML-Modell kennt diese einfache Beziehung von 1.000 * N jedoch nicht und muss sie anhand der von uns bereitgestellten Beispielen selbst lernen.

Beachten Sie, dass wir auch einige Testdaten haben, die vollständig von den Trainingsdaten getrennt sind. So können wir das trainierte Modell bewerten und sehen, wie gut es mit Daten funktioniert, die es noch nie zuvor gesehen hat.

Wir laden dieses Skript zusammen mit der TensorFlow.js-Bibliothek mit dem folgenden HTML-Code:

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>

Modell trainieren

Als Nächstes müssen wir das Modell trainieren. Fügen Sie dazu den folgenden Code am Ende der Datei zu unserem vorhandenen JS-Code oben hinzu.

Für Interessierte wurden Kommentare hinzugefügt. Wie bereits erwähnt, geht es in diesem Codelab jedoch hauptsächlich darum, ein gespeichertes Modell zu hosten. Am Ende sind weitere Codelabs verlinkt, wenn Sie die Modellerstellung genauer nachvollziehen möchten. Derzeit können Sie den Code kopieren und in Ihr Projekt einfügen.

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();
}

Mit dem obigen Code haben wir ein Modell trainiert, das in der Lage ist, einen Ausgabewert anhand des Eingabewerts vorherzusagen. Wenn ich den oben genannten Code ausführe, erhalte ich für den Eingabewert 768 die Vorhersage 768.073. Diese wird in der Entwicklerkonsole Ihres Browsers ausgegeben. Drücken Sie F12, um die Konsole zu öffnen, falls sie noch nicht geöffnet ist. Das ist eine ziemlich gute Schätzung des Hauspreises, da wir Beispiele angegeben haben, die 1.000-mal höher als die Eingabe waren. Hinweis: Der vorhergesagte Wert kann leicht abweichen. Das ist normal.

Wenn wir mit dieser Leistung zufrieden sind, müssen wir das Modell nur noch auf der Festplatte speichern, damit wir es in Firebase Hosting hochladen können.

Modell speichern

Wenn wir den folgenden Code am Ende der oben genannten Funktion „evaluate“ (nach „model.predict“) hinzufügen, können wir das resultierende Modell nach Abschluss des Trainings direkt aus dem Webbrowser exportieren und auf der Festplatte speichern. So können wir es später hosten und verwenden, ohne es jedes Mal neu trainieren zu müssen, wenn wir die Seite laden.

model.js

await model.save('downloads://my-model');

Wenn Sie jetzt „train.html“ aufrufen und die Seite ausführen, sollte das Modell trainiert werden. Das kann einige Sekunden dauern. Anschließend werden Sie aufgefordert, das trainierte Modell herunterzuladen.

4. Firebase einrichten

In Firebase anmelden und Projekt erstellen

Wenn Sie Firebase noch nicht kennen, können Sie sich ganz einfach mit Ihrem Google-Konto registrieren. Rufen Sie einfach https://firebase.google.com/ auf und melden Sie sich mit Ihrem regulären Google-Konto an. Klicken Sie nach der Weiterleitung zur Startseite rechts oben auf „Zur Konsole“:

ea7ff3f08e4019b0.png

Nachdem Sie zur Konsole weitergeleitet wurden, sollte eine Landingpage wie diese angezeigt werden:

166d9408ad46599b.png

Klicken Sie einfach auf „Projekt hinzufügen“, um ein neues Firebase-Projekt zu erstellen. Geben Sie Ihrem Projekt einen eindeutigen Namen, akzeptieren Sie die Nutzungsbedingungen und klicken Sie auf „Weiter“.

Als Nächstes werden Sie gefragt, ob Sie Ihrem Projekt Analysen hinzufügen möchten. Wenn Sie auf solche Analysen zugreifen möchten, aktivieren Sie diese Option und klicken Sie auf „Weiter“:

a34c2be47b26e6b5.png

Wenn alles geklappt hat, sollten Sie eine Seite sehen, auf der angezeigt wird, dass das Projekt bereit ist:

1306dc803ad22338.png

Endlich! Wir haben ein Projekt. Klicken Sie auf „Weiter“, um die Console für das neu erstellte Projekt aufzurufen. Lassen Sie die Seite für die spätere Verwendung geöffnet. Zuerst müssen wir jedoch einige Tools installieren.

Befehlszeile installieren und verbinden

Firebase ist als Node-NPM-Paket verfügbar, das Sie über die Befehlszeile installieren und verwenden können. So lassen sich Ihre lokalen Dateien und Ordner ganz einfach in Firebase Hosting bereitstellen. In diesem Tutorial verwenden wir eine Linux-Umgebung. Wenn Sie Windows oder Mac haben, können Sie dieser Anleitung folgen, um die CLI-Tools auf Ihrem Gerät einzurichten.

Unter Linux installieren wir jedoch zuerst NPM und Node.js, falls noch nicht geschehen ( folgen Sie dieser Anleitung, wenn Sie andere Umgebungen verwenden). Verwenden Sie dazu die folgenden drei Befehle in einem Terminalfenster:

Befehlszeilenterminal:

sudo apt update

Befehlszeilenterminal:

sudo apt install nodejs

Befehlszeilenterminal:

sudo apt install npm

Nachdem Sie Node.js und NPM installiert haben, müssen Sie nur noch den folgenden Befehl in einem Terminalfenster ausführen, um die Firebase-Befehlszeilentools zu installieren:

Befehlszeilenterminal:

sudo npm install -g firebase-tools

Sehr gut! Jetzt können wir unser Firebase-Projekt mit unserem System verbinden, um Dateien darauf zu übertragen und vieles mehr.

Bei Firebase anmelden

Melden Sie sich mit folgendem Befehl mit Ihrem Google-Konto in Firebase an:

Befehlszeilenterminal:

firebase login

Sie werden aufgefordert, Zugriff auf Ihr Google Firebase-Konto zu gewähren:

4dc28589bef2ff5d.png

Wenn Sie dies zulassen, sollte die Verbindung Ihrer Befehlszeilentools mit Ihrem Firebase-Konto endlich erfolgreich sein:

df397ec7a555e8de.png

Schließen Sie das Fenster und kehren Sie zum Befehlszeilenterminal zurück, in dem Sie zuvor getippt haben. Es sollte nun bereit sein, neue Befehle entgegenzunehmen (wir haben alle privaten Informationen in unserem Screenshot ausgeblendet):

67a3ff39d3c0f3e4.png

Glückwunsch! Wir können jetzt Dateien von unserem lokalen Computer in das erstellte Projekt hochladen.

Projekt für die Bereitstellung in Firebase Hosting initialisieren

Wenn Sie Ihren lokalen Ordner mit Ihrem Firebase-Projekt verbinden möchten, führen Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen Projektverzeichnisses aus (dem Ordner, den Sie zum Hochladen von Dateien bei der Bereitstellung verwenden möchten).

Befehlszeilenterminal:

firebase init

Folgen Sie nach der Ausführung dieses Befehls einfach der Anleitung im Terminal, um die Einrichtung abzuschließen (siehe unten):

61e0f6d92ef3e1c4.png

Hier können wir einfach Hosting auswählen, indem wir die Pfeiltaste nach unten auf der Tastatur verwenden, dann die Leertaste zum Auswählen und dann die Eingabetaste zum Bestätigen drücken.

Jetzt können wir das zuvor erstellte Projekt auswählen:

4f2a1696d5cfd72f.png

Drücken Sie die Eingabetaste für „Use an existing project“ (Vorhandenes Projekt verwenden) und wählen Sie es dann mit dem Abwärtspfeil aus (siehe unten):

4dfcf2dff745f2c.png

Drücken Sie abschließend die Eingabetaste, um die Konfiguration zu verwenden, und akzeptieren Sie die Standardeinstellungen auf dem letzten Bildschirm, der angezeigt wird. Wählen Sie „Nein“ aus, um die Konfiguration als Single-Page-Anwendung zu überspringen:

7668a2175b624af2.png

So können Sie mehrere HTML-Seiten hosten.

Nachdem die Initialisierung abgeschlossen ist, sehen Sie, dass im Verzeichnis, in dem wir die oben genannten Befehle ausgeführt haben, eine firebase.json-Datei und ein „public“-Ordner erstellt wurden.

cd7724b92f3d507.png

Jetzt müssen wir nur noch die Dateien, die wir bereitstellen möchten, in den von uns erstellten öffentlichen Ordner verschieben. Machen wir uns also daran, die Tabellen zu befüllen.

5. TensorFlow.js-Webseite erstellen

Gespeichertes Modell laden

Kopieren Sie zuerst das Machine Learning-Modell, das Sie zuvor im Codelab gespeichert haben, in den öffentlichen Ordner, den Sie gerade mit Firebase erstellt haben. Ziehen Sie Ihre gespeicherten Dateien einfach per Drag-and-drop in diesen Ordner, wie unten dargestellt:

cd6f565189e23705.png

Außerdem wurden die Dateien „index.html“ und „404.html“ von Firebase erstellt. Bearbeiten Sie nun die Datei „index.html“ mit Ihrem bevorzugten Texteditor auf Ihrem Computer, um den benutzerdefinierten Code wie unten gezeigt hinzuzufügen:

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>

Im neuen Code für index.html oben wird ein Stylesheet angegeben, damit wir der Seite später bei Bedarf ein Design hinzufügen können. Außerdem wird script.js angegeben, um den Code zu hosten, den wir zum Verwenden unseres gespeicherten TensorFlow.js-Modells schreiben müssen.

Erstellen wir diese Dateien jetzt und füllen wir sie wie folgt aus, damit sie etwas Nützliches tun:

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();

Wenn Sie die Schritte korrekt ausgeführt haben, sollten Sie nun die folgenden bearbeiteten Dateien im von uns erstellten öffentlichen Ordner sehen:

253498c703c04ee.png

Jetzt müssen wir nur noch unsere Dateien bereitstellen, damit wir überprüfen können, ob alles funktioniert.

6. Modell und Website bereitstellen

Veröffentlichung

Kehren Sie zum Terminalfenster zurück, das Sie im Firebase-Projektordner auf Ihrem lokalen Computer geöffnet haben. Dieser Ordner enthält den oben genannten Ordner „public“ sowie die Firebase-Initialisierungsdateien.

Geben Sie einfach Folgendes ein, um die Dateien Ihres öffentlichen Ordners bereitzustellen:

Befehlszeilenterminal:

firebase deploy

Warten Sie, bis der Terminalbefehl abgeschlossen ist. Sie sollten dann eine Meldung erhalten, dass die Veröffentlichung erfolgreich war, zusammen mit der URL, die Sie für die Verwendung benötigen:

c5795cae85ed82a5.png

Im Beispiel oben sehen Sie die finale URL für die Bereitstellung:

https://tensorflow-js-demo.web.app (Ihre URL ist jedoch der Name des Projekts, das Sie erstellt haben).

Öffnen Sie diese URL in einem Webbrowser, um zu prüfen, ob sie funktioniert. Wenn dies der Fall ist, sollte in der Entwicklerkonsole der Seite, die Sie öffnen (drücken Sie F12, um die Entwicklerkonsole zu öffnen), Folgendes angezeigt werden:

182aee0acfa7c41e.png

Wie Sie sehen, wird die Seite auf der bereitgestellten Domain geladen und die Vorhersage unseres Modells für 1.337 Quadratfuß wird korrekt angezeigt: 1.336.999, 25 $. Das ist eine sehr gute Schätzung,da wir erwartet hatten,dass der Preis 1.000-mal so hoch sein würde wie die Quadratfußzahl. Wir können natürlich beliebig viele Vorhersagen treffen, wenn wir stattdessen eine benutzerfreundliche Oberfläche zum Aufrufen des Modells erstellen. Das würde alles in JavaScript ausgeführt werden, sodass Ihre Anfragen privat und sicher bleiben.

Nachdem Ihr Modell bereitgestellt und gehostet wurde, können Sie die Website mit jedem auf der Welt teilen. Die Nutzer können Ihre Anwendung dann auf ihrem Gerät verwenden. Natürlich können Sie eine bessere Benutzeroberfläche hinzufügen und sie ansprechend gestalten, aber das geht über den Rahmen dieser Anleitung hinaus. Es gibt keine Begrenzung für die möglichen Web-Apps, die Sie auf diese Weise hosten können. Sie basieren auf maschinellem Lernen und können mit einem einzigen Klick ohne Installation verwendet werden. Wir empfehlen Ihnen, sich weitere Situationen zu überlegen, in denen ein Browser-ML-Modell von Vorteil sein könnte.

Nutzung überwachen

Zusätzlich zu allen Google-Analysen, die Sie Ihrem Websitecode hinzufügen, bietet Firebase auch Versions- und Nutzungsstatistiken über die Konsole für Ihr Projekt. Nach der Bereitstellung wird etwa Folgendes angezeigt, was Sie bei Bedarf von Zeit zu Zeit prüfen können:

42b1cb8f7c10016.png

fbdd6504bec7c3d.png

Wie Sie sehen, erhalten Sie im kostenlosen Tarif standardmäßig 10 GB Bandbreite pro Monat für Ihre gehosteten Dateien. Wenn Ihre Website beliebter ist, müssen Sie möglicherweise ein Abrechnungskonto hinzufügen, um mehr als dieses Kontingent in einem bestimmten Monat nutzen zu können. Hier finden Sie die Firebase-Tarife für größere Projekte. Die meisten Gelegenheitsnutzer von Prototypen werden die kostenlose Stufe wahrscheinlich nicht überschreiten, wenn Ihr Modell klein ist und die Nutzung gering ist. So können Sie testen, ob das Modell Ihren Anforderungen entspricht, bevor Sie sich für einen kostenpflichtigen Tarif entscheiden, wenn Ihr Unternehmen oder Ihre Idee wächst.

7. Glückwunsch

Herzlichen Glückwunsch! Sie haben die ersten Schritte bei der Verwendung von TensorFlow.js mit Firebase unternommen, um ein benutzerdefiniertes Machine-Learning-Modell zu erstellen und bereitzustellen, das Sie mit der Welt teilen können. Stellen Sie sich vor, was Sie mit diesem leistungsstarken und skalierbaren Ansatz alles erstellen könnten. Er ist für Produktionsanwendungen geeignet, da Firebase automatisch mit der Nachfrage skaliert wird. Egal,ob 10 oder 10.000 Nutzer die App verwenden möchten, sie funktioniert einfach.

Wenn Sie Änderungen an Ihren Dateien vornehmen, stellen Sie Ihre App einfach wie zuvor mit „firebase deploy“ neu bereit. Leeren Sie außerdem Ihren Browsercache, damit Sie beim nächsten Laden der Seite die neue Version der Dateien erhalten. Wenn Sie die Entwicklertools geöffnet haben, können Sie dies auf dem Tab „Netzwerk“ erzwingen. Aktivieren Sie dazu das Kästchen „Cache deaktivieren“ oben auf diesem Tab:

b1e4c1bf304a4869.png

Zusammenfassung

In diesem Codelab haben wir:

  1. Sie haben ein benutzerdefiniertes TensorFlow.js-Modell von Grund auf definiert und trainiert, um Immobilienpreise vorherzusagen.
  2. Sie haben sich registriert, Firebase und die Firebase CLI-Tools auf Ihrem Entwicklungscomputer konfiguriert und installiert.
  3. Sie haben eine funktionierende Website bereitgestellt und gestartet, die unser trainiertes Modell aus Schritt 1 lädt und in einer Webanwendung in der Praxis verwendet, auf die jeder überall auf der Welt im großen Maßstab zugreifen kann.

Nächste Schritte

Nachdem Sie nun eine funktionierende Basis haben, können Sie sich überlegen, wie Sie dieses Boilerplate für die Bereitstellung von ML-Modellen erweitern können.

Wir würden uns freuen, wenn Sie diese Funktion mit Ihren eigenen Daten nutzen. Denken Sie an die Branche oder den Bereich, in dem Sie leben oder arbeiten. Wie könnten Sie solche Daten verwenden, um Vorhersagen zu treffen, die für Sie (oder andere) in Zukunft nützlich sein könnten? Immobilien sind hier nicht das einzige Beispiel. Wir empfehlen Ihnen, diesen Ansatz auch auf Ihre eigenen Herausforderungen anzuwenden. Viel Spaß beim Hacken!

Vergessen Sie nicht, uns in allen Inhalten zu taggen, die Sie mit #MadeWithTFJS erstellen. Klicken Sie auf diesen Link, um sich anzusehen, was andere erstellt haben. Mit etwas Glück werden Ihre Inhalte in den sozialen Medien oder auf zukünftigen TensorFlow-Veranstaltungen präsentiert. Wir sind gespannt auf deine Kreationen. Bei Feedback oder Fragen kannst du dich natürlich an den Autor dieses Codelabs wenden.

Weitere TensorFlow.js-Codelabs

Websites, die Sie sich ansehen sollten