Cách xây dựng và triển khai ứng dụng giám sát lưu lượng truy cập thời gian thực bằng mẫu thị giác máy tính của Quix

Nếu bạn đã từng muốn thử nghiệm thị giác máy tính nhưng không có thời gian để thiết lập một môi trường phát triển phức tạp thì hướng dẫn này là dành cho bạn. Thị giác máy tính có thể là sự thay thế tuyệt vời cho cảm biến vật lý trong một số tình huống nhất định—đặc biệt là khi đếm mọi thứ.

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn một ứng dụng demo mà chúng tôi đã phát hành sử dụng camera giao thông của London để đánh giá tình trạng tắc nghẽn hiện tại bằng cách đếm số phương tiện. Nó dựa trên mẫu dự án có thể sử dụng lại mà chúng tôi đã tạo để giúp bạn tái tạo dự án. Sau đó, tôi sẽ chỉ cho bạn cách sử dụng mẫu này để tạo bản sao dự án của riêng bạn và thiết lập và chạy nó trong Quix—một công cụ để phát triển và chạy các ứng dụng truyền phát sự kiện.

Phiên bản demo ứng dụng thị giác máy tính của chúng tôi cũng sử dụng trình môi giới tin nhắn được lưu trữ trong Confluent Cloud (Apache Kafka được quản lý hoàn toàn dưới dạng dịch vụ), nhưng không bắt buộc phải có tài khoản Confluent Cloud để làm theo hướng dẫn.

Đây là kết quả cuối cùng sẽ như thế nào:

Bạn có thể thử nghiệm trực tiếp phiên bản demo này tại địa chỉ sau: https://app-demo-computervisiondemo-prod.deployments.quix.ai/

Ứng dụng này đang làm gì?

Ứng dụng này đang sử dụng nguồn cấp dữ liệu trực tiếp từ camera giao thông của London (còn được gọi là “Jam Cams”) để đếm số phương tiện và ước tính mức độ tắc nghẽn. Sau đó, nó sử dụng các chỉ báo trực quan để hiển thị nơi xảy ra tình trạng tắc nghẽn trên bản đồ London. Các phương tiện được tính bằng mô hình ML để phát hiện đối tượng trong hình ảnh (thay vì cảm biến hoặc dữ liệu GPS).

Mô hình phát hiện đối tượng cũng phân loại phương tiện thành các loại khác nhau và bạn có thể lọc dữ liệu theo các loại này.

Ví dụ: bạn có thể sử dụng menu thả xuống “Chọn đối tượng” để chỉ xem số lượng xe buýt mà tất cả camera giao thông đã phát hiện tại thời điểm hiện tại.

Lưu ý rằng ứng dụng không tính tất cả các phương tiện được quan sát trong ngày mà chỉ tính vào thời điểm hiện tại (sẽ nói thêm về điều đó sau).

Tại sao sử dụng tính năng phát hiện đối tượng để xác định tắc nghẽn?

Bởi vì các phương pháp khác không phải lúc nào cũng đáng tin cậy. Ví dụ, vào năm 2020, một nghệ sĩ ở Berlin đã tạo ra một vụ tắc đường “ảo” trên một trong những cây cầu chính bắc qua sông Spree mà không có gì ngoài một chiếc xe đẩy tay và 99 chiếc điện thoại cũ. Google Maps sau đó đã hiển thị một cách nghiêm túc khu vực trên bản đồ là có mức độ tắc nghẽn cao.

Vì lý do này, các loại dữ liệu khác thường được sử dụng để tăng cường ước tính tắc nghẽn dựa trên GPS. Điều này bao gồm các mẫu lịch sử, dữ liệu cảm biến, nguồn cấp dữ liệu thành phố về việc đóng cửa theo lịch trình và các sự cố do người dùng báo cáo. Tuy nhiên, một trong những tham chiếu chéo đáng tin cậy nhất là nhận dạng trực quan tình trạng tắc nghẽn được thu thập từ camera giao thông ( giả sử một con mòng biển không chặn tầm nhìn ).

Bất chấp những con mòng biển mắc lỗi, thị giác máy tính hiện đang được các tổ chức chính phủ sử dụng để tăng cường dữ liệu giao thông và tăng độ chính xác cho ước tính lưu lượng giao thông. Ví dụ: vào ngày 22 tháng 9 năm ngoái, Cơ quan Thống kê Canada đã xuất bản một bài báo có tiêu đề “ Ước tính lưu lượng giao thông từ hình ảnh camera giao thông: Hướng tới các luồng dữ liệu giao thông theo thời gian thực ”, trình bày một hệ thống dựa trên thị giác máy tính để trích xuất định kỳ số lượng phương tiện từ camera giao thông Canada hình ảnh.

