paint-brush
Como construir e implantar um aplicativo de monitoramento de tráfego em tempo real usando o modelo de visão computacional do Quixpor@quix
1,245 leituras
1,245 leituras

Como construir e implantar um aplicativo de monitoramento de tráfego em tempo real usando o modelo de visão computacional do Quix

por Quix21m2023/10/27
Read on Terminal Reader

Muito longo; Para ler

Aprenda como usar nosso modelo de visão computacional e implantar um aplicativo que usa câmeras de trânsito de Londres para avaliar o congestionamento atual aproveitando o YOLOv8.
featured image - Como construir e implantar um aplicativo de monitoramento de tráfego em tempo real usando o modelo de visão computacional do Quix
Quix HackerNoon profile picture
0-item
1-item
2-item
3-item

Se você sempre quis experimentar visão computacional, mas não tem tempo para configurar um ambiente de desenvolvimento complexo, este tutorial é para você. A visão computacional pode ser um ótimo substituto para sensores físicos em determinadas situações – especialmente quando se trata de contar coisas.


Neste tutorial, apresentarei um aplicativo de demonstração que lançamos e que usa câmeras de trânsito de Londres para avaliar o congestionamento atual contando veículos. É baseado em um modelo de projeto reutilizável que criamos para ajudar você a replicar o projeto. Em seguida, mostrarei como usar esse modelo para criar sua própria cópia do projeto e colocá-lo em funcionamento no Quix — uma ferramenta para desenvolver e executar aplicativos de streaming de eventos.


Nossa versão demo do aplicativo de visão computacional também usa um corretor de mensagens hospedado no Confluent Cloud (Apache Kafka totalmente gerenciado como serviço), mas não é obrigatório ter uma conta do Confluent Cloud para seguir o tutorial.


Veja como deve ser o resultado final:

modelo de visão computacional


Você pode experimentar esta versão demo ao vivo no seguinte endereço: https://app-demo-computervisiondemo-prod.deployments.quix.ai/


O que este aplicativo está fazendo?

O aplicativo usa transmissões ao vivo das câmeras de trânsito de Londres (também conhecidas como “Jam Cams”) para contar os veículos e estimar os níveis de congestionamento. Em seguida, utiliza indicadores visuais para mostrar onde está ocorrendo congestionamento em um mapa de Londres. Os veículos são contados usando um modelo ML para detecção de objetos em imagens (em vez de sensores ou dados de GPS).


O modelo de detecção de objetos também classifica os veículos em diferentes tipos e você pode filtrar os dados por esses tipos.


The vehicle type dropdown in the demo app

Por exemplo, você pode usar o menu suspenso “Selecionar objeto” para ver apenas o número de ônibus que todas as câmeras de trânsito detectaram no momento atual.

Observe que o aplicativo não contabiliza todos os veículos observados ao longo do dia, apenas no horário atual (mais sobre isso depois).






Por que usar a detecção de objetos para determinar o congestionamento?

Porque outros métodos nem sempre são confiáveis. Por exemplo, em 2020, um artista radicado em Berlim conseguiu criar um engarrafamento “virtual” numa das principais pontes sobre o rio Spree com nada mais do que um carrinho de mão e 99 telefones usados. O Google Maps então exibiu obedientemente a área no mapa como altamente congestionada.


Por esta razão, outros tipos de dados são frequentemente utilizados para aumentar as estimativas de congestionamento baseadas em GPS. Isso inclui padrões históricos, dados de sensores, feeds municipais sobre fechamentos programados e incidentes relatados por usuários. No entanto, uma das referências cruzadas mais confiáveis é o reconhecimento visual de congestionamento obtido pelas câmeras de trânsito ( presumindo que uma gaivota não esteja bloqueando a visão ).



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

