MobileNetV2-Modell mit TensorFlow.js bereitstellen | Flask-Webanwendung

Einführung

Dieses Projekt führt Sie durch den Prozess der Bereitstellung eines vorab trainierten MobileNetV2-Modells mit TensorFlow.js in einer Flask-Webanwendung. MobileNetV2 ist ein leichter Deep-Learning-Netzwerk, das hauptsächlich zur Bildklassifizierung verwendet wird. TensorFlow.js ermöglicht das direkte Ausführen von Machine-Learning-Modellen im Browser, was interaktive Webanwendungen ermöglicht. Flask, ein Python-Webframework, wird als Backend dienen, um unsere Anwendung zu hosten. Am Ende dieses Projekts werden Sie eine funktionierende Webanwendung haben, die Bilder sofort mit dem MobileNetV2-Modell klassifiziert.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

Wie man ein vorab trainiertes MobileNetV2-Modell von Keras in ein mit TensorFlow.js kompatibles Format exportiert.
Wie man eine einfache Flask-Anwendung erstellt, um Ihren Web-Inhalt und Modell bereitzustellen.
Wie man eine HTML-Seite entwirft, um Bilder zum Hochladen und Anzeigen zur Klassifizierung zu verwenden.
Wie man TensorFlow.js verwendet, um das exportierte Modell im Browser zu laden.
Wie man Bilder im Browser vorkonvertiert, um die Eingabeanforderungen von MobileNetV2 zu erfüllen.
Wie man das Modell im Browser ausführt, um Bilder zu klassifizieren und die Ergebnisse anzuzeigen.

🏆 Errungenschaften

Nach Abschluss dieses Projekts werden Sie in der Lage sein:

Ein vorab trainiertes Keras-Modell in ein Format zu konvertieren, das mit TensorFlow.js verwendet werden kann, was es ermöglicht, ML-Modellen im Browser auszuführen.
Eine Flask-Anwendung einzurichten und HTML-Inhalt und statische Dateien bereitzustellen.
TensorFlow.js in eine Webanwendung zu integrieren, um maschinelles Lernen auf der Client-Seite durchzuführen.
Bilder in JavaScript vorkonvertieren, um sie mit den Eingabeanforderungen von Deep-Learning-Modellen kompatibel zu machen.
Vorhersagen mit einem Deep-Learning-Modell im Browser zu machen und die Ergebnisse dynamisch auf der Webseite anzuzeigen.

Projektumgebung und Dateien vorbereiten

Bevor wir beginnen zu programmieren, ist es wichtig, unsere Projektumgebung richtig einzurichten. Dies umfasst das Installieren der erforderlichen Pakete und das Verständnis der bereits vorhandenen Projekt-Dateistruktur.

Beginnen Sie zunächst mit der Vertrautmachung mit der initialen Projekt-Dateistruktur. Die folgenden Dateien und Ordner sind bereits in Ihrem Arbeitsverzeichnis vorhanden:

tree

Ausgabe:

.
├── app.py
├── model_convert.py
├── static
│ ├── imagenet_classes.js
│ ├── tfjs.css
│ └── tfjs.js
└── templates
└── tfjs.html

2 Verzeichnisse, 6 Dateien

Die Struktur Ihres Projekts besteht aus mehreren Schlüsselkomponenten, von denen jede eine entscheidende Rolle bei der Bereitstellung Ihrer Webanwendung für die Bildklassifizierung mit dem MobileNetV2-Modell mit TensorFlow.js und Flask spielt. Im Folgenden finden Sie eine Übersicht über jedes Verzeichnis und jede Datei in Ihrem Projekt:

