paint-brush
Quix の Computer Vision テンプレートを使用してリアルタイム トラフィック監視アプリを構築および展開する方法@quix
1,262 測定値
1,262 測定値

Quix の Computer Vision テンプレートを使用してリアルタイム トラフィック監視アプリを構築および展開する方法

Quix21m2023/10/27
Read on Terminal Reader

長すぎる; 読むには

コンピューター ビジョン テンプレートをフォークし、YOLOv8 を活用してロンドンの交通カメラを使用して現在の渋滞を測定するアプリケーションをデプロイする方法を学びます。
featured image - Quix の Computer Vision テンプレートを使用してリアルタイム トラフィック監視アプリを構築および展開する方法
Quix HackerNoon profile picture
0-item
1-item
2-item
3-item

コンピューター ビジョンを試してみたいが、複雑な開発環境をセットアップする時間がない場合は、このチュートリアルが最適です。コンピュータ ビジョンは、特定の状況、特に物を数える場合に、物理センサーの優れた代替品となる可能性があります。


このチュートリアルでは、ロンドンの交通カメラを使用して車両を数えることによって現在の渋滞を測定する、私たちがリリースしたデモ アプリケーションについて説明します。これは、プロジェクトの複製に役立つように作成された再利用可能なプロジェクト テンプレートに基づいています。次に、このテンプレートを使用してプロジェクトの独自のコピーを作成し、イベント ストリーミング アプリケーションを開発および実行するツールである Quix でそれを起動して実行する方法を説明します。


コンピューター ビジョン アプリケーションのデモ バージョンでは、 Confluent Cloud (サービスとしてフルマネージドの Apache Kafka) でホストされているメッセージ ブローカーも使用しますが、チュートリアルに従うために Confluent Cloud アカウントを持つことは必須ではありません。


最終結果は次のようになります。

コンピュータービジョンテンプレート


このデモ バージョンは、次のアドレスでライブで試すことができます: https://app-demo-computervisiondemo-prod.deployments.quix.ai/


このアプリは何をしているのでしょうか?

このアプリは、ロンドンの交通カメラ (「ジャム カム」とも呼ばれる) からのライブ フィードを使用して車両を数え、渋滞レベルを推定しています。次に、視覚的なインジケーターを使用して、ロンドンの地図上のどこで渋滞が発生しているかを示します。車両は、(センサーや GPS データではなく) 画像内の物体検出用の ML モデルを使用してカウントされます。


物体検出モデルでは車両をさまざまなタイプに分類することもでき、これらのタイプによってデータをフィルター処理することもできます。


The vehicle type dropdown in the demo app

たとえば、[オブジェクトの選択] ドロップダウンを使用すると、現時点ですべての交通カメラが検出したバスの数のみを表示できます。

このアプリケーションは、現在時刻だけで、1 日を通じて観察されたすべての車両をカウントするわけではないことに注意してください (詳細は後述します)。






混雑を判断するために物体検出を使用する理由は何ですか?

他の方法が常に信頼できるとは限らないためです。たとえば、2020年にはベルリンを拠点とするアーティストが、手押し車と99台の中古電話だけを使って、シュプレー川にかかる主要な橋の1つで「仮想」交通渋滞を作り出すことに成功した。その後、Google マップは律儀にその地域を地図上に非常に混雑しているとして表示しました。


このため、GPS ベースの渋滞推定値を補強するために他のタイプのデータが使用されることがよくあります。これには、過去のパターン、センサー データ、予定されている閉鎖に関する自治体のフィード、およびユーザーが報告したインシデントが含まれます。ただし、最も信頼できる相互参照の 1 つは、交通カメラから収集した渋滞の視覚的認識です ( カモメが視界を遮っていないと仮定します)。



Still from the A102 Brunswick Road Jam Cam… object detection does have it’s weaknesses

