g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

Handtrack.js açık kaynak: El hareketini izlemek için 3 satır JS kodu

Yazar Victor Dibia

Çevirmen Xue Ming Deng

Son zamanlarda, Handtrack.js adlı bir proje GitHub'da açık kaynaklı hale geldi. Bununla birlikte, resimlerdeki el hareketlerini algılamak için yalnızca 3 satır koda ihtiyacınız var.

Demo adresi: https://victordibia.github.io/handtrack.js/#/

Çalışma Zamanı: 22 FPS, Macbook Pro 2018 (2.5 Ghz), Chrome tarayıcı. 13FPS, Macbook Pro 2014 (2,2 GHz).

Kısa bir süre önce, resimlerdeki el hareketlerini izlemek için TensorFlow nesne algılama API'sini kullanan bir deneyin sonuçları beni şok etti. Eğitim modelini ve kaynak kodunu açtım:

https://github.com/victordibia/handtracking

O zamandan beri, çok ilginç şeyler geliştirmek için kullanıldı, örneğin:

Çocuklara yazım pratiği konusunda yardımcı olabilecek bir araç:

https://medium.com/@drewgillson/alphabot-a-screen-less-interactive-spelling-primer-powered-by-computer-vision-cc1095bce90

Hareketleri tanıyan bir eklenti:

https://github.com/MrEliptik/HandPose

Bir masa tenisi oyunu:

https://github.com/alvinwan/hand-tracking-pong

Sağladığım eğitim modelini denemek isteyen birçok kişi var, ancak Tensorflow'u kuramıyorlar (kurulum sorunları, TF sürüm sorunları, dışa aktarma grafikleri vb.). Neyse ki, Tensorflow.js tarayıcının standartlaştırılmış ortamında çalışacak şekilde optimize edildiği için bu kurulum ve dağıtım sorunlarının bazılarını çözer. Bunun için Handtrack.js kitaplığını oluşturdum:

https://github.com/victordibia/handtrack.js/

Geliştiricilerin, eğitimli el algılama modellerini kullanarak hızlı bir şekilde hareket etkileşim prototipleri oluşturmasına olanak tanır.

Bu kitaplığın amacı, model dosyalarını yüklemeyle ilgili adımları gizlemek, kullanıcılara yararlı işlevler sağlamak ve kullanıcıların herhangi bir makine öğrenimi deneyimi olmadan görüntüleri ellerinde algılamasını sağlamaktır. Modeli kendiniz eğitmenize gerek yoktur.

Ayrıca herhangi bir diyagramı veya kaydedilmiş modeli dışa aktarmanıza gerek yoktur. Handtrack.js'yi (ayrıntılar aşağıda) web uygulamanıza doğrudan dahil edebilir ve ardından bu kitaplık tarafından sağlanan yöntemleri çağırabilirsiniz.

Web uygulamalarında nasıl kullanılır?

Bu kitaplığın URL adresini doğrudan komut dosyası etiketine dahil edebilir veya npm'den içe aktarmak için oluşturma aracını kullanabilirsiniz.

Komut dosyası etiketi kullan

Handtrack.js'nin minimum js dosyası şu anda jsdelivr'de barındırılmaktadır. Jsdelivr, web uygulamanıza herhangi bir npm paketini eklemenizi sağlayan ücretsiz ve açık kaynaklı bir CDN'dir.

< script src = "https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js" > < /senaryo >

Yukarıdaki komut dosyası etiketini html sayfasına ekledikten sonra, aşağıda gösterildiği gibi handtrack.js'ye başvurmak için handTrack değişkenini kullanabilirsiniz.

