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 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. Confluent Cloud 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 . Google Maps zeigte das Gebiet dann brav auf der Karte als stark überlastet an. einen „virtuellen“ Stau auf einer der Hauptbrücken über die Spree zu erzeugen 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 „ “, in dem ein auf Computer Vision basierendes System vorgestellt wurde, um regelmäßig Fahrzeugzahlen aus kanadischen Verkehrskameras zu extrahieren Bilder. Traffic Volume Estimation from Traffic Camera Imagery: Toward Real-Time Traffic Data Streams 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 (weitere Details finden Sie in der ) Traffic for London API Dokumentation dieses Projekts Ein kostenloses Quix-Konto – wenn Sie noch keins erstellt haben, können Sie (Sie können dies mit ein paar Klicks mit einem bestehenden Google-, GitHub- oder Microsoft-Konto tun). sich jetzt anmelden Erhalten Sie Ihre eigene Kopie des Projekts Um eine Kopie des Projekts (und einer unserer Demoanwendungen) zu erhalten, sind mehrere wichtige Schritte erforderlich: Forken Sie unser von GitHub. Computer-Vision-Demo-Repository Auf diese Weise können Sie Ihre Version des Projekts ganz einfach anpassen und dennoch von vorgelagerten Verbesserungen profitieren. , erstellen Sie dann eine neue Entwicklungsumgebung und verknüpfen Sie diese mit Ihrem Fork. Erstellen Sie ein Projekt in Quix Cloud Dadurch können Sie die Anwendung in Quix Cloud unter Ihrem eigenen Konto ausführen und aktualisieren. 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 ( ) und klicken Sie auf https://github.com/quixio/computer-vision-demo Fork. Stellen Sie sicher, dass Sie alle Branches forken (deaktivieren Sie im Fork-Assistenten von GitHub die Option „ “). Denn wenn Sie ein Testkonto verwenden, benötigen Sie einen alternativen Zweig, um eine Entwicklungsumgebung in Quix Cloud zu erstellen. Nur den Hauptbranch kopieren 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 „ “ (oder etwas Ähnliches) und wählen Sie aus. Meine Computer-Vision-Demo „Mit Ihrem eigenen Git-Repository verbinden“ 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 „ “ als Umgebungsnamen ein und wählen Sie den Zweig „ “ aus Ihrem geforkten Repo aus. tutorial tutorial 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 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 auswählen und Ihre Anmeldeinformationen eingeben. Confluent Cloud „Mit Ihrer Confluent Cloud verbinden“ 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 (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). „Pipeline“ Klicken Sie auf die Schaltfläche , um den neuesten Code aus Ihrem geforkten Repo abzurufen. : Der Synchronisierungsprozess ist bidirektional. Wenn Sie also Code in Ihrer Umgebung ändern, wird dieser ebenfalls an das Quell-Repository zurückgesendet. „Umgebung synchronisieren“ Hinweis Hoffentlich war die Synchronisierung erfolgreich. Wenn es funktioniert hat, sollten Sie sehen, dass alle Ihre Dienste auf der Seite mit dem Aufbau beginnen. Pipeline- 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 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. Pipeline- 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. Dienstname Beschreibung TfL-Kamera-Feed Ruft die Kamera-Feeds vom TfL-API-Endpunkt unter Verwendung eines TfL-API-Schlüssels und der Python-Bibliothek „requests“ ab. , Dokumentation Quellcode Framegrabber Extrahiert Frames aus den von der Tfl-API bereitgestellten Videodateien. , Dokumentation Quellcode Objekterkennung Nimmt Bilder vom Framegrabber auf und erkennt Objekte in jedem Bild. , Dokumentation Quellcode Cam-Fahrzeuge Berechnet die Gesamtzahl der Fahrzeuge. , Dokumentation Quellcode Maximales Fahrzeugfenster Berechnet die maximale Anzahl an Fahrzeugen über ein Zeitfenster von einem Tag. , Dokumentation Quellcode Datenpuffer Der Datenpuffer stellt einen Datenpuffer von einer Sekunde bereit, um die Belastung des Daten-API-Dienstes zu reduzieren. , Dokumentation Quellcode Daten-API Ein REST-API-Dienst, der zwei Endpunkte bereitstellt. , Dokumentation Quellcode Projekt-Frontend Hostet ein Frontend, das die API auf neue Daten überprüft. , Dokumentation Quellcode 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 ), um Daten vom Back-End abzurufen und darzustellen. Diese API erfordert ein Bearer-Token zur Authentifizierung von Clientanwendungen. Websockets-API 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 aus. Persönliche Zugriffstoken Klicken Sie im daraufhin angezeigten Dialogfeld auf 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. „Token generieren“ Hinzufügen Ihres persönlichen Zugriffstokens zu den Geheimnissen Öffnen Sie im Quix-Portal die Seite und klicken Sie auf , um die Quix-IDE zu öffnen. „Anwendungen“ „Sentiment Demo UI“ Klicken Sie im Abschnitt (unten links) auf . „Variablen“ Secrets-Verwaltung Klicken Sie in der angezeigten Seitenleiste auf und geben Sie „ “ als Geheimschlüssel ein. + Neues Geheimnis bearerToken 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 registriert, müssen Sie zunächst auch Ihren eigenen Tfl-API-Schlüssel als Geheimnis hinzufügen. Tfl-API-Portal 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 „ “ hinzufügen. tfl_api_key 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 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 pro Kamera 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 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. Apache Kafka-Dokumentation Um ein Thema im Quix-Portal zu erstellen, gehen Sie folgendermaßen vor: Öffnen Sie im Quix-Portal die Seite und klicken Sie oben rechts auf . „Themen“ „Neu hinzufügen“ Geben Sie im angezeigten Dialog einen Namen ein, z. B. „ “, belassen Sie die Standardeinstellungen und klicken Sie auf . max-vehicles-agg „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 „ “. Es handelt sich um einen Python-Dienst, der Daten mithilfe der Python-Bibliotheken und Pandas aggregiert. Max Vehicle Window Quix Streams 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 und klicken Sie auf , um die Quix-IDE zu öffnen. „Anwendungen“ „Max. Fahrzeugfenster“ 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 , um es in der Quix-IDE zu öffnen. main.py Öffnen Sie in einem anderen Fenster , 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. diese Datei aus unserem Tutorial-Repo Der neue Code erwartet, dass es eine neue Umgebungsvariable namens „ “ gibt, die den Namen des neuen Ausgabethemas speichert, das Sie zuvor erstellt haben, also erstellen wir diese neue Variable. output2 Klicken Sie im Abschnitt auf , um eine neue Umgebungsvariable hinzuzufügen. „Variablen“ +Hinzufügen Wählen Sie im angezeigten Dialog als Variablentyp aus, benennen Sie die Variable „output2“ und wählen Sie das von Ihnen erstellte Thema als Standardwert aus (z. B. „ “). Ausgabethema 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 „ “ und klicken Sie dann auf „ “. Vorhandene Bereitstellung bearbeiten Erneut bereitstellen Um sich das Thema anzusehen, öffnen Sie das Quix-Portal, navigieren Sie zur Seite und klicken Sie auf das Thema „ “, das Sie zuvor erstellt haben. „Themen“ max-vehicles-agg 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 „ “ sollte nun ein aktiver Stream angezeigt werden. STREAMS AUSWÄHLEN Wählen Sie den Stream „ “ (oder wie auch immer er heißt) aus. aggregated_data Wählen Sie dann alle verfügbaren im Abschnitt aus. Parameter PARAMETER AUSWÄHLEN… Wählen Sie abschließend die aus, damit Sie Ihre ausgewählten Daten sehen können. Tabellenansicht Beachten Sie, dass neue Daten möglicherweise nicht sofort eingehen, da der 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. TFL-Kamera-Feed- Wenn Sie die Protokolle der 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 TFL-Kamera-Feed- 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: ' ', das die Datenabonnements für das Frontend verwaltet: app.component.ts /TfL-Bildverarbeitungs-UI/src/app/app.component.ts ' ', das das Layout der Informationen auf der Seite definiert. app.component.html /TfL-Bildverarbeitungs-UI/src/app/app.component.html Beginnen wir mit . Navigieren Sie im Quix-Portal zu „ und klicken Sie auf (bereitgestellt als „Projekt-Frontend“), um die Quix-IDE zu öffnen. app.component.ts Anwendungen“ die TfL-Bildverarbeitungs-Benutzeroberfläche 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 in der Quix-API und besteht normalerweise aus numerischen Daten.) spezifischer Datentyp Suchen Sie als Nächstes die Zeile ' (Zeile 43 oder so ungefähr) und fügen Sie die folgende neue Zeile darunter ein. 'selectedMarker: Marker | undefined; 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 „ “ stammt, nimmt das Frontend alle Daten in der Nachricht und fügt sie in die Variable „ ein. max-vehicles-agg latestMessageMaxAgg 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): Traffic density

