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

1. Einführung

Sie haben also ein benutzerdefiniertes Modell für maschinelles Lernen mit TensorFlow.js erstellt, müssen es aber jetzt irgendwo hosten, um es auf einer Website Ihrer Wahl zu verwenden. Es gibt viele Möglichkeiten, dies zu tun. Heute sehen wir uns an, wie einfach die Verwendung von Firebase Hosting ist. Außerdem bietet es einige zusätzliche Vorteile wie Versionierung, Bereitstellung von Modellen über eine sichere Verbindung und vieles mehr.

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 basierend auf seiner Wohnfläche) und es über Firebase Hosting hosten, damit es in großem Umfang verwendet werden kann.

Aufgaben in diesem Lab

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

Hinweis: In diesem Codelab geht es darum, ein benutzerdefiniert trainiertes Modell für die Bereitstellung zu hosten. Es ist kein Kurs zum Erstellen der perfekten Modellarchitektur. Daher gehen wir schnell an die Erstellung des Modells für maschinelles Lernen mit einem einfachen Beispiel heran. Die Prinzipien sind unabhängig davon gleich, welches Modell Sie selbst erstellen.

Deine Kreationen mit uns teilen

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

Taggt uns in den sozialen Medien mit dem Hashtag #MadeWithTFJS, damit euer Projekt im TensorFlow-Blog oder bei zukünftigen Veranstaltungen wie unseren Show-and-Tells vorgestellt werden kann.

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 schnell Webanwendungen bereitstellen und Inhalte in einem globalen CDN (Content Delivery Network) bereitstellen, damit Ihre Inhalte fast überall mit niedriger Latenz verfügbar sind. Sie können Firebase Hosting auch mit Cloud Functions oder Cloud Run kombinieren, um Mikrodienste zu erstellen und zu hosten. Das ist jedoch nicht Teil dieses Codelabs.

Wichtige Funktionen von Firebase Hosting

• Inhalte über eine sichere Verbindung bereitstellen – das moderne Web ist sicher. Um auf Sensoren auf der Clientseite zuzugreifen, muss die Website häufig über einen sicheren Kontext bereitgestellt werden. SSL ist ohne zusätzlichen Konfigurationsaufwand in Firebase Hosting eingebunden, d. h. Inhalte werden immer sicher bereitgestellt.
• Sie können statische und dynamische Inhalte sowie Mikrodienste mit Authentifizierungsunterstützung hosten, sodass nur angemeldete Nutzer diese Dateien bei Bedarf laden und ansehen können.
• Schnelle Bereitstellung von Inhalten: Jede Datei, die Sie hochladen, wird auf SSDs an den CDN-Rändern in der ganzen Welt im Cache gespeichert. Egal wo sich Ihre Nutzer befinden, die Inhalte werden schnell bereitgestellt.
• Neue Versionen mit einem Befehl bereitstellen: Mit der Firebase-Befehlszeile können Sie Ihre App in Sekundenschnelle einsatzbereit machen.
• Rollback mit nur einem Klick: Schnelle Bereitstellungen 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.

Unabhängig davon, ob Sie eine einfache App-Landingpage oder eine komplexe progressive Web-App (PWA) bereitstellen, bietet Ihnen das Hosting die Infrastruktur, Funktionen und Tools, die speziell auf die Bereitstellung und Verwaltung von Websites und Apps zugeschnitten sind.

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

Schritte zur Implementierung

• Projekt einrichten
• Firebase-Befehlszeilentool installieren und konfigurieren
• Website bereitstellen
• Verknüpfung mit der Firebase-Web-App für die Leistungsüberwachung (optional)

Bevor wir jedoch etwas davon tun können, benötigen wir ein Modell für maschinelles Lernen und eine Webanwendung, die wir bereitstellen können. Also machen wir einen.

3. Ein einfaches Modell für maschinelles Lernen zur Vorhersage von Immobilienpreisen

Für diese Übung erstellen wir ein sehr einfaches ML-Modell, das numerische Werte vorhersagt. Wir versuchen, mithilfe von maschinellem Lernen den Wert eines fiktiven Hauses anhand seiner Größe in Quadratfuß vorherzusagen, nur zu Veranschaulichungszwecken. Für diese Demo multiplizieren wir die Quadratmeterzahl des Hauses einfach mit 1.000, um den prognostizierten Wert für unsere Trainingsdaten zu erhalten. Das maschinelle Lernen muss das aber selbst lernen.

