Comment créer et déployer une application de surveillance du trafic en temps réel à l'aide du modèle de vision par ordinateur de Quix

Si vous avez toujours voulu expérimenter la vision par ordinateur mais que vous n'avez pas le temps de mettre en place un environnement de développement complexe, ce didacticiel est fait pour vous. La vision par ordinateur peut être un excellent substitut aux capteurs physiques dans certaines situations, notamment lorsqu'il s'agit de compter des objets. Dans ce didacticiel, je vais vous présenter une application de démonstration que nous avons publiée et qui utilise les caméras de circulation de Londres pour évaluer les embouteillages actuels en comptant les véhicules. Il est basé sur un modèle de projet réutilisable que nous avons créé pour vous aider à reproduire le projet. Je vais ensuite vous montrer comment utiliser ce modèle pour créer votre propre copie du projet et le rendre opérationnel dans Quix, un outil permettant de développer et d'exécuter des applications de streaming d'événements. Notre version démo de l'application de vision par ordinateur utilise également un courtier de messages hébergé dans (Apache Kafka entièrement géré en tant que service), mais il n'est pas obligatoire d'avoir un compte Confluent Cloud pour suivre le tutoriel. Confluent Cloud Voici à quoi devrait ressembler le résultat final : Vous pouvez expérimenter cette version démo en direct à l'adresse suivante : https://app-demo-computervisiondemo-prod.deployments.quix.ai/ Que fait cette application ? L'application utilise les flux en direct des caméras de circulation de Londres (également connues sous le nom de « Jam Cams ») pour compter les véhicules et estimer les niveaux de congestion. Il utilise ensuite des indicateurs visuels pour indiquer où se produisent les embouteillages sur une carte de Londres. Les véhicules sont comptés à l'aide d'un modèle ML pour la détection d'objets dans les images (plutôt que dans les capteurs ou les données GPS). Le modèle de détection d'objets classe également les véhicules en différents types et vous pouvez filtrer les données selon ces types. Par exemple, vous pouvez utiliser le menu déroulant « Sélectionner un objet » pour voir uniquement le nombre de bus que toutes les caméras de circulation ont détectés à l'heure actuelle. A noter que l'application ne compte pas tous les véhicules observés tout au long de la journée, juste à l'heure actuelle (nous en reparlerons plus tard). Pourquoi utiliser la détection d'objets pour déterminer la congestion ? Parce que les autres méthodes ne sont pas toujours fiables. Par exemple, en 2020, un artiste berlinois a réussi à sur l’un des principaux ponts sur la Spree avec rien d’autre qu’une charrette à bras et 99 téléphones d’occasion. Google Maps a ensuite consciencieusement affiché la zone sur la carte comme étant très encombrée. créer un embouteillage « virtuel » Pour cette raison, d’autres types de données sont souvent utilisés pour compléter les estimations de congestion basées sur le GPS. Cela inclut les modèles historiques, les données des capteurs, les flux municipaux sur les fermetures programmées et les incidents signalés par les utilisateurs. Cependant, l'une des références croisées les plus fiables est la reconnaissance visuelle des embouteillages glanée par les caméras de circulation ( ). en supposant qu'une mouette ne bloque pas la vue Malgré les mouettes errantes, la vision par ordinateur est désormais utilisée par les organisations gouvernementales pour augmenter les données de trafic et accroître la précision des estimations du volume de trafic. Par exemple, le 22 septembre de l’année dernière, Statistique Canada a publié un article intitulé « » qui présentait un système basé sur la vision par ordinateur pour extraire périodiquement le nombre de véhicules des caméras de circulation canadiennes. imagerie. Traffic volume estimation from traffic camera imagery: Toward real-time traffic data streams Désormais, avec Quix, vous n'avez plus besoin d'une équipe de chercheurs scientifiques pour essayer quelque chose comme ça. Tout développeur compétent peut l’essayer et être opérationnel en quelques minutes. Mais dans ce cas, nous parlons plutôt de 60 minutes plutôt que de 5 minutes. C'est un gros projet après tout ! Pour reproduire le projet, vous aurez besoin de deux choses : Une clé API pour l' (pour plus de détails, voir ) API Traffic for London la documentation de ce projet Un compte Quix gratuit — si vous n'en avez pas encore créé, vous pouvez (vous pouvez le faire en quelques clics avec un compte Google, GitHub ou Microsoft existant). vous inscrire dès maintenant Obtenir votre propre copie du projet Il y a plusieurs étapes principales pour obtenir une copie du projet (et de l'une de nos applications de démonstration) : Forkez notre à partir de GitHub. référentiel de démonstration de vision par ordinateur Cela vous permettra de personnaliser facilement votre version du projet tout en bénéficiant d’améliorations en amont. , puis créez un nouvel environnement de développement et liez-le à votre fork. Créez un projet dans Quix Cloud Cela vous permettra d'exécuter et de mettre à jour l'application dans Quix Cloud sous votre propre compte. Mettez à jour les informations d'identification des services externes tels que l'API de la caméra TfL et Google Maps. Les secrets tels que les clés API ne sont pas transférés dans les copies de projet, vous devrez donc les ajouter vous-même. Une fois que vous aurez configuré les bases, nous plongerons dans le code et verrons comment vous pouvez l'adapter. Forker le référentiel de démonstration de vision par ordinateur Pour avoir une idée du code, commençons par créer le référentiel Computer Vision Demo. Pourquoi fork plutôt que cloner ? Parce que plus tard, vous importerez ce code dans votre propre environnement Quix, et utiliser un fork est le moyen le plus simple de garder votre environnement synchronisé. Vous pourrez également obtenir toutes les modifications en amont que nous apportons au modèle de projet. Par souci de simplicité, je suppose que vous possédez déjà un compte GitHub. Cependant, vous souhaiterez peut-être créer un utilisateur Git spécifique pour ce projet. Plus tard, vous accorderez à Quix un accès SSH au référentiel, et avoir un utilisateur distinct est un bon moyen de garantir que Quix n'a pas plus d'accès qu'il ne le devrait. Ouvrez GitHub dans votre navigateur Web, accédez au référentiel Computer Vision Demo ( ) et cliquez sur https://github.com/quixio/computer-vision-demo Fork. Assurez-vous de créer toutes les branches (dans l'assistant Fork de GitHub, désélectionnez « »). En effet, si vous utilisez un compte d'essai, vous aurez besoin d'une branche alternative pour créer un environnement de développement dans Quix Cloud. Copier la branche principale uniquement Créer un nouvel environnement de développement dans Quix Avant de pouvoir créer un environnement dans Quix, vous devez d'abord créer un projet. Lors de l'assistant de création de projet, il vous sera alors demandé d'ajouter un environnement initial. Vous pourrez ajouter d’autres environnements plus tard, une fois que vous aurez compris les choses. Pour créer un projet et connecter un environnement à votre dépôt forké, procédez comme suit : Connectez-vous à Quix et cliquez sur + . Nouveau projet Nommez votre projet « » (ou quelque chose de similaire) et sélectionnez . Ma démo de vision par ordinateur Connectez-vous à votre propre dépôt Git Sur l'écran suivant, vous devriez voir des instructions sur la façon d'ajouter la clé Quix SSH à votre dépôt : suivez ces instructions. L'ajout de cette clé permet à Quix de synchroniser automatiquement votre dépôt avec l'environnement Quix Sur l'écran suivant, il vous sera demandé de créer un environnement : les environnements vous permettent de déployer du code à partir de différentes branches en parallèle. Entrez « » pour le nom de l'environnement et sélectionnez la branche « » de votre dépôt forké. tutorial tutorial Passez aux étapes suivantes de l'assistant de création de projet. L'assistant vous demandera quel courtier de messages vous souhaitez utiliser. La version originale du projet utilise comme courtier de messages. Si vous souhaitez utiliser Confluent Cloud, vous devrez d'abord avoir un compte. Dans ce cas, vous sélectionnerez et saisirez vos informations d'identification. Confluent Cloud Se connecter à votre Confluent Cloud Cependant, il n'est pas obligatoire d'utiliser Confluent Cloud. Pour ce didacticiel, vous pouvez également vous en tenir au courtier de messages Quix par défaut. Une fois que vous avez terminé l'assistant, accédez à la page (si elle n'est pas déjà ouverte). Vous verrez un avertissement standard indiquant que votre environnement Quix n'est pas synchronisé avec le référentiel source (puisque l'environnement commence vide). Pipeline Cliquez sur le bouton pour extraire le dernier code de votre référentiel forké. : le processus de synchronisation est bidirectionnel, donc si vous modifiez du code dans votre environnement, il le renverra également vers le dépôt source. Environnement de synchronisation Remarque Espérons que la synchronisation ait réussi. Si cela a fonctionné, vous devriez voir tous vos services commencer à se développer sur la page . Pipeline Il existe un certain nombre de services, il faudra donc quelques minutes pour que tous les services soient créés et commencent à fonctionner. Notez que le service S3 est arrêté par défaut car vous aurez besoin de votre propre compte AWS pour que celui-ci fonctionne. Mais ce n'est de toute façon pas vraiment nécessaire pour ce tutoriel. Pour voir le pipeline complet sur la page , cliquez et faites glisser n'importe où sur une partie vide du canevas et faites défiler vers la droite, ou maintenez la touche Ctrl/⌘ enfoncée et utilisez la molette de votre souris pour effectuer un zoom arrière. Pipeline Faites défiler jusqu'à ce que vous puissiez voir un service appelé « Project Front End ». Cliquez sur l'icône de lancement bleue à côté du nom du service « Project Front End ». Vous devriez maintenant voir votre propre copie de l'application de vision par ordinateur, prête à jouer. Comprendre l'architecture de l'application de démonstration de vision par ordinateur Le pipeline se compose de nombreux services, mais l'architecture peut être résumée en trois segments principaux, comme illustré dans le diagramme suivant : Le premier ensemble de services (1 à 3) exploite les caméras de circulation de Londres et identifie les véhicules sur chaque segment routier surveillé. Le deuxième ensemble de services (4 à 7) conserve un total cumulé des types de véhicules sur chaque segment de route et enregistre le nombre maximum de véhicules détectés dans une trame donnée. Ces données sont ensuite mises en mémoire tampon et transmises à un service API REST afin que les données soient accessibles à tout service externe qui souhaite en faire la demande. Le service final (8) héberge un frontal qui interroge une API REST pour les statistiques agrégées des véhicules et écoute sur un Websocket les données brutes en direct de toutes les caméras de circulation (telles que les images vidéo) provenant d'un sujet dans Quix. Cette combinaison de données interrogées et en temps réel est utilisée pour visualiser les niveaux de trafic sur une carte de Londres. Je n'entrerai pas trop dans les détails sur les spécificités de chaque service car la documentation fait déjà du bon travail à ce sujet. Mais si vous souhaitez découvrir leur fonctionnement, voici quelques informations de référence avec des liens vers la documentation. Référence des services Si vous cliquez sur le nom du service, vous pouvez voir le service réel s'exécutant dans un environnement Quix en lecture seule, y compris les journaux d'exécution et le lignage des données. Nom du service Description Flux de la caméra TfL Récupère les flux de caméra du point de terminaison de l'API TfL, à l'aide d'une clé API TfL et de la bibliothèque Python « requests ». , Documentation Code source Frame grabber Extrait les images des fichiers vidéo fournis par l'API Tfl. , Documentation Code source Détection d'objet Prend des images de la carte d'acquisition et détecte les objets dans chaque image. , Documentation Code source Véhicules à cames Calcule le nombre total de véhicules. , Documentation Code source Fenêtre maximale du véhicule Calcule le nombre maximum de véhicules sur une fenêtre horaire d'une journée. , Documentation Code source Tampon de données Le tampon de données fournit un tampon de données d'une seconde pour réduire la charge sur le service Data API. , Documentation Code source API de données Un service API REST qui fournit deux points de terminaison. , Documentation Code source Front-end du projet Héberge un frontal qui vérifie l'API pour les nouvelles données. , Documentation Code source Ce sur quoi je veux me concentrer ici, c'est vous montrer . comment personnaliser le projet selon vos propres besoins Personnaliser le projet Pour vous aider à personnaliser le projet, je vais vous montrer comment apporter une petite modification à la logique d'agrégation dans le back-end et restituer ces nouvelles informations dans le front-end. Après cela, je vous indiquerai quelques ressources externes qui vous aideront à effectuer des tâches plus puissantes telles que le comptage de véhicules et le suivi d'objets. Mais nous devons d’abord faire un peu d’administration, comme ajouter de nouveaux secrets d’application. Ajout de vos propres informations d'identification API et mise à jour des secrets Le modèle de projet est configuré avec certaines informations d'identification par défaut, mais vous devrez les modifier pour que votre copie du projet fonctionne. Vous devrez définir chacune de ces informations d'identification comme un secret dans votre projet. Les secrets sont les suivants. Un jeton de porteur pour que le front-end communique avec le hub SignalR dans Quix (clé secrète : ' ') bearerToken Votre clé API Tfl (clé secrète : ' ') tfl_api_key Configuration d'un jeton de porteur pour le Front End Le front-end utilise la bibliothèque client SignalR pour communiquer avec Quix (via une ) afin de récupérer et de restituer les données du back-end. Cette API nécessite un jeton de porteur pour authentifier les applications clientes. API Websockets Pour ce didacticiel, vous allez créer un jeton d'accès personnel Quix à utiliser comme jeton de porteur. Vous créerez ensuite un secret pour stocker ce token dans votre environnement (oui, c'est un peu compliqué, mais vous ne devez le faire qu'une seule fois). #Obtenir un jeton d'accès personnel Voici comment obtenir un jeton d'accès personnel dans Quix. Ouvrez le menu de votre profil en haut à droite et sélectionnez . Jetons d'accès personnels Dans la boîte de dialogue qui apparaît, cliquez sur et collez votre jeton d'accès personnel dans le bloc-notes ou dans tout autre emplacement de stockage temporaire. Vous en aurez besoin pour l'étape suivante. Générer un jeton Ajouter votre jeton d'accès personnel aux secrets Dans le portail Quix, ouvrez la page et cliquez sur pour ouvrir l'IDE Quix. Applications Sentiment Demo UI Dans la section (en bas à gauche), cliquez sur . Variables Gestion des secrets Dans la barre latérale qui apparaît, cliquez sur et saisissez « » comme clé secrète. + Nouveau secret bearerToken Dans les colonnes « Par défaut » et « Tutoriel », collez votre jeton d'accès personnel que vous avez créé à l'étape précédente comme valeur dans chaque cellule. Ajout de votre clé API tfl aux secrets En supposant que vous soyez inscrit sur le vous devez d'abord ajouter votre propre clé API Tfl en tant que secret. portail API Tfl, Pour ajouter le secret, il faut suivre exactement les mêmes étapes que la section précédente, mais cette fois ajouter un secret avec la clé ' '. tfl_api_key Mise à jour du back-end pour obtenir le nombre maximum combiné de véhicules vus dans Londres Pour le moment, vous ne pouvez voir que le nombre maximum de véhicules observés au cours des dernières 24 heures. Par exemple, examinons les données affichées sous cette image vidéo prise par la caméra de Kings Cross et Swinton Street. par caméra Actuellement, on estime qu'il y a 5 véhicules dans le cadre. Cependant, le plus grand nombre de véhicules que la caméra ait jamais observé (dans le même cadre) est de 11 véhicules. Nous ne savons pas _quand _ce groupe de 11 véhicules a été observé, juste que l'observation a été faite au cours des dernières 24 heures. Mais ne serait-il pas intéressant de voir les mêmes données pour tout Londres ? Par exemple, quel est le nombre maximum combiné de véhicules observés par les caméras de Londres à un moment donné ? Et quel est le nombre maximum de bus observés par toutes les caméras ? Pour répondre à ces questions, nous voulons obtenir des données qui ressemblent à ceci {"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} Notez que nous ne parlons pas ici du nombre total de véhicules (j'y reviendrai plus tard), juste d'un instantané du plus grand nombre de véhicules observés par les caméras de circulation de Londres au cours des dernières 24 heures. Pour obtenir ces données, vous devrez apporter les modifications suivantes Obtenez les maximums pour chaque type de véhicule observé au cours des dernières 24 heures (pas seulement pour tous les véhicules). Stockez les derniers maximums, regroupez-les tous (sur toutes les caméras). Actualisez continuellement l’agrégation lorsque de nouveaux maximums sont observés par différentes caméras. Ensuite, vous effectuez le rendu des données dans le front-end afin qu'elles ressemblent à ceci : J'ai déjà créé du code pour cela, mais avant de le tester, vous aurez besoin d'un emplacement pour stocker les nouvelles agrégations au fur et à mesure de leur arrivée. Dans cet exemple, je vais vous montrer comment utiliser un nouveau sujet Kafka pour stocker les données. Ajout d'un nouveau sujet « max-vehicles-agg » Vous ne savez pas vraiment ce qu'est un sujet ? La est un bon point de départ, mais en substance, les sujets sont décrits comme similaires à un dossier dans un système de fichiers, et les événements (sous forme de messages) sont les fichiers de ce dossier. Vous apprendrez à en créer un dans l'interface utilisateur de Quix, ce qui est un processus très simple. documentation Apache Kafka Pour créer un sujet dans le portail Quix, suivez ces étapes : Dans le portail Quix, ouvrez la page et cliquez sur dans le coin supérieur droit. Sujets Ajouter nouveau Dans la boîte de dialogue qui apparaît, entrez un nom tel que « », laissez les paramètres par défaut tels qu'ils sont et cliquez sur . max-vehicles-agg Terminé Maintenant, vous devrez mettre à jour le code dans le back-end pour écrire ce sujet. Le service que vous devez modifier s'appelle « ». Il s'agit d'un service Python qui regroupe les données à l'aide des bibliothèques Python et Pandas. Max Vehicle Window Quix Streams Lorsque vous modifiez des services en général, vous avez toujours deux options. Modifiez et testez votre IDE local, puis validez et transmettez vos modifications à votre dépôt forké. Modifiez et testez dans l'IDE Quix en ligne. L'IDE Quix peut être un peu plus rapide car toutes les dépendances sont installées pour vous et vous n'avez pas besoin de configurer un nouvel environnement virtuel. Il transmet également automatiquement vos modifications, ce qui peut accélérer un peu les choses. Pour cet exemple, j'utiliserai l'IDE Quix. Mise à jour du service Max Vehicles pour regrouper les données de toutes les caméras Pour gagner du temps, j'ai déjà créé du code pour cela, il vous suffit donc de le coller dans le fichier approprié. Pour modifier le service Max Vehicle Window : Accédez à et cliquez sur pour ouvrir l'IDE Quix. Applications Max Vehicle Window Notez que dans l'interface utilisateur Quix, la base de code de chaque service est appelée « application », mais en réalité il s'agit d'un dossier autonome qui stocke le code d'un service particulier (qui fonctionnent tous ensemble pour alimenter l'application de vision par ordinateur). . S'il n'est pas déjà ouvert, cliquez sur dans le menu Fichier de gauche pour l'ouvrir dans l'IDE Quix. main.py Dans une autre fenêtre, ouvrez , puis copiez et collez le code, en remplaçant tout le code existant. Les commentaires du code devraient vous aider à comprendre les modifications que j'ai apportées. ce fichier depuis notre dépôt de tutoriels Le nouveau code s'attend à ce qu'il y ait une nouvelle variable d'environnement appelée « » qui stocke le nom du nouveau sujet de sortie que vous avez créé précédemment, créons donc cette nouvelle variable. output2 Dans la section , cliquez sur pour ajouter une nouvelle variable d'environnement, Variables +Ajouter Dans la boîte de dialogue qui apparaît, sélectionnez comme type de variable, nommez la variable « sortie2 » et sélectionnez le sujet que vous avez créé comme valeur par défaut (par exemple « »). Thème de sortie max-vehicles-agg Il ne vous reste plus qu'à enregistrer et déployer vos modifications. Pour enregistrer vos modifications, cliquez sur . Valider Avant de redéployer, c'est une bonne idée de baliser la révision afin qu'il soit facile de savoir quelle version du code le déploiement utilise. Marquez le commit en cliquant sur l'icône de balise et donnez-lui un nom… quelque chose comme « NewAggregation ». Si vous souhaitez vérifier que le nouveau code fonctionne, cliquez sur en haut à droite. Exécuter Pour redéployer le service, ouvrez la liste déroulante de déploiement en haut à droite, sélectionnez « », puis cliquez sur « ». Modifier le déploiement existant Redéployer Pour inspecter le sujet, ouvrez le portail Quix, accédez à la page et cliquez sur le sujet « » que vous avez créé précédemment. Sujets max-vehicles-agg Chaque sujet possède une vue appelée « vue de l'explorateur de données » qui vous permet d'inspecter les messages circulant dans un sujet. Vous devriez maintenant voir un flux actif dans la section « ». SELECT STREAMS Sélectionnez le flux « » (ou quel que soit son nom) Aggreged_data Sélectionnez ensuite tous les disponibles dans la section . paramètres SELECTIONNER LES PARAMETRES… Enfin, sélectionnez la pour pouvoir voir les données sélectionnées. vue Tableau Notez que les nouvelles données peuvent ne pas arriver immédiatement car le service dispose d'une minuterie de mise en veille variable pour éviter d'atteindre les limites de débit de l'API TfL. Vous pouvez le configurer dans la variable d'environnement « sleep_interval ». Au moment de la rédaction de cet article, la durée par défaut était de 60 secondes. TFL Camera Feed Si vous inspectez les journaux du déploiement de , vous devriez voir quand cette minuterie a été activée. Lorsque vous voyez des données revenir, vous pouvez revenir en arrière et vérifier votre sujet en toute sécurité. TFL Camera Feed Mise à jour du front end pour afficher la carte et les nouvelles agrégations Si vous souhaitez modifier le code du frontal, vous pouvez ignorer cette partie. Quix est principalement un outil back-end, mais nous avons ajouté un composant frontal afin que vous puissiez créer une mini-application entièrement fonctionnelle. Dans cette section, vous allez mettre à jour le frontal pour afficher les agrégations. Afficher les nouvelles données d'agrégation dans le front-end Maintenant, mettons à jour le service d'interface utilisateur pour inclure les nouveaux agrégats que nous avons créés dans le back-end. Pour rappel, voici à quoi cela devrait ressembler lorsque vous aurez terminé. Ce n'est pas joli, mais cela nous donne les informations dont nous avons besoin. Pour mettre à jour l'interface utilisateur, vous devrez modifier les fichiers suivants : ' ' qui gère les abonnements aux données pour le front-end : app.component.ts /Traitement d'image TfL UI/src/app/app.component.ts ' ' qui définit la disposition des informations sur la page. app.component.html /Traitement d'images TfL UI/src/app/app.component.html Commençons par . Dans le portail Quix, accédez à et cliquez sur (déployée en tant que « Project Front End ») pour ouvrir l'IDE Quix. app.component.ts Applications l'interface utilisateur de traitement d'image TfL Mise à jour des abonnements data Ici, nous allons être un peu hacky et coder en dur les références des sujets. En production, cela doit être géré avec des variables, mais cela simplifie la démo. Dans la section , ouvrez . Fichiers d'application ./src/app/app.component.ts Localisez le bloc suivant (après la ligne 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', '*', '*'); Et la ligne supplémentaire suivante sous le bloc : this.connection.invoke('SubscribeToParameter', 'max-vehicles-agg', '*', '*'); // new line Cela lancera un abonnement au sujet et lira tous les paramètres du message (parameterData est un dans l'API Quix et il est généralement composé de données numériques.) type de données spécifique Ensuite, localisez la ligne ' (ligne 43 ou environ) et ajoutez la nouvelle ligne suivante en dessous. 'selectedMarker: Marker | undefined; latestMessageMaxAgg: ParameterData | undefined; Cette ligne initialise une nouvelle variable que vous utiliserez pour stocker les données des messages. Maintenant, attribuons les données à la variable chaque fois qu'un nouveau message est détecté. Tout d’abord, localisez le bloc suivant (après la ligne 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]; } Ajoutez le bloc suivant en dessous : if (data.topicName === 'max-vehicles-agg') { this.latestMessageMaxAgg = data; } Désormais, si le message provient d'un sujet appelé « », le frontal prendra toutes les données du message et les placera dans la variable . max-vehicles-agg latestMessageMaxAgg Maintenant que nous avons accès à la variable, rendons son contenu dans le front-end. Mise à jour du modèle frontal Il est maintenant temps de rendre enfin les données que nous avons mises à disposition du front-end. Dans la section , ouvrez . Fichiers d'application ./src/app/app.component.html Localisez le div suivant qui affiche une échelle colorée de densité de trafic (après la ligne 85) : Traffic density