const img = document.getElementById ('img'); handTrack.load (). sonra (model = > { model.detect (img). sonra (tahminler = > { console.log ('Tahminler:', tahminler) // bbox tahminleri }); });

Yukarıdaki kod parçacığı, img etiketinden geçirilen görüntünün tahmin edilen kenarlığını yazdıracaktır. Videoyu değiştirirseniz veya görüntü çerçevesini kameradan gönderirseniz, her karede görünen eli "izleyebilirsiniz".

Elleri görüntüde izlemek için handtrack.js'yi kullanarak, tuval nesnesinde algılanan kenarlığı ve kaynak görüntüyü çizmek için renderPredictions () yöntemini çağırabilirsiniz.

NPM kullan

Handtrack.js'yi aşağıdaki komutla bir npm paketi olarak kurabilirsiniz:

npm install - handtrackjs kaydedin

Bir React uygulamasında nasıl içe aktarılacağına ve kullanılacağına ilişkin bir örnek aşağıda verilmiştir.

'handtrackjs'den handTrack olarak içe aktar *; const img = document.getElementById ('img'); // Modeli yükleyin. handTrack.load (). sonra (model = > { // görüntüdeki nesneleri algılar. console.log ("model yüklendi") model.detect (img). sonra (tahminler = > { console.log ('Tahminler:', tahminler); }); });

Handtrack.js API

Handtrack.js birkaç yöntem sağlar. İki ana yöntem, sırasıyla el algılama modelini yüklemek ve tahmin sonuçlarını elde etmek için kullanılan load () ve detect () 'dir.

Load () yöntemi, modelin performansını kontrol etmenize olanak tanıyan isteğe bağlı model parametrelerini kabul eder. Bu yöntem, önceden eğitilmiş bir el algılama modelini webmodel biçiminde yükler (ayrıca jsdelivr'de barındırılır).

Detection () yöntemi giriş kaynağı parametrelerini (img, video veya tuval nesneleri) kabul eder ve görüntüdeki el konumunun kenarlığının tahmin sonucunu döndürür.

Tahmin sonucu biçimi aşağıdaki gibidir:

Handtrack.js ayrıca başka yardımcı yöntemler de sağlar:

model.getFPS (): FPS'yi, yani saniyedeki algılama sayısını alın;
model.renderPredictions (tahminler, tuval, bağlam, ortam kaynağı): belirtilen tuval üzerine bir sınır (ve kaynak görüntü) çizin;
model.getModelParameters (): model parametrelerini döndürür;
model.setModelParameters (modelParams): model parametrelerini güncelleyin;
dispose (): model örneğini siler;
startVideo (video): Verilen video öğesinde kamera video akışını başlatın. Kullanıcının video izinleri sağlayıp sağlamadığını doğrulamak için kullanılabilecek bir söz verin;
stopVideo (video): Video akışını durdurun.

Kitaplık boyutu ve model boyutu

Kitaplık boyutu 810 KB'dir, çünkü esas olarak tensorflow.js kitaplığı ile paketlenmiştir (en son sürümde bazı çözülmemiş sorunlar vardır).

Model boyutu 18,5 MB'dir ve başlangıçta sayfanın yüklenmesi biraz zaman alır. TF.js modeli genellikle birden çok dosyaya bölünmüştür (bu örnekte, dört 4,2 MB dosya ve bir 1,7 MB dosya).

çalışma prensibi

Handtrack.js, modelleri tarayıcıda sıfırdan oluşturmak ve eğitmek için esnek ve sezgisel bir API olan Tensorflow.js kitaplığını kullanır. Düşük seviyeli bir JavaScript doğrusal cebir kitaplığı ve yüksek seviyeli bir API sağlar.

Handtrack.js kitaplığı oluşturun

Tensorflow.js'ye dayalı bir JavaScript kitaplığı oluşturma adımları

Veri derleme

Bu projede kullanılan veriler esas olarak Egohands veri setinden gelir ( Buna, Google Glass kullanılarak çekilmiş, kenarlıklı 4800 insan eli görüntüsü dahildir.

Model eğitimi

Modeli eğitmek için Tensorflow nesne algılama API'sini kullanın. Bu proje için Single Shot MultiBox Detector (https://arxiv.org/abs/1512.02325) ve MobileNetV2 mimarisi (https://arxiv.org/abs/1801.04381) kullandık. Ardından eğitilen modeli kaydedilmiş model olarak dışa aktarın.

Model dönüşümü

Tensorflow.js, kaydedilmiş modeli bir tarayıcıya yüklenebilen bir web modeli biçimine dönüştürmek için kullanılabilecek bir model dönüştürme aracı sağlar. Son olarak, nesne algılama modeli diyagramının işlem sonrası kısmı, dönüştürme işlemi sırasında silinir. Bu optimizasyon, algılama ve tahmin işlemlerinin hızını ikiye katlayabilir.

Kütüphane paketleme ve barındırma

Bu kitaplık, modelleri yüklemek, görüntüleri algılamak için bazı yöntemler sağlayan bir ana sınıftan ve startVideo, stopVideo, getFPS (), renderPredictions (), getModelParameters (), setModelParameters () gibi bir dizi başka kullanışlı işlevden oluşur. ,ve daha fazlası. Yöntemin tam açıklaması Github'da bulunabilir:

https://github.com/victordibia/handtrack.js/#other-helper-methods

Ardından, kaynak dosyaları paketlemek ve bunları npm'de (webmodel dosyaları dahil) yayınlamak için rollup.js kullanın. Şu anda Handtrack.js, Tensorflow.js (v0.13.5) ile birlikte paketlenmiştir, çünkü bu kitaplığı yazarken, Tensorflow.js (v0.15) tensörler olarak görüntüleri / video etiketlerini yüklerken tür hataları verecektir. Yeni sürüm bu sorunu çözerse, en son sürüme de güncelleme yapacağım.

Handtrack.js'yi ne zaman kullanmalıyım?

Harekete dayalı etkileşimli deneyimlerle ilgileniyorsanız, Handtrack.js faydalı olabilir. Kullanıcıların anında hareket tabanlı etkileşimli bir deneyim elde etmek için herhangi bir ek sensör veya donanım kullanmasına gerek yoktur.

Bazı (tümü değil) ilgili senaryolar aşağıda listelenmiştir:

Fare hareketi, kontrol amacına ulaşmak için el hareketiyle eşleştirilir.
El diğer nesnelerle örtüştüğünde, bazı anlamlı etkileşim sinyallerini gösterebilir (bir nesneye dokunmak veya bir nesneyi seçmek gibi).
İnsan eli hareketi, belirli eylem tanıma için bir aracı olarak kullanılabilir (örneğin, bir video veya görüntüde satranç veya golf oynama eylemini otomatik olarak izleme) veya bilgi, yalnızca görüntüde veya videoda kaç kişinin göründüğünü sayar.
Etkileşimli sanat enstalasyonu, bir grup ilginç etkileşimli sanat yerleştirme kontrolü.
Başkalarına ML / AI bilgisini öğretin. Handtrack.js kitaplığı, model parametrelerindeki (güven eşiği, IoU eşiği, görüntü boyutu vb.) Değişikliklerin algılama sonuçlarını nasıl etkilediğini göstermek için ilginç bir arayüz sağlar.
Bir demo oluşturun, herkes bunları kolayca çalıştırabilir veya deneyimleyebilir.

sınırlama

Tarayıcı tek iş parçacıklıdır: bu nedenle tahmin işleminin UI iş parçacığını engellemediğinden emin olmalısınız. Her tahmin 50 ila 150 milisaniye sürebilir, bu nedenle kullanıcılar bu gecikmeyi fark edecektir. Handtrack.js'yi saniyede birden çok kez (oyunlar gibi) tüm ekranı oluşturması gereken uygulamalara entegre ederken, saniye başına tahmin sayısını azaltmayı gerekli buldum.

El hareketlerini kare kare izleyin: Kareler arasında hareketleri tanımak istiyorsanız, elin arka arkaya kareleri girdiğinde, hareket ettirdiğinde ve terk ettiğinde kimliğini çıkarmak için ek kod yazmanız gerekir.

Yanlış tahminler: Bazen yanlış tahminler meydana gelir (bazen yüzler eller olarak algılanır). İyi tespit sonuçları elde etmek için farklı kameraların ve ışık koşullarının farklı model parametre ayarları (özellikle güven eşiği) gerektirdiğini buldum. Daha da önemlisi, bu ek verilerle iyileştirilebilir.

Sonraki adım

Handtrack.js, yapay zeka insan-bilgisayar etkileşiminin yeni biçimlerinin ilk aşamalarını temsil ediyor. Tarayıcıda, insan pozunun tespiti için posenet gibi bazı iyi fikirler zaten var:

https://github.com/tensorflow/tfjs-models/tree/master/posenet

Ve tarayıcıda yüz ifadelerini algılamak için handsfree.js:

https://handsfree.js.org/

Aynı zamanda aşağıdaki alanlarda daha çok zaman geçireceğim:

Daha iyi bir model oluşturun: Altta yatan el modelini değerlendirmek için güçlü bir kıyaslama oluşturun. Doğruluğu ve kararlılığı artırmak için daha fazla veri toplayın.

Ek sözcük dağarcığı: Örneği oluştururken, bu etkileşimli yöntemin sözcük dağarcığının çok sınırlı olduğunu buldum. En azından yumruk ve açık avuç içi gibi daha fazla durumu desteklemesi gerekiyor. Bu, veri setinin yeniden etiketlenmesi (veya bazı yarı denetimli yöntemlerin kullanılması) anlamına gelir.

Ek model kantifikasyonu: Şimdi MobilenetV2 kullanıyoruz. Daha hızlı bir çözüm var mı?

Orijinal İngilizce:

https://hackernoon.com/handtrackjs-677c29c1d585

Gerçek olayların "Ölüm Meleği" uyarlaması: bir melek yüzü, ancak bir süper suç örgütünün başı

Büyük müşterilerin yenileme oranı% 90'ı aşıyor. Bu şirket "SaaS", şirketin en karmaşık ERP sistemi