In der Realität würden Sie echte Daten verwenden, die möglicherweise komplexere Beziehungen haben (z. B. ist der Wert für kleinere Häuser nur das 500-Fache der Größe, aber nach einem bestimmten Grenzwert wird er allmählich das 1.000-Fache usw.). Möglicherweise benötigen Sie ein ausgefeilteres Modell, um die beste Methode zur Vorhersage dieser Werte zu ermitteln.

Das Modell, das wir heute erstellen (lineare Regression), kann mit ausreichenden realen Daten für viele andere Dinge verwendet werden. Es ist einfach zu verwenden und eignet sich für unseren hypothetischen Anwendungsfall oben. Heute konzentrieren wir uns jedoch darauf, wie Sie ein Modell speichern und bereitstellen, anstatt es für einen bestimmten Anwendungsfall zu entwerfen und zu optimieren. Legen wir los.

Trainings- und Testdaten

Alle ML-Modelle beginnen mit Beispieltrainingsdaten, mit denen das Modell lernen kann, Werte in der Zukunft vorherzusagen. Normalerweise können Sie solche Daten aus einer Datenbank, einem Dateiordner oder einer CSV-Datei beziehen. Hier werden jedoch 20 Beispiele direkt als Array in JavaScript hartcodiert, wie unten dargestellt. Wir empfehlen, diesen Code in einer Umgebung zu replizieren, in der Sie gerne programmieren, z. B. Glitch.com oder lokal in Ihrem eigenen Texteditor, 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 jedes Datenelement einen entsprechenden Antwortwert, den wir in Zukunft vorhersagen möchten. Sie können sich diese als X- und Y-Werte in einem einfachen 2D-Diagramm vorstellen.

Für den Wert 800 soll also eine Ausgabeantwort mit einer Schätzung von 800.000 $ausgegeben werden. Für den Wert 900 würde „900.000 €“ ausgegeben 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 selbst anhand der von uns bereitgestellten Beispiele lernen.

Beachten Sie, dass wir auch einige Testdaten haben, die völlig unabhängig von den Trainingsdaten 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 Script 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 ist es an der Zeit, das Modell zu trainieren. Fügen Sie dazu den Code unten am Ende der Datei in den vorhandenen JS-Code ein.

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, in denen Sie mehr über die Modellerstellung erfahren. Sie können den Code jetzt 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 Code oben konnten wir ein Modell trainieren, das anhand des Eingabewerts einen Ausgabewert vorhersagen kann. Wenn ich den Code oben ausführe, erhalte ich eine Vorhersage von 768.073 für den Eingabewert 768, die in der Entwicklerkonsole Ihres Browsers ausgegeben wird. Drücken Sie dazu die Taste F12, falls die Konsole noch nicht geöffnet ist. Das ist eine ziemlich gute Schätzung des Hauspreises, da wir Beispiele gegeben haben, die 1.000-mal höher waren als die Eingabe. Hinweis: Der prognostizierte 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 auf Firebase Hosting hochladen können.

Modell speichern

Wenn wir den folgenden Code am Ende der Funktion „evaluate“ (nach „model.predict“) einfü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 an einem anderen Ort hosten und in Zukunft 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 (was einige Sekunden dauern kann). Anschließend werden Sie aufgefordert, das resultierende trainierte Modell herunterzuladen.

Achtung:Wenn Sie zum ersten Mal versuchen, Dateien in Ihrem Webbrowser zu speichern, werden Sie möglicherweise um Erlaubnis zum Herunterladen mehrerer Dateien gebeten:

Klicken Sie einfach in diesem Pop-up auf „Zulassen“, bevor Sie die Dateien herunterladen, da Sie aufgefordert werden, mehrere Dateien zu speichern. Die TensorFlow.js-Speicherfunktion erstellt mehrere Dateien:

• my-model.json
• my-model.weights.bin (es kann mehrere davon geben, wenn das Modell eine große Dateigröße hat, aber in unserem einfachen Beispiel gibt es nur eine).

Wenn Sie diese Berechtigung nicht zulassen, blockiert Ihr Browser möglicherweise das Speichern mehrerer Dateien.

4. Firebase einrichten

