Quix'in Görüntü İşleme Şablonunu Kullanarak Gerçek Zamanlı Trafik İzleme Uygulaması Nasıl Oluşturulur ve Dağıtılır

Bilgisayarlı görmeyle denemeler yapmak istediyseniz ancak karmaşık bir geliştirme ortamı kurmaya zamanınız yoksa bu eğitim tam size göre. Bilgisayar görüşü belirli durumlarda, özellikle de sayma söz konusu olduğunda, fiziksel sensörlerin yerine mükemmel bir alternatif olabilir.

Bu eğitimde, araçları sayarak mevcut sıkışıklığı ölçmek için Londra'nın trafik kameralarını kullanan, yayınladığımız bir demo uygulamasını size anlatacağım. Projeyi çoğaltmanıza yardımcı olmak için oluşturduğumuz yeniden kullanılabilir bir proje şablonunu temel alır. Daha sonra size, projenizin kendi kopyasını oluşturmak için bu şablonu nasıl kullanacağınızı göstereceğim ve bunu, olay akışı uygulamalarını geliştirmeye ve çalıştırmaya yönelik bir araç olan Quix'te çalışır duruma getireceğim.

Bilgisayarla görme uygulamasının demo versiyonumuz ayrıca Confluent Cloud'da barındırılan bir mesaj aracısını kullanır (hizmet olarak tamamen yönetilen Apache Kafka), ancak öğreticiyi takip etmek için bir Confluent Cloud hesabına sahip olmak zorunlu değildir.

İşte nihai sonucun nasıl görünmesi gerektiği:

Bu demo sürümünü canlı olarak aşağıdaki adreste deneyebilirsiniz: https://app-demo-computervisiondemo-prod.deployments.quix.ai/

Bu uygulama ne yapıyor?

Uygulama, araçları saymak ve trafik sıkışıklığı düzeylerini tahmin etmek için Londra'nın trafik kameralarından ("Jam Cams" olarak da bilinir) canlı yayınları kullanıyor. Daha sonra Londra haritası üzerinde tıkanıklığın nerede meydana geldiğini göstermek için görsel göstergeler kullanıyor. Araçlar, görüntülerdeki nesne tespiti için (sensörler veya GPS verileri yerine) bir ML modeli kullanılarak sayılır.

Nesne algılama modeli ayrıca araçları farklı türlere göre sınıflandırır ve verileri bu türlere göre filtreleyebilirsiniz.

Örneğin, yalnızca tüm trafik kameralarının o anda tespit ettiği otobüs sayısını görmek için "Nesne seç" açılır menüsünü kullanabilirsiniz.

Uygulamanın gün boyunca gözlemlenen tüm araçları, yalnızca o anki saatte saymadığını unutmayın (bu konuya daha sonra değineceğiz).

Sıkışıklığı belirlemek için neden nesne algılamayı kullanmalısınız?

Çünkü diğer yöntemler her zaman güvenilir değildir. Örneğin, 2020'de Berlin'de yaşayan bir sanatçı, bir el arabası ve 99 adet ikinci el telefondan başka bir şey olmadan Spree nehri üzerindeki ana köprülerden birinde "sanal" bir trafik sıkışıklığı yaratmayı başardı. Google Haritalar daha sonra görev bilinciyle bölgeyi haritada oldukça sıkışık olarak gösterdi.

Bu nedenle, GPS tabanlı tıkanıklık tahminlerini artırmak için sıklıkla diğer veri türleri kullanılır. Buna tarihsel modeller, sensör verileri, planlı kapatmalara ilişkin belediye beslemeleri ve kullanıcılar tarafından bildirilen olaylar dahildir. Bununla birlikte, en güvenilir çapraz referanslardan biri, trafik kameralarından toplanan tıkanıklığın görsel olarak tanınmasıdır ( bir martının görüşü engellemediğini varsayarsak ).

Hatalı martılara rağmen, bilgisayar görüşü artık devlet kurumları tarafından trafik verilerini artırmak ve trafik hacmi tahminlerinin doğruluğunu artırmak için kullanılıyor. Örneğin, geçen yıl 22 Eylül'de Kanada İstatistik Kurumu, Kanada trafik kamerasından araç sayımlarını periyodik olarak çıkarmak için bilgisayar görüşü tabanlı bir sistem sunan "Trafik kamerası görüntülerinden trafik hacmi tahmini: Gerçek zamanlı trafik veri akışlarına doğru " başlıklı bir makale yayınladı. görüntüler.