Directement au-dessus, ajoutez le bloc de code suivant. 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) }} Ceci extrait les données de la variable que vous avez créée précédemment et affiche les données du message le plus récent (sélectionné via « »). Cela rend également les données facultatives afin que vous n'obteniez pas de message d'erreur. Des données sont manquantes. latestMessageMaxAgg at(0) Si vous souhaitez d'abord le tester sur votre ordinateur local, vous pouvez extraire les modifications que vous avez apportées dans l'IDE Quix (Quix les transmet automatiquement) et suivre les instructions du . service frontal README Pour redéployer le service , suivez le même processus que celui que vous avez suivi lors du redéploiement du . d'interface utilisateur de traitement d'image TfL service Max Vehicles Si quelque chose ne va pas, n'oubliez pas que vous devrez peut-être supprimer le service et le déployer à nouveau avant de pouvoir voir les erreurs dans les journaux. Comptage des véhicules sur des périodes plus longues Comme vous l'avez probablement remarqué, l'application ne compte pas réellement les véhicules au fil du temps, mais simplement le nombre de véhicules observés dans une image vidéo donnée. C'est parce que nous n'utilisons pas toutes les capacités de YOLOv8. Nous utilisons simplement la détection d'objets, mais pour compter correctement les véhicules, vous devrez utiliser le suivi d'objets. Le problème est que le suivi des objets nécessite plus de mémoire, ce qui n'est pas disponible dans le plan gratuit Quix. Cette démo utilise le plus petit modèle YOLO « nano », mais quatre autres tailles sont disponibles, YOLOv8x étant la plus puissante. Si vous utilisez un modèle plus grand, vous pouvez obtenir d’excellents résultats en matière de suivi et de comptage des véhicules. Voici une capture d'écran d'une tentative de l'exécuter sur ma machine locale (avec un GPU décent) sur un flux de caméra TfL. J'ai utilisé YOLO en combinaison avec quelques autres bibliothèques (telles que de Roboflow) pour compter les véhicules allant dans les deux sens le long de la route. la supervision Pour plus d’informations sur la manière d’obtenir des résultats similaires, consultez les ressources suivantes : (roboflow.com) Suivre et compter les objets à l'aide de YOLOv8 Une excellente introduction au comptage de véhicules à l'aide de la vision par ordinateur à l'aide d'un ordinateur portable Jupyter. Détection et comptage d'objets YOLOv8 | de Dustin Liu | septembre 2023 | Investisseur piloté par les données Présentation pas à pas d'une version Streamlit optimisée du Roboflow Notebook (discutée dans l'article précédemment lié) : vous pouvez également . l'essayer en ligne Conclusion Félicitations pour être arrivé jusqu'ici. J'espère que vous avez réussi à le personnaliser. Si vous rencontrez des problèmes, assurez-vous de poser une question sur notre et l'un de nous y répondra directement. forum communautaire Comme vous pouvez le constater, il est assez simple de déployer et d'exécuter des applications complexes dans Quix. Ces démos sont conçues pour être autonomes, nous hébergeons donc également le front-end. Cependant, dans un scénario de production, vous souhaiterez probablement exécuter votre frontal ailleurs. Ce dans quoi Quix excelle vraiment, c'est le traitement des flux d'événements et l'exécution de calculs complexes de manière extrêmement performante. Il exploite les atouts d'Apache Kafka pour traiter les données à grande échelle tout en éliminant certaines de ses faiblesses (telles que la gestion des ressources et la complexité de la configuration). Bien sûr, si vous possédez déjà votre propre instance Kafka ou si vous utilisez Confluent Cloud, vous pouvez également l'utiliser. Quix est là pour vous aider à orchestrer et traiter vos flux d'événements en temps réel. Pour en savoir plus sur la façon dont les environnements Quix sont gérés dans Quix, consultez la . section correspondante dans la documentation Quix Pour voir une autre application de démonstration entièrement fonctionnelle, pourquoi essayer notre qui utilise la pour effectuer une analyse des sentiments en direct sur les messages de chat. démo d'application de chat bibliothèque Hugging Face Transformers Par (CTO et co-fondateur de Quix) Tomáš Neubauer Également publié . ici