Apesar das gaivotas errantes, a visão computacional está agora sendo usada por organizações governamentais para aumentar os dados de tráfego e aumentar a precisão das estimativas de volume de tráfego. Por exemplo, em 22 de setembro do ano passado, a Statistics Canada publicou um artigo intitulado “ Estimativa de volume de tráfego a partir de imagens de câmeras de trânsito: Rumo a fluxos de dados de tráfego em tempo real ”, que apresentava um sistema baseado em visão computacional para extrair periodicamente contagens de veículos de câmeras de trânsito canadenses. imagens.


Agora, com o Quix, você não precisa de uma equipe de cientistas pesquisadores para tentar algo assim. Qualquer desenvolvedor capaz pode experimentá-lo e colocá-lo em funcionamento em poucos minutos. Neste caso, porém, estamos falando mais de 60 minutos em vez de 5 minutos. Afinal, é um grande projeto!


Para reproduzir o projeto, você precisará de duas coisas:

Obtendo sua própria cópia do projeto

Existem várias etapas principais para obter uma cópia do projeto (e de qualquer um de nossos aplicativos de demonstração):

  1. Bifurque nosso repositório de demonstração de visão computacional do GitHub.

    Isso tornará mais fácil personalizar sua versão do projeto, mas ainda se beneficiará de melhorias iniciais.


  2. Crie um projeto no Quix Cloud , depois crie um novo ambiente de desenvolvimento e vincule-o ao seu fork.

    Isso permitirá que você execute e atualize o aplicativo no Quix Cloud com sua própria conta.


  3. Atualize as credenciais de serviços externos, como TfL Camera API e Google Maps.

    Segredos como chaves de API não são transferidos para cópias do projeto, portanto você mesmo precisará adicioná-los.


Depois de configurar o básico, mergulharemos no código e veremos como você pode adaptá-lo.


Bifurcando o repositório de demonstração de visão computacional

Para entender o código, vamos primeiro bifurcar o repositório Computer Vision Demo. Por que bifurcar em vez de clonar? Porque, mais tarde, você trará esse código para seu próprio ambiente Quix, e usar um fork é a maneira mais fácil de manter seu ambiente sincronizado. Você também poderá obter quaisquer alterações anteriores que fizermos no modelo do projeto.


