paint-brush
Как создать и развернуть приложение для мониторинга трафика в реальном времени с использованием шаблона компьютерного зрения Quixк@quix
1,245 чтения
1,245 чтения

Как создать и развернуть приложение для мониторинга трафика в реальном времени с использованием шаблона компьютерного зрения Quix

к Quix21m2023/10/27
Read on Terminal Reader

Слишком долго; Читать

Узнайте, как создать форк нашего шаблона компьютерного зрения и развернуть приложение, которое использует лондонские дорожные камеры для измерения текущих пробок с помощью YOLOv8.
featured image - Как создать и развернуть приложение для мониторинга трафика в реальном времени с использованием шаблона компьютерного зрения Quix
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/


Что делает это приложение?

Приложение использует прямые трансляции с лондонских дорожных камер (также известных как «Jam Cams») для подсчета транспортных средств и оценки уровня заторов. Затем он использует визуальные индикаторы, чтобы показать, где на карте Лондона возникают пробки. Транспортные средства подсчитываются с использованием модели машинного обучения для обнаружения объектов на изображениях (а не на датчиках или данных GPS).


Модель обнаружения объектов также классифицирует транспортные средства по разным типам, и вы можете фильтровать данные по этим типам.


The vehicle type dropdown in the demo app

Например, вы можете использовать раскрывающийся список «Выбрать объект», чтобы увидеть только количество автобусов, которые обнаружили все камеры дорожного движения в текущий момент времени.

Обратите внимание, что приложение учитывает не все автомобили, наблюдаемые в течение дня, а только в текущее время (подробнее об этом позже).






Зачем использовать обнаружение объектов для определения заторов?

Потому что другие методы не всегда надежны. Например, в 2020 году берлинскому художнику удалось создать «виртуальную» пробку на одном из главных мостов через реку Шпрее, используя только ручную тележку и 99 подержанных телефонов. Затем Google Maps послушно отобразил этот район на карте как сильно перегруженный.


По этой причине для дополнения оценок перегруженности на основе GPS часто используются другие типы данных. Сюда входят исторические закономерности, данные датчиков, муниципальные новости о запланированных закрытиях и инцидентах, о которых сообщают пользователи. Однако одной из наиболее надежных перекрестных ссылок является визуальное распознавание пробок, полученное с помощью дорожных камер ( при условии, что чайка не загораживает обзор ).



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

Несмотря на заблудшие чайки, компьютерное зрение в настоящее время используется правительственными организациями для расширения данных о трафике и повышения точности оценок объема трафика. Например, 22 сентября прошлого года Статистическое управление Канады опубликовало документ под названием « Оценка объема дорожного движения по изображениям дорожной камеры: к потокам данных о дорожном движении в реальном времени », в котором была представлена система на основе компьютерного зрения для периодического извлечения количества транспортных средств с канадской дорожной камеры. образы.


Теперь с Quix вам не нужна команда ученых-исследователей, чтобы опробовать что-то подобное. Любой способный разработчик может попробовать и приступить к работе за считанные минуты. Однако в данном случае мы говорим скорее о 60 минутах, а не о 5 минутах. В конце концов, это большой проект!


Чтобы воспроизвести проект, вам понадобятся две вещи:

Получение собственной копии проекта

Чтобы получить копию проекта (и любого из наших демонстрационных приложений), необходимо выполнить несколько основных шагов:

  1. Форк нашего демо-репозитория компьютерного зрения с GitHub.

    Это облегчит вам настройку вашей версии проекта, но при этом вы получите выгоду от улучшений в исходной версии.


  2. Создайте проект в Quix Cloud , затем создайте новую среду разработки и свяжите ее со своим форком.

    Это позволит вам запускать и обновлять приложение в Quix Cloud под своей учетной записью.


  3. Обновите учетные данные для внешних служб, таких как TfL Camera API и Google Maps.

    Секреты, такие как ключи API, не передаются в копии проекта, поэтому вам придется добавить их самостоятельно.


После того, как вы настроите основы, мы углубимся в код и посмотрим, как вы можете его адаптировать.


Формирование демонстрационного репозитория компьютерного зрения

Чтобы разобраться с кодом, давайте сначала создадим демо-репозиторий Computer Vision. Почему форк, а не клон? Потому что позже вы перенесете этот код в свою собственную среду Quix, и использование форка — это самый простой способ синхронизировать вашу среду. Вы также сможете получать информацию о любых изменениях, которые мы вносим в шаблон проекта.