Artık Quix'te böyle bir şeyi denemek için araştırma bilim adamlarından oluşan bir ekibe ihtiyacınız yok. Yetenekli herhangi bir geliştirici bunu deneyebilir ve birkaç dakika içinde çalışır duruma gelebilir. Ancak bu durumda 5 dakika yerine 60 dakikadan bahsediyoruz. Sonuçta büyük bir proje!

Projeyi yeniden oluşturmak için iki şeye ihtiyacınız olacak:

• Traffic for London API'sine yönelik bir API anahtarı (daha fazla ayrıntı için bu projenin belgelerine bakın)

• Ücretsiz bir Quix hesabı — henüz bir hesap oluşturmadıysanız hemen kaydolabilirsiniz (mevcut bir Google, GitHub veya Microsoft hesabıyla birkaç tıklamayla bunu yapabilirsiniz).

  
  

Projenin kendi kopyasını alma

Projenin (ve demo uygulamalarımızdan herhangi birinin) bir kopyasını almanın birkaç önemli adımı vardır:

1. GitHub'daki bilgisayar görüşü demo havuzumuzu çatallayın.

   Bu, proje sürümünüzü özelleştirmenizi kolaylaştıracak ancak yine de yukarı yöndeki iyileştirmelerden faydalanmanızı sağlayacaktır.

   
   

2. Quix Cloud'da bir proje oluşturun , ardından yeni bir geliştirme ortamı oluşturun ve bunu çatalınıza bağlayın.

   Bu, uygulamayı Quix Cloud'da kendi hesabınız altında çalıştırmanıza ve güncellemenize olanak tanır.

   
   

3. TfL Kamera API'si ve Google Haritalar gibi harici hizmetlerin kimlik bilgilerini güncelleyin.

   API anahtarları gibi sırlar proje kopyalarına aktarılmadığından bunları kendiniz eklemeniz gerekir.

   
   

Temel bilgileri oluşturduktan sonra kodun ayrıntılarına ineceğiz ve onu nasıl uyarlayabileceğinize bakacağız.

Bilgisayar görüşü demo deposunu çatallamak

Kodu anlamak için öncelikle Görüntü İşleme Demo deposunu çatallayalım. Klonlamak yerine neden çatallanmalı? Çünkü daha sonra bu kodu kendi Quix ortamınıza getireceksiniz ve çatal kullanmak ortamınızı senkronize tutmanın en kolay yoludur. Ayrıca proje şablonunda yaptığımız herhangi bir yukarı yönlü değişikliği de alabileceksiniz.

Basitlik adına, zaten bir GitHub hesabınız olduğunu varsayıyorum. Ancak bu proje için belirli bir Git kullanıcısı oluşturmak isteyebilirsiniz. Daha sonra depoya Quix SSH erişimi vereceksiniz ve ayrı bir kullanıcıya sahip olmak, Quix'in olması gerekenden daha fazla erişime sahip olmamasını sağlamanın iyi bir yoludur.