app.py: Dies ist die Haupt-Python-Datei für Ihre Flask-Anwendung. Sie initialisiert die Flask-Anwendung, legt die Routen für Ihre Webseite fest und enthält alle erforderlichen Backend-Logiken für das Bereitstellen Ihres TensorFlow.js-Modells und des Web-Inhalts.
model_convert.py: Dieses Python-Skript ist dafür verantwortlich, das vorab trainierte MobileNetV2-Modell zu laden und es in ein mit TensorFlow.js kompatibles Format zu konvertieren. Diese Konvertierung ist entscheidend für das Ausführen des Modells im Webbrowser.
static/: Dieser Ordner speichert die statischen Dateien, die von Ihrer Webanwendung benötigt werden. Dazu gehören:
- imagenet_classes.js: Eine JavaScript-Datei, die die ImageNet-Klassen enthält. Diese Datei wird verwendet, um die numerischen Vorhersagen des Modells auf menschenlesbare Klassennamen zuzuordnen.
- tfjs.css: Eine neue Datei, diese Cascading Style Sheets (CSS)-Datei wird verwendet, um die Benutzeroberfläche Ihrer Webanwendung zu gestalten. Sie definiert die visuellen Aspekte Ihrer Anwendung, wie Layouts, Farben und Schriftarten, und gewährleistet so eine attraktivere und nutzerfreundlichere Oberfläche.
- tfjs.js: Eine weitere neue Datei, diese JavaScript-Datei enthält wahrscheinlich die Logik zum Laden des TensorFlow.js-Modells, zur Verarbeitung von Bildern und zur Ausführung von Vorhersagen im Browser. Dieses Skript ist zentral für die Interaktivität Ihrer Anwendung und behandelt die clientseitigen Vorgänge im Zusammenhang mit dem TensorFlow.js-Modell.
templates/: Dieser Ordner enthält HTML-Dateien, die die Struktur und das Layout Ihrer Webanwendung definieren. In diesem Fall umfasst er:
- tfjs.html: Die primäre HTML-Vorlage für Ihre Anwendung, tfjs.html enthält das erforderliche Markup zur Anzeige von Bildern, Vorhersageresultaten und möglicherweise Benutzereingabeelemente wie Dateiupload-Schaltflächen. Sie integriert das TensorFlow.js-Modell und nutzt das tfjs.js-Skript für modellbezogene Funktionen und tfjs.css für die Gestaltung.

Diese Struktur ist so entworfen, dass die Verantwortlichkeiten getrennt sind, was Ihr Projekt modular und leichter zu verwalten macht. Die static- und templates-Ordner sind in Flask-Anwendungen standardmäßig und helfen dabei, statische Assets und HTML-Vorlagen separat zu organisieren. Die Trennung des Modellkonversionsskripts (model_convert.py) von der Hauptanwendungslogik (app.py) erhöht die Modularität und Wartbarkeit Ihres Codes.

Als Nächstes installieren Sie die erforderlichen Pakete:

## Installieren Sie die erforderlichen Python-Pakete
pip install tensorflow==2.14.0 tensorflowjs==4.17.0 flask==3.0.2 flask-cors==4.0.0

Die Pakete umfassen TensorFlow für das Machine-Learning-Modell, TensorFlow.js für die Konvertierung des Modells für die Verwendung in einer Webumgebung, Flask für das Erstellen des Webservers und Flask-CORS für das Handling von Cross-Origin-Anfragen, die in Webanwendungen häufig vorkommen.

Exportieren des vorab trainierten MobileNetV2-Modells in das TensorFlow.js-Format

Um das MobileNetV2-Modell im Browser zu verwenden, müssen wir es zunächst von Keras in ein Format exportieren, das TensorFlow.js versteht.

## Vollständige model_convert.py

## Exportieren des MobileNetV2-Modells
import tensorflowjs as tfjs
from tensorflow.keras.applications.mobilenet_v2 import MobileNetV2

## Laden des vorab trainierten MobileNetV2-Modells
model = MobileNetV2(weights='imagenet')

## Konvertieren und Speichern des Modells im TensorFlow.js-Format
tfjs.converters.save_keras_model(model,'static/model/')

In diesem Schritt nutzen Sie die TensorFlow- und TensorFlow.js-Bibliotheken, um ein vorab trainiertes MobileNetV2-Modell zu laden und es in ein mit TensorFlow.js kompatibles Format zu konvertieren.