Giờ đây với Quix, bạn không cần một nhóm các nhà khoa học nghiên cứu để thử những thứ như thế này. Bất kỳ nhà phát triển có năng lực nào cũng có thể dùng thử và thiết lập và chạy trong vòng vài phút. Tuy nhiên, trong trường hợp này, chúng ta đang nói đến 60 phút thay vì 5 phút. Rốt cuộc thì đó là một dự án lớn!

Để tái tạo dự án, bạn sẽ cần hai thứ:

• Khóa API cho API Giao thông cho Luân Đôn (để biết thêm chi tiết, hãy xem tài liệu của dự án này)

• Tài khoản Quix miễn phí — nếu chưa tạo tài khoản, bạn có thể đăng ký ngay bây giờ (bạn có thể thực hiện việc này chỉ bằng vài cú nhấp chuột bằng tài khoản Google, GitHub hoặc Microsoft hiện có).

  
  

Nhận bản sao dự án của riêng bạn

Có một số bước chính để có được bản sao của dự án (và bất kỳ ứng dụng demo nào của chúng tôi):

1. Phân nhánh kho lưu trữ demo thị giác máy tính của chúng tôi từ GitHub.

   Điều này sẽ giúp bạn dễ dàng tùy chỉnh phiên bản dự án của mình nhưng vẫn được hưởng lợi từ những cải tiến ngược dòng.

   
   

2. Tạo một dự án trong Quix Cloud , sau đó tạo môi trường phát triển mới và liên kết nó với nhánh của bạn.

   Điều này sẽ cho phép bạn chạy và cập nhật ứng dụng trong Quix Cloud bằng tài khoản của riêng bạn.

   
   

3. Cập nhật thông tin xác thực cho các dịch vụ bên ngoài như API máy ảnh TfL và Google Maps.

   Các bí mật như khóa API không được chuyển vào bản sao dự án nên bạn sẽ cần phải tự thêm các khóa này.

   
   

Sau khi bạn đã thiết lập những điều cơ bản, chúng ta sẽ đi sâu vào mã và xem cách bạn có thể điều chỉnh nó.

Phân nhánh kho lưu trữ demo thị giác máy tính

Để xử lý mã, trước tiên hãy phân nhánh kho lưu trữ Computer Vision Demo. Tại sao fork chứ không phải clone? Bởi vì sau này bạn sẽ đưa mã đó vào môi trường Quix của riêng mình và sử dụng fork là cách dễ nhất để giữ cho môi trường của bạn được đồng bộ hóa. Bạn cũng sẽ có thể nhận được bất kỳ thay đổi ngược dòng nào mà chúng tôi thực hiện đối với mẫu dự án.

Để đơn giản, tôi giả sử bạn đã có tài khoản GitHub. Tuy nhiên, bạn có thể muốn tạo một người dùng Git cụ thể cho dự án này. Sau này, bạn sẽ cấp cho Quix quyền truy cập vào kho lưu trữ và việc có một người dùng riêng là cách tốt để đảm bảo rằng Quix không có nhiều quyền truy cập hơn mức cần thiết.

