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 Confluent Cloud (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.

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 à créer un embouteillage « virtuel » 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.

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é « Traffic volume estimation from traffic camera imagery: Toward real-time traffic data streams » 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.

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' API Traffic for London (pour plus de détails, voir la documentation de ce projet )

• Un compte Quix gratuit — si vous n'en avez pas encore créé, vous pouvez vous inscrire dès maintenant (vous pouvez le faire en quelques clics avec un compte Google, GitHub ou Microsoft existant).

  
  

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) :

1. Forkez notre référentiel de démonstration de vision par ordinateur à partir de GitHub.

   Cela vous permettra de personnaliser facilement votre version du projet tout en bénéficiant d’améliorations en amont.

   
   

2. Créez un projet dans Quix Cloud , puis créez un nouvel environnement de développement et liez-le à votre fork.

   Cela vous permettra d'exécuter et de mettre à jour l'application dans Quix Cloud sous votre propre compte.

   
   

3. 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 ( https://github.com/quixio/computer-vision-demo ) et cliquez sur Fork.

  • Assurez-vous de créer toutes les branches (dans l'assistant Fork de GitHub, désélectionnez « Copier la branche principale uniquement »). 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.

    
    

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 « Ma démo de vision par ordinateur » (ou quelque chose de similaire) et sélectionnez 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 « tutorial » pour le nom de l'environnement et sélectionnez la branche « tutorial » de votre dépôt forké.

  

  
  

• 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 Confluent Cloud comme courtier de messages. Si vous souhaitez utiliser Confluent Cloud‌, vous devrez d'abord avoir un compte. Dans ce cas, vous sélectionnerez Se connecter à votre Confluent Cloud et saisirez vos informations d'identification.

  

  
  

  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 Pipeline (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).

  

  
  

• Cliquez sur le bouton Environnement de synchronisation pour extraire le dernier code de votre référentiel forké. Remarque : 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.

  
  

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 Pipeline , 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.

  
  

• 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.

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 API Websockets ) 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.

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 Générer un jeton 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.

Ajouter votre jeton d'accès personnel aux secrets

Dans le portail Quix, ouvrez la page Applications et cliquez sur Sentiment Demo UI pour ouvrir l'IDE Quix.

• Dans la section Variables (en bas à gauche), cliquez sur Gestion des secrets .

• Dans la barre latérale qui apparaît, cliquez sur + Nouveau secret et saisissez « bearerToken » comme clé secrète.

• 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 portail API Tfl, vous devez d'abord ajouter votre propre clé API Tfl en tant que secret.

• 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 par caméra 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.

• 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 documentation Apache Kafka 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.

Pour créer un sujet dans le portail Quix, suivez ces étapes :

• Dans le portail Quix, ouvrez la page Sujets et cliquez sur Ajouter nouveau dans le coin supérieur droit.

• Dans la boîte de dialogue qui apparaît, entrez un nom tel que « max-vehicles-agg », laissez les paramètres par défaut tels qu'ils sont et cliquez sur Terminé .

  Maintenant, vous devrez mettre à jour le code dans le back-end pour écrire ce sujet. Le service que vous devez modifier s'appelle « Max Vehicle Window ». Il s'agit d'un service Python qui regroupe les données à l'aide des bibliothèques Python Quix Streams et Pandas.

  
  

  
  

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 à Applications et cliquez sur Max Vehicle Window pour ouvrir l'IDE Quix.

  
  

  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 main.py dans le menu Fichier de gauche pour l'ouvrir dans l'IDE Quix.

  
  

• Dans une autre fenêtre, ouvrez ce fichier depuis notre dépôt de tutoriels , 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.

  
  

Le nouveau code s'attend à ce qu'il y ait une nouvelle variable d'environnement appelée « output2 » qui stocke le nom du nouveau sujet de sortie que vous avez créé précédemment, créons donc cette nouvelle variable.

• Dans la section Variables , cliquez sur +Ajouter pour ajouter une nouvelle variable d'environnement,
• Dans la boîte de dialogue qui apparaît, sélectionnez Thème de sortie comme type de variable, nommez la variable « sortie2 » et sélectionnez le sujet que vous avez créé comme valeur par défaut (par exemple « 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 Exécuter en haut à droite.

    
    

• Pour redéployer le service, ouvrez la liste déroulante de déploiement en haut à droite, sélectionnez « Modifier le déploiement existant », puis cliquez sur « Redéployer ».

  

  
  

  Pour inspecter le sujet, ouvrez le portail Quix, accédez à la page Sujets et cliquez sur le sujet « max-vehicles-agg » que vous avez créé précédemment.

  
  

• 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 « Aggreged_data » (ou quel que soit son nom)

• Sélectionnez ensuite tous les paramètres disponibles dans la section SELECTIONNER LES PARAMETRES… .

• Enfin, sélectionnez la vue Tableau pour pouvoir voir les données sélectionnées.

  
  

Notez que les nouvelles données peuvent ne pas arriver immédiatement car le service TFL Camera Feed 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.

Si vous inspectez les journaux du déploiement de TFL Camera Feed , 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é.

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 :

• ' app.component.ts ' qui gère les abonnements aux données pour le front-end :

  <repo_root>/Traitement d'image TfL UI/src/app/app.component.ts

  
  

• ' app.component.html ' qui définit la disposition des informations sur la page. <repo_root>/Traitement d'images TfL UI/src/app/app.component.html

  
  

Commençons par app.component.ts . Dans le portail Quix, accédez à Applications et cliquez sur l'interface utilisateur de traitement d'image TfL (déployée en tant que « Project Front End ») pour ouvrir l'IDE Quix.

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 Fichiers d'application , ouvrez ./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 type de données spécifique dans l'API Quix et il est généralement composé de données numériques.)

Ensuite, localisez la ligne 'selectedMarker: Marker | undefined; ' (ligne 43 ou environ) et ajoutez la nouvelle ligne suivante en dessous.

 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é « max-vehicles-agg », le frontal prendra toutes les données du message et les placera dans la variable 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 Fichiers d'application , ouvrez ./src/app/app.component.html .

Localisez le div suivant qui affiche une échelle colorée de densité de trafic (après la ligne 85) :

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

Directement au-dessus, ajoutez le bloc de code suivant.

 <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>

Ceci extrait les données de la variable latestMessageMaxAgg que vous avez créée précédemment et affiche les données du message le plus récent (sélectionné via « at(0) »). Cela rend également les données facultatives afin que vous n'obteniez pas de message d'erreur. Des données sont manquantes.

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 d'interface utilisateur de traitement d'image TfL , suivez le même processus que celui que vous avez suivi lors du redéploiement du 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 la supervision de Roboflow) pour compter les véhicules allant dans les deux sens le long de la route.

Pour plus d’informations sur la manière d’obtenir des résultats similaires, consultez les ressources suivantes :

• Suivre et compter les objets à l'aide de YOLOv8 (roboflow.com)

  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 forum communautaire et l'un de nous y répondra directement.

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 démo d'application de chat qui utilise la bibliothèque Hugging Face Transformers pour effectuer une analyse des sentiments en direct sur les messages de chat.

Par Tomáš Neubauer (CTO et co-fondateur de Quix)