• GitHub'ı web tarayıcınızda açın, Görüntü İşleme Demosu deposuna gidin ( https://github.com/quixio/computer-vision-demo ) ve Çatal'a tıklayın.

  • Tüm dalları çatalladığınızdan emin olun (GitHub'ın Çatal sihirbazında “ Yalnızca ana dalı kopyala ” seçimini kaldırın). Çünkü deneme hesabı kullanıyorsanız Quix Cloud'da geliştirme ortamı oluşturmak için alternatif bir şubeye ihtiyacınız olacak.

    
    

Quix'te yeni bir geliştirme ortamı oluşturma

Quix'te bir ortam oluşturabilmeniz için öncelikle bir proje oluşturmanız gerekir. Proje oluşturma sihirbazı sırasında sizden bir başlangıç ortamı eklemeniz istenecektir. İşleri öğrendikten sonra daha sonra daha fazla ortam ekleyebilirsiniz.

Bir proje oluşturmak ve bir ortamı çatallı deponuza bağlamak için şu adımları izleyin:

• Quix'te oturum açın ve + Yeni proje 'ye tıklayın.

  
  

• Projenize " Bilgisayar görüş demom " (veya benzer bir ad) adını verin ve Kendi Git deponuza bağlanın'ı seçin.

  
  

• Bir sonraki ekranda Quix SSH anahtarını deponuza nasıl ekleyeceğinize dair bazı talimatlar görmelisiniz; bu talimatları izleyin. Bu anahtarı eklemek Quix'in deponuzu Quix ortamıyla otomatik olarak senkronize etmesini sağlar

  

  
  

• Bir sonraki ekranda bir ortam oluşturmanız istenecektir; ortamlar farklı dallardan paralel olarak kod dağıtmanıza olanak tanır.

  Ortam adı için ' tutorial ' girin ve çatallı deponuzdan ' tutorial ' dalını seçin.

  

  
  

• Proje oluşturma sihirbazındaki sonraki adımlarla devam edin.

  
  

  Sihirbaz size hangi mesaj aracısını kullanmak istediğinizi soracaktır. Projenin orijinal sürümü Confluent Cloud'u mesaj aracısı olarak kullanıyor. Confluent Cloud‌'u kullanmak istiyorsanız önce bir hesabınızın olması gerekir; bu durumda Confluent Cloud'unuza Bağlan'ı seçip kimlik bilgilerinizi girmelisiniz.

  

  
  

  Ancak Confluent Cloud'u kullanmak zorunlu değildir. Bu eğitim için varsayılan Quix mesaj aracısını da kullanabilirsiniz.

  
  

• Sihirbazı tamamladıktan sonra Pipeline sayfasına gidin (zaten açık değilse). Quix ortamınızın kaynak deposuyla senkronize olmadığına dair standart bir uyarı göreceksiniz (çünkü ortam boş başlıyor).

  

  
  

• Çatallı deponuzdan en son kodu almak için Ortamı eşitle düğmesini tıklayın. Not : senkronizasyon işlemi iki yönlüdür, dolayısıyla ortamınızdaki bazı kodları değiştirirseniz, onu da kaynak deposuna geri itecektir.

  
  

Umarım senkronizasyon başarılı olmuştur. İşe yaradıysa, tüm hizmetlerinizin Pipeline sayfasında oluşturulmaya başladığını görmelisiniz.

Oldukça az sayıda hizmet var, bu nedenle tüm hizmetlerin oluşturulup çalışmaya başlaması birkaç dakika sürecek.

S3 hizmetinin varsayılan olarak durdurulduğunu unutmayın çünkü bu hizmetin çalışması için kendi AWS hesabınıza ihtiyacınız olacaktır. Ancak bu eğitim için zaten gerekli değil.

• İşlem Hattı sayfasında boru hattının tamamını görmek için tuvalin boş bir kısmında herhangi bir yere tıklayıp sürükleyin ve sağa kaydırın veya Ctrl / ⌘ tuşunu basılı tutarak uzaklaştırmak için fare tekerleğinizi kullanın.

  
  

• “Proje Ön Uç” adlı bir hizmeti görene kadar kaydırın.

  

  
  

• “Proje Ön Uç” hizmet adının yanındaki mavi başlatma simgesine tıklayın.

  Artık bilgisayarla görme uygulamasının kendi kopyasını oynamaya hazır olarak görmelisiniz.

Bilgisayar görüşü demo uygulamasının mimarisini anlama

Boru hattı birçok hizmetten oluşur ancak mimari, aşağıdaki diyagramda gösterildiği gibi üç ana bölüme ayrılabilir:

• İlk hizmet grubu (1-3), izlenen her yol bölümündeki araçları tespit ederek Londra'nın trafik kameralarından yararlanıyor.

  
  

• İkinci hizmet grubu (4-7), her yol bölümündeki araç türlerinin toplamını tutar ve belirli bir çerçevede tespit edilen maksimum araç sayısını kaydeder. Bu veriler daha sonra ara belleğe alınır ve bir REST API hizmetine iletilir, böylece veriler, talep etmek isteyen herhangi bir harici hizmet tarafından erişilebilir olur.

  
  

• Son hizmet (8), toplu araç istatistikleri için bir REST API'yi yoklayan ve Quix'teki bir konudan gelen tüm trafik kameralarından (video kareleri gibi) canlı ham veriler için bir Websocket'te dinleyen bir ön ucu barındırır. Anketli ve gerçek zamanlı verilerin bu kombinasyonu, Londra haritasındaki trafik seviyelerini görselleştirmek için kullanılıyor.

  
  

Bireysel hizmetlerin özellikleri hakkında çok fazla ayrıntıya girmeyeceğim çünkü belgeler zaten bu konuda iyi bir iş çıkarıyor. Ancak nasıl çalıştıklarına bir göz atmak isterseniz burada belgelere bağlantılar içeren bazı referans bilgileri bulabilirsiniz.

Servis Referansı

Hizmet adına tıklarsanız, çalışma zamanı günlükleri ve veri kökeni dahil olmak üzere Quix salt okunur ortamında çalışan gerçek hizmeti görebilirsiniz.

Burada odaklanmak istediğim şey , projeyi kendi gereksinimlerinize göre nasıl özelleştirebileceğinizi göstermektir.

Projeyi özelleştirme

Projeyi özelleştirmenize yardımcı olmak için, arka uçtaki toplama mantığında nasıl küçük bir değişiklik yapacağınızı ve bu yeni bilgiyi ön uçta nasıl oluşturacağınızı göstereceğim.

Bundan sonra sizi araç sayma ve nesne takibi gibi daha güçlü görevleri gerçekleştirmenize yardımcı olacak bazı dış kaynaklara yönlendireceğim. Ancak önce yeni uygulama sırları eklemek gibi bir miktar yönetici yapmamız gerekiyor.

Kendi API kimlik bilgilerinizi ekleme ve gizli dizileri güncelleme

Proje şablonu bazı varsayılan kimlik bilgileriyle yapılandırılmıştır ancak proje kopyanızın çalışması için bunları değiştirmeniz gerekecektir. Bu kimlik bilgilerinin her birini projenizde bir sır olarak tanımlamanız gerekecektir. Sırları aşağıdaki gibidir.

• Quix'teki SignalR hub'ıyla iletişim kurmak için ön uç için bir taşıyıcı belirteci (gizli anahtar: ' bearerToken ')

• Tfl API anahtarınız (gizli anahtar: ' tfl_api_key ')

  
  

Ön Uç için taşıyıcı jeton yapılandırma

Ön uç, arka uçtan veri almak ve işlemek amacıyla Quix ile iletişim kurmak ( Websockets API aracılığıyla) için SignalR istemci kitaplığını kullanır. Bu API, istemci uygulamalarının kimliğini doğrulamak için bir taşıyıcı belirteci gerektirir.

Bu eğitim için taşıyıcı jetonunuz olarak kullanmak üzere bir Quix kişisel erişim jetonu oluşturacaksınız. Daha sonra bu belirteci ortamınızda saklamak için bir sır oluşturacaksınız (evet, bu biraz karışık ama bunu yalnızca bir kez yapmanız gerekiyor).

#Kişisel erişim belirteci alma

Quix'te kişisel erişim jetonunu nasıl alacağınız aşağıda açıklanmıştır.

• Sağ üstteki profil menünüzü açın ve Kişisel Erişim Jetonları'nı seçin.

  

  
  

• Görüntülenen iletişim kutusunda Belirteç oluştur'a tıklayın ve kişisel erişim belirtecinizi not defterine veya başka bir geçici depolama konumuna yapıştırın; bir sonraki adımda buna ihtiyacınız olacak.

Kişisel erişim belirtecinizi gizli dizilere ekleme

Quix portalında Uygulamalar sayfasını açın ve Quix IDE'yi açmak için Sentiment Demo Kullanıcı Arayüzü'ne tıklayın.

• Değişkenler bölümünde (sol altta) Gizli bilgiler yönetimi'ni tıklayın.

• Görüntülenen kenar çubuğunda + Yeni sır seçeneğine tıklayın ve Gizli anahtar olarak “ bearerToken ” girin.

• “Varsayılan” ve “Eğitim” sütunlarına, önceki adımda oluşturduğunuz Kişisel Erişim Simgenizi her hücreye değer olarak yapıştırın.

  

  
  

Tfl API anahtarınızı gizli dizilere ekleme

Tfl API portalına kayıt olduğunuzu varsayarsak, öncelikle kendi Tfl API anahtarınızı da gizli olarak eklemeniz gerekir.

• Secret'ı eklemek için bir önceki bölümdeki adımların birebir aynısını takip etmeniz gerekiyor ancak bu sefer ' tfl_api_key ' anahtarı ile bir secret ekleyin.

Londra genelinde görülen toplam maksimum araç sayısını elde etmek için arka uç güncelleniyor

Şu anda yalnızca son 24 saatte kamera başına gözlemlenen maksimum araç sayısını görebilirsiniz. Örneğin Kings Cross ve Swinton Caddesi'ndeki kameradan alınan bu video karesinin altında görüntülenen verileri inceleyelim.

• Şu anda çerçevede 5 araç olduğu düşünülüyor.
• Ancak kameranın şimdiye kadar gözlemlediği (aynı karede) en fazla araç 11 araçtır.

  • 11 araçtan oluşan bu kümenin ne zaman gözlemlendiğini bilmiyoruz, sadece gözlemin son 24 saatte yapıldığını biliyoruz.

    
    

Peki Londra'nın tamamı için aynı verileri görmek ilginç olmaz mıydı? Yani herhangi bir zamanda Londra kameraları tarafından gözlemlenen toplam maksimum araç sayısı nedir? Peki tüm kameralar tarafından gözlemlenen maksimum otobüs sayısı nedir?

Bu soruları cevaplamak için şunun gibi bir veri elde etmek istiyoruz

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

Burada toplam araç sayısından bahsetmediğimizi unutmayın (bu konuya daha sonra değineceğim), yalnızca Londra trafik kameralarının son 24 saat içinde gözlemlediği çoğu aracın anlık görüntüsü.

Bu verileri almak için aşağıdaki değişiklikleri yapmanız gerekir

• Son 24 saat içinde gözlemlenen her araç türü için (sadece tüm araçlar için değil) maksimum değerleri alın.

• En son maksimumları saklayın ve hepsini (tüm kameralarda) bir araya getirin.

• Farklı kameralar tarafından yeni maksimumlar gözlemlendiğinde toplamayı sürekli olarak yenileyin.

  
  

Ardından, ön uçtaki verileri şöyle görünecek şekilde oluşturacaksınız:

Bunun için zaten bazı kodlar oluşturdum, ancak test etmeden önce, yeni toplamaları geldikçe depolayacak bir yere ihtiyacınız olacak. Bu örnekte, depolamak için yeni bir kafka konusunu nasıl kullanacağınızı göstereceğim. veri.

Yeni bir "max-vehicles-agg" konusu ekleme

Bir konunun ne olduğundan tam olarak emin değil misiniz? Apache Kafka belgeleri iyi bir başlangıç noktasıdır, ancak özünde konular bir dosya sistemindeki bir klasöre benzer şekilde tanımlanır ve olaylar (mesaj biçiminde) bu klasördeki dosyalardır. Quix kullanıcı arayüzünde nasıl bir tane oluşturulacağını öğreneceksiniz; bu çok basit bir işlemdir.

Quix Portal'da konu oluşturmak için şu adımları izleyin:

• Quix Portal'da Konular sayfasını açın ve sağ üst köşedeki Yeni ekle'ye tıklayın.

• Açılan iletişim kutusunda “ max-vehicles-agg ” gibi bir ad girin, varsayılan ayarları olduğu gibi bırakın ve Bitti'ye tıklayın.

  Şimdi bu konuyu yazmak için arka uçtaki kodu güncellemeniz gerekecek. Değiştirmeniz gereken hizmete “ Max Araç Penceresi ” denir. Quix Streams ve Pandas Python kitaplıklarını kullanarak verileri toplayan bir Python hizmetidir.

  
  

  
  

Genel olarak hizmetleri düzenlerken her zaman iki seçeneğiniz vardır.

• Yerel IDE'nizi düzenleyin ve test edin, ardından değişikliklerinizi çatallanmış deponuza aktarın ve aktarın.

• Çevrimiçi Quix IDE'de düzenleyin ve test edin.

  
  

Quix IDE biraz daha hızlı olabilir çünkü tüm bağımlılıklar sizin için kurulur ve yeni bir sanal ortam kurmanıza gerek kalmaz. Ayrıca değişikliklerinizi otomatik olarak iletir, bu da işleri biraz hızlandırabilir. Bu örnek için Quix IDE'yi kullanacağım.

Tüm kameralara ilişkin verileri toplamak için maksimum araç hizmeti güncelleniyor

Zamandan tasarruf etmek için bunun için zaten bir kod oluşturdum, dolayısıyla tek yapmanız gereken onu ilgili dosyaya yapıştırmak.

Maksimum Araç Penceresi hizmetini düzenlemek için:

• Quix IDE'yi açmak için Uygulamalar'a gidin ve Maksimum Araç Penceresi'ne tıklayın.

  
  

  Quix kullanıcı arayüzünde, her hizmetin kod tabanına "uygulama" adı verilir, ancak gerçekte bu, belirli bir hizmetin kodunu saklayan bağımsız bir klasördür (hepsi bilgisayarlı görüntü uygulamasını güçlendirmek için birlikte çalışır). .

  
  

• Henüz açık değilse, Quix IDE'de açmak için soldaki dosya menüsünde main.py tıklayın.

  
  

• Başka bir pencerede, eğitim depomuzdaki bu dosyayı açın, ardından kodu kopyalayıp yapıştırın ve mevcut kodun tamamını değiştirin. Kod yorumları, hangi değişiklikleri yaptığımı anlamanıza yardımcı olacaktır.

  
  

Yeni kod, daha önce oluşturduğunuz yeni çıktı konusunun adını saklayan “ output2 ” adında yeni bir ortam değişkeninin olmasını bekliyor, o halde haydi o yeni değişkeni oluşturalım.

• Değişkenler bölümünde, yeni bir ortam değişkeni eklemek için +Ekle'ye tıklayın,
• Görüntülenen iletişim kutusunda değişken türü olarak Çıktı Konusu'nu seçin, değişkeni "output2" olarak adlandırın ve varsayılan değer olarak oluşturduğunuz konuyu seçin (örn. " max-vehicles-agg ")

Artık değişikliklerinizi kaydedip dağıtmanız yeterli.

• Değişikliklerinizi kaydetmek için Kabul Et'i tıklayın.

  
  

• Yeniden konuşlandırmadan önce, dağıtımın hangi kod sürümünü kullandığını kolayca anlayabilmek için düzeltmeyi etiketlemek iyi bir fikirdir.

  • Etiket simgesine tıklayarak taahhüdü etiketleyin ve ona bir ad verin… "Yeni Toplama" gibi bir şey.

  • Yeni kodun çalışıp çalışmadığını tekrar kontrol etmek istiyorsanız sağ üstteki Çalıştır'a tıklayın.

    
    

• Hizmeti yeniden dağıtmak için sağ üstteki dağıtım açılır menüsünü açın ve " Mevcut dağıtımı düzenle "yi seçin ve ardından " Yeniden konuşlandır "ı tıklayın.

  

  
  

  Konuyu incelemek için Quix Portalını açın, Konular sayfasına gidin ve daha önce oluşturduğunuz “ max-vehicles-agg ” konusuna tıklayın.

  
  

• Her konunun, bir konu boyunca akan mesajları incelemenize olanak tanıyan "veri gezgini görünümü" adı verilen bir görünümü vardır.

  

  
  

Artık “ AKIŞ SEÇİMİ ” bölümünde aktif bir akış görmelisiniz.

• " gregad_data " akışını (veya adı ne olursa olsun) seçin

• Daha sonra PARAMETRELERİ SEÇİN… bölümünde mevcut tüm parametreleri seçin.

• Son olarak, seçtiğiniz verileri görebilmeniz için Tablo görünümünü seçin.

  
  

TFL Kamera Yayını hizmetinin, TfL API'sinin hız sınırlarına ulaşmayı önlemek için değişken bir uyku zamanlayıcısı olması nedeniyle yeni verilerin hemen gelmeyebileceğini unutmayın. Bunu “sleep_interval” ortam değişkeninde yapılandırabilirsiniz. Yazma sırasında varsayılan olarak 60 saniyeye ayarlandı.

TFL Kamera Akışı dağıtımının günlüklerini incelerseniz bu zamanlayıcının ne zaman etkinleştirildiğini görmelisiniz. Verilerin tekrar geldiğini gördüğünüzde geri dönüp konunuzu kontrol etmenizde sakınca yoktur

Haritayı ve yeni toplamaları görüntülemek için ön uç güncelleniyor

Kullanıcı arabirimi kodunu değiştirme konusunda sıkıntı yaşıyorsanız bu bölümü atlayabilirsiniz. Quix temel olarak bir arka uç aracıdır ancak tamamen işlevsel bir mini uygulama oluşturabilmeniz için bir ön uç bileşeni ekledik. Bu bölümde, toplamaları görüntülemek için ön ucu güncelleyeceksiniz.

Yeni toplama verilerini ön uçta görüntüleyin

Şimdi UI hizmetini arka uçta oluşturduğumuz yeni toplamaları içerecek şekilde güncelleyelim. Bir hatırlatma olarak, işiniz bittiğinde nasıl görünmesi gerektiğini burada bulabilirsiniz.

Hoş değil ama bize ihtiyacımız olan bilgiyi veriyor. Kullanıcı arayüzünü güncellemek için aşağıdaki dosyaları düzenlemeniz gerekir:

• Ön uç için veri aboneliklerini yöneten ' app.component.ts ':

  <repo_root>/TfL görüntü işleme UI/src/app/app.component.ts

  
  

• Sayfadaki bilgilerin düzenini tanımlayan ' app.component.html '. <repo_root>/TfL görüntü işleme UI/src/app/app.component.html

  
  

app.component.ts ile başlayalım. Quix Portal'da Uygulamalar'a gidin ve Quix IDE'yi açmak için TfL görüntü işleme kullanıcı arayüzüne ("Proje Ön Uç" olarak dağıtılır) tıklayın.

Veri aboneliklerini güncelleme

Burada biraz hileli davranacağız ve konu referanslarını sabit kodlayacağız. Üretimde bunun değişkenlerle ele alınması gerekir, ancak bu demoyu daha basit hale getirir.

Uygulama dosyaları bölümünde ./src/app/app.component.ts dosyasını açın.

Aşağıdaki bloğu bulun (213. satırdan sonra):

 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', '*', '*');

Ve bloğun altında şu ekstra satır var:

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

Bu, konuya bir abonelik başlatacak ve mesajdaki tüm parametreleri okuyacaktır (parameterData, Quix API'sindeki belirli bir veri türüdür ve genellikle sayısal verilerden oluşur.)

Ardından 'selectedMarker: Marker | undefined; satırını bulun. 'selectedMarker: Marker | undefined; ' (satır 43 veya civarı) ve altına aşağıdaki yeni satırı ekleyin.

 latestMessageMaxAgg: ParameterData | undefined;

Bu satır, iletilerdeki verileri depolamak için kullanacağınız yeni bir değişkeni başlatır.

Şimdi yeni bir mesaj algılandığında veriyi değişkene atayalım.

Öncelikle aşağıdaki bloğu bulun (108. satırdan sonra):

 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]; }

