Quix의 컴퓨터 비전 템플릿을 사용하여 실시간 교통 모니터링 앱을 구축하고 배포하는 방법

컴퓨터 비전을 실험하고 싶었지만 복잡한 개발 환경을 설정할 시간이 없다면 이 튜토리얼이 적합합니다. 컴퓨터 비전은 특정 상황, 특히 사물을 계산할 때 물리적 센서를 훌륭하게 대체할 수 있습니다.

이 튜토리얼에서는 런던의 교통 카메라를 사용하여 차량 수를 세어 현재 혼잡도를 측정하는 데모 애플리케이션을 소개합니다. 이는 프로젝트 복제를 돕기 위해 만든 재사용 가능한 프로젝트 템플릿을 기반으로 합니다. 그런 다음 이 템플릿을 사용하여 자신만의 프로젝트 복사본을 만들고 이벤트 스트리밍 애플리케이션을 개발하고 실행하는 도구인 Quix에서 이를 시작하고 실행하는 방법을 보여 드리겠습니다.

컴퓨터 비전 애플리케이션의 데모 버전도 Confluent Cloud (서비스로 완전히 관리되는 Apache Kafka)에서 호스팅되는 메시지 브로커를 사용하지만 튜토리얼을 따르기 위해 Confluent Cloud 계정이 필수는 아닙니다.

최종 결과는 다음과 같습니다.

다음 주소에서 실시간으로 이 데모 버전을 실험해 볼 수 있습니다: https://app-demo-computervisiondemo-prod.deployments.quix.ai/

이 앱은 무엇을 하는 앱인가요?

이 앱은 런던의 교통 카메라(“Jam Cams”라고도 함)의 실시간 피드를 사용하여 차량 수를 계산하고 혼잡 수준을 추정합니다. 그런 다음 시각적 표시기를 사용하여 런던 지도에서 혼잡이 발생하는 위치를 표시합니다. 차량 수는 센서나 GPS 데이터가 아닌 이미지의 객체 감지를 위한 ML 모델을 사용하여 계산됩니다.

객체 감지 모델은 차량을 다양한 유형으로 분류하며 이러한 유형별로 데이터를 필터링할 수 있습니다.

예를 들어, "객체 선택" 드롭다운을 사용하여 현재 시점에 모든 교통 카메라가 감지한 버스 수만 볼 수 있습니다.

애플리케이션은 하루 종일 관찰된 모든 차량을 현재 시간에만 계산하지 않는다는 점에 유의하세요(자세한 내용은 나중에 설명).

혼잡을 판단하기 위해 객체 감지를 사용하는 이유는 무엇입니까?

다른 방법이 항상 신뢰할 수 있는 것은 아니기 때문입니다. 예를 들어, 2020년 베를린에 거주하는 한 예술가는 손수레와 99개의 중고 전화기만으로 슈프레 강을 가로지르는 주요 다리 중 하나에서 "가상" 교통 체증을 만들어냈습니다 . 그런 다음 Google 지도는 지도에 해당 지역을 매우 혼잡한 지역으로 표시했습니다.

이러한 이유로 GPS 기반 혼잡 추정치를 늘리기 위해 다른 유형의 데이터가 종종 사용됩니다. 여기에는 과거 패턴, 센서 데이터, 예정된 폐쇄에 대한 지자체 피드 및 사용자가 보고한 사건이 포함됩니다. 그러나 가장 신뢰할 수 있는 상호 참조 중 하나는 교통 카메라에서 수집된 혼잡을 시각적으로 인식하는 것입니다( 갈매기가 시야를 차단하지 않는다고 가정 ).

잘못된 갈매기에도 불구하고, 이제 정부 기관에서는 교통 데이터를 늘리고 교통량 추정의 정확성을 높이기 위해 컴퓨터 비전을 사용하고 있습니다. 예를 들어, 지난해 9월 22일 캐나다 통계청은 캐나다 교통 카메라에서 차량 수를 주기적으로 추출하는 컴퓨터 비전 기반 시스템을 제시하는 "교통 카메라 영상에서 교통량 추정: 실시간 교통 데이터 스트림을 향하여 "라는 제목의 논문을 발표했습니다. 형상.