• Mở GitHub trong trình duyệt web của bạn, điều hướng đến kho lưu trữ Computer Vision Demo ( https://github.com/quixio/computer-vision-demo ) và nhấp vào Fork.

  • Đảm bảo rằng bạn phân nhánh tất cả các nhánh (trong trình hướng dẫn Fork của GitHub, bỏ chọn “ Chỉ sao chép nhánh chính ”). Điều này là do nếu bạn đang sử dụng tài khoản dùng thử, bạn sẽ cần một nhánh thay thế để tạo môi trường phát triển trong Quix Cloud.

    
    

Tạo môi trường phát triển mới trong Quix

Trước khi có thể tạo môi trường trong Quix, trước tiên bạn cần tạo một dự án. Trong trình hướng dẫn tạo dự án, bạn sẽ được yêu cầu thêm môi trường ban đầu. Bạn có thể thêm nhiều môi trường hơn sau khi đã hiểu rõ mọi thứ.

Để tạo một dự án và kết nối một môi trường với repo phân nhánh của bạn, hãy làm theo các bước sau:

• Đăng nhập vào Quix và nhấp vào + Dự án mới .

  
  

• Đặt tên cho dự án của bạn là “ Bản demo thị giác máy tính của tôi ” (hoặc tên nào đó tương tự) và chọn Kết nối với kho lưu trữ Git của riêng bạn .

  
  

• Trên màn hình tiếp theo, bạn sẽ thấy một số hướng dẫn về cách thêm khóa Quix SSH vào kho lưu trữ của mình—hãy làm theo các hướng dẫn đó. Việc thêm khóa này cho phép Quix tự động đồng bộ hóa kho lưu trữ của bạn với môi trường Quix

  

  
  

• Trên màn hình tiếp theo, bạn sẽ được yêu cầu tạo môi trường—môi trường cho phép bạn triển khai mã từ các nhánh khác nhau song song.

  Nhập ' tutorial ' cho tên môi trường và chọn nhánh ' tutorial ' từ repo phân nhánh của bạn.

  

  
  

• Tiếp tục thực hiện các bước tiếp theo trong trình hướng dẫn tạo dự án.

  
  

  Trình hướng dẫn sẽ hỏi bạn muốn sử dụng nhà môi giới tin nhắn nào. Phiên bản gốc của dự án sử dụng Confluent Cloud làm nhà môi giới tin nhắn. Nếu muốn sử dụng Confluent Cloud‌, trước tiên bạn cần phải có tài khoản—trong trường hợp đó, bạn sẽ chọn Kết nối với Confluent Cloud‌ và nhập thông tin đăng nhập của mình.

  

  
  

  Tuy nhiên, không bắt buộc phải sử dụng Confluent Cloud. Đối với hướng dẫn này, bạn cũng có thể sử dụng trình trung chuyển tin nhắn Quix mặc định.

  
  

• Khi bạn đã hoàn thành trình hướng dẫn, hãy điều hướng đến trang Quy trình (nếu nó chưa mở). Bạn sẽ thấy cảnh báo tiêu chuẩn rằng môi trường Quix của bạn không đồng bộ với kho lưu trữ nguồn (vì môi trường bắt đầu trống).

  

  
  

• Nhấp vào nút Đồng bộ hóa môi trường để lấy mã mới nhất từ kho lưu trữ phân nhánh của bạn. Lưu ý : quá trình đồng bộ hóa là hai chiều, vì vậy nếu bạn thay đổi một số mã trong môi trường của mình, nó cũng sẽ đẩy mã đó trở lại kho lưu trữ nguồn.

  
  

Hy vọng việc đồng bộ đã thành công. Nếu nó hoạt động, bạn sẽ thấy tất cả các dịch vụ của mình bắt đầu được xây dựng trên trang Đường ống .

Có khá nhiều dịch vụ nên sẽ mất vài phút để tất cả các dịch vụ được xây dựng và bắt đầu chạy.

Lưu ý, dịch vụ S3 bị dừng theo mặc định vì bạn sẽ cần có tài khoản AWS của riêng mình để dịch vụ đó hoạt động. Nhưng dù sao thì nó cũng không thực sự cần thiết cho hướng dẫn này.

• Để xem toàn bộ quy trình trên trang Quy trình , hãy nhấp và kéo bất kỳ vị trí nào trên phần trống của khung vẽ và cuộn sang phải hoặc giữ Ctrl / ⌘ và sử dụng con lăn chuột để thu nhỏ.

  
  

• Cuộn cho đến khi bạn có thể thấy một dịch vụ có tên “Project Front End”.

  

  
  

• Nhấp vào biểu tượng khởi chạy màu xanh lam bên cạnh tên dịch vụ “Project Front End”.

  Bây giờ bạn sẽ thấy bản sao ứng dụng thị giác máy tính của riêng mình, sẵn sàng để sử dụng.

Hiểu kiến trúc của ứng dụng demo thị giác máy tính

Quy trình bao gồm nhiều dịch vụ, nhưng kiến trúc có thể được tóm tắt thành ba phân đoạn chính như được minh họa trong sơ đồ sau:

• Nhóm dịch vụ đầu tiên (1-3) khai thác các camera giao thông của London, xác định các phương tiện trên từng đoạn đường được giám sát.

  
  

• Nhóm dịch vụ thứ hai (4-7) lưu giữ tổng số loại phương tiện đang chạy ở mỗi đoạn đường và ghi lại số lượng phương tiện tối đa được phát hiện trong một khung nhất định. Dữ liệu này sau đó được lưu vào bộ đệm và chuyển đến dịch vụ API REST để bất kỳ dịch vụ bên ngoài nào muốn yêu cầu dữ liệu đó đều có thể truy cập được dữ liệu đó..

  
  

• Dịch vụ cuối cùng (8), lưu trữ giao diện người dùng thăm dò API REST để lấy số liệu thống kê tổng hợp về xe và lắng nghe trên Websocket để lấy dữ liệu thô trực tiếp từ tất cả các camera giao thông (khung hình video như vậy) xuất phát từ một chủ đề trong Quix. Sự kết hợp giữa dữ liệu được thăm dò và thời gian thực này được sử dụng để trực quan hóa mức độ giao thông trên bản đồ Luân Đôn.

  
  

Tôi sẽ không đi sâu vào chi tiết cụ thể của từng dịch vụ vì tài liệu đã làm rất tốt điều đó rồi. Nhưng nếu bạn muốn xem cách chúng hoạt động thì đây là một số thông tin tham khảo có liên kết đến tài liệu.

Tham khảo dịch vụ

Nếu nhấp vào tên dịch vụ, bạn có thể thấy dịch vụ thực tế đang chạy trong môi trường chỉ đọc Quix, bao gồm nhật ký thời gian chạy và dòng dữ liệu.

Điều tôi muốn tập trung ở đây là chỉ cho bạn cách tùy chỉnh dự án theo yêu cầu của riêng bạn .

Tùy chỉnh dự án

Để giúp bạn tùy chỉnh dự án, tôi sẽ chỉ cho bạn cách thực hiện một thay đổi nhỏ đối với logic tổng hợp ở mặt sau và hiển thị thông tin mới đó ở mặt trước.

Sau đó, tôi sẽ chỉ cho bạn một số tài nguyên bên ngoài sẽ giúp bạn thực hiện các nhiệm vụ mạnh mẽ hơn như đếm xe và theo dõi đối tượng. Nhưng trước tiên chúng ta cần thực hiện một chút công việc quản trị, chẳng hạn như thêm các bí mật ứng dụng mới.

Thêm thông tin xác thực API của riêng bạn và cập nhật bí mật

Mẫu dự án được định cấu hình với một số thông tin xác thực mặc định nhưng bạn sẽ cần thay đổi chúng để bản sao dự án của bạn hoạt động. Bạn sẽ cần xác định từng thông tin xác thực này là bí mật trong dự án của mình. Những bí mật như sau.

• Mã thông báo mang để giao diện người dùng giao tiếp với trung tâm SignalR trong Quix (khóa bí mật: ' bearerToken ')

• Khóa API Tfl của bạn (khóa bí mật: ' tfl_api_key ')

  
  

Định cấu hình mã thông báo mang cho Giao diện người dùng

Giao diện người dùng sử dụng thư viện máy khách SignalR để liên lạc với Quix (thông qua API Websockets ) để truy xuất và hiển thị dữ liệu từ mặt sau. API này yêu cầu mã thông báo mang để xác thực ứng dụng khách.

Đối với hướng dẫn này, bạn sẽ tạo mã thông báo truy cập cá nhân Quix để sử dụng làm mã thông báo mang của mình. Sau đó, bạn sẽ tạo một bí mật để lưu trữ mã thông báo này trong môi trường của mình (vâng, điều này hơi phức tạp nhưng bạn chỉ phải thực hiện một lần).

#Nhận mã thông báo truy cập cá nhân

Đây là cách bạn nhận được mã thông báo truy cập cá nhân trong Quix.

• Mở menu hồ sơ của bạn ở trên cùng bên phải và chọn Mã thông báo truy cập cá nhân .

  

  
  

• Trong hộp thoại xuất hiện, hãy nhấp vào Tạo mã thông báo và dán mã thông báo truy cập cá nhân của bạn vào sổ ghi chú hoặc bất kỳ vị trí lưu trữ tạm thời nào khác—bạn sẽ cần mã thông báo đó cho bước tiếp theo.

Thêm mã thông báo truy cập cá nhân của bạn vào bí mật

Trong cổng Quix, mở trang Ứng dụng và nhấp vào Giao diện người dùng Sentiment Demo để mở Quix IDE.

• Trong phần Biến (dưới cùng bên trái), nhấp vào Quản lý bí mật .

• Trong thanh bên xuất hiện, hãy nhấp vào + Bí mật mới và nhập “ bearerToken ” làm Khóa bí mật.

• Trong cột “Mặc định” và “Hướng dẫn”, hãy dán Mã thông báo truy cập cá nhân mà bạn đã tạo ở bước trước làm giá trị trong mỗi ô.

  

  
  

Thêm khóa API tfl của bạn vào bí mật

Giả sử bạn đã đăng ký với cổng API Tfl, trước tiên bạn cũng cần thêm khóa API Tfl của riêng mình làm bí mật.

• Để thêm bí mật, cần thực hiện chính xác các bước tương tự như phần trước, nhưng lần này thêm bí mật bằng khóa “ tfl_api_key ”.

Cập nhật phần cuối để có được số lượng phương tiện tối đa được nhìn thấy trên khắp Luân Đôn

Hiện tại, bạn chỉ có thể xem số lượng phương tiện tối đa được quan sát trên mỗi camera trong 24 giờ qua. Ví dụ: hãy kiểm tra dữ liệu được hiển thị bên dưới khung video này được lấy từ camera ở Kings Cross và Swinton Street

• Hiện tại, nó cho rằng có 5 chiếc xe trong khung.
• Tuy nhiên, số lượng xe nhiều nhất mà camera từng quan sát được (trong cùng một khung hình) là 11 xe.

  • Chúng tôi không biết _khi nào_cụm 11 phương tiện đó được quan sát, chỉ là việc quan sát được thực hiện vào khoảng thời gian nào đó trong 24 giờ qua.

    
    

Nhưng sẽ rất thú vị nếu xem cùng một dữ liệu cho toàn bộ London phải không? Tức là tổng số lượng phương tiện tối đa được camera của London quan sát được tại một thời điểm là bao nhiêu? Và số lượng xe buýt tối đa được quan sát bởi tất cả các camera là bao nhiêu?

Để trả lời những câu hỏi này, chúng tôi muốn kết thúc với dữ liệu trông giống như thế này

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

Lưu ý rằng chúng tôi không nói về tổng số phương tiện ở đây (tôi sẽ đề cập đến vấn đề đó sau), chỉ là ảnh chụp nhanh về hầu hết các phương tiện mà camera giao thông của London đã quan sát được trong 24 giờ qua.

Để có được dữ liệu này, bạn cần thực hiện những thay đổi sau

• Nhận mức tối đa cho từng loại phương tiện được quan sát trong 24 giờ qua (không chỉ tất cả các phương tiện).

• Lưu trữ mức tối đa mới nhất, tổng hợp tất cả chúng (trên tất cả các máy ảnh).

• Liên tục làm mới tổng hợp khi các camera khác nhau quan sát thấy mức tối đa mới.

  
  

Sau đó, bạn đang thực hiện hiển thị dữ liệu ở giao diện người dùng để nó trông giống như thế này:

Tôi đã tạo một số mã cho việc này rồi, nhưng trước khi kiểm tra nó, bạn sẽ cần một nơi để lưu trữ các tập hợp mới khi chúng xuất hiện. Trong ví dụ này, tôi sẽ chỉ cho bạn cách sử dụng một chủ đề kafka mới để lưu trữ dữ liệu.

Thêm chủ đề “max-vehicles-agg” mới

Bạn không hoàn toàn chắc chắn chủ đề là gì? Tài liệu Apache Kafka là điểm khởi đầu tốt, nhưng về bản chất, các chủ đề được mô tả tương tự như một thư mục trong hệ thống tệp và các sự kiện (ở dạng thông báo) là các tệp trong thư mục đó. Bạn sẽ tìm hiểu cách tạo một cái trong Quix UI—đây là một quy trình rất đơn giản.

Để tạo chủ đề trong Cổng thông tin Quix, hãy làm theo các bước sau:

• Trong Cổng thông tin Quix, mở trang Chủ đề và nhấp vào Thêm mới ở góc trên cùng bên phải.

• Trong hộp thoại xuất hiện, hãy nhập tên chẳng hạn như “ max-vehicles-agg ”, giữ nguyên cài đặt mặc định và nhấp vào Xong .

  Bây giờ, bạn cần cập nhật mã ở phía sau để viết chủ đề này. Dịch vụ mà bạn cần thay đổi có tên là “ Max Vehicle Window ”. Đó là một dịch vụ Python tổng hợp dữ liệu bằng thư viện Quix Streams và Pandas Python.

  
  

  
  

Khi chỉnh sửa dịch vụ nói chung, bạn luôn có hai lựa chọn.

• Chỉnh sửa và kiểm tra IDE cục bộ của bạn, sau đó cam kết và đẩy các thay đổi của bạn vào repo phân nhánh của bạn.

• Chỉnh sửa và kiểm tra trong Quix IDE trực tuyến.

  
  

Quix IDE có thể nhanh hơn một chút vì tất cả các phần phụ thuộc đều được cài đặt cho bạn và bạn không phải thiết lập môi trường ảo mới. Nó cũng tự động đẩy các thay đổi của bạn, điều này có thể tăng tốc mọi thứ lên một chút. Trong ví dụ này, tôi sẽ sử dụng Quix IDE.

Cập nhật dịch vụ max xe để tổng hợp dữ liệu cho tất cả các camera

Để tiết kiệm thời gian, tôi đã tạo một số mã cho việc này rồi, vì vậy tất cả những gì bạn cần làm là dán mã đó vào tệp liên quan.

Để chỉnh sửa dịch vụ Max Vehicle Window:

• Điều hướng đến Ứng dụng và nhấp vào Cửa sổ xe tối đa để mở Quix IDE.

  
  

  Lưu ý, trong giao diện người dùng Quix, cơ sở mã cho mỗi dịch vụ được gọi là “ứng dụng” nhưng trên thực tế, đó là một thư mục độc lập lưu trữ mã cho một dịch vụ cụ thể (tất cả đều hoạt động cùng nhau để cung cấp năng lượng cho ứng dụng thị giác máy tính) .

  
  

• Nếu nó chưa mở, hãy nhấp vào main.py trong menu tệp bên trái để mở nó trong Quix IDE.

  
  

• Trong một cửa sổ khác, hãy mở tệp này từ kho lưu trữ hướng dẫn của chúng tôi , sau đó sao chép và dán mã, thay thế tất cả mã hiện có. Nhận xét về mã sẽ giúp bạn hiểu những thay đổi tôi đã thực hiện.

  
  

Mã mới dự kiến sẽ có một biến môi trường mới có tên là “ output2 ” lưu trữ tên của chủ đề đầu ra mới mà bạn đã tạo trước đó, vì vậy hãy tạo biến mới đó.

• Trong phần Biến , nhấp vào +Thêm để thêm biến môi trường mới,
• Trong hộp thoại xuất hiện, chọn Chủ đề đầu ra làm loại biến, đặt tên biến là “output2” và chọn chủ đề bạn đã tạo làm giá trị mặc định (ví dụ: “ max-vehicles-agg ”)

Bây giờ, bạn chỉ cần lưu và triển khai các thay đổi của mình.

• Để lưu các thay đổi của bạn, hãy nhấp vào Cam kết .

  
  

• Trước khi triển khai lại, bạn nên gắn thẻ bản sửa đổi để dễ dàng biết phiên bản mã mà triển khai đang sử dụng.

  • Gắn thẻ cam kết bằng cách nhấp vào biểu tượng thẻ và đặt tên cho nó… đại loại như “NewAggregation”.

  • Nếu bạn muốn kiểm tra kỹ xem mã mới có hoạt động hay không, hãy nhấp vào Chạy ở phía trên bên phải.

    
    

• Để triển khai lại dịch vụ, hãy mở danh sách triển khai thả xuống ở trên cùng bên phải và chọn “ Chỉnh sửa triển khai hiện có ” rồi nhấp vào “ Triển khai lại ”.

  

  
  

  Để kiểm tra chủ đề, hãy mở Cổng thông tin Quix, điều hướng đến trang Chủ đề và nhấp vào chủ đề “ max-vehicles-agg ” mà bạn đã tạo trước đó.

  
  

• Mỗi chủ đề có một chế độ xem được gọi là “chế độ xem trình khám phá dữ liệu” cho phép bạn kiểm tra các thông báo chuyển qua một chủ đề.

  

  
  

Bây giờ bạn sẽ thấy một luồng đang hoạt động trong phần “ CHỌN STREAM ”.

• Chọn luồng “ tổng hợp_data ” (hoặc bất cứ thứ gì nó được gọi)

• Sau đó chọn tất cả các tham số có sẵn trong phần CHỌN THAM SỐ… .

• Cuối cùng, chọn chế độ xem Bảng để bạn có thể xem dữ liệu đã chọn của mình.

  
  

Lưu ý rằng dữ liệu mới có thể không xuất hiện ngay lập tức vì dịch vụ Nguồn cấp dữ liệu máy ảnh TFL có bộ hẹn giờ ngủ thay đổi để tránh đạt đến giới hạn tốc độ của API TfL. Bạn có thể định cấu hình nó trong biến môi trường “sleep_interval”. Tại thời điểm viết bài, nó được đặt mặc định là 60 giây.

Nếu kiểm tra nhật ký triển khai Nguồn cấp dữ liệu máy ảnh TFL , bạn sẽ biết thời điểm bộ hẹn giờ này được kích hoạt. Khi bạn thấy dữ liệu quay trở lại, bạn có thể an toàn quay lại và kiểm tra chủ đề của mình

Cập nhật giao diện người dùng để hiển thị bản đồ và các tập hợp mới

Nếu bạn thấy phiền về việc thay đổi mã giao diện người dùng, bạn có thể bỏ qua phần này. Quix chủ yếu là một công cụ phụ trợ nhưng chúng tôi đã thêm thành phần giao diện người dùng để bạn tạo một ứng dụng nhỏ đầy đủ chức năng. Trong phần này, bạn sẽ cập nhật giao diện người dùng để hiển thị các tập hợp.

Hiển thị dữ liệu tổng hợp mới ở giao diện người dùng

Bây giờ, hãy cập nhật dịch vụ giao diện người dùng để bao gồm các tập hợp mới mà chúng tôi đã tạo ở phần phụ trợ. Xin nhắc lại, đây là giao diện khi bạn hoàn tất.

Nó không đẹp nhưng nó cung cấp cho chúng ta thông tin chúng ta cần. Để cập nhật giao diện người dùng, bạn cần chỉnh sửa các tệp sau:

• ' app.component.ts ' quản lý việc đăng ký dữ liệu cho giao diện người dùng:

  <repo_root>/TfL xử lý hình ảnh UI/src/app/app.comComponent.ts

  
  

• ' app.component.html ' xác định bố cục thông tin trên trang. <repo_root>/TfL xử lý hình ảnh UI/src/app/app.comComponent.html

  
  

Hãy bắt đầu với app.component.ts . Trong Cổng thông tin Quix, điều hướng đến Ứng dụng và nhấp vào Giao diện người dùng xử lý hình ảnh TfL (được triển khai dưới dạng “Giao diện người dùng dự án”) để mở Quix IDE.

Cập nhật đăng ký dữ liệu

Ở đây, chúng ta sẽ hack một chút và mã hóa cứng các tài liệu tham khảo chủ đề. Trong quá trình sản xuất, điều này cần được xử lý bằng các biến, nhưng nó làm cho bản demo đơn giản hơn.

Trong phần Tệp ứng dụng , hãy mở ./src/app/app.component.ts .

Xác định vị trí khối sau (sau dòng 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', '*', '*');

Và dòng bổ sung sau bên dưới khối:

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

Thao tác này sẽ bắt đầu đăng ký chủ đề và đọc tất cả tham số trong tin nhắn (parameterData là một loại dữ liệu cụ thể trong API Quix và thường bao gồm dữ liệu số.)

Tiếp theo, tìm dòng 'selectedMarker: Marker | undefined; ' (dòng 43 hoặc gần đó) và thêm dòng mới sau vào bên dưới nó.

 latestMessageMaxAgg: ParameterData | undefined;

Dòng này khởi tạo một biến mới mà bạn sẽ sử dụng để lưu trữ dữ liệu từ các tin nhắn.

Bây giờ, hãy gán dữ liệu cho biến bất cứ khi nào phát hiện thấy tin nhắn mới.

Đầu tiên, xác định vị trí khối sau (sau dòng 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]; }

Thêm khối sau bên dưới nó:

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

Bây giờ, nếu tin nhắn đến từ một chủ đề có tên ' max-vehicles-agg ', giao diện người dùng sẽ lấy tất cả dữ liệu trong tin nhắn và đặt nó vào biến latestMessageMaxAgg .

Bây giờ chúng ta có quyền truy cập vào biến, hãy hiển thị nội dung của nó ở giao diện người dùng.

Cập nhật mẫu giao diện người dùng

Bây giờ, cuối cùng đã đến lúc hiển thị dữ liệu mà chúng tôi đã cung cấp cho giao diện người dùng.

• Trong phần Tệp ứng dụng , hãy mở ./src/app/app.component.html .

Xác định vị trí div sau hiển thị thang mật độ lưu lượng truy cập có màu (sau dòng 85):

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

Ngay phía trên nó, thêm khối mã sau.

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

Thao tác này trích xuất dữ liệu từ biến latestMessageMaxAgg mà bạn đã tạo trước đó và hiển thị dữ liệu từ tin nhắn gần đây nhất (được chọn thông qua “ at(0) ” ). Nó cũng làm cho dữ liệu trở thành tùy chọn để bạn không nhận được thông báo lỗi dữ liệu bị thiếu.

Nếu trước tiên bạn muốn kiểm tra nó trên máy cục bộ của mình, bạn có thể lấy những thay đổi bạn đã thực hiện trong Quix IDE (Quix tự động đẩy chúng) và làm theo hướng dẫn trong dịch vụ giao diện người dùng README .

• Để triển khai lại dịch vụ giao diện người dùng xử lý hình ảnh TfL , hãy làm theo quy trình tương tự như bạn đã làm khi triển khai lại dịch vụ xe tối đa .

  
  

Nếu có sự cố xảy ra, hãy nhớ rằng bạn có thể phải xóa dịch vụ và triển khai lại dịch vụ trước khi có thể thấy lỗi xuất hiện trong nhật ký.

Đếm xe trong khoảng thời gian dài hơn

Như bạn có thể nhận thấy, ứng dụng không thực sự đếm số xe theo thời gian mà chỉ đếm số lượng xe được quan sát trong bất kỳ khung hình video nhất định nào.

Điều này là do chúng tôi không sử dụng toàn bộ khả năng của YOLOv8. Chúng tôi chỉ đang sử dụng tính năng phát hiện đối tượng nhưng để đếm số xe chính xác, bạn sẽ cần sử dụng tính năng theo dõi đối tượng. Vấn đề là việc theo dõi đối tượng đòi hỏi nhiều bộ nhớ hơn, điều này không có trong gói Quix miễn phí. Bản demo này sử dụng mô hình YOLO “nano” nhỏ nhất nhưng có sẵn bốn kích thước khác, trong đó YOLOv8x là mạnh nhất. Nếu bạn sử dụng mô hình lớn hơn, bạn có thể nhận được kết quả tuyệt vời cho việc theo dõi và đếm xe.

Đây là ảnh chụp màn hình từ nỗ lực chạy nó trên máy cục bộ của tôi (với GPU tốt) trên nguồn cấp dữ liệu máy ảnh TfL.

Tôi đã sử dụng YOLO kết hợp với một số thư viện khác (chẳng hạn như sự giám sát từ Roboflow) để đếm số phương tiện đi cả hai chiều dọc đường.

Để biết thêm thông tin về cách nhận được kết quả tương tự, hãy xem các tài nguyên sau:

• Theo dõi và đếm các đối tượng bằng YOLOv8 (roboflow.com)

  Một tài liệu cơ bản tuyệt vời về cách đếm xe bằng cách sử dụng thị giác máy tính bằng Notebook Jupyter.

  
  

• Phát hiện và đếm đối tượng YOLOv8 | của Dustin Liu | Tháng 9 năm 2023 | Nhà đầu tư theo hướng dữ liệu

  Hướng dẫn về phiên bản Streamlit được tối ưu hóa của Roboflow Notebook (được thảo luận trong bài viết được liên kết trước đó)—bạn cũng có thể dùng thử trực tuyến .

Phần kết luận

Kudos vì đã làm cho nó đến nay. Tôi hy vọng bạn có thể tùy chỉnh nó thành công. Nếu bạn gặp bất kỳ vấn đề nào, hãy nhớ đăng câu hỏi lên diễn đàn cộng đồng của chúng tôi và một trong số chúng tôi sẽ giải quyết ngay.

Như bạn có thể thấy, việc triển khai và chạy các ứng dụng phức tạp trong Quix khá đơn giản. Những bản demo này được thiết kế độc lập nên chúng tôi cũng lưu trữ giao diện người dùng. Tuy nhiên, trong kịch bản sản xuất, bạn có thể muốn chạy giao diện người dùng của mình ở một nơi khác. Điều Quix thực sự vượt trội là xử lý các luồng sự kiện và thực hiện các phép tính phức tạp một cách cực kỳ hiệu quả. Nó tận dụng các điểm mạnh của Apache Kafka để xử lý dữ liệu trên quy mô lớn đồng thời loại bỏ một số điểm yếu của nó (chẳng hạn như quản lý tài nguyên và độ phức tạp của cấu hình). Tất nhiên, nếu bạn đã có phiên bản Kafka của riêng mình hoặc đang sử dụng Confluent Cloud, bạn cũng có thể sử dụng phiên bản đó. Quix sẵn sàng giúp bạn sắp xếp và xử lý các luồng sự kiện của mình trong thời gian thực.

• Để tìm hiểu thêm về cách quản lý môi trường Quix trong Quix, hãy xem phần liên quan trong tài liệu Quix .
• Để xem một ứng dụng demo đầy đủ chức năng khác, tại sao hãy thử bản demo ứng dụng trò chuyện của chúng tôi sử dụng thư viện Hugging Face Transformers để thực hiện phân tích cảm xúc trực tiếp trên tin nhắn trò chuyện.

Bởi Tomáš Neubauer (CTO và Đồng sáng lập Quix)