MobileNetV2 wurde wegen seiner Effizienz und relativ kleinen Größe ausgewählt, was es für die Webanwendung geeignet macht. Diese Konvertierung ist erforderlich, da das ursprüngliche Modellformat in der Python-basierten TensorFlow nicht direkt in einer Webumgebung verwendbar ist. Die Funktion tfjs.converters.save_keras_model nimmt das Keras-Modell und speichert es in einem Verzeichnis, das so strukturiert ist, dass TensorFlow.js es später in der Webanwendung leicht laden kann.

Dann können Sie ausführen:

python model_convert.py

Das konvertierte Modell wird in den Ordner static/model/ gespeichert:

ls static/model

## group1-shard1of4.bin  group1-shard2of4.bin  group1-shard3of4.bin  group1-shard4of4.bin  model.json

Dieser Prozess umfasst das Speichern der Gewichte und des Architekturs des Modells in einer Reihe von Shard-Dateien und einer model.json-Datei respective.

Erstellen der Flask-Anwendung

Jetzt werden wir eine einfache Flask-Anwendung einrichten, um unsere Webseite und das TensorFlow.js-Modell bereitzustellen.

## Vollständige app.py

## Einrichten der Flask-Anwendung
from flask import Flask, render_template
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app)  ## Aktivieren von Cross-Origin Resource Sharing

