三行代碼實時追蹤你的手,只要有瀏覽器就夠了 | Demo·代碼

栗子 發自 凹非寺

量子位 報道 | 公眾號 QbitAI

三行代碼實時追蹤你的手,只要有瀏覽器就夠了 | Demo·代碼

“Are You OK?”

“O!K!”

人臉不管做了多麼一言難盡的表情,五官也不太會四處亂跑。

手就不一樣了,手勢百媚千嬌,鏡頭看到的畫面就百媚千嬌。

所以,AI怎麼識別手呢?

三行代碼實時追蹤你的手,只要有瀏覽器就夠了 | Demo·代碼

一位叫做Victor Dibia的程序猿說,“三行代碼”就能實時追蹤你的手,只要有個瀏覽器

你還可以用手在屏幕上塗鴉,成為實至名歸的靈魂畫“手”:

三行代碼實時追蹤你的手,只要有瀏覽器就夠了 | Demo·代碼

Victor說,只要召喚出他的Handtrack.js庫,模型便可以在網頁上跑起來。

他還提供了線上Demo給大家玩耍。

十魔亂舞

進了Demo,按下開始檢測的按鈕,打開攝像頭,就可以放飛自我了。

在下的手不甚優美,但還是忍不住亂舞了好一陣子。

三行代碼實時追蹤你的手,只要有瀏覽器就夠了 | Demo·代碼

手指自由揮舞,邊框就敏捷地跟隨。

除了隨性活動手指之外,還嘗試了一下狼人夜間的戰術交流:

三行代碼實時追蹤你的手,只要有瀏覽器就夠了 | Demo·代碼

翻譯一下:你,起跳預言家,給8號發個查殺。

(作為一個菜雞玩家,通常夜裡是輪不到我分配工作的,此處純屬藉機過癮。)

書歸正傳,手勢頻繁變換,AI依然緊追不捨

除了打叉叉的時候,只識別了一隻手。也許是因為手的側面朝著屏幕,面積小,不容易識別吧。

如果你伸了兩隻手,AI卻畫了三個邊框,可以調整一下左邊的滑動條:

三行代碼實時追蹤你的手,只要有瀏覽器就夠了 | Demo·代碼

這是置信閾值 (Confidence Threshold) ,默認0.7,分值高於0.7就會認定是手,顯示出邊框;如果調高到0.8,那些得分0.7的疑似人手,就不會顯示邊框了。

除此之外,Demo也有塗鴉功能:

三行代碼實時追蹤你的手,只要有瀏覽器就夠了 | Demo·代碼

鑑於在下繪畫功力有限,略去動態展示,大家可以自己去畫一波。

模型如何食用

Handtrack.js庫,是程序猿用TensorFlow.js搭起來的。

裡面的模型是用Egohands數據集養成,4800張人手的圖片,背景有室內也有戶外。

三行代碼實時追蹤你的手,只要有瀏覽器就夠了 | Demo·代碼

有了它,就不用自己訓練模型了。直接拿來用,方法有兩種:

第一種方法是在腳本標籤 (Script Tag) 裡,填上它的URL:

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

把腳本標籤添加到html頁面之後,就可以用handTrack變量來引出這個庫了:

1 const img = document.getElementById('img'); 
2 handTrack.load().then(model => {
3 model.detect(img).then(predictions => {
4 console.log('Predictions: ', predictions) // bbox predictions
5 });
6 });

上面這幾句代碼,是給手加了邊框。只要提交每一幀視頻,就可以追蹤裡面的手了,不論是攝像頭實時拍攝的,還是已經拍好的視頻。

第二種方法,是把這個庫當做一個NPM包來安裝:

1 npm install --save handtrackjs

然後,從NPM導入就可以了。

Victor說,大家可以用這個方法,來開發自己喜歡的應用。比如,做個遊戲:

三行代碼實時追蹤你的手,只要有瀏覽器就夠了 | Demo·代碼

One More Thing

這個模型是訓練好了。

但Victor說,也不是不讓大家訓練。

還說,想自己養成一隻實時手部追蹤模型的同學們,可以參照這個項目 (600星) :

https://github.com/victordibia/handtracking

最後,送你Handtrack.js庫的源代碼:

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

線上Demo傳送門:

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

Egohands數據集:

http://vision.soic.indiana.edu/projects/egohands/

誠摯招聘

量子位正在招募編輯/記者,工作地點在北京中關村。期待有才氣、有熱情的同學加入我們!相關細節,請在量子位公眾號(QbitAI)對話界面,回覆“招聘”兩個字。

量子位 QbitAI · 頭條號簽約作者

վ'ᴗ' ի 追蹤AI技術和產品新動態

相關推薦

推薦中...