So erstellen und implementieren Sie eine Echtzeit-Verkehrsüberwachungs-App mithilfe der Computer Vision-Vorlage von Quix

Wenn Sie schon immer mit Computer Vision experimentieren wollten, aber keine Zeit haben, eine komplexe Entwicklungsumgebung einzurichten, ist dieses Tutorial genau das Richtige für Sie. Computer Vision kann in bestimmten Situationen ein großartiger Ersatz für physische Sensoren sein – insbesondere wenn es darum geht, Dinge zu zählen.

In diesem Tutorial führe ich Sie durch eine von uns veröffentlichte Demoanwendung, die Londons Verkehrskameras nutzt, um den aktuellen Stau durch Zählen von Fahrzeugen zu messen. Es basiert auf einer wiederverwendbaren Projektvorlage, die wir erstellt haben, um Ihnen bei der Replikation des Projekts zu helfen. Anschließend zeige ich Ihnen, wie Sie mit dieser Vorlage eine eigene Kopie des Projekts erstellen und es in Quix zum Laufen bringen – einem Tool zum Entwickeln und Ausführen von Event-Streaming-Anwendungen.

Unsere Demoversion der Computer-Vision-Anwendung verwendet auch einen in Confluent Cloud gehosteten Nachrichtenbroker (vollständig verwalteter Apache Kafka als Dienst), es ist jedoch nicht zwingend erforderlich, über ein Confluent Cloud-Konto zu verfügen, um dem Tutorial folgen zu können.

So sollte das Endergebnis aussehen:

Unter folgender Adresse können Sie live mit dieser Demoversion experimentieren: https://app-demo-computervisiondemo-prod.deployments.quix.ai/

Was macht diese App?

Die App nutzt Live-Feeds der Londoner Verkehrskameras (auch bekannt als „Jam Cams“), um die Fahrzeuge zu zählen und den Staugrad abzuschätzen. Mithilfe visueller Indikatoren wird dann auf einer Karte von London angezeigt, wo es zu Staus kommt. Die Fahrzeuge werden mithilfe eines ML-Modells zur Objekterkennung in Bildern gezählt (anstelle von Sensoren oder GPS-Daten).

Das Objekterkennungsmodell klassifiziert Fahrzeuge auch in verschiedene Typen, und Sie können die Daten nach diesen Typen filtern.

Über das Dropdown-Menü „Objekt auswählen“ können Sie sich beispielsweise nur die Anzahl der Busse anzeigen lassen, die alle Verkehrskameras zum aktuellen Zeitpunkt erfasst haben.

Beachten Sie, dass die Anwendung nicht alle im Laufe des Tages beobachteten Fahrzeuge zählt, sondern nur zum aktuellen Zeitpunkt (dazu später mehr).

Warum die Objekterkennung nutzen, um Staus zu ermitteln?

Denn andere Methoden sind nicht immer zuverlässig. Beispielsweise gelang es einem Berliner Künstler im Jahr 2020, mit nichts als einem Handwagen und 99 gebrauchten Telefonen einen „virtuellen“ Stau auf einer der Hauptbrücken über die Spree zu erzeugen . Google Maps zeigte das Gebiet dann brav auf der Karte als stark überlastet an.

Aus diesem Grund werden häufig andere Datentypen verwendet, um GPS-basierte Stauschätzungen zu ergänzen. Dazu gehören historische Muster, Sensordaten, kommunale Rückmeldungen zu geplanten Schließungen und von Benutzern gemeldete Vorfälle. Einer der zuverlässigsten Querverweise ist jedoch die visuelle Erkennung von Staus mithilfe von Verkehrskameras ( vorausgesetzt, eine Möwe blockiert nicht die Sicht ).

Ungeachtet der umherirrenden Möwen wird Computer Vision mittlerweile von Regierungsorganisationen eingesetzt, um Verkehrsdaten zu erweitern und die Genauigkeit von Schätzungen des Verkehrsaufkommens zu erhöhen. Beispielsweise veröffentlichte Statistics Canada am 22. September letzten Jahres einen Artikel mit dem Titel „ Traffic Volume Estimation from Traffic Camera Imagery: Toward Real-Time Traffic Data Streams “, in dem ein auf Computer Vision basierendes System vorgestellt wurde, um regelmäßig Fahrzeugzahlen aus kanadischen Verkehrskameras zu extrahieren Bilder.

Mit Quix brauchen Sie jetzt kein Team von Forschern mehr, um so etwas auszuprobieren. Jeder fähige Entwickler kann es ausprobieren und innerhalb weniger Minuten einsatzbereit sein. In diesem Fall sprechen wir jedoch eher von 60 Minuten als von 5 Minuten. Es ist schließlich ein großes Projekt!

Um das Projekt zu reproduzieren, benötigen Sie zwei Dinge:

• Ein API-Schlüssel für die Traffic for London API (weitere Details finden Sie in der Dokumentation dieses Projekts )

• Ein kostenloses Quix-Konto – wenn Sie noch keins erstellt haben, können Sie sich jetzt anmelden (Sie können dies mit ein paar Klicks mit einem bestehenden Google-, GitHub- oder Microsoft-Konto tun).

  
  

Erhalten Sie Ihre eigene Kopie des Projekts

Um eine Kopie des Projekts (und einer unserer Demoanwendungen) zu erhalten, sind mehrere wichtige Schritte erforderlich:

1. Forken Sie unser Computer-Vision-Demo-Repository von GitHub.

   Auf diese Weise können Sie Ihre Version des Projekts ganz einfach anpassen und dennoch von vorgelagerten Verbesserungen profitieren.

   
   

2. Erstellen Sie ein Projekt in Quix Cloud , erstellen Sie dann eine neue Entwicklungsumgebung und verknüpfen Sie diese mit Ihrem Fork.

   Dadurch können Sie die Anwendung in Quix Cloud unter Ihrem eigenen Konto ausführen und aktualisieren.

   
   

3. Aktualisieren Sie die Anmeldeinformationen für externe Dienste wie TfL Camera API und Google Maps.

   Geheimnisse wie API-Schlüssel werden nicht in Projektkopien übertragen, Sie müssen diese also selbst hinzufügen.

   
   

Nachdem Sie die Grundlagen eingerichtet haben, befassen wir uns mit dem Code und prüfen, wie Sie ihn anpassen können.

Forken des Computer-Vision-Demo-Repositorys

Um den Code in den Griff zu bekommen, teilen wir zunächst das Computer Vision Demo-Repository auf. Warum forken statt klonen? Denn später bringen Sie diesen Code in Ihre eigene Quix-Umgebung ein und die Verwendung eines Forks ist die einfachste Möglichkeit, Ihre Umgebung synchron zu halten. Sie können auch alle vorab vorgenommenen Änderungen, die wir an der Projektvorlage vornehmen, abrufen.

Der Einfachheit halber gehe ich davon aus, dass Sie bereits über ein GitHub-Konto verfügen. Möglicherweise möchten Sie jedoch einen bestimmten Git-Benutzer für dieses Projekt erstellen. Später gewähren Sie Quix SSH-Zugriff auf das Repository. Ein separater Benutzer ist eine gute Möglichkeit, um sicherzustellen, dass Quix nicht mehr Zugriff hat, als es sollte.