@app.route("/")
def hello():
    ## Bereitstellen der HTML-Seite
    return render_template('tfjs.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port='8080', debug=True)

In diesem Schritt wird ein grundlegender Flask-Webserver eingerichtet. Flask ist ein mikro Webframework, das in Python geschrieben ist und für seine Einfachheit und Benutzerfreundlichkeit bekannt ist.

Sie beginnen mit dem Import von Flask und CORS (Cross-Origin Resource Sharing) aus ihren jeweiligen Bibliotheken. CORS ist essentiell für Webanwendungen, die Ressourcen von verschiedenen Domänen anfordern, und gewährleistet, dass Ihre Webanwendung sicher Anfragen an Ihren Flask-Server stellen kann.

Sie definieren eine einfache Route ("/"), die eine HTML-Seite (tfjs.html) bereitstellt, die Ihren clientseitigen TensorFlow.js-Code enthalten wird. Die Flask-Anwendung ist so konfiguriert, dass sie auf Ihrem lokalen Computer (host='0.0.0.0') läuft und auf Port 8080 hört. Die Einstellung debug=True ist bei der Entwicklung hilfreich, da sie detaillierte Fehlermeldungen liefert und den Server automatisch neu lädt, wenn Änderungen am Code entdeckt werden.

Jetzt können Sie die Flask-Webanwendung ausführen:

python app.py
## * Serving Flask app 'app'
## * Debug mode: on
## WARNING: This is a development server. Do not use it in a production ## deployment. Use a production WSGI server instead.
## * Running on all addresses (0.0.0.0)
## * Running on http://127.0.0.1:8080
## * Running on http://172.18.0.7:8080
## Press CTRL+C to quit

HTML-Struktur vorbereiten

Jetzt müssen wir die HTML-Struktur unserer Anwendung in templates/tfjs.html erstellen. Dies umfasst das Layout für das Bildhochladen, die Vorschau und die Anzeige der Vorhersageresultate.

<!-- HTML-Struktur für die Bildvorhersageanwendung -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bildvorhersage</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <link rel="stylesheet" href="static/tfjs.css" />
  </head>
  <body class="flex flex-col items-center justify-center min-h-screen">
    <div class="card bg-white p-6 rounded-lg max-w-sm">
      <h1 class="text-xl font-semibold mb-4 text-center">Bildvorhersage</h1>
      <div class="flex flex-col items-center">
        <label
          for="imageUpload"
          class="button-custom cursor-pointer mb-4 flex items-center justify-center"
        >
          <span>Bild hochladen</span>
          <input
            type="file"
            id="imageUpload"
            class="file-input"
            accept="image/*"
          />
        </label>
        <div
          id="imagePreviewContainer"
          class="mb-4 w-56 h-56 border border-dashed border-gray-300 flex items-center justify-center"
        >
          <img
            id="imagePreview"
            class="max-w-full max-h-full"
            style="display: none"
          />
        </div>
        <h5 id="output" class="text-md text-gray-700">
          Hochladen Sie ein Bild, um die Vorhersage zu starten
        </h5>
        <script type="module" src="static/tfjs.js"></script>
      </div>
    </div>
  </body>
</html>

In diesem Schritt wird die grundlegende Struktur unserer Webanwendung mithilfe von HTML erstellt. Wir definieren den Dokumententyp als HTML und setzen das Sprachattribut auf Englisch.

Im head-Abschnitt enthalten wir Metadaten wie Zeichensatz und Viewport-Einstellungen für ein responsives Design. Wir verknüpfen uns auch mit der Tailwind CSS-Bibliothek, um ihre Hilfsklassen für die Gestaltung unserer Anwendung zu nutzen. Der body-Abschnitt enthält ein div-Element mit der Klasse card, das als Container für den Inhalt unserer Anwendung dient.

Innerhalb dieses Containers haben wir ein h1-Tag für den Anwendungsnamen, ein label-Element für die Bildhochladeschaltfläche (das mit Tailwind CSS und benutzerdefinierten Klassen so gestaltet ist, dass es wie eine Schaltfläche aussieht), und ein div-Element, das als Container für die Bildvorschau dient. Das input-Element vom Typ file ist versteckt und wird ausgelöst, wenn das Label angeklickt wird, was es dem Benutzer ermöglicht, ein Bild hochzuladen. Das div-Element mit der id imagePreviewContainer wird das hochgeladene Bild anzeigen, und das h5-Tag wird verwendet, um Nachrichten an den Benutzer anzuzeigen.

Stil hinzufügen

In diesem Schritt fügen wir einige grundlegende CSS-Stile mit Tailwind CSS für das Layout und die Ästhetik in static/tfjs.css hinzu, zusammen mit einigen benutzerdefinierten Stilen für unsere Anwendung.

body {
  background-color: #f0f2f5;
}
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.button-custom {
  background-color: #4f46e5; /* Indigo 600 */
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem; /* rounded-md */
  transition: background-color 0.2s;
}
.button-custom:hover {
  background-color: #4338ca; /* Indigo 700 */
}
.file-input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

In diesem Schritt fügen wir benutzerdefinierte CSS-Stile hinzu, um das Aussehen unserer Webanwendung zu verbessern.

Wir setzen die Hintergrundfarbe des Körpers auf hellgrau für einen neutralen Hintergrund. Die Klasse card fügt eine Box-Schattierung hinzu, um einen kartenähnlichen Effekt für den Container zu erzeugen. Die Klasse button-custom formatiert die Hochladenschaltfläche mit einer Indigo-Hintergrundfarbe, weißem Text, Innenabstand und abgerundeten Ecken.

Wir schließen auch einen Hover-Effekt ein, um die Hintergrundfarbe der Schaltfläche leicht zu ändern, wenn darüber gehovert wird, und geben so eine visuelle Rückmeldung an den Benutzer. Die Klasse file-input wird verwendet, um das tatsächliche Dateiauswahl-Element zu verstecken und das benutzerdefiniert gestaltete Label zum Hauptinteraktions-Element für das Dateiupload zu machen.

TensorFlow-Modell laden

In den verbleibenden Schritten werden wir die Datei templates/tfjs.js vervollständigen.

Lassen Sie uns jetzt TensorFlow.js zu unserem Projekt hinzufügen und dann JavaScript-Code schreiben, um unser TensorFlow-Modell zu laden. Wir werden eine asynchrone Funktion verwenden, um auf das Laden des Modells zu warten, bevor wir irgendwelche Vorhersagen machen.

import { IMAGENET_CLASSES } from "./imagenet_classes.js";

const outputDiv = document.getElementById("output");
let model;

async function loadModel() {
  try {
    outputDiv.textContent = "Lade TF-Modell...";
    model = await tf.loadLayersModel(
      "https://****.labex.io/static/model/model.json"
    ); // URL aktualisieren
    outputDiv.textContent = "TF-Modell geladen.";
  } catch (error) {
    outputDiv.textContent = `Fehler beim Laden des Modells: ${error}`;
  }
}

loadModel();

Hinweis: Sie sollten die URL in tf.loadLayersModel durch die URL der aktuellen Umgebung ersetzen. Sie können sie finden, indem Sie auf die Registerkarte Web 8080 wechseln.

Diagramm zum Laden des TensorFlow-Modells

In diesem Schritt wird TensorFlow.js zu unserem Projekt hinzugefügt, indem wir seinen Skript-Tag in unserem HTML-Dokument einfügen.

Dann schreiben wir JavaScript-Code, um ein vorab trainiertes TensorFlow-Modell asynchron zu laden. Wir verwenden die Funktion tf.loadLayersModel und geben ihr die URL zu unserer Modell-JSON-Datei. Diese Funktion gibt ein Promise zurück, das mit dem geladenen Modell aufgelöst wird. Wir aktualisieren den Textinhalt der outputDiv, um den Benutzer über den Modell-Ladestatus zu informieren. Wenn das Modell erfolgreich geladen wird, zeigen wir "TF-Modell geladen." an.

Andernfalls fangen wir alle Fehler ab und zeigen eine Fehlermeldung an den Benutzer an. Dieser Schritt ist entscheidend für die Möglichkeit unserer Anwendung, Vorhersagen zu machen, da das Modell geladen und bereit sein muss, bevor irgendwelche Bildverarbeitungen durchgeführt werden können.

Bildhochladen und -Vorschau verarbeiten

In diesem Schritt erstellen wir die Funktionalität, die es Benutzern ermöglicht, Bilder hochzuladen und eine Vorschau zu sehen, bevor eine Vorhersage getroffen wird. Wir verwenden einen FileReader, um die hochgeladene Datei zu lesen und anzuzeigen.

// Fortsetzung in static/tfjs.js
const imageUpload = document.getElementById("imageUpload");
const imagePreview = document.getElementById("imagePreview");

imageUpload.addEventListener("change", async (e) => {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = async () => {
        imagePreview.src = img.src;
        imagePreview.style.display = "block";
        const processedImage = await preprocessImage(img);
        makePrediction(processedImage);
      };
    };
    reader.readAsDataURL(file);
  }
});