Altına aşağıdaki bloğu ekleyin:

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

Artık mesaj ' max-vehicles-agg ' adlı bir konudan geliyorsa, ön uç mesajdaki tüm verileri alacak ve bunu latestMessageMaxAgg değişkenine koyacaktır.

Artık değişkene erişimimiz olduğuna göre, içeriğini ön uçta oluşturalım.

Kullanıcı arabirimi şablonunu güncelleme

Artık ön uç için kullanıma sunduğumuz verileri nihayet oluşturmanın zamanı geldi.

• Uygulama dosyaları bölümünde ./src/app/app.component.html dosyasını açın.

Renkli trafik yoğunluğu ölçeğini oluşturan aşağıdaki div'i bulun (85. satırdan sonra):

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

Hemen üstüne aşağıdaki kod bloğunu ekleyin.

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

Bu, daha önce oluşturduğunuz latestMessageMaxAgg değişkeninden verileri çıkarır ve en son iletideki verileri görüntüler (" at(0) " aracılığıyla seçilir). Ayrıca, veri eksik hata mesajı almamanız için verileri isteğe bağlı hale getirir.

Önce yerel makinenizde test etmek istiyorsanız, Quix IDE'de yaptığınız değişiklikleri alabilir (Quix bunları otomatik olarak iter) ve ön uç hizmeti README'deki talimatları takip edebilirsiniz.

