Göz takibi yapan bir yapay zeka eğitmeniz gerekiyor mu: patronun gözleri kayar ve hemen çalışmaya başlar
Yuvarlak kestane derlemesi
Qubit Üretildi | Genel Hesap QbitAI
Ah, patronun gözleri uçtu, neden iş arayüzüne geri dönmüyorsun?
Geçmişte, arkamızdaki bakıştan pek kaçabiliyorduk, ama şimdi değil.
Varsa Göz takibi AI artı Yüz tanıma , Patron tarafından izlendiği anda yorucu çalışma moduna girebilir.
Drama biraz fazla. Ancak, bir bilgisayar ön kamerası ve bir tarayıcı olduğu sürece göz takibi gerçekten yapılabilir.
Münihli bir programcı olan Max Schumacher, TensorFlow.js Bir model yaptın, ekrana bakıyorsun Bir nokta Hangi noktaya baktığınızı bilecek.
Eğitim vermeme izin ver
Bu modelin adı Lookie Lookie , Bir sunucu olmadan, kamerayı açarak tarayıcı üzerinde eğitim alabilir ve üç dakikadan daha kısa bir sürede küçük bir AI geliştirebilirsiniz.
Şimdi bir deneyin.
Kamera tarafından yakalanan görüntü, yüzde yeşil bir çerçeve ve gözlerle çerçevelenmiş kırmızı bir çerçeve ile ekranın sol üst köşesinde görüntülenir.
Veri toplamanın yolu çok basit: Fareyi hareket ettirin, fareyi gözlerinizle takip edin ve ardından istediğiniz zaman boşluk tuşuna basın ve her bastığınızda bir veri noktası toplayın.
İlk dalga , Boşluğa 20 kez bastığınız sürece, sistem uyarı verecektir ve eğitim düğmesine tıklayabilirsiniz.
Eğitimden sonra Yeşil daire . Şu anda gözlerim nereye bakarsa baksın yeşil halkalar beni takip etmeli.
Ama tereddütlü görünüyordu. Sistem ayrıca şunu sorar: Artık veriler yeterli olmadığına göre, iyi eğitilmiş olmayabilir, bu yüzden biraz daha veri alalım.
Peki, ikinci eğitim dalgası için yirmi veya otuz fotoğraf daha çekin.
Yeterince emin, bu sefer yeşil daire koştu güven Rüzgar gibi (karşılaştırmalı olarak) dörtnala koşuyor.
Aksine, yukarı ve aşağı Hareketli gözlerle AI'nın tepkisi o kadar keskin görünmüyor. Muhtemelen bilgisayar ekranının üstü ile altı arasındaki mesafe yeterince geniş olmadığı ve göz küresi yeterince hareket etmediği için.
Bununla birlikte, eğitim verilerinin çok zayıf olduğu varsayımı altında, sinir ağı başarılı olarak kabul edilebilir.
Veri toplarken yüzün Ekrandan çok uzak olma (Baş aşağı durmayın).
Kendin Yap Kılavuzu (Bölüm 1): Rafı kurun
Herhangi bir sunucu olmadan eğitilebilen bir model olarak, ilgilenmek istiyorsanız Bütün çerçeve Yük biraz ağır olabilir.
Yani ilk önce Yüz tanıma , Ve sonra gözün olduğu kısmı çerçeveleyin. Sadece koy Bu alan (yukarıdaki şekilde ilk sağdaki) sinir ağına verilirse, görev daha kolay olacaktır.
Alman genç seçti clmtrackr Yüz algılama modeli, hızlı çalışma avantajına sahiptir.
Öyleyse önce hayal kırıklığına uğratın:
https://raw.githubusercontent.com/auduno/clmtrackr/dev/build/clmtrackr.js
Ardından boş bir html JQuery, TensorFlow.js, clmtrackr.js ve main.js dosyasını içe aktarın, içe aktarın. kod aşağıdaki gibi gösterilir:
1 < ! doctype html > 2 < html > 3 < vücut > 4 < script src = "https://code.jquery.com/jquery-3.3.1.min.js" > < /senaryo > 5 < script src = "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0" > < /senaryo > 6 < script src = "clmtrackr.js" > < /senaryo > 7 < script src = "main.js" > < /senaryo > 8 < /vücut > 9 < / html >Bu şekilde hazırlık faaliyetleri yapılır. Aşağıdaki resmen başlar.
Video akışını dışa aktar
İlk adım, (kullanıcı) hesabınızdan geçmektir. Katılıyorum Kamerayı açmak için video akışını işleyin ve resmi sayfada görüntüleyin.
Önce bu kod satırını yazın (varsayılan olarak Chrome'un en son sürümü kullanılır):
1 < video id = "web kamerası" width = "400" yükseklik = "300" otomatik oynatma > < /video >Ardından main.js'den başlayın:
1 $ (belge) .ready (işlev () { 2 sabit video = $ ('# web kamerası'); 34 function onStreaming (stream) { 5 video.srcObject = akış; 6} 78 navigator.mediaDevices.getUserMedia ({video: true}). Sonra (onStreaming); 9});Bu noktada, tarayıcı size "Kamerayı açmak istiyor musunuz" diye sormalıdır.
Yüzünü bul
Yukarıda bahsedilen clmtrackr.js yüz izleyici burada görünecektir.
İlk olarak, const video = ... altında, başlatma takip cihazı:
1 const ctrack = new clm.tracker (); 2 ctrack.init ();Ardından, onStreaming () 'de, izleyicinin videodaki yüzü algılamasına izin vermek için aşağıdaki cümleyi ekleyin:
1 ctrack.start (video);Bu satırları yazdıktan sonra, zaten Yüzünü görebiliyorum. İnanmıyorsan, bırak gitsin Profil .
Burada bir çizim aracına ihtiyaç vardır. Html kullanın < tuval > Videonun üstündeki etiketi Bir tuvali örtün .
içinde < video > Aşağıya bu kod dizesini yazın:
1 < canvas id = "overlay" width = "400" height = "300" > < /tuval > 2 < stil > 3 #webcam, #overlay { 4 konum: mutlak; 5 üstte: 0; 6 sol: 0; 7} 8 < / stil >Bu şekilde bir video var Aynı boyutta tuval . CSS, tuvalin ve videonun konumunun tam olarak eşleşmesini sağlayabilir.
Tarayıcı her görüntülediğinde, tuvale bir şey çizmemiz gerekir. Boyamadan önce, daha önce boyadığınız içeriği silmelisiniz.
Kod, ctrack.init () altında yazılan şuna benzer:
1 sabit kaplama = $ ('# kaplama'); 2 const overlayCC = overlay.getContext ('2d'); 34 function trackingLoop () { 5 // Bir yüzün algılanıp algılanmadığını kontrol edin ve öyleyse izleyin. 6 requestAnimationFrame (trackingLoop); 78 let currentPosition = ctrack.getCurrentPosition (); 9 overlayCC.clearRect (0, 0, 400, 300); 1011 if (currentPosition) { 12 ctrack.draw (yer paylaşımı); 13} 14}Şimdi, onStreaming () içindeki ctrack.starg () 'dan sonra, trackingLoop ()' u çağırın. Her karede yeniden çalışacak.
Şu anda, tarayıcıyı yenileyin, yüzünüzde yeşil ve garip bir taslak olmalı.
Gözleri kesilmiş
Bu adım gözlerin etrafını çizmektir Dikdörtgen .
cmltrackr çok naziktir, bir taslak çizmenin yanı sıra, 70 Her yüz özelliği için ihtiyacımız olan kısmı seçebiliriz.
Burada 23, 28, 24 ve 26'yı seçmek yeterlidir.Her bir yönde 5 piksel dışa doğru genişletin.
Daha sonra, dikdörtgen çerçeve önemli yüz bilgilerini kaplayacak kadar olmalıdır (çok uzakta değil, baş aşağı değil).
Şimdi al Başka bir tuval Bu kırpılmış dikdörtgeni yakalamak için. Bu tuval 50 x 25 İçine koymak için dikdörtgen kutunun boyutunu ayarlamanız yeterli:
1 < canvas id = "gözler" width = "50" height = "25" > < /tuval > 2 < stil > 3 #eyes { 4 konum: mutlak; 5 üstte: 0; 6 sağ: 0; 7} 8 < / stil >Aşağıdaki işlev (x, y) koordinatlarını ve dikdörtgenin uzunluğunu ve genişliğini döndürür. Bunun girdisi clmtrackr'deki konum dizisidir (Konum Dizisi):
1 işlev getEyesRectangle (konumlar) { 2 sabit minX = konumlar-5; 3 const maxX = konumlar + 5; 4 sabit minY = konumlar-5; 5 const maxY = konumlar + 5; 67 sabit genişlik = maxX-minX; 8 sabit yükseklik = maxY-minY; 910 dönüş; 11}Sonra, dikdörtgen kutuyu çıkarmalıyız. Spesifik yöntem, onu ilk tuval üzerine kırmızıya boyamak ve ikinci tuvale kopyalamaktır.
TrackLoop () içindeki if bloğunu değiştirin:
1 if (currentPosition) { 2 // Bindirme tuval üzerine yüz maskesi çizin: 3 ctrack.draw (yer paylaşımı); 45 // Gözler dikdörtgenini alın ve kırmızıyla çizin: 6 const eyesRect = getEyesRectangle (currentPosition); 7 overlayCC.strokeStyle = 'kırmızı'; 8 overlayCC.strokeRect (eyesRect, eyesRect, eyesRect, eyesRect); 910 // Videonun boyutu farklı olabilir, bu yüzden bunlara ihtiyacımız var 11 // göz dikdörtgenini kırpmadan önce yeniden ölçeklendirmek için faktörler: 12 const resizeFactorX = video.videoWidth / video.width; 13 const resizeFactorY = video.videoHeight / video.height; 1415 // Videodan gözleri kırpın ve göz tuvaline yapıştırın: 16 const eyesCanvas = $ ('# gözler'); 17 const eyesCC = eyesCanvas.getContext ('2d'); 1819 göz CC.drawImage ( 20 video, 21 gözRect * resizeFactorX, eyesRect * resizeFactorY, 22 gözRect * resizeFactorX, eyesRect * resizeFactorY, 230, 0, gözlerCanvas.width, eyesCanvas.height yirmi dört ); 25}Şimdi göz çevresini görmelisin Kırmızı dikdörtgen çerçeve Yukarı.
DIY Kılavuzu (Bölüm 2): Eğitim ve Test
Veri toplama
Aslında göz takibi için veri toplamanın birçok yolu vardır. Ancak, gözlerin fareyi takip etmesine izin vermek en kolay yoldur. Bir görüntüyü yakalamak için istediğiniz zaman boşluğa basın.
1 Fareyi takip edin
Farenin her zaman nerede olduğunu bilmek için document.onmousemove'a bir EventListener ekleyin.
Bunu yapmak koordinatları da normalleştirebilir (aralığına dönüştürün):
1 // Fare hareketini izleyin: 2 sabit fare = { 3 x: 0, 4 y: 0, 56 handleMouseMove: function (olay) { 7 // Fare konumunu alın ve normalleştirin 8 mouse.x = (event.clientX / $ (pencere) .width ()) * 2-1; 9 mouse.y = (event.clientY / $ (pencere) .height ()) * 2-1; 10}, 11} 1213 document.onmousemove = mouse.handleMouseMove;2 Görüntü yakala
Burada yapılacak şey boşluk tuşuna basmaktır Daha sonra Görev: tuvalden bir görüntü yakalayın ve bunu bir tensör olarak saklayın.
TensorFlow.js, tf.fromPixels () adında bir yardımcı işlev sağlar, bunu ikinci tuvalden gelen görüntüyü depolamak için kullanın ve ardından normalleştirin:
1 işlev getImage () { 2 // Mevcut görüntüyü tensör olarak göz tuvalinde yakalayın. 3 return tf.tidy (function () { 4 sabit resim = tf.fromPixels ($ ('# gözler')); 5 // Bir toplu iş boyutu ekleyin: 6 const batchedImage = image.expandDims (0); 7 // Normalleştir ve geri döndür: 8 batchedImage.toFloat (). Div (tf.scalar (127)). Sub (tf.scalar (1)); 9}); 10}Tüm verilerin tek bir Büyük eğitim seti Sorun değil, ama biraz bırakacağım Doğrulama seti % 20 gibi daha bilimsel.
Bu şekilde, modelin performansını kontrol edeceğiz ve sahip olmadığını teyit edeceğiz. Aşırı uyum gösterme .
İşte yeni veri noktaları eklemek için kod:
1 sabit veri kümesi = { 2 tren: { 3 n: 0, 4 x: boş, 5 y: boş, 6}, 7 değer: { 8 n: 0, 9 x: boş, 10 y: boş, 11}, 12} 1314 function captureExample () { 15 // Göz tuvalinden en son görüntüyü alın ve veri setimize ekleyin. 16 tf.tidy (işlev () { 17 sabit resim = getImage (); 18 const mousePos = tf.tensor1d (). ExpandDims (0); 1920 // Eğitime mi (% 80) yoksa doğrulama (% 20) setine mi ekleneceğini seçin: 21 const alt kümesi = veri kümesi; yirmi iki 23 if (subset.x == null) { 24 // Yeni tensörler oluştur 25 altküme.x = tf.keep (resim); 26 subset.y = tf.keep (mousePos); 27} başka { 28 // Mevcut tensörlerle birleştirin 29 sabit eskiX = alt küme.x; 30 sabit eskiY = alt küme.y; 3132 subset.x = tf.keep (oldX.concat (görüntü, 0)); 33 subset.y = tf.keep (oldY.concat (mousePos, 0)); 34} 3536 // Sayacı artır 37 alt küme. N + = 1; 38}); 39}Son olarak, koy boşluk çubuğu Bağla:
1 $ ['body']. Keyup (function (event) { 2 // boşluk tuşu üzerinde: 3 if (event.keyCode == 32) { 4 captureExample (); 56 event.preventDefault (); 7 yanlış döndür; 8} 9});Bu noktada, boşluğa bastığınız sürece, veri setine bir veri noktası eklenecektir.
Eğitim modeli
Sadece en basitini oluşturun CNN Sağ.
TensorFlow.js'de Keras'a çok benzeyen bir tane var API Kullanabilirsiniz.
Bu ağda, bir evrişimli katman, bir maksimum havuzlama ve iki çıkış değeri (koordinatlar) olan yoğun bir katman bulunmalıdır.
Ortada, düzenleyici olarak bir bırakma eklenir; Buna ek olarak, 2D veriler düzleştirmeyle 1D'ye düşürülür. Adam optimizer eğitim için kullanılır.
Model kodu şuna benzer:
1 let currentModel; 23 işlevli createModel () { 4 const modeli = tf.sequential (); 56 model.add (tf.layers.conv2d ({ 7 çekirdekBoyut: 5, 8 filtre: 20, 9 adım: 1, 10 aktivasyon: 'relu', 11 inputShape :, 12})); 1314 model.add (tf.layers.maxPooling2d ({ 15 havuzBoyut :, 16 adım:, 17})); 1819 model.add (tf.layers.flatten ()); 2021 model.add (tf.layers.dropout (0.2)); yirmi iki 23 // İki çıkış değeri x ve y 24 model.add (tf.layers.dense ({ 25 ünite: 2, 26 aktivasyon: 'tanh', 27})); 2829 // ADAM iyileştiriciyi 0.0005 öğrenme oranı ve MSE kaybı ile kullanın 30 model.com yığın ({ 31 optimize edici: tf.train.adam (0.0005), 32 kayıp: 'meanSquaredError', 33}); 3435 dönüş modeli; 36}Eğitim başlamadan önce bir tane ayarlamalısınız sabit Dönem sayısı ve ardından toplu iş boyutunu şu şekilde ayarlayın: değişken (Veri seti küçük olduğundan):
1 işlev fitModel () { 2 let batchSize = Math.floor (dataset.train.n * 0.1); 3 if (batchSize < 4) { 4 batchSize = 4; 5} else if (batchSize > 64) { 6 batchSize = 64; 7} 89 if (currentModel == null) { 10 currentModel = createModel (); 11} 1213 currentModel.fit (dataset.train.x, dataset.train.y, { 14 batchSize: batchSize, 15 dönem: 20, 16 karışık: doğru, 17 doğrulama Verisi:, 18}); 19}Sonra bir Eğitim düğmesi Bar:
1 < düğme kimliği = "tren" > Tren! < /buton > 2 < stil > 3 #train { 4 konum: mutlak; 5 üst:% 50; 6 sol:% 50; 7 dönüşümü: çevir (-% 50, -% 50); 8 yazı tipi boyutu: 24pt; 9} 10 < / stil >Ve JS:
1 < düğme kimliği = "tren" > Tren! < /buton > 2 < stil > 3 #train { 4 konum: mutlak; 5 üst:% 50; 6 sol:% 50; 7 dönüşümü: çevir (-% 50, -% 50); 8 yazı tipi boyutu: 24pt; 9} 10 < / stil >Yürüyüşe çıkın
Yeşil daire sonunda gel. AI, nereye baktığınızı, nerede göründüğünü belirler.
Önce yeşil daireyi yazın:
1 < div id = "hedef" > < / div > 2 < stil > 3 #target { 4 arka plan rengi: açık yeşil; 5 konum: mutlak; 6 sınır yarıçapı:% 50; 7 yükseklik: 40px; 8 genişlik: 40px; 9 geçiş: tüm 0.1'ler kolaylığı; 10 kutu gölge: 00 20px 10px beyaz; 11 kenarlık: 4px katı rgba (0,0,0,0.5); 12} 13 < / stil >Ardından, yeşil dairenin hareket etmesini istiyorsanız, düzenli Göz görüntüsünü sinir ağına aktarın. Nereye baktığınızı sorun ve bir koordinatı yanıtlıyor:
1 işlev moveTarget () { 2 if (currentModel == null) { 3 dönüş; 4} 5 tf.tidy (function () { 6 sabit resim = getImage (); 7 const tahmin = currentModel.predict (resim); 89 // Normalleştirilmiş konumu ekran konumuna geri dönüştürün: 10 const targetWidth = $ ['# hedef']. OuterWidth (); 11 const targetHeight = $ ['# hedef']. OuterHeight (); 12 sabit x = (tahmin.get (0, 0) + 1) / 2 * ($ (pencere) .width () - hedef Genişlik); 13 sabit y = (tahmin.get (0, 1) + 1) / 2 * ($ (pencere) .height () - hedefYükseklik); 1415 // Hedefi oraya taşı: 16 const $ hedef = $ ('# hedef'); 17 $ target.css ('sol', x + 'piksel'); 18 $ target.css ('top', y + 'px'); 19}); 20} yirmi bir 22 setInterval (moveTarget, 100);Aralık 100 milisaniye , Ama aynı zamanda değiştirilebilir.
Kısacası, bitirdiniz.
Burun deliklerini ve gözleri ayırt edemiyor musunuz?
Göz izleme modeli ilginç, ancak yine de bazı güzel kusurları var.
Örneğin, algoritma sadece ön yüzü tanıyabilir, yüz biraz Biraz yan AI kafası karışacak.
Örneğin bazen burun delikleri göz olarak tanınır.
Örneğin, gözlerin nerede olduğunu belirlemek için resimde yüzün tamamı görünmelidir. Ağzını kapat Ne de işe yaramıyor.
Garip Kral'dan
Max ayrıca keşfedilecek çok yer olduğunu söyledi.
Portalı kendiniz eğitin:
https://cpury.github.io/lookie-lookie/
Portalı gerçekleştirmek için kod:
https://github.com/cpury/lookie-lookie
Eğitim metni portalı:
https://cpury.github.io/learning-where-you-are- looking-at/
- Bitiş -
Samimi işe alım
Qubit, editörleri / muhabirleri işe alıyor ve merkezi Pekin, Zhongguancun'da bulunuyor. Yetenekli ve hevesli öğrencilerin bize katılmasını dört gözle bekliyoruz! İlgili ayrıntılar için lütfen QbitAI diyalog arayüzünde "işe alım" kelimesini yanıtlayın.
Qubit QbitAI · Toutiao İmzalayan Yazar
' ' Yapay zeka teknolojisi ve ürünlerindeki yeni eğilimleri takip edin
