Nutzung der Echtzeit-Objekterkennung im Browser mit TensorFlow.js und COCO-SSD

Einführung

In den letzten Jahren hat der Bereich des maschinellen Lernens bemerkenswerte Fortschritte gemacht, insbesondere bei der Bereitstellung leistungsstarker Modelle für Webanwendungen. Ein solcher Durchbruch ist die Möglichkeit, dank Technologien wie TensorFlow.js und Modellen wie COCO-SSD eine Echtzeit-Objekterkennung direkt in einem Webbrowser durchzuführen. In diesem Artikel wird untersucht, wie Entwickler diese Tools nutzen können, um interaktive Anwendungen zu erstellen, die Objekte in Live-Webcam-Streams, hochgeladenen Bildern oder Videos erkennen, ohne dass eine serverseitige Verarbeitung erforderlich ist.

TensorFlow.js und COCO-SSD verstehen

TensorFlow.js ist eine von Google entwickelte JavaScript-Bibliothek, die es Entwicklern ermöglicht, Modelle für maschinelles Lernen direkt im Browser auszuführen. Es bietet eine Möglichkeit, vorab trainierte Modelle bereitzustellen oder neue Modelle mithilfe von JavaScript-APIs zu trainieren, wodurch es zugänglich und einfach in Webanwendungen zu integrieren ist. COCO-SSD (Common Objects in Context – Single Shot MultiBox Detector) ist ein beliebtes vorab trainiertes Modell zur Objekterkennung. Es ist für die Erkennung einer Vielzahl von Objekten in Echtzeit optimiert und eignet sich daher für interaktive Anwendungen.

Einrichten der Umgebung

Zu Beginn müssen Entwickler ihre Entwicklungsumgebung einrichten. Dies beinhaltet typischerweise:

• Einbinden von TensorFlow.js und COCO-SSD in das HTML-Dokument mithilfe von Skript-Tags:

  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@latest"></script>

• Erstellen einer HTML-Struktur zur Handhabung von Benutzeroberflächenelementen wie Videoeingabe, Bild-Upload und Steuerschaltflächen.

Erstellen der Anwendung

1. Umgang mit Benutzereingaben

Die Anwendung ermöglicht Benutzern die Auswahl zwischen verschiedenen Eingabetypen:

• Webcam: Erfasst Live-Video-Feeds direkt von der Webcam des Benutzers.
• Bild: Ermöglicht Benutzern das Hochladen einer Bilddatei von ihrem Gerät.
• Video: Ermöglicht Benutzern das Hochladen einer Videodatei zur Objekterkennung.

<div id="inputSelection">
    <label><input type="radio" name="inputType" value="webcam" checked> Webcam</label>
    <label><input type="radio" name="inputType" value="image"> Image</label>
    <label><input type="radio" name="inputType" value="video"> Video</label>
</div>
<input type="file" id="imageInput" accept="image/*" style="display:none;">
<input type="file" id="videoInput" accept="video/*" style="display:none;">

2. Eingaben und Ergebnisse anzeigen

Die Anwendung zeigt dynamisch die ausgewählte Eingabe (Video oder Bild) und Erkennungsergebnisse mithilfe von HTML5-Elementen wie

<div id="videoContainer">
    <video id="videoElement" autoplay playsinline></video>
    <div id="infoBox" class="infoBox">
        <p><strong>Detected Object:</strong> <span id="objectLabel"></span></p>
        <p><strong>Confidence:</strong> <span id="confidenceScore"></span></p>
    </div>
</div>
<img id="imageDisplay">
<video id="videoDisplay" controls loop></video>
<canvas id="outputCanvas"></canvas>

3. Implementierung der Objekterkennungslogik

JavaScript (script.js) verwaltet die Objekterkennungslogik mithilfe von TensorFlow.js und COCO-SSD. Dazu gehört:

• Modell initialisieren und asynchron laden:

  async function loadModel() {
      const model = await cocoSsd.load();
      return model;
  }

• Durchführen einer Erkennung für ausgewählte Eingaben (Video oder Bild) und Aktualisieren der Benutzeroberfläche mit Ergebnissen:

  async function detectObjects(input) {
      const model = await loadModel();
      const predictions = await model.detect(input);
      // Update UI with predictions
  }

• Verarbeitung verschiedener Eingabetypen (Webcam, Bild, Video) und Auslösen der Erkennung basierend auf Benutzeraktionen.

4. Benutzerinteraktion und Kontrollen

Die Anwendung enthält Schaltflächen zur Steuerung der Objekterkennung:

• Erkennung starten: Initiiert die Objekterkennung basierend auf der ausgewählten Eingabe.
• Erkennung stoppen: Pausiert oder stoppt den Erkennungsprozess.
• Screenshot aufnehmen: Ermöglicht Benutzern die Aufnahme eines Screenshots des aktuellen Erkennungsergebnisses.

<div id="controls">
    <button id="startButton">Start Detection</button>
    <button id="stopButton" disabled>Stop Detection</button>
    <button id="captureButton" disabled>Capture Screenshot</button>
</div>

5. Verbesserung der Benutzererfahrung

Um ein nahtloses Erlebnis zu bieten, enthält die Anwendung einen Ladeindikator (

Loading...

), um Benutzer zu benachrichtigen, während TensorFlow.js und das COCO-SSD-Modell aktiv sind wird geladen.

Fazit

Zusammenfassend lässt sich sagen, dass TensorFlow.js in Kombination mit COCO-SSD spannende Möglichkeiten für die Echtzeit-Objekterkennung direkt in Webbrowsern eröffnet. In diesem Artikel wurden die grundlegenden Komponenten und Schritte zum Erstellen einer solchen Anwendung aufgezeigt, von der Einrichtung der Umgebung über die Implementierung der Objekterkennungslogik bis hin zur Verbesserung der Benutzerinteraktion. Entwickler können diese Technologien nun nutzen, um interaktive und reaktionsfähige Webanwendungen zu erstellen, die die Grenzen dessen erweitern, was mit maschinellem Lernen im Web möglich ist. Da sich diese Technologien weiterentwickeln, sieht die Zukunft vielversprechend für noch ausgefeiltere und zugänglichere KI-gestützte Weberlebnisse aus.

Hier ist das Github Repo

Das obige ist der detaillierte Inhalt vonNutzung der Echtzeit-Objekterkennung im Browser mit TensorFlow.js und COCO-SSD. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!