カモメの誤謬にもかかわらず、コンピュータ ビジョンは現在、交通データを増強し、交通量推定の精度を高めるために政府機関で使用されています。たとえば、昨年 9 月 22 日、カナダ統計局は「交通カメラ画像からの交通量推定: リアルタイム交通データ ストリームに向けて」というタイトルの論文を発表し、カナダの交通カメラから車両数を定期的に抽出するコンピュータ ビジョン ベースのシステムを紹介しました。イメージ。


Quix を使用すると、このようなことを試すために研究科学者のチームは必要ありません。有能な開発者なら誰でも試してみて、数分以内に起動して実行することができます。ただし、この場合は 5 分ではなく 60 分程度の話になります。やっぱりビッグプロジェクトですね!


プロジェクトを再現するには、次の 2 つのものが必要です。

プロジェクトの独自のコピーを取得する

プロジェクト (およびデモ アプリケーション) のコピーを入手するには、いくつかの主な手順があります。

  1. GitHub からコンピューター ビジョン デモ リポジトリをフォークします。

    これにより、プロジェクトのバージョンを簡単にカスタマイズできますが、上流の改善によるメリットも得られます。


  2. Quix Cloud でプロジェクトを作成し、新しい開発環境を作成してフォークにリンクします。

    これにより、Quix Cloud で自分のアカウントでアプリケーションを実行および更新できるようになります。


  3. TfL Camera API や Google マップなどの外部サービスの認証情報を更新します。

    API キーなどのシークレットはプロジェクトのコピーに転送されないため、これらを自分で追加する必要があります。


基本を設定したら、コードを詳しく見て、それをどのように適応できるかを見ていきます。


コンピューター ビジョン デモ リポジトリのフォーク

コードを理解するために、まず Computer Vision デモ リポジトリをフォークしましょう。なぜクローンではなくフォークするのでしょうか?なぜなら、後でそのコードを自分の Quix 環境に取り込むことになるため、フォークを使用することが環境の同期を保つ最も簡単な方法だからです。また、プロジェクト テンプレートに対して上流で行われた変更を取得することもできます。