• TfL görüntü işleme kullanıcı arayüzü hizmetini yeniden dağıtmak için, maksimum araç hizmetini yeniden dağıtırken yaptığınız işlemin aynısını izleyin.

  
  

Bir şeyler ters giderse, günlüklerde hata çıktısını görebilmeniz için hizmeti silip yeniden dağıtmanız gerekebileceğini unutmayın.

Araçların daha uzun sürelerde sayılması

Muhtemelen fark ettiğiniz gibi, uygulama aslında araçları zaman içinde saymıyor, yalnızca herhangi bir video karesinde gözlemlenen araç sayısını sayıyor.

Bunun nedeni YOLOv8'in tüm yeteneklerini kullanmıyor olmamızdır. Yalnızca nesne algılamayı kullanıyoruz, ancak araçları doğru bir şekilde saymak için nesne takibini kullanmanız gerekecek. Sorun, nesne izlemenin daha fazla bellek gerektirmesidir ve bu, Quix'in ücretsiz planında mevcut değildir. Bu demo en küçük "nano" YOLO modelini kullanıyor ancak YOLOv8x en güçlüsü olmak üzere dört boyut daha mevcut. Daha büyük bir model kullanırsanız araç takip ve sayım konusunda harika sonuçlar alabilirsiniz.

İşte onu yerel makinemde (iyi bir GPU ile) bir TfL kamera beslemesinde çalıştırma girişiminden bir ekran görüntüsü.