In diesem Schritt wird ein Ereignislistener für das Bildhochladeeingabefeld eingerichtet.

Wenn ein Benutzer eine Datei auswählt, verwenden wir einen FileReader, um die Datei als Data URL zu lesen. Anschließend erstellen wir ein Image-Objekt und legen seinen src-Attribut auf das Ergebnis des FileReader fest, was effektiv das Bild in den Browser lädt. Sobald das Bild geladen ist, wird es im imagePreview-Container angezeigt, indem wir das src-Attribut von imagePreview auf das src des Bilds setzen und das imagePreview-Element sichtbar machen.

Anschließend wird das Bild von unserem Modell vorverarbeitet und vorhergesagt. Wir werden diese Funktionen in späteren Schritten vervollständigen.

Bild für die Vorhersage vorverarbeiten

Bevor wir eine Vorhersage machen, müssen wir das hochgeladene Bild vorverarbeiten, um den Eingabeanforderungen unseres Modells zu entsprechen.

// Fortsetzung in static/tfjs.js
async function preprocessImage(imageElement) {
  try {
    let img = tf.browser.fromPixels(imageElement).toFloat();
    img = tf.image.resizeBilinear(img, [224, 224]);
    const offset = tf.scalar(127.5);
    const normalized = img.sub(offset).div(offset);
    const batched = normalized.reshape([1, 224, 224, 3]);
    return batched;
  } catch (error) {
    outputDiv.textContent = `Fehler bei der Modellvorhersage: ${error}`;
  }
}