• Öffnen Sie GitHub in Ihrem Webbrowser, navigieren Sie zum Computer Vision Demo-Repository ( https://github.com/quixio/computer-vision-demo ) und klicken Sie auf Fork.

  • Stellen Sie sicher, dass Sie alle Branches forken (deaktivieren Sie im Fork-Assistenten von GitHub die Option „ Nur den Hauptbranch kopieren “). Denn wenn Sie ein Testkonto verwenden, benötigen Sie einen alternativen Zweig, um eine Entwicklungsumgebung in Quix Cloud zu erstellen.

    
    

Erstellen einer neuen Entwicklungsumgebung in Quix

Bevor Sie in Quix eine Umgebung erstellen können, müssen Sie zunächst ein Projekt erstellen. Während des Projekterstellungsassistenten werden Sie dann aufgefordert, eine anfängliche Umgebung hinzuzufügen. Sie können später weitere Umgebungen hinzufügen, sobald Sie den Dreh raus haben.

Führen Sie die folgenden Schritte aus, um ein Projekt zu erstellen und eine Umgebung mit Ihrem geforkten Repo zu verbinden:

• Melden Sie sich bei Quix an und klicken Sie auf + Neues Projekt .

  
  

• Benennen Sie Ihr Projekt „ Meine Computer-Vision-Demo “ (oder etwas Ähnliches) und wählen Sie „Mit Ihrem eigenen Git-Repository verbinden“ aus.

  
  

• Auf dem nächsten Bildschirm sollten Sie einige Anweisungen zum Hinzufügen des Quix-SSH-Schlüssels zu Ihrem Repo sehen – befolgen Sie diese Anweisungen. Durch das Hinzufügen dieses Schlüssels kann Quix Ihr Repository automatisch mit der Quix-Umgebung synchronisieren

  

  
  

• Auf dem nächsten Bildschirm werden Sie aufgefordert, eine Umgebung zu erstellen. Umgebungen ermöglichen es Ihnen, Code aus verschiedenen Zweigen parallel bereitzustellen.

  Geben Sie „ tutorial “ als Umgebungsnamen ein und wählen Sie den Zweig „ tutorial “ aus Ihrem geforkten Repo aus.

  

  
  

• Fahren Sie mit den nächsten Schritten im Projekterstellungsassistenten fort.

  
  

  Der Assistent fragt Sie, welchen Nachrichtenbroker Sie verwenden möchten. Die Originalversion des Projekts nutzt Confluent Cloud als Nachrichtenbroker. Wenn Sie Confluent Cloud‌ verwenden möchten, müssen Sie zunächst über ein Konto verfügen. In diesem Fall würden Sie „Mit Ihrer Confluent Cloud verbinden“ auswählen und Ihre Anmeldeinformationen eingeben.

  

  
  

  Es ist jedoch nicht zwingend erforderlich, Confluent Cloud zu verwenden. Für dieses Tutorial können Sie auch beim standardmäßigen Quix-Nachrichtenbroker bleiben.

  
  

• Wenn Sie den Assistenten abgeschlossen haben, navigieren Sie zur Seite „Pipeline“ (falls diese nicht bereits geöffnet ist). Sie sehen eine Standardwarnung, dass Ihre Quix-Umgebung nicht mit dem Quell-Repository synchronisiert ist (da die Umgebung leer beginnt).

  

  
  

• Klicken Sie auf die Schaltfläche „Umgebung synchronisieren“ , um den neuesten Code aus Ihrem geforkten Repo abzurufen. Hinweis : Der Synchronisierungsprozess ist bidirektional. Wenn Sie also Code in Ihrer Umgebung ändern, wird dieser ebenfalls an das Quell-Repository zurückgesendet.

  
  

Hoffentlich war die Synchronisierung erfolgreich. Wenn es funktioniert hat, sollten Sie sehen, dass alle Ihre Dienste auf der Pipeline- Seite mit dem Aufbau beginnen.

Da es eine ganze Reihe von Diensten gibt, dauert es einige Minuten, bis alle Dienste erstellt und ausgeführt werden können.

Beachten Sie, dass der S3-Dienst standardmäßig gestoppt ist, da Sie Ihr eigenes AWS-Konto benötigen, damit dieser funktioniert. Aber es ist für dieses Tutorial sowieso nicht wirklich notwendig.

• Um die vollständige Pipeline auf der Pipeline- Seite anzuzeigen, klicken Sie auf einen leeren Teil der Leinwand, ziehen Sie sie an eine beliebige Stelle und scrollen Sie nach rechts, oder halten Sie Strg / ⌘ gedrückt und zoomen Sie mit dem Mausrad heraus.

  
  

• Scrollen Sie, bis Sie einen Dienst namens „Project Front End“ sehen.

  

  
  

• Klicken Sie auf das blaue Startsymbol neben dem Dienstnamen „Project Front End“.

  Sie sollten jetzt Ihre eigene Kopie der Computer-Vision-App sehen, mit der Sie herumspielen können.

Verstehen der Architektur der Computer Vision-Demo-App

Die Pipeline besteht aus vielen Diensten, aber die Architektur kann in drei Hauptsegmente abstrahiert werden, wie im folgenden Diagramm dargestellt:

• Der erste Satz von Diensten (1-3) greift auf die Verkehrskameras in London zu und identifiziert Fahrzeuge auf jedem überwachten Straßenabschnitt.

  
  

• Der zweite Satz von Diensten (4-7) führt eine laufende Gesamtzahl der Fahrzeugtypen in jedem Straßenabschnitt und protokolliert die maximale Anzahl von Fahrzeugen, die in einem bestimmten Frame erkannt wurden. Diese Daten werden dann zwischengespeichert und an einen REST-API-Dienst übergeben, sodass jeder externe Dienst, der sie anfordern möchte, auf die Daten zugreifen kann.

  
  

• Der letzte Dienst (8) hostet ein Frontend, das eine REST-API nach aggregierten Fahrzeugstatistiken abfragt und an einem Websocket nach Live-Rohdaten von allen Verkehrskameras (z. B. Videobildern) lauscht, die aus einem Thema in Quix stammen. Diese Kombination aus abgefragten Daten und Echtzeitdaten wird verwendet, um das Verkehrsaufkommen auf einer Karte von London zu visualisieren.

  
  

Auf die Besonderheiten der einzelnen Dienste werde ich nicht zu sehr ins Detail gehen, da die Dokumentation dies bereits gut abdeckt. Wenn Sie jedoch einen Blick auf die Funktionsweise werfen möchten, finden Sie hier einige Referenzinformationen mit Links zur Dokumentation.

Servicereferenz

Wenn Sie auf den Dienstnamen klicken, können Sie den tatsächlichen Dienst sehen, der in einer schreibgeschützten Quix-Umgebung ausgeführt wird, einschließlich der Laufzeitprotokolle und der Datenherkunft.

Ich möchte mich hier darauf konzentrieren, Ihnen zu zeigen , wie Sie das Projekt an Ihre eigenen Anforderungen anpassen können .

Anpassen des Projekts

Um Ihnen bei der Anpassung des Projekts zu helfen, zeige ich Ihnen, wie Sie eine kleine Änderung an der Aggregationslogik im Back-End vornehmen und diese neuen Informationen im Front-End rendern.

Danach verweise ich Sie auf einige externe Ressourcen, die Ihnen bei der Durchführung leistungsfähigerer Aufgaben wie Fahrzeugzählung und Objektverfolgung helfen. Aber zuerst müssen wir ein wenig Verwaltungsarbeit leisten, beispielsweise das Hinzufügen neuer Anwendungsgeheimnisse.

Fügen Sie Ihre eigenen API-Anmeldeinformationen hinzu und aktualisieren Sie die Geheimnisse

Die Projektvorlage ist mit einigen Standardanmeldeinformationen konfiguriert, Sie müssen diese jedoch ändern, damit Ihre Kopie des Projekts funktioniert. Sie müssen jede dieser Anmeldeinformationen in Ihrem Projekt als Geheimnis definieren. Die Geheimnisse sind wie folgt.

• Ein Bearer-Token für das Frontend zur Kommunikation mit dem SignalR-Hub in Quix (geheimer Schlüssel: „ bearerToken “)

• Ihr Tfl-API-Schlüssel (geheimer Schlüssel: „ tfl_api_key “)

  
  

Konfigurieren eines Inhabertokens für das Frontend

Das Front-End verwendet die SignalR-Clientbibliothek, um mit Quix zu kommunizieren (über eine Websockets-API ), um Daten vom Back-End abzurufen und darzustellen. Diese API erfordert ein Bearer-Token zur Authentifizierung von Clientanwendungen.

Für dieses Tutorial erstellen Sie ein persönliches Quix-Zugriffstoken, das Sie als Inhabertoken verwenden. Anschließend erstellen Sie ein Geheimnis, um dieses Token in Ihrer Umgebung zu speichern (ja, das ist etwas kompliziert, aber Sie müssen es nur einmal tun).

#Ein persönliches Zugriffstoken erhalten

So erhalten Sie ein persönliches Zugangstoken in Quix.

• Öffnen Sie Ihr Profilmenü oben rechts und wählen Sie Persönliche Zugriffstoken aus.

  

  
  

• Klicken Sie im daraufhin angezeigten Dialogfeld auf „Token generieren“ und fügen Sie Ihr persönliches Zugriffstoken in den Editor oder einen anderen temporären Speicherort ein – Sie benötigen es für den nächsten Schritt.

Hinzufügen Ihres persönlichen Zugriffstokens zu den Geheimnissen

Öffnen Sie im Quix-Portal die Seite „Anwendungen“ und klicken Sie auf „Sentiment Demo UI“ , um die Quix-IDE zu öffnen.

• Klicken Sie im Abschnitt „Variablen“ (unten links) auf Secrets-Verwaltung .

• Klicken Sie in der angezeigten Seitenleiste auf + Neues Geheimnis und geben Sie „ bearerToken “ als Geheimschlüssel ein.

• Fügen Sie in den Spalten „Standard“ und „Tutorial“ Ihr persönliches Zugriffstoken ein, das Sie im vorherigen Schritt erstellt haben, als Wert in jede Zelle.

  

  
  

Hinzufügen Ihres TFL-API-Schlüssels zu den Geheimnissen

Vorausgesetzt, Sie haben sich beim Tfl-API-Portal registriert, müssen Sie zunächst auch Ihren eigenen Tfl-API-Schlüssel als Geheimnis hinzufügen.

• Um das Geheimnis hinzuzufügen, müssen Sie genau die gleichen Schritte wie im vorherigen Abschnitt ausführen, dieses Mal jedoch ein Geheimnis mit dem Schlüssel „ tfl_api_key “ hinzufügen.

Aktualisieren des Backends, um die maximale Gesamtzahl an Fahrzeugen zu erhalten, die in ganz London gesehen werden

Derzeit können Sie nur die maximale Anzahl der in den letzten 24 Stunden pro Kamera beobachteten Fahrzeuge sehen. Sehen wir uns zum Beispiel die Daten an, die unter diesem Videobild angezeigt werden, das von der Kamera in Kings Cross und Swinton Street aufgenommen wurde

• Derzeit wird davon ausgegangen, dass sich 5 Fahrzeuge im Rahmen befinden.
• Die meisten Fahrzeuge, die die Kamera jemals (im selben Bild) beobachtet hat, sind jedoch 11 Fahrzeuge.

  • Wir wissen nicht, wann diese Ansammlung von 11 Fahrzeugen beobachtet wurde, wir wissen nur, dass die Beobachtung irgendwann in den letzten 24 Stunden erfolgte.

    
    

Aber wäre es nicht interessant, die gleichen Daten für ganz London zu sehen? Das heißt, wie viele Fahrzeuge werden maximal gleichzeitig von Londons Kameras beobachtet? Und wie viele Busse werden maximal von allen Kameras beobachtet?

Um diese Fragen zu beantworten, möchten wir am Ende Daten erhalten, die in etwa so aussehen

 {"24hmax_vehicles_allcams": 680.0, "24hmax_buses_allcams": 131.0, "24hmax_cars_allcams": 522.0, "24hmax_trucks_allcams": 94.0, "24hmax_motorcycles_allcams": 4.0}

Beachten Sie, dass es sich hier nicht um die Gesamtzahl der Fahrzeuge handelt (darauf komme ich später zurück), sondern nur um eine Momentaufnahme der meisten Fahrzeuge, die Londons Verkehrskameras in den letzten 24 Stunden beobachtet haben.

Um diese Daten zu erhalten, müssen Sie die folgenden Änderungen vornehmen

• Erhalten Sie die Höchstwerte für jeden Fahrzeugtyp, der in den letzten 24 Stunden beobachtet wurde (nicht nur für alle Fahrzeuge).

• Speichern Sie die neuesten Maxima und aggregieren Sie sie alle (über alle Kameras hinweg).

• Aktualisieren Sie die Aggregation kontinuierlich, wenn neue Maxima von verschiedenen Kameras beobachtet werden.

  
  

Anschließend rendern Sie die Daten im Frontend so, dass sie etwa so aussehen:

Ich habe dafür bereits Code erstellt, aber bevor Sie ihn testen, benötigen Sie einen Ort zum Speichern der neuen Aggregationen, sobald sie eingehen. In diesem Beispiel zeige ich Ihnen, wie Sie ein neues Kafka-Thema zum Speichern verwenden die Daten.

Ein neues Thema „max-vehicles-agg“ hinzugefügt

Sie sind sich nicht ganz sicher, was ein Thema ist? Die Apache Kafka-Dokumentation ist ein guter Ausgangspunkt, aber im Wesentlichen werden Themen als ähnlich einem Ordner in einem Dateisystem beschrieben, und die Ereignisse (in Form von Nachrichten) sind die Dateien in diesem Ordner. Sie erfahren, wie Sie in der Quix-Benutzeroberfläche ein solches erstellen – ein sehr einfacher Vorgang.

Um ein Thema im Quix-Portal zu erstellen, gehen Sie folgendermaßen vor:

• Öffnen Sie im Quix-Portal die Seite „Themen“ und klicken Sie oben rechts auf „Neu hinzufügen“ .

• Geben Sie im angezeigten Dialog einen Namen ein, z. B. „ max-vehicles-agg “, belassen Sie die Standardeinstellungen und klicken Sie auf „Fertig“ .

  Jetzt müssen Sie den Code im Back-End aktualisieren, um dieses Thema zu schreiben. Der Dienst, den Sie ändern müssen, heißt „ Max Vehicle Window “. Es handelt sich um einen Python-Dienst, der Daten mithilfe der Python-Bibliotheken Quix Streams und Pandas aggregiert.

  
  

  
  

Beim Bearbeiten von Diensten im Allgemeinen haben Sie immer zwei Möglichkeiten.

• Bearbeiten und testen Sie Ihre lokale IDE, übernehmen Sie dann Ihre Änderungen und übertragen Sie sie in Ihr geforktes Repo.

• Bearbeiten und testen Sie in der Online-Quix-IDE.

  
  

Die Quix-IDE kann etwas schneller sein, da alle Abhängigkeiten für Sie installiert werden und Sie keine neue virtuelle Umgebung einrichten müssen. Außerdem werden Ihre Änderungen automatisch übertragen, was die Arbeit etwas beschleunigen kann. Für dieses Beispiel verwende ich die Quix-IDE.

Aktualisierung des Max Vehicles-Dienstes, um Daten für alle Kameras zu aggregieren

Um Zeit zu sparen, habe ich dafür bereits Code erstellt. Sie müssen ihn also nur noch in die entsprechende Datei einfügen.

So bearbeiten Sie den Max Vehicle Window-Dienst:

• Navigieren Sie zu „Anwendungen“ und klicken Sie auf „Max. Fahrzeugfenster“ , um die Quix-IDE zu öffnen.

  
  

  Beachten Sie, dass in der Quix-Benutzeroberfläche die Codebasis für jeden Dienst als „Anwendung“ bezeichnet wird, in Wirklichkeit handelt es sich jedoch um einen eigenständigen Ordner, der den Code für einen bestimmten Dienst speichert (die alle zusammenarbeiten, um die Computer-Vision-App zu betreiben). .

  
  

• Wenn es noch nicht geöffnet ist, klicken Sie im linken Dateimenü auf main.py , um es in der Quix-IDE zu öffnen.

  
  

• Öffnen Sie in einem anderen Fenster diese Datei aus unserem Tutorial-Repo , kopieren Sie dann den Code und fügen Sie ihn ein, um den gesamten vorhandenen Code zu ersetzen. Die Codekommentare sollen Ihnen helfen zu verstehen, welche Änderungen ich vorgenommen habe.

  
  

Der neue Code erwartet, dass es eine neue Umgebungsvariable namens „ output2 “ gibt, die den Namen des neuen Ausgabethemas speichert, das Sie zuvor erstellt haben, also erstellen wir diese neue Variable.

• Klicken Sie im Abschnitt „Variablen“ auf +Hinzufügen , um eine neue Umgebungsvariable hinzuzufügen.
• Wählen Sie im angezeigten Dialog Ausgabethema als Variablentyp aus, benennen Sie die Variable „output2“ und wählen Sie das von Ihnen erstellte Thema als Standardwert aus (z. B. „ max-vehicles-agg “).

Jetzt müssen Sie nur noch Ihre Änderungen speichern und bereitstellen.

• Um Ihre Änderungen zu speichern, klicken Sie auf „Übernehmen“ .

  
  

• Bevor Sie eine erneute Bereitstellung durchführen, empfiehlt es sich, die Revision zu kennzeichnen, damit Sie leicht erkennen können, welche Version des Codes bei der Bereitstellung verwendet wird.

  • Kennzeichnen Sie den Commit, indem Sie auf das Tag-Symbol klicken und ihm einen Namen geben, etwa „NewAggregation“.

  • Wenn Sie noch einmal überprüfen möchten, ob der neue Code funktioniert, klicken Sie oben rechts auf „Ausführen“ .

    
    

• Um den Dienst erneut bereitzustellen, öffnen Sie das Bereitstellungs-Dropdown-Menü oben rechts, wählen Sie „ Vorhandene Bereitstellung bearbeiten “ und klicken Sie dann auf „ Erneut bereitstellen “.

  

  
  

  Um sich das Thema anzusehen, öffnen Sie das Quix-Portal, navigieren Sie zur Seite „Themen“ und klicken Sie auf das Thema „ max-vehicles-agg “, das Sie zuvor erstellt haben.

  
  

• Jedes Thema verfügt über eine Ansicht namens „Daten-Explorer-Ansicht“, mit der Sie die Nachrichten überprüfen können, die durch ein Thema fließen.

  

  
  

Im Abschnitt „ STREAMS AUSWÄHLEN “ sollte nun ein aktiver Stream angezeigt werden.

• Wählen Sie den Stream „ aggregated_data “ (oder wie auch immer er heißt) aus.

• Wählen Sie dann alle verfügbaren Parameter im Abschnitt PARAMETER AUSWÄHLEN… aus.

• Wählen Sie abschließend die Tabellenansicht aus, damit Sie Ihre ausgewählten Daten sehen können.

  
  

Beachten Sie, dass neue Daten möglicherweise nicht sofort eingehen, da der TFL-Kamera-Feed- Dienst über einen variablen Sleep-Timer verfügt, um ein Erreichen der Ratengrenzen der TfL-API zu vermeiden. Sie können es in der Umgebungsvariablen „sleep_interval“ konfigurieren. Zum Zeitpunkt des Verfassens dieses Artikels war die Standardeinstellung auf 60 Sekunden eingestellt.

Wenn Sie die Protokolle der TFL-Kamera-Feed- Bereitstellung überprüfen, sollten Sie sehen, wann dieser Timer aktiviert wurde. Wenn Sie sehen, dass wieder Daten eingehen, können Sie sicher noch einmal zurückgehen und Ihr Thema überprüfen

Aktualisierung des Frontends zur Anzeige der Karte und der neuen Aggregationen

Wenn Sie Bedenken haben, den Front-End-Code zu ändern, können Sie diesen Teil überspringen. Quix ist hauptsächlich ein Back-End-Tool, aber wir haben eine Front-End-Komponente hinzugefügt, sodass Sie eine voll funktionsfähige Minianwendung erstellen können. In diesem Abschnitt aktualisieren Sie das Frontend, um die Aggregationen anzuzeigen.

Zeigen Sie die neuen Aggregationsdaten im Frontend an

Jetzt aktualisieren wir den UI-Dienst so, dass er die neuen Aggregate enthält, die wir im Back-End erstellt haben. Zur Erinnerung: So sollte es aussehen, wenn Sie fertig sind.

Es ist nicht schön, aber es liefert uns die Informationen, die wir brauchen. Um die Benutzeroberfläche zu aktualisieren, müssen Sie die folgenden Dateien bearbeiten:

• ' app.component.ts ', das die Datenabonnements für das Frontend verwaltet:

  <repo_root>/TfL-Bildverarbeitungs-UI/src/app/app.component.ts

  
  

• ' app.component.html ', das das Layout der Informationen auf der Seite definiert. <repo_root>/TfL-Bildverarbeitungs-UI/src/app/app.component.html

  
  

Beginnen wir mit app.component.ts . Navigieren Sie im Quix-Portal zu „ Anwendungen“ und klicken Sie auf die TfL-Bildverarbeitungs-Benutzeroberfläche (bereitgestellt als „Projekt-Frontend“), um die Quix-IDE zu öffnen.

Aktualisierung der Datenabonnements

Hier werden wir etwas wählerisch vorgehen und die Themenverweise fest codieren. In der Produktion sollte dies mit Variablen gehandhabt werden, aber es vereinfacht die Demo.

Öffnen Sie im Abschnitt „Anwendungsdateien“ ./src/app/app.component.ts .

Suchen Sie den folgenden Block (nach Zeile 213):

 subscribeToData() { this.connection.invoke('SubscribeToParameter', this._topicName, this._streamId, 'image'); this.connection.invoke('SubscribeToParameter', this._topicName, this._streamId, 'lat'); this.connection.invoke('SubscribeToParameter', this._topicName, this._streamId, 'lon'); this.connection.invoke('SubscribeToParameter', 'max-vehicles', '*', 'max_vehicles'); this.connection.invoke('SubscribeToParameter', 'image-vehicles', '*', '*');

Und die folgende zusätzliche Zeile unter dem Block:

 this.connection.invoke('SubscribeToParameter', 'max-vehicles-agg', '*', '*'); // new line

Dadurch wird ein Abonnement für das Thema initiiert und alle Parameter in der Nachricht gelesen (parameterData ist ein spezifischer Datentyp in der Quix-API und besteht normalerweise aus numerischen Daten.)

Suchen Sie als Nächstes die Zeile 'selectedMarker: Marker | undefined; ' (Zeile 43 oder so ungefähr) und fügen Sie die folgende neue Zeile darunter ein.

 latestMessageMaxAgg: ParameterData | undefined;

Diese Zeile initialisiert eine neue Variable, die Sie zum Speichern der Daten aus den Nachrichten verwenden.

Nun weisen wir der Variablen die Daten zu, wann immer eine neue Nachricht erkannt wird.

Suchen Sie zunächst den folgenden Block (nach Zeile 108):

 if (data.topicName === "image-vehicles") { key = data.streamId; if (data.numericValues['vehicles']) markerData.count = data.numericValues['vehicles'][0]; if (data.numericValues[this.parameterId]) markerData.value = data.numericValues[this.parameterId][0]; }

Fügen Sie den folgenden Block darunter hinzu:

 if (data.topicName === 'max-vehicles-agg') { this.latestMessageMaxAgg = data; }

Wenn die Nachricht nun von einem Thema namens „ max-vehicles-agg “ stammt, nimmt das Frontend alle Daten in der Nachricht und fügt sie in die Variable „ latestMessageMaxAgg ein.

Nachdem wir nun Zugriff auf die Variable haben, rendern wir ihren Inhalt im Frontend.

Aktualisieren der Frontend-Vorlage

Jetzt ist es an der Zeit, die Daten, die wir dem Frontend zur Verfügung gestellt haben, endlich zu rendern.

• Öffnen Sie im Abschnitt „Anwendungsdateien“ ./src/app/app.component.html .

Suchen Sie das folgende Div, das eine farbige Verkehrsdichteskala rendert (nach Zeile 85):

 <div> <p class="mat-caption text-body mb-1">Traffic density</p>

Fügen Sie direkt darüber den folgenden Codeblock hinzu.

 <div *ngIf="latestMessageMaxAgg"> <h4 _ngcontent-kap-c49="" class="mb-2">Combined Maximums Across All London Cameras</h4> <table> <tbody> <tr><td><strong>All vehicles:</strong></td> <td> {{ latestMessageMaxAgg?.numericValues?.['combined_max_vehicles_for_all_cameras']?.at(0) }} </td> </tr> <tr><td><strong>Cars:</strong></td> <td> {{ latestMessageMaxAgg?.numericValues?.['combined_max_cars_for_all_cameras']?.at(0) }} </td> </tr> <tr><td><strong>Buses:</strong></td> <td> {{ latestMessageMaxAgg?.numericValues?.['combined_max_buses_for_all_cameras']?.at(0) }} </td> </tr> <tr><td><strong>Trucks:</strong></td> <td> {{ latestMessageMaxAgg?.numericValues?.['combined_max_trucks_for_all_cameras']?.at(0) }} </td> </tr> <tr><td><strong>Motorcycles:</strong></td> <td> {{ latestMessageMaxAgg?.numericValues?.['combined_max_motorbikes_for_all_cameras']?.at(0) }} </td> </tr> </tbody> </table> </div>

Dadurch werden Daten aus der Variablen latestMessageMaxAgg extrahiert, die Sie zuvor erstellt haben, und die Daten der neuesten Nachricht angezeigt (ausgewählt über „ at(0) “). Außerdem sind die Daten optional, sodass Sie keine Fehlermeldung erhalten, dass Daten fehlen.

Wenn Sie es zuerst auf Ihrem lokalen Computer testen möchten, können Sie die Änderungen, die Sie in der Quix-IDE vorgenommen haben, abrufen (Quix überträgt sie automatisch) und den Anweisungen in der README-Datei des Front-End-Dienstes folgen.

• Um den TfL-Bildverarbeitungs-UI -Dienst erneut bereitzustellen, befolgen Sie denselben Vorgang wie bei der erneuten Bereitstellung des Max Vehicles-Dienstes .

  
  

Wenn etwas schief geht, denken Sie daran, dass Sie den Dienst möglicherweise löschen und erneut bereitstellen müssen, bevor die Fehlerausgabe in den Protokollen angezeigt wird.

Zählen von Fahrzeugen über längere Zeiträume

Wie Sie wahrscheinlich bemerkt haben, zählt die App die Fahrzeuge nicht im Zeitverlauf, sondern nur die Anzahl der Fahrzeuge, die in einem bestimmten Videobild beobachtet werden.

Dies liegt daran, dass wir nicht alle Funktionen von YOLOv8 nutzen. Wir verwenden nur die Objekterkennung, aber um Fahrzeuge richtig zu zählen, müssen Sie die Objektverfolgung verwenden. Das Problem besteht darin, dass die Objektverfolgung mehr Speicher erfordert, der im kostenlosen Quix-Plan nicht verfügbar ist. Diese Demo verwendet das kleinste „Nano“-YOLO-Modell, es sind jedoch vier weitere Größen verfügbar, wobei YOLOv8x das leistungsstärkste ist. Wenn Sie ein größeres Modell verwenden, können Sie hervorragende Ergebnisse bei der Fahrzeugverfolgung und -zählung erzielen.

Hier ist ein Screenshot von einem Versuch, es auf meinem lokalen Computer (mit einer anständigen GPU) in einem TfL-Kamera-Feed auszuführen.

Ich habe YOLO in Kombination mit einigen anderen Bibliotheken (z. B. Supervision von Roboflow) verwendet, um Fahrzeuge zu zählen, die in beide Richtungen entlang der Straße fahren.

Weitere Informationen dazu, wie Sie ähnliche Ergebnisse erzielen, finden Sie in den folgenden Ressourcen:

• Verfolgen und zählen Sie Objekte mit YOLOv8 (roboflow.com)

  Eine hervorragende Einführung in die Fahrzeugzählung mithilfe von Computer Vision mit einem Jupyter-Notebook.

  
  

• YOLOv8 Objekterkennung und -zählung | von Dustin Liu | September 2023 | DataDrivenInvestor

  Eine exemplarische Vorgehensweise für eine optimierte Streamlit-Version des Roboflow-Notebooks (im zuvor verlinkten Artikel besprochen) – Sie können es auch online ausprobieren .

Abschluss

Ein großes Lob dafür, dass du es bis hierher geschafft hast. Ich hoffe, Sie konnten es erfolgreich anpassen. Wenn Sie irgendwelche Probleme hatten, posten Sie unbedingt eine Frage in unserem Community-Forum und einer von uns wird sich direkt darum kümmern.

Wie Sie sehen, ist es ziemlich einfach, komplexe Anwendungen in Quix bereitzustellen und auszuführen. Da diese Demos eigenständig konzipiert sind, hosten wir auch das Frontend. In einem Produktionsszenario möchten Sie Ihr Frontend jedoch wahrscheinlich woanders ausführen. Was Quix wirklich auszeichnet, ist die äußerst leistungsstarke Verarbeitung von Ereignisströmen und die Durchführung komplexer Berechnungen. Es nutzt die Stärken von Apache Kafka, um Daten in großem Maßstab zu verarbeiten und gleichzeitig einige seiner Schwächen zu abstrahieren (z. B. Ressourcenmanagement und Konfigurationskomplexität). Wenn Sie bereits über eine eigene Kafka-Instanz verfügen oder Confluent Cloud verwenden, können Sie diese natürlich auch verwenden. Quix unterstützt Sie bei der Orchestrierung und Verarbeitung Ihrer Event-Streams in Echtzeit.

• Weitere Informationen zur Verwaltung von Quix-Umgebungen in Quix finden Sie im entsprechenden Abschnitt in der Quix-Dokumentation .
• Um eine weitere voll funktionsfähige Demo-App zu sehen, probieren Sie unsere Chat-App-Demo aus, die die Hugging Face Transformers-Bibliothek verwendet, um eine Live-Stimmungsanalyse für Chat-Nachrichten durchzuführen.

Von Tomáš Neubauer (CTO und Mitbegründer von Quix)