Yol boyunca her iki yöne giden araçları saymak için YOLO'yu birkaç başka kütüphaneyle (Roboflow'un denetimi gibi) birlikte kullandım.

Benzer sonuçların nasıl elde edileceği hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:

• YOLOv8'i Kullanarak Nesneleri Takip Etme ve Sayma (roboflow.com)

  Jupyter Notebook kullanarak bilgisayarlı görüntü kullanarak araç sayımına ilişkin mükemmel bir başlangıç.

  
  

• YOLOv8 Nesne Algılama ve Sayma | Dustin Liu tarafından | Eylül, 2023 | Veriye DayalıYatırımcı

  Roboflow Notebook'un optimize edilmiş Streamlit sürümünün ayrıntılı açıklaması (önceden bağlantılı makalede tartışılmıştır)—ayrıca çevrimiçi olarak da deneyebilirsiniz .

Çözüm

Buraya kadar geldiğin için teşekkürler. Umarım başarılı bir şekilde özelleştirebilmişsinizdir. Herhangi bir sorunla karşılaşırsanız, topluluk forumumuza bir soru göndermeyi unutmayın; birimiz hemen konuyla ilgilenecektir.

Gördüğünüz gibi Quix'te karmaşık uygulamaları dağıtmak ve çalıştırmak oldukça basittir. Bu demolar bağımsız olacak şekilde tasarlandığından ön ucu da barındırıyoruz. Ancak bir üretim senaryosunda muhtemelen ön ucunuzu başka bir yerde çalıştırmak istersiniz. Quix'in gerçekten üstün olduğu şey, olay akışlarını işlemek ve karmaşık hesaplamaları son derece performanslı bir şekilde gerçekleştirmektir. Verileri geniş ölçekte işlemek için Apache Kafka'nın güçlü yönlerinden yararlanırken, bazı zayıf yönlerini (kaynak yönetimi ve yapılandırma karmaşıklığı gibi) ortadan kaldırır. Elbette kendi Kafka örneğiniz varsa veya Confluent Cloud kullanıyorsanız onu da kullanabilirsiniz. Quix, etkinlik akışlarınızı gerçek zamanlı olarak düzenlemenize ve işlemenize yardımcı olmak için oradadır.

• Quix ortamlarının Quix'te nasıl yönetildiği hakkında daha fazla bilgi edinmek için Quix belgelerindeki ilgili bölüme bakın.
• Başka bir tam işlevsel demo uygulamasını görmek için, sohbet mesajlarında canlı duygu analizi gerçekleştirmek üzere Hugging Face Transformers kitaplığını kullanan sohbet uygulaması demomuzu deneyin.

Yazan: Tomáš Neubauer (CTO ve Quix Kurucu Ortağı)