Bevor wir eine Vorhersage machen, müssen wir das hochgeladene Bild vorverarbeiten, um das von unserem TensorFlow-Modell erwartete Eingabeformat zu entsprechen. Diese Vorverarbeitung umfasst das Anpassen der Größe des Bilds an die erforderlichen Dimensionen (in diesem Fall 224x224 Pixel) und die Normalisierung der Pixelwerte.

Wir verwenden TensorFlow.js-Operationen wie tf.browser.fromPixels, um das Bild in einen Tensor umzuwandeln, tf.image.resizeBilinear für die Anpassung der Größe und arithmetische Operationen, um die Pixelwerte zu normalisieren. Das vorverarbeitete Bild wird dann in eine Batch von einem (um dem erwarteten Eingabeformat des Modells zu entsprechen) umgeformt, sodass es für die Vorhersage bereit ist.

Eine Vorhersage treffen

Sobald das Bild vorverarbeitet ist, sind wir bereit, eine Vorhersage zu machen. Die makePrediction-Funktion nimmt das vorverarbeitete Bild als Eingabe entgegen, leitet es durch das Modell und interpretiert die Ausgabe, um das wahrscheinlichste Klassennamenlabel zu bestimmen.

// Fortsetzung in static/tfjs.js
async function makePrediction(processedImage) {
  try {
    const prediction = model.predict(processedImage);
    const highestPredictionIndex = await tf.argMax(prediction, 1).data();
    const label = IMAGENET_CLASSES[highestPredictionIndex];
    outputDiv.textContent = `Vorhersage: ${label}`;
  } catch (error) {
    outputDiv.textContent = `Fehler bei der Vorhersage: ${error}`;
  }
}

In diesem Schritt verwenden wir die model.predict(processedImage)-Funktion, um das vorverarbeitete Bild in das TensorFlow-Modell zu geben. Die tf.argMax(prediction, 1).data()-Funktion wird verwendet, um den Index des höchsten Werts im Vorhersagenarray zu finden, was dem wahrscheinlichsten Klassennamenlabel für das Bild entspricht. Dieses Label wird dann an den Benutzer angezeigt.

Wechseln Sie zur Registerkarte "Web 8080" und laden Sie die Webseite neu, um die folgenden Effekte zu sehen.

Zusammenfassung

In diesem Projekt haben Sie gelernt, wie Sie ein vorab trainiertes MobileNetV2-Modell in einer Flask-Webanwendung mit TensorFlow.js verwenden. Wir haben begonnen, indem wir die erforderlichen Abhängigkeiten installiert haben. Anschließend haben wir das MobileNetV2-Modell in ein mit TensorFlow.js kompatibles Format exportiert und eine Flask-Anwendung eingerichtet, um unsere Webseite bereitzustellen. Schließlich haben wir eine HTML-Seite erstellt, die TensorFlow.js verwendet, um Bilder im Browser mit unserem MobileNetV2-Modell zu klassifizieren. Indem Sie diese Schritte befolgen, haben Sie eine Webanwendung erstellt, die das maschinelle Lernen für die Echtzeit-Bildklassifizierung verwendet.

Dieses Projekt demonstriert die Macht der Kombination traditioneller Webanwendungen mit fortschrittlichen Machine-Learning-Modellen, um interaktive und intelligente Webanwendungen zu erstellen. Sie können dieses Projekt erweitern, indem Sie weitere Funktionen hinzufügen, wie die Möglichkeit, verschiedene Bilder hochzuladen, die Benutzeroberfläche verbessern oder sogar komplexere Modelle für verschiedene Aufgaben zu integrieren.

MobileNet mit TensorFlow.js und Flask bereitstellen