Fügen Sie direkt darüber den folgenden Codeblock hinzu. Combined Maximums Across All London Cameras All vehicles: {{ latestMessageMaxAgg?.numericValues?.['combined_max_vehicles_for_all_cameras']?.at(0) }} Cars: {{ latestMessageMaxAgg?.numericValues?.['combined_max_cars_for_all_cameras']?.at(0) }} Buses: {{ latestMessageMaxAgg?.numericValues?.['combined_max_buses_for_all_cameras']?.at(0) }} Trucks: {{ latestMessageMaxAgg?.numericValues?.['combined_max_trucks_for_all_cameras']?.at(0) }} Motorcycles: {{ latestMessageMaxAgg?.numericValues?.['combined_max_motorbikes_for_all_cameras']?.at(0) }} Dadurch werden Daten aus der Variablen extrahiert, die Sie zuvor erstellt haben, und die Daten der neuesten Nachricht angezeigt (ausgewählt über „ “). Außerdem sind die Daten optional, sodass Sie keine Fehlermeldung erhalten, dass Daten fehlen. latestMessageMaxAgg at(0) 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 folgen. README-Datei des Front-End-Dienstes Um den -Dienst erneut bereitzustellen, befolgen Sie denselben Vorgang wie bei der erneuten Bereitstellung des . TfL-Bildverarbeitungs-UI 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. von Roboflow) verwendet, um Fahrzeuge zu zählen, die in beide Richtungen entlang der Straße fahren. Supervision Weitere Informationen dazu, wie Sie ähnliche Ergebnisse erzielen, finden Sie in den folgenden Ressourcen: (roboflow.com) Verfolgen und zählen Sie Objekte mit YOLOv8 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 und einer von uns wird sich direkt darum kümmern. Community-Forum 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 aus, die die verwendet, um eine Live-Stimmungsanalyse für Chat-Nachrichten durchzuführen. Chat-App-Demo Hugging Face Transformers-Bibliothek Von (CTO und Mitbegründer von Quix) Tomáš Neubauer Auch veröffentlicht. hier