In Firebase anmelden und ein Projekt erstellen

Wenn Sie Firebase zum ersten Mal verwenden, können Sie sich ganz einfach mit Ihrem Google-Konto registrieren. Rufe einfach https://firebase.google.com/ auf und melde dich mit dem Google-Konto an, das du verwenden möchtest. Wenn Sie zur Startseite weitergeleitet wurden, klicken Sie rechts oben auf „Zur Console“.

Nach der Weiterleitung zur Konsole sollte eine Landingpage wie diese angezeigt werden:

Klicken Sie einfach auf „Projekt hinzufügen“, um ein neues Firebase-Projekt zu erstellen, geben Sie einen eindeutigen Namen für Ihr Projekt ein, 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 Zugriff auf solche Analysen haben möchten, aktivieren Sie diese Option und klicken Sie auf „Weiter“, wie hier gezeigt:

Hinweis:Auf der nächsten Seite werden Sie möglicherweise aufgefordert, die Nutzungsbedingungen für Analytics zu akzeptieren. Lesen Sie sich diese durch, akzeptieren Sie sie und fahren Sie fort.

Wenn alles richtig funktioniert hat, sollte die Seite „Projekt ist bereit“ angezeigt werden:

Endlich! Wir haben ein Projekt. Klicken Sie auf „Weiter“, um die Console für das neu erstellte Projekt aufzurufen. Lassen Sie die Seite geöffnet, damit Sie sie später wieder aufrufen können. Vorerst 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 können Sie Ihre lokalen Dateien und Ordner ganz einfach bei Firebase Hosting bereitstellen. In diesem Tutorial verwenden wir eine Linux-Umgebung. Wenn Sie Windows oder Mac verwenden, folgen Sie dieser Anleitung, um die Befehlszeilentools auf Ihrem Gerät einzurichten.

Achtung:Unabhängig vom verwendeten Betriebssystem müssen Sie mindestens Node v8.13.0 verwenden. Wenn Sie Node bereits von einer älteren Installation haben, müssen Sie möglicherweise ein Upgrade durchführen, damit die Installation der Firebase-Tools korrekt ausgeführt werden kann.

Unter Linux müssen wir jedoch zuerst NPM und Node.js installieren, falls noch nicht geschehen. Folgen Sie dieser Anleitung, wenn Sie andere Umgebungen verwenden. Führen Sie dazu die folgenden drei Befehle in einem Terminalfenster aus:

Befehlszeilen-Terminal:

sudo apt update

Befehlszeilen-Terminal:

sudo apt install nodejs

Befehlszeilen-Terminal:

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:

Befehlszeilen-Terminal:

sudo npm install -g firebase-tools

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

In Firebase anmelden

Melden Sie sich mit Ihrem Google-Konto in Firebase an. Führen Sie dazu den folgenden Befehl aus:

Befehlszeilen-Terminal:

firebase login

Achtung:Nach einigen Sekunden wird Ihr Webbrowser geöffnet und Sie werden aufgefordert, sich in Firebase anzumelden und Zugriff auf Ihre Firebase-Projekte zu gewähren. Wenn das Pop-up nicht automatisch angezeigt wird, müssen Sie möglicherweise den Link im Terminalfenster kopieren oder darauf klicken. Melden Sie sich an, falls Sie noch nicht angemeldet sind, und gewähren Sie Firebase Zugriff, damit die Tools ordnungsgemäß funktionieren.

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

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

Schließen Sie das Fenster und kehren Sie zum Terminal zurück, in das Sie zuvor geschrieben haben. Es sollte jetzt bereit sein, neue Befehle zu akzeptieren, wie in der Abbildung dargestellt. Wir haben alle privaten Informationen in unserem Screenshot ausgeblendet:

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

Um Ihren lokalen Ordner mit Ihrem Firebase-Projekt zu verbinden, führen Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen Projektverzeichnisses aus (dem Ordner, aus dem Sie beim Bereitstellen Dateien hochladen möchten).

Befehlszeilen-Terminal:

firebase init

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

Hier können wir einfach „Hosting“ auswählen, indem wir auf der Tastatur den Abwärtspfeil drücken und dann die Leertaste drücken, um die Auswahl zu bestätigen.

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