이제 Quix를 사용하면 이와 같은 것을 시도하기 위해 연구 과학자 팀이 필요하지 않습니다. 유능한 개발자라면 누구나 시도해 보고 몇 분 안에 시작하고 실행할 수 있습니다. 하지만 이 경우에는 5분이 아니라 60분 정도를 말하는 것입니다. 결국 그것은 큰 프로젝트입니다!

프로젝트를 재현하려면 다음 두 가지가 필요합니다.

• Traffic for London API 용 API 키(자세한 내용은 이 프로젝트 설명서 참조)

• 무료 Quix 계정 — 아직 계정을 만들지 않았다면 지금 가입 할 수 있습니다(기존 Google, GitHub 또는 Microsoft 계정으로 몇 번의 클릭만으로 가입할 수 있습니다).

  
  

자신만의 프로젝트 사본 얻기

프로젝트(및 데모 애플리케이션)의 사본을 얻는 데는 몇 가지 주요 단계가 있습니다.

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 Demo 저장소( https://github.com/quixio/computer-vision-demo )로 이동한 후 Fork를 클릭합니다.

  • 모든 브랜치를 포크했는지 확인하세요(GitHub의 포크 마법사에서 ' 메인 브랜치만 복사 ' 선택 취소). 평가판 계정을 사용하는 경우 Quix Cloud에서 개발 환경을 생성하려면 대체 분기가 필요하기 때문입니다.

    
    

Quix에서 새로운 개발 환경 만들기

Quix에서 환경을 생성하려면 먼저 프로젝트를 생성해야 합니다. 프로젝트 생성 마법사가 진행되는 동안 초기 환경을 추가하라는 메시지가 표시됩니다. 나중에 익숙해지면 더 많은 환경을 추가할 수 있습니다.

프로젝트를 생성하고 포크된 저장소에 환경을 연결하려면 다음 단계를 따르세요.

• Quix에 로그인하고 + 새 프로젝트를 클릭합니다.

  
  

• 프로젝트 이름을 " My Computer Vision Demo "(또는 이와 유사한 이름)로 지정하고 자신의 Git 저장소에 연결을 선택합니다.

  
  

• 다음 화면에는 Quix SSH 키를 리포지토리에 추가하는 방법에 대한 몇 가지 지침이 표시됩니다. 해당 지침을 따르세요. 이 키를 추가하면 Quix가 저장소를 Quix 환경과 자동으로 동기화할 수 있습니다.

  

  
  

• 다음 화면에서는 환경을 생성하라는 메시지가 표시됩니다. 환경을 통해 여러 분기의 코드를 병렬로 배포할 수 있습니다.

  환경 이름으로 ' tutorial '을 입력하고 분기된 저장소에서 ' tutorial ' 분기를 선택하세요.

  

  
  

• 프로젝트 생성 마법사의 다음 단계를 계속 진행하세요.

  
  

  마법사는 어떤 메시지 브로커를 사용할 것인지 묻습니다. 프로젝트의 원래 버전은 Confluent Cloud를 메시지 브로커로 사용합니다. Confluent Cloud를 사용하려면 먼저 계정이 있어야 합니다. 이 경우 Confluent Cloud에 연결을 선택하고 자격 증명을 입력합니다.

  

  
  

  하지만 Confluent Cloud를 반드시 사용해야 하는 것은 아닙니다. 이 튜토리얼에서는 기본 Quix 메시지 브로커를 계속 사용할 수도 있습니다.

  
  

• 마법사를 완료한 후 파이프라인 페이지로 이동합니다(아직 열려 있지 않은 경우). Quix 환경이 소스 저장소와 동기화되지 않았다는 표준 경고가 표시됩니다(환경이 비어 있기 때문에).

  

  
  

• 환경 동기화 버튼을 클릭하여 포크된 저장소에서 최신 코드를 가져옵니다. 참고 : 동기화 프로세스는 양방향이므로 환경 내에서 일부 코드를 변경하면 소스 저장소에도 다시 푸시됩니다.

  
  

동기화가 성공하길 바랍니다. 제대로 작동했다면 파이프라인 페이지에서 모든 서비스가 빌드되기 시작하는 것을 볼 수 있습니다.

서비스가 꽤 많기 때문에 모든 서비스를 구축하고 실행하는 데 몇 분 정도 걸립니다.

S3 서비스가 작동하려면 자체 AWS 계정이 필요하기 때문에 S3 서비스는 기본적으로 중지됩니다. 하지만 어쨌든 이 튜토리얼에서는 꼭 필요한 것은 아닙니다.

• 파이프라인 페이지에서 전체 파이프라인을 보려면 캔버스의 빈 부분을 클릭하여 끌고 오른쪽으로 스크롤하거나 Ctrl/⌘를 누른 상태에서 마우스 휠을 사용하여 축소하세요.

  
  

• "Project Front End"라는 서비스가 나타날 때까지 스크롤합니다.

  

  
  

• "Project Front End" 서비스 이름 옆에 있는 파란색 시작 아이콘을 클릭합니다.

  이제 가지고 놀 준비가 된 컴퓨터 비전 앱의 복사본이 표시됩니다.

컴퓨터 비전 데모 앱의 아키텍처 이해

파이프라인은 많은 서비스로 구성되지만 아키텍처는 다음 다이어그램에 설명된 것처럼 세 가지 주요 세그먼트로 추상화될 수 있습니다.

• 첫 번째 서비스 세트(1-3)는 런던의 교통 카메라를 활용하여 모니터링되는 각 도로 구간에서 차량을 식별합니다.

  
  

• 두 번째 서비스 세트(4-7)는 각 도로 구간에서 차량 유형의 누계를 유지하고 특정 프레임에서 감지된 최대 차량 수를 기록합니다. 그런 다음 이 데이터는 버퍼링되어 REST API 서비스로 전달되므로 이를 요청하려는 모든 외부 서비스에서 데이터에 액세스할 수 있습니다.

  
  

• 최종 서비스(8)는 집계된 차량 통계를 위해 REST API를 폴링하고 Quix의 주제에서 나오는 모든 교통 카메라(예: 비디오 프레임)의 실시간 원시 데이터를 Websocket에서 수신하는 프런트 엔드를 호스팅합니다. 폴링된 데이터와 실시간 데이터의 조합은 런던 지도에서 교통 수준을 시각화하는 데 사용됩니다.

  
  

개별 서비스의 세부 사항에 대해서는 문서에서 이미 잘 설명하고 있으므로 자세히 설명하지 않겠습니다. 그러나 작동 방식을 살펴보고 싶다면 문서 링크가 포함된 몇 가지 참조 정보를 참조하세요.

서비스 참조

서비스 이름을 클릭하면 런타임 로그 및 데이터 계보를 포함하여 Quix 읽기 전용 환경에서 실행되는 실제 서비스를 볼 수 있습니다.

여기서 제가 집중하고 싶은 것은 프로젝트를 자신의 요구 사항에 맞게 사용자 정의하는 방법을 보여주는 것입니다.

프로젝트 사용자 정의

프로젝트를 사용자 정의하는 데 도움이 되도록 백엔드에서 집계 논리를 약간 변경하고 프런트엔드에서 해당 새 정보를 렌더링하는 방법을 보여 드리겠습니다.

그런 다음 차량 수 계산 및 물체 추적과 같은 보다 강력한 작업을 수행하는 데 도움이 되는 몇 가지 외부 리소스를 알려 드리겠습니다. 하지만 먼저 새로운 애플리케이션 비밀을 추가하는 등 약간의 관리 작업을 수행해야 합니다.

자체 API 자격 증명 추가 및 비밀 업데이트

프로젝트 템플릿은 일부 기본 자격 증명으로 구성되어 있지만 프로젝트 복사본이 작동하려면 이를 변경해야 합니다. 이러한 각 자격 증명을 프로젝트의 비밀로 정의해야 합니다. 비밀은 다음과 같습니다.

• Quix의 SignalR 허브와 통신하기 위한 프런트 엔드용 전달자 토큰(비밀 키: ' bearerToken ')

• Tfl API 키(비밀 키: ' tfl_api_key ')

  
  

프런트 엔드에 대한 전달자 토큰 구성

프런트 엔드는 SignalR 클라이언트 라이브러리를 사용하여 Quix( Websockets API를 통해)와 통신하여 백 엔드에서 데이터를 검색하고 렌더링합니다. 이 API에는 클라이언트 애플리케이션을 인증하기 위해 전달자 토큰이 필요합니다.

이 튜토리얼에서는 전달자 토큰으로 사용할 Quix 개인 액세스 토큰을 만듭니다. 그런 다음 이 토큰을 환경에 저장할 비밀을 생성합니다(예, 약간 복잡하지만 한 번만 수행하면 됩니다).

#개인 액세스 토큰 받기

Quix에서 개인 액세스 토큰을 얻는 방법은 다음과 같습니다.

• 오른쪽 상단의 프로필 메뉴를 열고 개인 액세스 토큰을 선택하세요.

  

  
  

• 표시되는 대화 상자에서 토큰 생성을 클릭하고 개인 액세스 토큰을 메모장이나 기타 임시 저장 위치에 붙여넣습니다. 다음 단계에 필요합니다.

비밀에 개인 액세스 토큰 추가

Quix 포털에서 애플리케이션 페이지를 열고 Sentiment Demo UI를 클릭하여 Quix IDE를 엽니다.

• 변수 섹션(왼쪽 하단)에서 비밀 관리 를 클릭합니다.

• 표시되는 사이드바에서 + New secret 을 클릭하고 비밀 키로 “ bearerToken ”을 입력합니다.

• "기본값" 및 "튜토리얼" 열에서 이전 단계에서 생성한 개인 액세스 토큰을 각 셀의 값으로 붙여넣습니다.

  

  
  

비밀에 tfl API 키 추가

Tfl API 포털 에 등록했다고 가정하면 먼저 자신의 Tfl API 키를 비밀로 추가해야 합니다.

• 비밀을 추가하려면 이전 섹션과 정확히 동일한 단계를 따라야 하지만 이번에는 ' tfl_api_key ' 키를 사용하여 비밀을 추가합니다.

런던 전역에서 볼 수 있는 총 최대 차량 수를 얻기 위해 백엔드 업데이트

현재는 지난 24시간 동안 카메라당 관찰된 최대 차량 수만 볼 수 있습니다. 예를 들어 Kings Cross와 Swinton Street의 카메라에서 촬영한 이 비디오 프레임 아래에 표시된 데이터를 살펴보겠습니다.

• 현재 프레임에는 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 Vehicle Window "라고 합니다. Quix Streams 및 Pandas Python 라이브러리를 사용하여 데이터를 집계하는 Python 서비스입니다.

  
  

  
  

일반적으로 서비스를 편집할 때 항상 두 가지 옵션이 있습니다.

• 로컬 IDE를 편집하고 테스트한 다음 변경 사항을 포크된 저장소에 커밋하고 푸시하세요.

• 온라인 Quix IDE에서 편집하고 테스트하세요.

  
  

Quix IDE는 모든 종속성이 자동으로 설치되어 있고 새로운 가상 환경을 설정할 필요가 없기 때문에 조금 더 빠를 수 있습니다. 또한 변경 사항을 자동으로 푸시하므로 작업 속도가 약간 빨라질 수 있습니다. 이 예에서는 Quix IDE를 사용하겠습니다.

모든 카메라의 데이터를 집계하기 위해 최대 차량 서비스 업데이트

시간을 절약하기 위해 이미 이에 대한 일부 코드를 만들었으므로 이를 관련 파일에 붙여넣기만 하면 됩니다.

Max Vehicle Window 서비스를 편집하려면:

• 애플리케이션 으로 이동하고 Max Vehicle Window를 클릭하여 Quix IDE를 엽니다.

  
  

  Quix 사용자 인터페이스에서는 각 서비스의 코드베이스를 "애플리케이션"이라고 부르지만 실제로는 특정 서비스에 대한 코드를 저장하는 자체 포함 폴더입니다(모두 함께 작동하여 컴퓨터 비전 앱을 구동함). .

  
  

• 아직 열려 있지 않으면 왼쪽 파일 메뉴에서 main.py 클릭하여 Quix IDE에서 엽니다.

  
  

• 다른 창에서 튜토리얼 repo 의 이 파일을 연 다음 코드를 복사하여 붙여넣고 기존 코드를 모두 바꿉니다. 코드 주석은 제가 변경한 내용을 이해하는 데 도움이 될 것입니다.

  
  

새 코드에서는 이전에 생성한 새 출력 항목의 이름을 저장하는 " output2 "라는 새 환경 변수가 있을 것으로 예상하므로 해당 새 변수를 만들어 보겠습니다.

• 변수 섹션에서 +추가를 클릭하여 새 환경 변수를 추가합니다.
• 나타나는 대화 상자에서 변수 유형으로 출력 주제를 선택하고 변수 이름을 "output2"로 지정한 다음 생성한 주제를 기본값으로 선택합니다(예: " max-vehicles-agg ").

이제 변경 사항을 저장하고 배포하기만 하면 됩니다.

• 변경 사항을 저장하려면 커밋 을 클릭합니다.

  
  

• 재배포하기 전에 개정판에 태그를 지정하여 배포에서 사용 중인 코드 버전을 쉽게 알 수 있도록 하는 것이 좋습니다.

  • 태그 아이콘을 클릭하여 커밋에 태그를 지정하고 "NewAggregation"과 같은 이름을 지정합니다.

  • 새 코드가 작동하는지 다시 확인하려면 오른쪽 상단에서 실행을 클릭하세요.

    
    

• 서비스를 재배포하려면 오른쪽 상단의 배포 드롭다운을 열고 ' 기존 배포 편집 '을 선택한 다음 ' 재배포 '를 클릭하세요.

  

  
  

  주제를 검사하려면 Quix 포털을 열고 주제 페이지로 이동한 후 이전에 생성한 " max-vehicles-agg " 주제를 클릭하세요.

  
  

• 각 주제에는 주제를 통해 흐르는 메시지를 검사할 수 있는 "데이터 탐색기 보기"라는 보기가 있습니다.

  

  
  

이제 " SELECT STREAMS " 섹션에 활성 스트림이 표시됩니다.

• " aggregated_data " 스트림(또는 호출되는 항목)을 선택합니다.

• 그런 다음 SELECT PARAMETERS... 섹션에서 사용 가능한 모든 매개변수를 선택합니다.

• 마지막으로 선택한 데이터를 볼 수 있도록 테이블 보기를 선택합니다.

  
  

TFL 카메라 피드 서비스에는 TfL API의 속도 제한에 도달하지 않도록 가변 절전 타이머가 있으므로 새 데이터가 즉시 제공되지 않을 수 있습니다. “sleep_interval” 환경 변수에서 구성할 수 있습니다. 작성 당시 기본값은 60초로 설정되어 있었습니다.

TFL Camera Feed 배포 로그를 검사하면 이 타이머가 언제 활성화되었는지 확인할 수 있습니다. 데이터가 다시 들어오는 것을 확인하면 돌아가서 주제를 확인하는 것이 안전합니다.

지도와 새 집계를 표시하도록 프런트 엔드 업데이트

프론트엔드 코드 변경이 귀찮으시다면 이 부분은 건너뛰셔도 됩니다. Quix는 주로 백엔드 도구이지만 완전한 기능을 갖춘 미니 애플리케이션을 만들 수 있도록 프런트엔드 구성 요소를 추가했습니다. 이 섹션에서는 프런트 엔드를 업데이트하여 집계를 표시합니다.

프런트 엔드에 새 집계 데이터 표시

이제 백엔드에서 생성한 새 집계를 포함하도록 UI 서비스를 업데이트하겠습니다. 완료되면 다음과 같이 표시됩니다.

예쁘지는 않지만 우리에게 필요한 정보를 제공합니다. UI를 업데이트하려면 다음 파일을 편집해야 합니다.

• 프런트 엔드에 대한 데이터 구독을 관리하는 ' app.component.ts ':

  <repo_root>/TfL 이미지 처리 UI/src/app/app.comComponent.ts

  
  

• 페이지의 정보 레이아웃을 정의하는 ' app.component.html '입니다. <repo_root>/TfL 이미지 처리 UI/src/app/app.comComponent.html

  
  

app.component.ts 부터 시작해 보겠습니다. Quix 포털에서 애플리케이션 으로 이동하고 TfL 이미지 처리 UI ("프로젝트 프런트 엔드"로 배포됨)를 클릭하여 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 이미지 처리 UI 서비스를 재배포하려면 최대 차량 서비스를 재배포할 때와 동일한 프로세스를 따르세요.

  
  

문제가 발생하면 서비스를 삭제하고 다시 배포해야 로그에서 오류 출력을 볼 수 있다는 점을 기억하세요.

장기간에 걸쳐 차량 수 계산

아마도 눈치채셨겠지만 앱은 실제로 시간이 지남에 따라 차량을 계산하는 것이 아니라 특정 비디오 프레임에서 관찰된 차량 수만 계산합니다.

이는 YOLOv8의 모든 기능을 사용하지 않기 때문입니다. 우리는 단지 객체 감지를 사용하고 있지만 차량 수를 제대로 계산하려면 객체 추적을 사용해야 합니다. 문제는 객체 추적에 더 많은 메모리가 필요하다는 것인데, 이는 Quix 무료 플랜에서는 사용할 수 없습니다. 이 데모에서는 가장 작은 "나노" YOLO 모델을 사용하지만 4가지 다른 크기도 사용할 수 있으며 YOLOv8x가 가장 강력합니다. 더 큰 모델을 사용하는 경우 차량 추적 및 계산에 대한 훌륭한 결과를 얻을 수 있습니다.

다음은 TfL 카메라 피드의 내 로컬 컴퓨터(적당한 GPU 포함)에서 실행하려는 시도의 스크린샷입니다.

나는 도로를 따라 양방향으로 이동하는 차량 수를 계산하기 위해 몇 가지 다른 라이브러리(예: Roboflow의 감독 )와 함께 YOLO를 사용했습니다.

비슷한 결과를 얻는 방법에 대한 자세한 내용은 다음 리소스를 참조하세요.

• YOLOv8을 사용하여 개체 추적 및 계산 (roboflow.com)

  Jupyter Notebook을 사용하여 컴퓨터 비전을 사용한 차량 계산에 대한 훌륭한 입문서입니다.

  
  

• YOLOv8 개체 감지 및 계산 | 더스틴 리우 | 2023년 9월 | 데이터 중심 투자자

  Roboflow Notebook의 최적화된 Streamlit 버전에 대한 연습(이전에 링크된 기사에서 설명) - 온라인에서도 사용해 볼 수 있습니다.

결론

여기까지 해주셔서 감사합니다. 성공적으로 사용자 정의할 수 있었으면 좋겠습니다. 문제가 있는 경우 커뮤니티 포럼 에 질문을 게시해 주시면 저희 중 한 명이 바로 답변해 드리겠습니다.

보시다시피 Quix에서는 복잡한 애플리케이션을 배포하고 실행하는 것이 매우 간단합니다. 이 데모는 독립형으로 설계되었으므로 프런트 엔드도 호스팅합니다. 그러나 프로덕션 시나리오에서는 프런트 엔드를 다른 곳에서 실행하고 싶을 수도 있습니다. Quix가 정말 뛰어난 점은 매우 효율적인 방식으로 이벤트 스트림을 처리하고 복잡한 계산을 수행하는 것입니다. 이는 Apache Kafka의 장점을 활용하여 대규모 데이터를 처리하는 동시에 일부 약점(예: 리소스 관리 및 구성 복잡성)을 추상화합니다. 물론 자체 Kafka 인스턴스가 이미 있거나 Confluent Cloud를 사용하고 있는 경우에도 이를 사용할 수 있습니다. Quix는 이벤트 스트림을 실시간으로 조정하고 처리하는 데 도움을 줍니다.

• Quix에서 Quix 환경을 관리하는 방법에 대해 자세히 알아보려면 Quix 설명서의 관련 섹션을 확인하세요.
• 완전한 기능을 갖춘 또 다른 데모 앱을 보려면 Hugging Face Transformers 라이브러리를 사용하여 채팅 메시지에 대한 실시간 감정 분석을 수행하는 채팅 앱 데모를 사용해 보세요.

작성자: Tomáš Neubauer (Quix의 CTO 겸 공동 창립자)