Para simplificar, presumo que você já tenha uma conta no GitHub. No entanto, você pode querer criar um usuário Git específico para este projeto. Posteriormente, você concederá ao Quix acesso SSH ao repositório, e ter um usuário separado é uma boa maneira de garantir que o Quix não tenha mais acesso do que deveria.


  • Abra o GitHub em seu navegador da web, navegue até o repositório Computer Vision Demo ( https://github.com/quixio/computer-vision-demo ) e clique em Fork.
    • Certifique-se de bifurcar todas as ramificações (no assistente Fork do GitHub, desmarque “ Copiar apenas a ramificação principal ”). Isso ocorre porque, se estiver usando uma conta de teste, você precisará de uma ramificação alternativa para criar um ambiente de desenvolvimento no Quix Cloud.


Criando um novo fork


Criando um novo ambiente de desenvolvimento no Quix

Antes de criar um ambiente no Quix, primeiro você precisa criar um projeto. Durante o assistente de criação de projeto, você será solicitado a adicionar um ambiente inicial. Você pode adicionar mais ambientes posteriormente, quando pegar o jeito.


Para criar um projeto e conectar um ambiente ao seu repositório bifurcado, siga estas etapas:

  • Faça login no Quix e clique em + Novo projeto .


  • Nomeie seu projeto como “ Minha demonstração de visão computacional ” (ou algo semelhante) e selecione Conectar ao seu próprio repositório Git .


  • Na próxima tela, você verá algumas instruções sobre como adicionar a chave Quix SSH ao seu repositório – siga essas instruções. Adicionar esta chave permite que o Quix sincronize automaticamente o seu repositório com o ambiente Quix

    Conectando seu próprio repositório Git



  • Na próxima tela, você será solicitado a criar um ambiente – os ambientes permitem implantar código de diferentes ramificações em paralelo.

    Digite ' tutorial ' para o nome do ambiente e selecione o branch ' tutorial ' do seu repositório bifurcado.

    Configurações de ambiente


  • Continue com as próximas etapas no assistente de criação de projeto.


    O assistente perguntará qual corretor de mensagens você deseja usar. A versão original do projeto usa Confluent Cloud como corretor de mensagens. Se quiser usar o Confluent Cloud‌, você precisará primeiro ter uma conta; nesse caso, selecione Conectar-se ao seu Confluent Cloud e insira suas credenciais.

    Você pode encontrar mais detalhes sobre o Confluent Connector na documentação do Quix.


    Porém, não é obrigatório o uso do Confluent Cloud. Para este tutorial, você também pode usar o agente de mensagens Quix padrão.


  • Depois de concluir o assistente, navegue até a página Pipeline (se ainda não estiver aberta). Você verá um aviso padrão de que seu ambiente Quix está fora de sincronia com o repositório de origem (já que o ambiente começa vazio).

    Aviso padrão


  • Clique no botão Sincronizar ambiente para extrair o código mais recente do seu repositório bifurcado. Observação : o processo de sincronização é bidirecional, portanto, se você alterar algum código em seu ambiente, ele também será enviado de volta ao repositório de origem.


Esperamos que a sincronização tenha sido bem-sucedida. Se funcionou, você verá todos os seus serviços começarem a ser construídos na página Pipeline .

Pipeline de sincronização Existem alguns serviços, portanto, levará alguns minutos para que todos os serviços sejam compilados e comecem a ser executados.



Observe que o serviço S3 é interrompido por padrão porque você precisará de sua própria conta AWS para fazê-lo funcionar. Mas de qualquer maneira, não é realmente necessário para este tutorial.


  • Para ver o pipeline completo na página Pipeline , clique e arraste em qualquer lugar em uma parte em branco da tela e role para a direita ou mantenha pressionada a tecla Ctrl / ⌘ e use a roda do mouse para diminuir o zoom.


  • Role até ver um serviço chamado “Project Front End”.

    Front-end do projeto


  • Clique no ícone azul de inicialização próximo ao nome do serviço “Project Front End”.

    Agora você deve ver sua própria cópia do aplicativo de visão computacional, pronta para brincar.


Compreendendo a arquitetura do aplicativo de demonstração de visão computacional

O pipeline consiste em muitos serviços, mas a arquitetura pode ser resumida em três segmentos principais, conforme ilustrado no diagrama a seguir:

Arquitetura de Visão Computacional


  • O primeiro conjunto de serviços (1-3) utiliza as câmaras de trânsito de Londres, identificando veículos em cada segmento rodoviário monitorizado.


  • O segundo conjunto de serviços (4-7) mantém um total contínuo dos tipos de veículos em cada segmento de estrada e registra o número máximo de veículos que foram detectados em um determinado quadro. Esses dados são então armazenados em buffer e passados para um serviço REST API para que os dados sejam acessíveis a qualquer serviço externo que queira solicitá-los.


  • O serviço final (8) hospeda um front-end que pesquisa uma API REST para estatísticas agregadas de veículos e escuta em um Websocket dados brutos ao vivo de todas as câmeras de trânsito (como quadros de vídeo) provenientes de um tópico no Quix. Esta combinação de dados pesquisados e em tempo real é usada para visualizar os níveis de tráfego em um mapa de Londres.


Não entrarei em muitos detalhes sobre as especificidades dos serviços individuais porque a documentação já faz um bom trabalho nisso. Mas se você quiser dar uma olhada em como eles funcionam, aqui estão algumas informações de referência com links para a documentação.

Referência de serviço

Se você clicar no nome do serviço, poderá ver o serviço real em execução em um ambiente somente leitura do Quix, incluindo os logs de tempo de execução e a linhagem de dados.

Nome do Serviço

Descrição

Alimentação da câmera TfL

Recupera os feeds da câmera do endpoint da API TfL, usando uma chave de API TfL e a biblioteca Python “solicitações”.
Documentação , código fonte

Captador de quadros

Extrai frames dos arquivos de vídeo fornecidos pela API Tfl. Documentação , código fonte

Detecção de objetos

Pega quadros do capturador de quadros e detecta objetos em cada quadro.
Documentação , código fonte

Veículos com câmera

Calcula o total de veículos.
Documentação , código fonte

Janela máxima do veículo

Calcula o máximo de veículos em uma janela de tempo de um dia.
Documentação , código fonte

Buffer de dados

O buffer de dados fornece um buffer de dados de um segundo para reduzir a carga no serviço Data API.
Documentação , código fonte

API de dados

Um serviço de API REST que fornece dois terminais. Documentação , código fonte

Front-end do projeto

Hospeda um front-end que verifica a API em busca de novos dados. Documentação , código fonte



O que quero focar aqui é mostrar como personalizar o projeto de acordo com suas próprias necessidades .


Personalizando o projeto

Para ajudá-lo a personalizar o projeto, mostrarei como fazer uma pequena alteração na lógica de agregação no back-end e renderizar essas novas informações no front-end.

Depois disso, apontarei alguns recursos externos que o ajudarão a realizar tarefas mais poderosas, como contagem de veículos e rastreamento de objetos. Mas primeiro precisamos fazer um pouco de administração, como adicionar novos segredos de aplicativos.


Adicionando suas próprias credenciais de API e atualizando os segredos

O modelo de projeto está configurado com algumas credenciais padrão, mas você precisará alterá-las para que sua cópia do projeto funcione. Você precisará definir cada uma dessas credenciais como um segredo no seu projeto. Os segredos são os seguintes.

  • Um token de portador para o front-end se comunicar com o hub SignalR no Quix (chave secreta: ' bearerToken ')

  • Sua chave de API Tfl (chave secreta: ' tfl_api_key ')


Configurando um token de acesso para o Front End

O front-end usa a biblioteca cliente SignalR para se comunicar com o Quix (por meio de uma API Websockets ) para recuperar e renderizar dados do back-end. Esta API requer um token de portador para autenticar aplicativos clientes.


Para este tutorial, você criará um token de acesso pessoal Quix para usar como token ao portador. Em seguida, você criará um segredo para armazenar esse token em seu ambiente (sim, isso é um pouco complicado, mas você só precisa fazer isso uma vez).

#Obter um token de acesso pessoal

Veja como você obtém um token de acesso pessoal no Quix.

  • Abra o menu do seu perfil no canto superior direito e selecione Tokens de acesso pessoal .

    Personal Access Tokens


  • Na caixa de diálogo exibida, clique em Gerar token e cole seu token de acesso pessoal no bloco de notas ou em qualquer outro local de armazenamento temporário – você precisará dele na próxima etapa.






Adicionando seu token de acesso pessoal aos segredos

No portal Quix, abra a página Aplicativos e clique em Sentiment Demo UI para abrir o Quix IDE.

  • Na seção Variáveis (canto inferior esquerdo), clique em Gerenciamento de segredos .

  • Na barra lateral que aparece, clique em + Novo segredo e digite “ bearerToken ” como a chave secreta.

  • Nas colunas “Padrão” e “Tutorial”, cole seu Token de Acesso Pessoal que você criou na etapa anterior como o valor em cada célula.

    Gerenciamento de segredos


Adicionando sua chave API tfl aos segredos

Supondo que você tenha se registrado no portal Tfl API, primeiro você também precisa adicionar sua própria chave Tfl API como um segredo.

  • Para adicionar o segredo, é necessário seguir exatamente os mesmos passos da seção anterior, mas desta vez adicione um segredo com a chave ' tfl_api_key '.


Atualizando o back-end para obter o número máximo combinado de veículos vistos em Londres

No momento, você só pode ver o número máximo de veículos observados por câmera nas últimas 24 horas. Por exemplo, vamos examinar os dados exibidos abaixo deste quadro de vídeo tirado da câmera em Kings Cross e Swinton Street

Número de veículos vistos


  • Atualmente, acredita-se que existam 5 veículos no quadro.
  • No entanto, o maior número de veículos que a câmera já observou (no mesmo quadro) foi de 11 veículos.
    • Não sabemos quando aquele aglomerado de 11 veículos foi observado, apenas que a observação foi feita em algum momento das últimas 24 horas.


Mas não seria interessante ver os mesmos dados para toda Londres? Ou seja, qual é o número máximo combinado de veículos observados pelas câmeras de Londres ao mesmo tempo? E qual é o número máximo de ônibus observados por todas as câmeras?


Para responder a essas perguntas, queremos obter dados parecidos com estes

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

Observe que não estamos falando sobre a contagem total de veículos aqui (falarei disso mais tarde), apenas um instantâneo da maioria dos veículos que as câmeras de trânsito de Londres observaram nas últimas 24 horas.


Para obter esses dados, você precisará fazer as seguintes alterações

  • Obtenha os máximos para cada tipo de veículo observado nas últimas 24 horas (não apenas para todos os veículos).

  • Armazene os máximos mais recentes e agregue-os todos (em todas as câmeras).

  • Atualize continuamente a agregação quando novos máximos forem observados por câmeras diferentes.


Então, você está renderizando os dados no front-end para que fiquem mais ou menos assim:

Densidade de tráfego


Já criei algum código para isso, mas antes de testá-lo, você precisará de um local para armazenar as novas agregações à medida que elas chegam. Neste exemplo, mostrarei como usar um novo tópico kafka para armazenar os dados.


Adicionando um novo tópico “max-vehicles-agg”

Não tem certeza do que é um tópico? A documentação do Apache Kafka é um bom ponto de partida, mas em essência, os tópicos são descritos como semelhantes a uma pasta em um sistema de arquivos, e os eventos (na forma de mensagens) são os arquivos dessa pasta. Você aprenderá como criar um na UI do Quix – que é um processo muito simples.


Para criar um tópico no Portal Quix siga estes passos:

  • No Portal Quix, abra a página Tópicos e clique em Adicionar novo no canto superior direito.

  • Na caixa de diálogo que aparece, insira um nome como “ max-vehicles-agg ”, deixe as configurações padrão como estão e clique em Concluído .

    Criando max-vehicles-agg Agora, você precisará atualizar o código no back-end para escrever este tópico. O serviço que você precisa alterar chama-se “ Max Vehicle Window ”. É um serviço Python que agrega dados usando as bibliotecas Quix Streams e Pandas Python.



Ao editar serviços em geral, você sempre tem duas opções.

  • Edite e teste seu IDE local e, em seguida, confirme e envie suas alterações para seu repositório bifurcado.

  • Edite e teste no Quix IDE online.


O Quix IDE pode ser um pouco mais rápido porque todas as dependências são instaladas para você e você não precisa configurar um novo ambiente virtual. Ele também envia suas alterações automaticamente, o que pode acelerar um pouco as coisas. Para este exemplo, usarei o Quix IDE.


Atualizando o serviço de máximo de veículos para agregar dados de todas as câmeras

Para economizar tempo, já criei um código para isso, então tudo que você precisa fazer é colá-lo no arquivo relevante.


Para editar o serviço Max Vehicle Window:

  • Navegue até Aplicativos e clique em Max Vehicle Window para abrir o Quix IDE.


    Observe que na interface do usuário do Quix, a base de código de cada serviço é chamada de “aplicativo”, mas na realidade é uma pasta independente que armazena o código de um serviço específico (todos trabalham juntos para alimentar o aplicativo de visão computacional) .


  • Se ainda não estiver aberto, clique em main.py no menu de arquivo à esquerda para abri-lo no Quix IDE.


  • Em outra janela, abra este arquivo do nosso repositório de tutoriais , copie e cole o código, substituindo todo o código existente. Os comentários do código devem ajudá-lo a entender quais alterações fiz.


O novo código espera que haja uma nova variável de ambiente chamada “ output2 ” que armazena o nome do novo tópico de saída que você criou anteriormente, então vamos criar essa nova variável.

  • Na seção Variáveis , clique em +Adicionar para adicionar uma nova variável de ambiente,
  • Na caixa de diálogo que aparece, selecione Tópico de saída como tipo de variável, nomeie a variável “output2” e selecione o tópico que você criou como valor padrão (por exemplo, “ max-vehicles-agg ”)


Agora, você só precisa salvar e implantar suas alterações.

  • Para salvar suas alterações, clique em Confirmar .


  • Antes de reimplantar, é uma boa ideia marcar a revisão para que seja fácil saber qual versão do código a implantação está usando.

    • Marque o commit clicando no ícone da tag e dê um nome a ele… algo como “NewAggregation”.

    • Se você quiser verificar se o novo código funciona, clique em Executar no canto superior direito.


  • Para reimplantar o serviço, abra o menu suspenso de implantação no canto superior direito e selecione “ Editar implantação existente ” e clique em “ Reimplantar ”.

    Janela máxima do veículo


    Para inspecionar o tópico, abra o Portal Quix, navegue até a página Tópicos e clique no tópico “ max-vehicles-agg ” que você criou anteriormente.


  • Cada tópico tem uma visualização chamada “visualização do explorador de dados”, que permite inspecionar as mensagens que fluem por um tópico.

    Explorador de dados



Agora você deve ver um stream ativo na seção “ SELECT STREAMS ”.

  • Selecione o fluxo “ agreged_data ” (ou como quer que seja chamado)

  • Em seguida, selecione todos os parâmetros disponíveis na seção SELECT PARAMETERS… .

  • Por fim, selecione a visualização Tabela para poder ver os dados selecionados.


Observe que novos dados podem não chegar imediatamente porque o serviço TFL Camera Feed tem um temporizador variável para evitar atingir os limites de taxa da API TfL. Você pode configurá-lo na variável de ambiente “sleep_interval”. No momento em que este artigo foi escrito, o padrão era 60 segundos.


Se você inspecionar os registros da implantação do TFL Camera Feed , deverá ver quando esse cronômetro foi ativado. Quando você vir os dados chegando novamente, é seguro voltar e verificar o seu tópico



Alimentação da câmera


Atualizando o front end para exibir o mapa e as novas agregações

Se você estiver preocupado em alterar o código do front end, poderá pular esta parte. Quix é principalmente uma ferramenta de back-end, mas adicionamos um componente de front-end para que você crie um miniaplicativo totalmente funcional. Nesta seção, você atualizará o front-end para exibir as agregações.

Exibir os novos dados de agregação no front end

Agora, vamos atualizar o serviço de UI para incluir os novos agregados que criamos no back-end. Como um lembrete, veja como deve ficar quando terminar.

Adicionando novos agregados


Não é bonito, mas nos dá as informações que precisamos. Para atualizar a IU, você precisará editar os seguintes arquivos:

Vamos começar com app.component.ts . No Portal Quix, navegue até Aplicativos e clique em UI de processamento de imagem TfL (implantado como “Project Front End”) para abrir o Quix IDE.

IU de processamento de imagem Atualizando as assinaturas de dados


Aqui, seremos um pouco hackeados e codificaremos as referências do tópico. Na produção, isso deve ser tratado com variáveis, mas torna a demonstração mais simples.


Na seção Arquivos de aplicativo , abra ./src/app/app.component.ts .


Localize o seguinte bloco (após a linha 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', '*', '*');


E a seguinte linha extra abaixo do bloco:

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


Isso iniciará uma assinatura no tópico e lerá todos os parâmetros na mensagem (parameterData é um tipo de dados específico na API Quix e normalmente é composto de dados numéricos).


Em seguida, localize a linha 'selectedMarker: Marker | undefined; ' (linha 43 ou próximo) e adicione a seguinte nova linha abaixo dela.

 latestMessageMaxAgg: ParameterData | undefined;

Esta linha inicializa uma nova variável que você usará para armazenar os dados das mensagens.


Agora, vamos atribuir os dados à variável sempre que uma nova mensagem for detectada.


Primeiro, localize o seguinte bloco (após a linha 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]; }

Adicione o seguinte bloco abaixo dele:

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

Agora, se a mensagem vier de um tópico chamado ' max-vehicles-agg ', o front end pegará todos os dados da mensagem e os colocará na variável latestMessageMaxAgg .

Agora que temos acesso à variável, vamos renderizar seu conteúdo no front end.


Atualizando o modelo de front-end

Agora é hora de finalmente renderizar os dados que disponibilizamos para o front-end.

  • Na seção Arquivos de aplicativo , abra ./src/app/app.component.html .


Localize a seguinte div que renderiza uma escala colorida de densidade de tráfego (após a linha 85):

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


Diretamente acima dele, adicione o seguinte bloco de código.

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

Isso extrai dados da variável latestMessageMaxAgg que você criou anteriormente e exibe os dados da mensagem mais recente (selecionada via “ at(0) ” ). Também torna os dados opcionais para que você não receba uma mensagem de erro de que faltam dados.


Se quiser testá-lo primeiro em sua máquina local, você pode obter as alterações feitas no Quix IDE (o Quix as envia automaticamente) e seguir as instruções no README do serviço front-end .


  • Para reimplantar o serviço de IU de processamento de imagem TfL , siga o mesmo processo que você fez ao reimplantar o serviço max Vehicles .


Se algo der errado, lembre-se de que talvez seja necessário excluir o serviço e implantá-lo novamente antes de ver a saída de erro nos logs.


Contando veículos em períodos de tempo mais longos

Como você provavelmente notou, o aplicativo não está realmente contando veículos ao longo do tempo, mas apenas contando o número de veículos observados em qualquer quadro de vídeo.


Isso ocorre porque não estamos usando todos os recursos do YOLOv8. Estamos apenas usando a detecção de objetos, mas para contar os veículos corretamente, você precisará usar o rastreamento de objetos. O problema é que o rastreamento de objetos requer mais memória, o que não está disponível no plano gratuito do Quix. Esta demonstração usa o menor modelo “nano” YOLO, mas existem outros quatro tamanhos disponíveis, sendo YOLOv8x o mais poderoso. Se você usar um modelo maior, poderá obter ótimos resultados para rastreamento e contagem de veículos.


Aqui está uma captura de tela de uma tentativa de executá-lo em minha máquina local (com uma GPU decente) em uma câmera TfL.

Captura de tela


Usei o YOLO em combinação com algumas outras bibliotecas (como a supervisão do Roboflow) para contar veículos em ambas as direções ao longo da estrada.

Para obter mais informações sobre como obter resultados semelhantes, consulte os seguintes recursos:

Conclusão

Parabéns por chegar até aqui. Espero que você tenha conseguido personalizá-lo com sucesso. Se você tiver algum problema, poste uma pergunta em nosso fórum da comunidade e um de nós resolverá o problema imediatamente.


Como você pode ver, é bastante simples implantar e executar aplicativos complexos no Quix. Essas demonstrações são projetadas para serem independentes, por isso hospedamos o front-end também. No entanto, em um cenário de produção, você provavelmente desejaria executar seu front-end em outro lugar. O que o Quix realmente faz é se destacar no processamento de fluxos de eventos e na execução de cálculos complexos de maneira extremamente eficiente. Ele aproveita os pontos fortes do Apache Kafka para processar dados em escala, ao mesmo tempo que abstrai alguns de seus pontos fracos (como gerenciamento de recursos e complexidade de configuração). Claro, se você já possui sua própria instância Kafka ou está usando o Confluent Cloud, você também pode usá-la. Quix está lá para ajudá-lo a orquestrar e processar seus fluxos de eventos em tempo real.



Por Tomáš Neubauer (CTO e cofundador da Quix)


Também publicado aqui .