Drücken Sie die Eingabetaste bei „Vorhandenes Projekt verwenden“ und wählen Sie es dann mit dem Abwärtspfeil aus (siehe Abbildung unten):

Drücken Sie abschließend die Eingabetaste, um die Funktion zu verwenden. Akzeptieren Sie dann die Standardeinstellungen auf dem letzten Bildschirm und antworten Sie mit „Nein“, um die Funktion als Single-Page-Anwendung zu konfigurieren:

So können Sie bei Bedarf mehrere HTML-Seiten hosten.

Die Initialisierung ist jetzt abgeschlossen. Sie sehen, dass im Verzeichnis, in dem wir die Befehle oben ausgeführt haben, die Datei „firebase.json“ und der Ordner „public“ erstellt wurden.

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

5. TensorFlow.js-Webseite erstellen

Gespeichertes Modell laden

Kopieren Sie zuerst das Modell für maschinelles Lernen, das Sie zuvor im Codelab gespeichert haben, in den öffentlichen Ordner, den Sie gerade mit Firebase erstellt haben. Ziehen Sie Ihre gespeicherten Dateien per Drag-and-drop in diesen Ordner:

Außerdem sehen Sie, dass Firebase die Dateien „index.html“ und „404.html“ für uns erstellt hat. Bearbeiten Sie „index.html“ mit Ihrem bevorzugten Texteditor auf Ihrem Computer, damit wir unseren eigenen benutzerdefinierten Code hinzufügen können:

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>

In unserem neuen Code für index.html oben geben wir ein Stylesheet an, damit wir unserer Seite später einen Stil hinzufügen können, falls wir das möchten. Außerdem wird script.js angegeben, um den Code zu hosten, den wir schreiben müssen, um unser gespeichertes TensorFlow.js-Modell zu verwenden.

Erstellen wir diese Dateien jetzt und füllen sie so aus, dass 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 jetzt die folgenden bearbeiteten Dateien im von uns erstellten öffentlichen Ordner sehen:

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

6. Modell und Website bereitstellen

Livestreaming

Kehren Sie zum Terminalfenster zurück, das Sie im Firebase-Projektordner auf Ihrem lokalen Computer geöffnet hatten. In diesem Ordner befindet sich der Ordner „public“ mit den Firebase-Init-Dateien.

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

Befehlszeilen-Terminal:

firebase deploy

Warten Sie, bis der Terminalbefehl abgeschlossen ist. Anschließend sollte die Veröffentlichung erfolgreich abgeschlossen sein und Sie sollten die URL sehen, unter der Sie sie verwenden können:

In unserem Beispiel oben sehen Sie, dass die finale URL für die Bereitstellung so lautet:

https://tensorflow-js-demo.web.app (Ihre URL ist jedoch der Name des von Ihnen erstellten Projekts).

Öffnen Sie diese URL in einem Webbrowser, um zu prüfen, ob sie funktioniert. Wenn das der Fall ist, sollte in der Entwicklerkonsole der Seite, die Sie öffnen, ungefähr Folgendes ausgegeben werden. Drücken Sie dazu die Taste F12.

Wie Sie sehen, wird die Seite auf der bereitgestellten Domain geladen. Die Vorhersage unseres Modells für 1.337 Quadratmeter beträgt 1.336.999,25 $. Das ist eine sehr gute Schätzung, da wir mit einem Wert von 1.000 mal der Quadratmeterzahl gerechnet hatten. Wir können natürlich beliebig viele Vorhersagen treffen, wenn wir stattdessen eine schöne Benutzeroberfläche zum Aufrufen des Modells erstellen. Das würde alles vollständig in JavaScript ausgeführt, sodass Ihre Abfragen privat und sicher bleiben.

Hinweis:Sie müssen das Modell beim Laden der Seite nur einmal in JS laden. Anschließend können Sie „model.predict“ beliebig oft mit verschiedenen Eingabedaten aufrufen.

Nachdem Ihr Modell bereitgestellt und gehostet wurde, können Sie die Website für alle freigeben, die Ihre Anwendung auf ihrem Computer verwenden möchten. Natürlich können Sie eine bessere Benutzeroberfläche hinzufügen und sie ansprechend gestalten. Dies wird jedoch in dieser Anleitung nicht behandelt. Es gibt unendlich viele Möglichkeiten, Web-Apps wie diese zu hosten, die mithilfe von maschinellem Lernen funktionieren und mit nur einem Klick gestartet werden können, ohne dass eine Installation erforderlich ist. Wir empfehlen Ihnen, über andere Situationen nachzudenken, in denen ein In-Browser-Modell für maschinelles Lernen von Vorteil sein könnte.