Для простоты я предполагаю, что у вас уже есть учетная запись GitHub. Однако вы можете захотеть создать конкретного пользователя Git для этого проекта. Позже вы предоставите Quix SSH-доступ к репозиторию, и наличие отдельного пользователя — хороший способ гарантировать, что Quix не будет иметь больше доступа, чем должно.


  • Откройте GitHub в веб-браузере, перейдите к репозиторию демо-версии Computer Vision ( https://github.com/quixio/computer-vision-demo ) и нажмите «Разветвить».
    • Убедитесь, что вы разветвили все ветки (в мастере разветвлений GitHub снимите флажок « Копировать только основную ветку »). Это связано с тем, что если вы используете пробную учетную запись, вам понадобится альтернативная ветка для создания среды разработки в Quix Cloud.


Создание новой вилки


Создание новой среды разработки в Quix

Прежде чем вы сможете создать среду в Quix, вам сначала необходимо создать проект. Во время работы мастера создания проекта вам будет предложено добавить исходную среду. Вы можете добавить больше сред позже, когда освоитесь.


Чтобы создать проект и подключить среду к разветвленному репозиторию, выполните следующие действия:

  • Войдите в Quix и нажмите + Новый проект .


  • Назовите свой проект « Моя демонстрация компьютерного зрения » (или что-то подобное) и выберите «Подключиться к собственному репозиторию Git» .


  • На следующем экране вы должны увидеть несколько инструкций о том, как добавить SSH-ключ Quix в ваш репозиторий — следуйте этим инструкциям. Добавление этого ключа позволяет Quix автоматически синхронизировать ваш репозиторий со средой Quix.

    Подключение собственного репозитория Git



  • На следующем экране вам будет предложено создать среду — среды позволяют вам параллельно развертывать код из разных ветвей.

    Введите « tutorial » в качестве имени среды и выберите ветку « tutorial » из разветвленного репозитория.

    Настройки среды


  • Продолжайте выполнять следующие шаги в мастере создания проекта.


    Мастер спросит вас, какой брокер сообщений вы хотите использовать. Исходная версия проекта использует Confluent Cloud в качестве брокера сообщений. Если вы хотите использовать Confluent Cloud‌, вам сначала необходимо иметь учетную запись — в этом случае вы должны выбрать «Подключиться к Confluent Cloud» и ввести свои учетные данные.

    Более подробную информацию о Confluent Connector можно найти в документации Quix.


    Однако использование Confluent Cloud не является обязательным. В этом руководстве вы также можете использовать брокер сообщений Quix по умолчанию.


  • После завершения работы мастера перейдите на страницу «Конвейер» (если она еще не открыта). Вы увидите стандартное предупреждение о том, что ваша среда Quix не синхронизирована с исходным репозиторием (поскольку среда изначально пуста).

    Стандартное предупреждение


  • Нажмите кнопку «Синхронизировать среду» , чтобы получить последнюю версию кода из разветвленного репозитория. Примечание . Процесс синхронизации является двунаправленным, поэтому, если вы измените какой-либо код в своей среде, он также вернет его в исходный репозиторий.


Надеюсь, синхронизация прошла успешно. Если это сработало, вы должны увидеть, как все ваши сервисы начинают создаваться на странице «Конвейер» .

Синхронизация конвейера Сервисов довольно много, поэтому сборка и запуск всех сервисов займет несколько минут.



Обратите внимание: служба S3 по умолчанию остановлена, поскольку для ее работы вам понадобится собственная учетная запись AWS. Но в любом случае для данного урока это не обязательно.


  • Чтобы увидеть весь конвейер на странице «Конвейер» , щелкните и перетащите в любое место пустой части холста и прокрутите вправо или, удерживая нажатой клавишу Ctrl / ⌘, уменьшите масштаб с помощью колеса мыши.


  • Прокрутите страницу, пока не увидите сервис под названием «Project Front End».

    Передняя часть проекта


  • Щелкните синий значок запуска рядом с названием службы «Project Front End».

    Теперь вы должны увидеть свою собственную копию приложения компьютерного зрения, с которой можно поиграть.


Понимание архитектуры демонстрационного приложения компьютерного зрения

Конвейер состоит из множества сервисов, но архитектуру можно разделить на три основных сегмента, как показано на следующей диаграмме:

Архитектура компьютерного зрения


  • Первый набор сервисов (1–3) подключается к дорожным камерам Лондона, определяя транспортные средства на каждом контролируемом участке дороги.


  • Второй набор сервисов (4–7) сохраняет общее количество типов транспортных средств на каждом сегменте дороги и регистрирует максимальное количество транспортных средств, обнаруженных в данном кадре. Затем эти данные буферизуются и передаются в службу REST API, чтобы данные были доступны любой внешней службе, которая хочет их запросить.


  • Последний сервис (8) содержит интерфейс, который опрашивает REST API для получения агрегированной статистики транспортных средств и прослушивает веб-сокет на предмет необработанных данных со всех дорожных камер (таких видеокадров), которые поступают из темы в Quix. Эта комбинация опросов и данных в реальном времени используется для визуализации уровней дорожного движения на карте Лондона.


Я не буду вдаваться в подробности особенностей отдельных сервисов, потому что документация уже хорошо с этим справляется. Но если вы хотите взглянуть на то, как они работают, вот некоторая справочная информация со ссылками на документацию.

Справочник по обслуживанию

Если щелкнуть имя службы, вы увидите фактическую службу, работающую в среде Quix только для чтения, включая журналы времени выполнения и происхождение данных.

наименование услуги

Описание

Видео с камеры TfL

Получает каналы камеры из конечной точки API TfL, используя ключ API TfL и библиотеку Python «запросов».
Документация , Исходный код

Фрейм-граббер

Извлекает кадры из видеофайлов, предоставляемых Tfl API. Документация , Исходный код

Обнаружение объектов

Берет кадры из захвата кадров и обнаруживает объекты в каждом кадре.
Документация , Исходный код

Камеры транспортных средств

Рассчитывает общее количество транспортных средств.
Документация , Исходный код

Максимальное окно автомобиля

Рассчитывает максимальное количество транспортных средств за временной интервал в один день.
Документация , Исходный код

Буфер данных

Буфер данных предоставляет односекундный буфер данных для снижения нагрузки на службу Data API.
Документация , Исходный код

API данных

Служба REST API, предоставляющая две конечные точки. Документация , Исходный код

Передняя часть проекта

Размещает интерфейс, который проверяет API на наличие новых данных. Документация , Исходный код



Здесь я хочу сосредоточиться на том, чтобы показать вам , как настроить проект в соответствии с вашими требованиями .


Настройка проекта

Чтобы помочь вам настроить проект, я покажу вам, как внести небольшие изменения в логику агрегирования во внутренней части и визуализировать эту новую информацию во внешней части.

После этого я укажу вам на некоторые внешние ресурсы, которые помогут вам выполнять более сложные задачи, такие как подсчет транспортных средств и отслеживание объектов. Но сначала нам нужно немного поработать с администратором, например добавить свежие секреты приложения.


Добавление собственных учетных данных API и обновление секретов

В шаблоне проекта настроены некоторые учетные данные по умолчанию, но вам придется изменить их, чтобы ваша копия проекта работала. Вам нужно будет определить каждый из этих учетных данных как секрет в вашем проекте. Секреты заключаются в следующем.

  • Токен носителя для внешнего интерфейса для связи с концентратором SignalR в Quix (секретный ключ: « bearerToken »).

  • Ваш ключ API Tfl (секретный ключ: ' tfl_api_key ')


Настройка токена носителя для внешнего интерфейса

Внешний интерфейс использует клиентскую библиотеку SignalR для связи с Quix (через API Websockets ) для получения и обработки данных из серверной части. Для этого API требуется токен носителя для аутентификации клиентских приложений.


В рамках этого руководства вы создадите личный токен доступа Quix, который будет использоваться в качестве токена на предъявителя. Затем вы создадите секрет для хранения этого токена в своей среде (да, это немного запутанно, но вам нужно сделать это только один раз).

#Получение токена личного доступа

Вот как вы можете получить токен личного доступа в Quix.

  • Откройте меню своего профиля в правом верхнем углу и выберите «Токены личного доступа» .

    Personal Access Tokens


  • В появившемся диалоговом окне нажмите «Создать токен» и вставьте свой личный токен доступа в блокнот или любое другое место временного хранения — он понадобится вам для следующего шага.






Добавление вашего личного токена доступа к секретам

На портале Quix откройте страницу «Приложения» и нажмите «Демо-интерфейс Sentiment» , чтобы открыть Quix IDE.

  • В разделе «Переменные» (слева внизу) нажмите «Управление секретами» .

  • В появившейся боковой панели нажмите + Новый секрет и введите « bearerToken » в качестве секретного ключа.

  • В столбцах «По умолчанию» и «Учебное пособие» вставьте свой личный токен доступа, который вы создали на предыдущем шаге, в качестве значения в каждой ячейке.

    Управление секретами


Добавление вашего ключа API tfl в секреты

Предполагая, что вы зарегистрировались на портале Tfl API, вам сначала необходимо добавить свой собственный ключ API Tfl в качестве секрета.

  • Чтобы добавить секрет, необходимо выполнить те же действия, что и в предыдущем разделе, но на этот раз добавьте секрет с ключом « 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 — это очень простой процесс.


Чтобы создать тему на портале Quix, выполните следующие действия:

  • На портале Quix откройте страницу «Темы» и нажмите «Добавить новую» в правом верхнем углу.

  • В появившемся диалоговом окне введите имя, например « max-vehicles-agg », оставьте настройки по умолчанию такими, какие они есть, и нажмите «Готово» .

    Создание max-vehicles-agg Теперь вам нужно обновить код серверной части, чтобы написать эту тему. Сервис, который вам нужно изменить, называется « Max Vehicle Window ». Это сервис Python, который объединяет данные с помощью библиотек Quix Streams и Pandas Python.



При редактировании услуг в целом у вас всегда есть два варианта.

  • Отредактируйте и протестируйте свою локальную IDE, затем зафиксируйте и отправьте изменения в разветвленный репозиторий.

  • Редактируйте и тестируйте в онлайн-среде Quix IDE.


Quix IDE может работать немного быстрее, поскольку все зависимости устанавливаются автоматически, и вам не нужно настраивать новую виртуальную среду. Он также автоматически вносит ваши изменения, что может немного ускорить процесс. В этом примере я буду использовать Quix IDE.


Обновление сервиса максимального количества транспортных средств для агрегирования данных со всех камер.

Чтобы сэкономить время, я уже создал для этого код, поэтому все, что вам нужно сделать, это вставить его в соответствующий файл.


Чтобы отредактировать сервис Max Vehicle Window:

  • Перейдите в «Приложения» и нажмите «Окно максимального транспортного средства» , чтобы открыть Quix IDE.


    Обратите внимание: в пользовательском интерфейсе Quix база кода для каждого сервиса называется «приложением», но на самом деле это автономная папка, в которой хранится код для конкретного сервиса (все они работают вместе для обеспечения работы приложения компьютерного зрения). .


  • Если он еще не открыт, щелкните main.py в меню файлов слева, чтобы открыть его в Quix IDE.


  • В другом окне откройте этот файл из репозитория наших руководств , затем скопируйте и вставьте код, заменив весь существующий код. Комментарии к коду должны помочь вам понять, какие изменения я внес.


Новый код ожидает появления новой переменной среды с именем « output2 », в которой будет храниться имя новой темы вывода, которую вы создали ранее, поэтому давайте создадим эту новую переменную.

  • В разделе «Переменные» нажмите «+Добавить» , чтобы добавить новую переменную среды.
  • В появившемся диалоговом окне выберите «Тема вывода» в качестве типа переменной, назовите переменную «output2» и выберите созданную вами тему в качестве значения по умолчанию (например, « max-vehicles-agg »).


Теперь вам просто нужно сохранить и развернуть изменения.

  • Чтобы сохранить изменения, нажмите «Зафиксировать» .


  • Перед повторным развертыванием рекомендуется пометить редакцию, чтобы можно было легко определить, какую версию кода использует развертывание.

    • Пометьте коммит, щелкнув значок тега, и дайте ему имя… что-то вроде «NewAggregation».

    • Если вы хотите еще раз проверить, работает ли новый код, нажмите «Выполнить» в правом верхнем углу.


  • Чтобы повторно развернуть службу, откройте раскрывающийся список развертывания в правом верхнем углу и выберите « Изменить существующее развертывание », затем нажмите « Повторно развернуть ».

    Максимальное окно автомобиля


    Чтобы просмотреть тему, откройте портал Quix, перейдите на страницу « Темы» и щелкните тему « max-vehicles-agg », которую вы создали ранее.


  • Каждая тема имеет представление, называемое «представление обозревателя данных», которое позволяет вам проверять сообщения, проходящие через тему.

    Обозреватель данных



Теперь вы должны увидеть активный поток в разделе « ВЫБОР ПОТОКОВ ».

  • Выберите поток « агрегированные_данные » (или как там он называется)

  • Затем выберите все доступные параметры в разделе ВЫБОР ПАРАМЕТРОВ… .

  • Наконец, выберите представление «Таблица» , чтобы увидеть выбранные данные.


Обратите внимание, что новые данные могут поступать не сразу, поскольку служба TFL Camera Feed имеет переменный таймер сна, чтобы избежать превышения ограничений скорости TfL API. Вы можете настроить его в переменной среды «sleep_interval». На момент написания по умолчанию было установлено значение 60 секунд.


Если вы просмотрите журналы развертывания канала камеры TFL , вы увидите, когда этот таймер был активирован. Когда вы увидите, что данные снова поступают, можно безопасно вернуться и проверить свою тему.



Подача камеры


Обновление интерфейса для отображения карты и новых агрегатов.

Если вас беспокоит изменение кода внешнего интерфейса, вы можете пропустить эту часть. Quix — это в основном серверный инструмент, но мы добавили внешний компонент, чтобы вы могли создать полнофункциональное мини-приложение. В этом разделе вы собираетесь обновить внешний интерфейс для отображения агрегатов.

Отображение новых агрегированных данных во внешнем интерфейсе

Теперь давайте обновим службу пользовательского интерфейса, включив в нее новые агрегаты, которые мы создали на серверной стороне. Напоминаем, что вот как это должно выглядеть, когда вы закончите.

Добавление новых агрегатов


Это некрасиво, но дает нам необходимую информацию. Чтобы обновить пользовательский интерфейс, вам необходимо отредактировать следующие файлы:

Начнем с app.component.ts . На портале Quix перейдите в раздел « Приложения» и нажмите «Пользовательский интерфейс обработки изображений TfL» (развернутый как «Внешний интерфейс проекта»), чтобы открыть Quix IDE.

Пользовательский интерфейс обработки изображений Обновление подписок на данные


Здесь мы собираемся пойти на хитрость и жестко запрограммировать ссылки на темы. В рабочей среде это должно обрабатываться с помощью переменных, но это упрощает демонстрацию.


В разделе «Файлы приложения» откройте ./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; ' (строка 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 , выполните тот же процесс, что и при повторном развертывании службы максимального количества транспортных средств .


Если что-то пойдет не так, помните, что вам, возможно, придется удалить службу и развернуть ее снова, прежде чем вы увидите вывод ошибок в журналах.


Подсчет транспортных средств за более длительные периоды времени

Как вы, наверное, заметили, приложение на самом деле не подсчитывает транспортные средства с течением времени, а просто подсчитывает количество транспортных средств, наблюдаемых в каждом конкретном кадре видео.


Это связано с тем, что мы не используем все возможности YOLOv8. Мы просто используем обнаружение объектов, но для правильного подсчета транспортных средств вам необходимо использовать отслеживание объектов. Проблема в том, что для отслеживания объектов требуется больше памяти, чего нет в бесплатном плане Quix. В этой демонстрации используется самая маленькая «нано» модель YOLO, но доступны еще четыре размера, причем YOLOv8x является самым мощным. Если вы используете более крупную модель, вы можете получить отличные результаты для отслеживания и подсчета транспортных средств.


Вот скриншот попытки запустить его на моей локальной машине (с приличным графическим процессором) по каналу камеры TfL.

Скриншот


Я использовал YOLO в сочетании с парой других библиотек (например, с контролем от Roboflow) для подсчета транспортных средств, движущихся по дороге в обоих направлениях.

Дополнительные сведения о том, как получить аналогичные результаты, см. в следующих ресурсах:

Заключение

Спасибо, что зашли так далеко. Надеюсь, вам удалось его успешно настроить. Если у вас возникли какие-либо проблемы, обязательно задайте вопрос на форуме нашего сообщества , и один из нас сразу же ответит на него.


Как видите, в Quix довольно просто развертывать и запускать сложные приложения. Эти демо-версии разработаны как автономные, поэтому мы размещаем и интерфейсную часть. Однако в производственном сценарии вы, вероятно, захотите запустить свой интерфейс где-то еще. В чем Quix действительно преуспевает, так это в обработке потоков событий и выполнении сложных вычислений с чрезвычайно высокой производительностью. Он использует сильные стороны Apache Kafka для обработки данных в большом масштабе, абстрагируя при этом некоторые его недостатки (такие как управление ресурсами и сложность конфигурации). Конечно, если у вас уже есть собственный экземпляр Kafka или вы используете Confluent Cloud, вы также можете использовать его. Quix поможет вам организовать и обработать потоки событий в режиме реального времени.



Томаш Нойбауэр (технический директор и соучредитель Quix)


Также опубликовано здесь .