話を簡単にするために、すでに GitHub アカウントを持っていると仮定します。ただし、このプロジェクト用に特定の Git ユーザーを作成することが必要になる場合があります。後で Quix にリポジトリへの SSH アクセスを許可します。別のユーザーを用意することは、Quix が必要以上のアクセス権を持たないようにする良い方法です。


  • Web ブラウザで GitHub を開き、Computer Vision デモ リポジトリ ( https://github.com/quixio/computer-vision-demo ) に移動して、 [フォーク] をクリックします。
    • 必ずすべてのブランチをフォークしてください (GitHub のフォーク ウィザードで、「メイン ブランチのみをコピーする」の選択を解除します)。これは、試用版アカウントを使用している場合、Quix Cloud で開発環境を作成するための代替ブランチが必要になるためです。


新しいフォークの作成


Quix での新しい開発環境の作成

Quix で環境を作成する前に、まずプロジェクトを作成する必要があります。プロジェクト作成ウィザード中に、初期環境を追加するように求められます。慣れてきたら、後でさらに環境を追加できます。


プロジェクトを作成し、フォークされたリポジトリに環境を接続するには、次の手順に従います。

  • Quix にログインし、 [+新しいプロジェクト]をクリックします。


  • プロジェクトに「 My Computer Vision Demon 」(または類似の名前) という名前を付け、 [自分の Git リポジトリに接続]を選択します。


  • 次の画面では、Quix SSH キーをリポジトリに追加する方法に関する手順が表示されます。その手順に従ってください。このキーを追加すると、Quix がリポジトリを Quix 環境と自動的に同期できるようになります。

    独自の Git リポジトリを接続する



  • 次の画面では、環境を作成するように求められます。環境を使用すると、さまざまなブランチからコードを並行してデプロイできます。

    環境名として「 tutorial 」と入力し、フォークされたリポジトリから「 tutorial 」ブランチを選択します。

    環境設定


  • プロジェクト作成ウィザードの次のステップに進みます。


    ウィザードでは、どのメッセージ ブローカーを使用するかを尋ねられます。プロジェクトの元のバージョンでは、 Confluent Cloud をメッセージ ブローカーとして使用します。 Confluent Cloud‌ を使用したい場合は、まずアカウントを取得する必要があります。その場合は、[Confluent Cloud に接続]を選択して資格情報を入力します。

    Confluent Connector の詳細については、Quix ドキュメントを参照してください。


    ただし、Confluent Cloud の使用は必須ではありません。このチュートリアルでは、デフォルトの Quix メッセージ ブローカーを使用することもできます。


  • ウィザードが完了したら、 [パイプライン]ページに移動します (まだ開いていない場合)。 Quix 環境がソース リポジトリと同期していないことを示す標準の警告が表示されます (環境は空から開始されるため)。

    標準警告


  • [環境を同期]ボタンをクリックして、フォークされたリポジトリから最新のコードを取得します。: 同期プロセスは双方向であるため、環境内でコードを変更すると、そのコードもソース リポジトリにプッシュされます。


同期が成功するといいですね。正常に動作した場合は、すべてのサービスがパイプラインページで構築を開始していることがわかります。

同期パイプラインかなりの数のサービスがあるため、すべてのサービスが構築されて実行が開始されるまでに数分かかります。



S3 サービスを動作させるには自分の AWS アカウントが必要になるため、S3 サービスはデフォルトで停止していることに注意してください。ただし、このチュートリアルでは特に必要ありません。


  • [パイプライン] ページでパイプライン全体を表示するには、キャンバスの空白部分をクリックしてドラッグし、右にスクロールするか、Ctrl / ⌘ を押したままマウス ホイールを使用してズームアウトします。


  • 「Project Front End」というサービスが表示されるまでスクロールします。

    プロジェクトフロントエンド


  • 「Project Front End」サービス名の横にある青い起動アイコンをクリックします。

    これで、コンピューター ビジョン アプリの独自のコピーが表示され、すぐに試すことができます。


コンピューター ビジョン デモ アプリのアーキテクチャを理解する

パイプラインは多くのサービスで構成されていますが、アーキテクチャは次の図に示すように 3 つの主要なセグメントに抽象化できます。

コンピュータビジョンのアーキテクチャ


  • 最初のサービス セット (1 ~ 3) はロンドンの交通カメラを利用し、監視されている各道路セグメント上の車両を識別します。


  • 2 番目のサービス セット (4 ~ 7) は、各道路セグメントの車両タイプの累計を保持し、特定のフレームで検出された車両の最大数を記録します。このデータはバッファリングされて REST API サービスに渡されるため、データをリクエストする外部サービスからデータにアクセスできるようになります。


  • 最後のサービス (8) は、集計された車両統計を取得するために REST API をポーリングし、Quix のトピックから取得されるすべての交通カメラ (ビデオ フレームなど) からのライブ生データを Websocket でリッスンするフロント エンドをホストします。ポーリング データとリアルタイム データのこの組み合わせは、ロンドンの地図上で交通量レベルを視覚化するために使用されます。


個々のサービスの詳細については、ドキュメントですでに十分に説明されているため、あまり詳しく説明しません。ただし、それらがどのように機能するかを確認したい場合は、ドキュメントへのリンクを含む参考情報を以下に示します。

サービスリファレンス

サービス名をクリックすると、Quix 読み取り専用環境で実行されている実際のサービス (実行時ログやデータ系統など) を確認できます。

サービス名

説明

TfL カメラフィード

TfL API キーと「リクエスト」Python ライブラリを使用して、TfL API エンドポイントからカメラ フィードを取得します。
ドキュメントソースコード

フレームグラバー

Tfl API によって提供されるビデオ ファイルからフレームを抽出します。ドキュメントソースコード

物体検出

フレーム グラバーからフレームを取得し、各フレーム内のオブジェクトを検出します。
ドキュメントソースコード

カム車両

車両の合計を計算します。
ドキュメントソースコード

最大車両ウィンドウ

1 日の時間枠にわたる最大車両数を計算します。
ドキュメントソースコード

データバッファ

データ バッファーは、Data API サービスの負荷を軽減するために 1 秒のデータ バッファーを提供します。
ドキュメントソースコード

データAPI

2 つのエンドポイントを提供する REST API サービス。ドキュメントソースコード

プロジェクトフロントエンド

API で新しいデータをチェックするフロントエンドをホストします。ドキュメントソースコード



ここで焦点を当てたいのは、プロジェクトを独自の要件に合わせてカスタマイズする方法を示すことです。


プロジェクトのカスタマイズ

プロジェクトのカスタマイズを支援するために、バックエンドの集計ロジックに小さな変更を加え、その新しい情報をフロントエンドでレンダリングする方法を説明します。

その後、車両のカウントや物体の追跡など、より強力なタスクの実行に役立つ外部リソースをいくつか紹介します。ただし、最初に、新しいアプリケーション シークレットを追加するなど、ちょっとした管理作業を行う必要があります。


独自の API 認証情報の追加とシークレットの更新

プロジェクト テンプレートはいくつかのデフォルトの資格情報を使用して構成されていますが、プロジェクトのコピーを機能させるには、資格情報を変更する必要があります。これらの各資格情報をプロジェクトのシークレットとして定義する必要があります。その秘密は以下の通りです。

  • フロントエンドが Quix の SignalR ハブと通信するためのベアラー トークン (秘密キー: ' bearerToken ')

  • Tfl API キー (秘密キー: ' tfl_api_key ')


フロントエンドのベアラートークンの構成

フロントエンドは、SignalR クライアント ライブラリを使用して Quix と通信し ( Websockets API経由)、バックエンドからデータを取得してレンダリングします。この API では、クライアント アプリケーションを認証するためにベアラー トークンが必要です。


このチュートリアルでは、ベアラー トークンとして使用する Quix 個人アクセス トークンを作成します。次に、このトークンを環境に保存するためのシークレットを作成します (はい、これは少し複雑ですが、実行する必要があるのは 1 回だけです)。

#個人用アクセストークンの取得

Quix で個人アクセス トークンを取得する方法は次のとおりです。

  • 右上のプロファイル メニューを開き、 [Personal Access Tokens]を選択します。

    Personal Access Tokens


  • 表示されるダイアログで、 「トークンの生成」をクリックし、個人用アクセス トークンをメモ帳またはその他の一時的な保存場所に貼り付けます。これは次の手順で必要になります。






個人のアクセス トークンをシークレットに追加する

Quix ポータルで、 「アプリケーション」ページを開き、 「Sentiment Demo UI」をクリックして Quix IDE を開きます。

  • [変数]セクション (左下) で、 [シークレット管理]をクリックします。

  • 表示されるサイドバーで[+ 新しいシークレット]をクリックし、シークレット キーとして「 bearerToken 」を入力します。

  • 「デフォルト」列と「チュートリアル」列に、前の手順で作成したパーソナル アクセス トークンを各セルの値として貼り付けます。

    機密管理


tfl API キーをシークレットに追加する

Tfl API ポータルに登録していると仮定すると、まず独自の Tfl API キーもシークレットとして追加する必要があります。

  • シークレットを追加するには、前のセクションとまったく同じ手順に従う必要がありますが、今回はキー「 tfl_api_key 」を使用してシークレットを追加します。


バックエンドを更新して、ロンドン全体で見られる車両の合計最大数を取得します

現時点では、過去 24 時間にカメラごとに観察された車両の最大数のみを確認できます。たとえば、キングス クロスとスウィントン ストリートのカメラから撮影されたこのビデオ フレームの下に表示されるデータを調べてみましょう。

確認された車両の数


  • 現在、枠内には 5 台の車両があると考えられます。
  • ただし、カメラがこれまでに (同じフレーム内で) 観察した車両の最多は 11 台です。
    • 11 台の車両のクラスターがいつ観測されたのかはわかりませんが、観測が過去 24 時間以内に行われたということだけがわかります。


しかし、ロンドン全体で同じデータを確認できたら興味深いと思いませんか?つまり、ロンドンのカメラで一度に観察される車両の最大数は合計で何台になるでしょうか?すべてのカメラで観察されるバスの最大数は何台でしょうか?


これらの質問に答えるために、最終的に次のようなデータを求めます。

 {"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}

ここでは車両の総数について話しているのではなく(これについては後ほど説明します)、ロンドンの交通カメラが過去 24 時間に観察した最も多くの車両のスナップショットにすぎないことに注意してください。


このデータを取得するには、次の変更を加える必要があります

  • 過去 24 時間に観測された各車両タイプの最大値を取得します (すべての車両だけでなく)。

  • 最新の最大値を保存し、それらをすべて(すべてのカメラにわたって)集約します。

  • さまざまなカメラで新しい最大値が観測された場合は、集計を継続的に更新します。


次に、フロントエンドでデータを次のようにレンダリングします。

交通密度


このためのコードはすでに作成しましたが、テストする前に、新しい集計を受信したときにそれを保存する場所が必要です。この例では、新しい Kafka トピックを使用して集計を保存する方法を示します。データ。


新しい「max-vehicles-agg」トピックの追加

トピックが何なのかよくわかりませんか? Apache Kafka のドキュメントは出発点として適していますが、本質的に、トピックはファイル システム内のフォルダーに似たものとして説明され、イベント (メッセージ形式) はそのフォルダー内のファイルです。 Quix UI で作成する方法を学習します。これは非常に簡単なプロセスです。


Quix ポータルでトピックを作成するには、次の手順に従います。

  • Quix ポータルで、 「トピック」ページを開き、右上隅にある「新規追加」をクリックします。

  • 表示されるダイアログで、「 max-vehicles-agg 」などの名前を入力し、デフォルト設定をそのままにして「 完了 」をクリックします。

    max-vehicles-agg の作成このトピックを作成するには、バックエンドのコードを更新する必要があります。変更する必要があるサービスは「 Max Vehicle Window 」と呼ばれます。これは、 Quix Streamsおよび Pandas Python ライブラリを使用してデータを集約する Python サービスです。



一般にサービスを編集する場合、常に 2 つのオプションがあります。

  • ローカル IDE を編集してテストし、変更をコミットしてフォークされたリポジトリにプッシュします。

  • オンライン Quix IDE で編集およびテストします。


Quix IDE は、すべての依存関係が自動的にインストールされ、新しい仮想環境をセットアップする必要がないため、少し速くなります。また、変更が自動的にプッシュされるため、処理が少しスピードアップします。この例では、Quix IDE を使用します。


すべてのカメラのデータを集約するために最大車両サービスを更新する

時間を節約するために、このためのコードをすでに作成してあるので、必要なのはそれを関連ファイルに貼り付けるだけです。


Max Vehicle Window サービスを編集するには:

  • [アプリケーション]に移動し、 [Max Vehicle Window]をクリックして Quix IDE を開きます。


    Quix ユーザー インターフェイスでは、各サービスのコードベースは「アプリケーション」と呼ばれますが、実際には、特定のサービスのコードを保存する自己完結型のフォルダーです (これらはすべて連携してコンピューター ビジョン アプリを強化します)。 。


  • まだ開いていない場合は、左側のファイル メニューでmain.pyクリックして Quix IDE で開きます。


  • 別のウィンドウで、 チュートリアル リポジトリからこのファイルを開き、コードをコピーして貼り付け、既存のコードをすべて置き換えます。コードのコメントは、私が行った変更を理解するのに役立ちます。


新しいコードでは、前に作成した新しい出力トピックの名前を格納する「 output2 」という新しい環境変数があることを想定しているので、その新しい変数を作成しましょう。

  • [変数]セクションで、 [+追加]をクリックして新しい環境変数を追加します。
  • 表示されるダイアログで、変数タイプとして出力トピックを選択し、変数に「output2」という名前を付け、デフォルト値として作成したトピックを選択します(例:「 max-vehicles-agg 」)。


あとは、変更を保存してデプロイするだけです。

  • 変更を保存するには、 「コミット」をクリックします。


  • 再デプロイする前に、リビジョンにタグを付けて、デプロイメントで使用されているコードのバージョンを簡単に識別できるようにすることをお勧めします。

    • タグアイコンをクリックしてコミットにタグを付け、「NewAggregation」などの名前を付けます。

    • 新しいコードが機能することを再確認したい場合は、右上の「実行」をクリックします。


  • サービスを再デプロイするには、右上のデプロイメント ドロップダウンを開き、「既存のデプロイメントの編集」を選択し、「再デプロイ」をクリックします。

    最大車両ウィンドウ


    トピックを調べるには、Quix ポータルを開き、トピックページに移動して、前に作成した「 max-vehicles-agg 」トピックをクリックします。


  • 各トピックには「データ エクスプローラー ビュー」と呼ばれるビューがあり、トピック内を流れるメッセージを検査できます。

    データエクスプローラー



SELECT STREAMS 」セクションにアクティブなストリームが表示されるはずです。

  • ストリーム「 aggregated_data 」(または任意の名前)を選択します。

  • 次に、 「パラメータの選択…」セクションで使用可能なパラメータをすべて選択します。

  • 最後に、テーブル ビューを選択して、選択したデータを確認できるようにします。


TFL Camera Feedサービスには、TfL API のレート制限に達しないように可変スリープ タイマーが設定されているため、新しいデータがすぐに送信されない可能性があることに注意してください。 「sleep_interval」環境変数で設定できます。執筆時点では、デフォルトで 60 秒に設定されていました。


TFL カメラ フィード展開のログを調べると、このタイマーがいつアクティブになったかがわかります。データが再び送信されているのを確認したら、戻ってトピックを確認しても安全です



カメラフィード


フロントエンドを更新してマップと新しい集計を表示する

フロントエンドのコードを変更するのが面倒な場合は、この部分をスキップしてください。 Quix は主にバックエンド ツールですが、完全に機能するミニ アプリケーションを作成できるようにフロントエンド コンポーネントを追加しました。このセクションでは、フロントエンドを更新して集計を表示します。

新しい集計データをフロントエンドに表示します

次に、バックエンドで作成した新しい集計を含めるように UI サービスを更新しましょう。完了すると次のようになります。

新しい集計の追加


見た目は良くありませんが、必要な情報が得られます。 UI を更新するには、次のファイルを編集する必要があります。

app.component.tsから始めましょう。 Quix ポータルで、[アプリケーション]に移動し、 [TfL 画像処理 UI (「プロジェクト フロント エンド」として展開)] をクリックして Quix IDE を開きます。

画像処理UIデータ サブスクリプションの更新


ここでは、少しハックしてトピック参照をハードコーディングします。実稼働環境では、これは変数で処理する必要がありますが、デモが簡素化されます。


「アプリケーション ファイル」セクションで、 ./src/app/app.component.tsを開きます。


次のブロックを見つけます (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', '*', '*');


そして、ブロックの下に次の追加行があります。

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


これにより、トピックへのサブスクリプションが開始され、メッセージ内のすべてのパラメーターが読み取られます (parameterData は Quix API の特定のデータ型であり、通常は数値データで構成されます)。


次に、 'selectedMarker: Marker | undefined;という行を見つけます。 'selectedMarker: Marker | undefined; ' (43 行目あたり) を入力し、その下に次の新しい行を追加します。

 latestMessageMaxAgg: ParameterData | undefined;

この行は、メッセージからのデータを保存するために使用する新しい変数を初期化します。


ここで、新しいメッセージが検出されるたびにデータを変数に代入しましょう。


まず、次のブロック (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]; }

その下に次のブロックを追加します。

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

ここで、メッセージが「 max-vehicles-agg 」というトピックから来た場合、フロントエンドはメッセージ内のすべてのデータを取得し、それを変数latestMessageMaxAggに入れます。

変数にアクセスできるようになったので、その内容をフロントエンドでレンダリングしましょう。


フロントエンドテンプレートの更新

さて、いよいよフロントエンドで利用できるようにしたデータをレンダリングします。

  • 「アプリケーション ファイル」セクションで、 ./src/app/app.component.htmlを開きます。


色付きの交通密度スケールをレンダリングする次の div を見つけます (85 行目以降)。

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


そのすぐ上に、次のコード ブロックを追加します。

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

これにより、前に作成したlatestMessageMaxAgg変数からデータが抽出され、最新のメッセージ(「 at(0) 」で選択)のデータが表示されます。また、データがオプションになるため、データが欠落しているというエラー メッセージが表示されなくなります。


最初にローカル マシンでテストする場合は、Quix IDE で行った変更をプルし (Quix が自動的にプッシュします)、 フロント エンド サービスの READMEの指示に従うことができます。


  • TfL 画像処理 UIサービスを再デプロイするには、 max vehicle サービスを再デプロイしたときと同じプロセスに従います。


何か問題が発生した場合は、ログにエラー出力が表示される前に、サービスを削除して再デプロイする必要がある場合があることに注意してください。


長期間にわたって車両を数える

お気づきかと思いますが、このアプリは実際には時間の経過とともに車両をカウントしているのではなく、特定のビデオ フレーム内で観察された車両の数をカウントしているだけです。


これは、YOLOv8 の機能をすべて使用していないためです。ここでは物体検出を使用しているだけですが、車両を適切にカウントするには、物体追跡を使用する必要があります。問題は、オブジェクト追跡にはより多くのメモリが必要ですが、Quix の無料プランではメモリを使用できないことです。このデモでは最小の「ナノ」YOLO モデルを使用していますが、他に 4 つのサイズが利用可能で、YOLOv8x が最も強力です。より大きなモデルを使用すると、車両の追跡とカウントに優れた結果が得られます。


これは、TfL カメラ フィード上のローカル マシン (まともな GPU を搭載) で実行しようとしたときのスクリーンショットです。

スクリーングラブ


私は YOLO を他のいくつかのライブラリ (Roboflow による監視など) と組み合わせて使用し、道路に沿って両方向に移動する車両をカウントしました。

同様の結果を得る方法の詳細については、次のリソースを参照してください。

結論

ここまで頑張ってくれてありがとう。無事にカスタマイズできたと思います。何か問題がございましたら、必ずコミュニティ フォーラムに質問を投稿してください。すぐに対応させていただきます。


ご覧のとおり、Quix で複雑なアプリケーションをデプロイして実行するのは非常に簡単です。これらのデモは自己完結型になるように設計されているため、フロントエンドもホストします。ただし、実稼働シナリオでは、フロントエンドを別の場所で実行する必要があるでしょう。 Quix が本当に優れているのは、イベント ストリームを処理し、非常にパフォーマンスの高い方法で複雑な計算を実行することです。 Apache Kafka の強みを活用して大規模にデータを処理しながら、その弱点 (リソース管理や構成の複雑さなど) の一部を抽象化します。もちろん、独自の Kafka インスタンスをすでに持っている場合、または Confluent Cloud を使用している場合は、それを使用することもできます。 Quix は、イベント ストリームをリアルタイムで調整および処理するのに役立ちます。



Tomáš Neubauer (CTO 兼 Quix 共同創設者) 著


ここでも公開されています。