Nutzung überwachen

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

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 in einem bestimmten Monat mehr zu verwenden. Die FireBase-Abos für größere Projekte finden Sie hier. Die meisten Nutzer von Prototypen werden jedoch wahrscheinlich nicht über das kostenlose Abo hinausgehen, wenn Ihr Modell klein und die Nutzung gering ist. Das ist eine gute Möglichkeit, zu testen, ob es Ihren Anforderungen entspricht, bevor Sie sich für ein kostenpflichtiges Abo entscheiden, wenn Sie Ihr Unternehmen oder Ihre Idee ausbauen.

7. Glückwunsch

Herzlichen Glückwunsch! Sie haben die ersten Schritte unternommen, um mit TensorFlow.js und Firebase ein benutzerdefiniertes Modell für maschinelles Lernen zu erstellen und bereitzustellen, das Sie mit der Welt teilen können. Stellen Sie sich vor, was Sie mit diesem leistungsstarken und skalierbaren Ansatz noch alles entwickeln könnten. Er ist auch für Produktionsanwendungen geeignet, da Firebase automatisch mit der Nachfrage skaliert. Ganz gleich, ob 10 oder 10.000 Nutzer die Funktion nutzen möchten – sie funktioniert einfach.

Wenn Sie eine Ihrer Dateien ändern, stellen Sie Ihre App einfach wie zuvor mit „firebase deploy“ wieder bereit und leeren Sie den 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, während Sie Dinge testen. Dazu aktivieren Sie einfach oben auf diesem Tab das Kästchen „Cache deaktivieren“:

Zusammenfassung

In diesem Codelab:

1. Ein benutzerdefiniertes TensorFlow.js-Modell zur Vorhersage von Hauspreisen wurde von Grund auf neu definiert und trainiert.
2. Sie haben sich für Firebase registriert, die Firebase CLI konfiguriert und die Firebase CLI auf Ihrem Entwicklungscomputer installiert.
3. Wir haben eine funktionierende Website bereitgestellt und gestartet, auf der unser trainiertes Modell aus Schritt 1 geladen und in einer realen Webanwendung verwendet wird, auf die jeder überall auf der Welt zugreifen kann.

Was liegt als Nächstes an?

Sie haben jetzt eine funktionierende Basis. Welche kreativen Ideen können Sie sich einfallen lassen, um diese Vorlage für die Bereitstellung von Modellen für maschinelles Lernen zu erweitern?

Wir würden uns freuen, wenn Sie diese Funktion mit Ihren eigenen Daten verwenden. Denken Sie an die Branche oder Region, in der Sie leben oder arbeiten. Wie könnten Sie mit solchen Daten trainieren, um Vorhersagen zu treffen, die Ihnen (oder anderen) in Zukunft nützlich sein könnten? Immobilien sind nicht das einzige Beispiel. Wir empfehlen Ihnen, diese Methode auch auf Ihre eigenen Herausforderungen anzuwenden. Viel Spaß beim Hacken!

Vergessen Sie nicht, uns in Ihren Kreationen mit #MadeWithTFJS zu taggen. Über diesen Link können Sie sich von den Kreationen anderer inspirieren lassen. Wenn Sie Glück haben, werden Ihre Kreationen in den sozialen Medien oder sogar bei zukünftigen TensorFlow-Veranstaltungen präsentiert. Wir sind gespannt auf Ihre Ergebnisse und Sie können sich natürlich jederzeit an den Autor dieses Codelabs wenden, wenn Sie Feedback oder Fragen haben.

Weitere TensorFlow.js-Codelabs

• Ein neuronales Netzwerk in TensorFlow.js von Grund auf neu erstellen
• Audioerkennung mit Transferlernen in TensorFlow.js
• Benutzerdefinierte Bildklassifizierung mit Transfer Learning in TensorFlow.js

Empfohlene Websites

• Offizielle Website von TensorFlow.js
• Vordefinierte TensorFlow.js-Modelle
• TensorFlow.js API
• TensorFlow.js-Demos