有筆記本就能玩的體感遊戲！TensorFlow.js實現體感格鬥教程

曉查 編譯整理

量子位 出品 | 公眾號 QbitAI

小時候的你在遊戲中搓著手柄，在現實中是否也會模仿這《拳皇》的動作？用身體控制遊戲角色的體感遊戲很早就已出現，但需要體感手柄（Wii）或體感攝像頭（微軟Kinect）配合。而現在，筆記本就能幫你做到這一切！

最近，有一位名叫Minko Gechev的軟體工程師實現了在筆記本上玩《真人快打》（Mortal Kombat），只需要一顆前置攝像頭即可。

早在5年前，他就曾展示過體感玩格鬥遊戲的項目成果：

當時實現方案很簡單，也沒有利用時下流行的AI技術。但是這套演算法離完美還相去甚遠，因為需要單色畫面背景作為參照，使用條件苛刻。

5年間，無論是網路瀏覽器的API，還是WebGL都有了長足的發展。於是這名工程師決定用TensorFlow.js來改進他的遊戲程序，並在他個人Blog上放出了完整教程。

量子位對文章做了編譯整理，主要內容是訓練模型識別《真人快打》這款遊戲主要有拳擊、踢腿兩種動作，並通過模型輸出結果控制遊戲人物做出對應動作。

以下就是他Blog的主要內容：

簡介

我將分享用TensorFlow.js和MobileNet創建動作分類演算法的一些經驗，全文將分為以下幾部分：

為圖片分類收集數據

使用imgaug進行數據增強

使用MobileNet遷移學習

二元分類和N元分類

在瀏覽器中使用TensorFlow.js模型訓練圖片分類

簡單討論使用LSTM進行動作分類

我們將開發一種監督深度學習模型，利用筆記本攝像頭獲取的圖像來分辨用戶是在出拳、出腿或者沒有任何動作。最終演示效果如下圖：

理解本文內容需要有基本的軟體工程和JavaScript知識。如果你有一些基本的深度學習知識會很有幫助，但非硬性要求。

收集數據

深度學習模型的準確性在很大程度上取決於訓練數據的質量。因此，我們首要的目標是建立一個豐富的訓練數據集。

我們的模型需要識別人物的拳擊和踢腿，所以應當從以下三個分類中收集圖像：

拳擊

踢腿

其他

為了這個實驗，我找到兩位志願者幫我收集圖像。我們總共錄製了5段視頻，每段都包含2-4個拳擊動作和2-4個踢腿動作。由於收集到的是視頻文件，我們還需要使用ffmpeg將之轉化為一幀一幀的圖片：

ffmpeg -i video.mov$filename%03d.jpg

最終，在每個目錄下，我們都收集了大約200張圖片，如下：

註：除了拳擊和踢腿外，圖片目錄中最多的是「其他」部分，主要是走動、轉身、開關視頻錄製的一些畫面。如果這部分內容太多，會有風險導致訓練後的模型產生偏見，把應該歸於前兩類的圖片劃分到「其他」中，因此我們減少了這部分圖片的量。

如果只使用這600張相同環境、相同人物的圖片，我們將無法獲得很高的準確度。為了進一步提高識別的準確度，我們將使用數據增強對樣本進行擴充。

數據增強

數據增強是一種通過已有數據集合成新樣本的技術，可以幫助我們增加數據集的樣本量和多樣性。我們可以將原始圖片處理一下轉變成新圖，但處理過程不能太過激烈，好讓機器能夠對新圖片正確歸類。

常見的處理圖片的方式有旋轉、反轉顏色、模糊等等。網上已有現成軟體，我將使用一款由Python編寫的imgaug的工具（項目地址見附錄），我的數據增強代碼如下：

每張圖片最後都被擴展成16張照片，考慮到後面訓練和評估時的運算量，我們減小了圖片體積，每張圖的解析度都被壓縮成100*56。

建立模型

現在，我們開始建立圖片分類模型。處理圖片使用的是CNN（卷積神經網路），CNN適合於圖像識別、物體檢測和分類領域。

遷移學習

遷移學習允許我們使用已被訓練過網路。我們可以從任何一層獲得輸出，並把它作為新的神經網路的輸入。這樣，訓練新創建的神經網路能達到更高的認知水平，並且能將源模型從未見過的圖片進行正確地分類。

我們在文中將使用MobileNet神經網路（安裝包地址見附錄），它和VGG-16一樣強大，但是體積更小，在瀏覽器中的載入時間更短。

在瀏覽器中運行模型

在這一部分，我們將訓練一個二元分類模型。

首先，我們瀏覽器的遊戲腳本MK.js中運行訓練過的模型。代碼如下：

以上代碼中一些變數和函數的注釋：

video：頁面中的HTML5視頻元素

Layer：MobileNet層的名稱，我們從中獲得輸出並把它作為我們模型的輸入

mobilenetInfer：從MobileNet接受例子，並返回另一個函數。返回的函數接受輸入，並從MobileNet特定層返回相關的輸出

canvas：將取出的幀指向HTML5的畫布

scale：壓縮幀的畫布

第二步，我們從攝像頭獲取視頻流，作為視頻元素的源。對獲得的圖像進行灰階濾波，改變其內容：

第三步，把訓練過的模型和遊戲腳本MK.js連接起來。

在以上代碼中，我們將MobileNet的輸出傳遞給mobilenetInfer方法，從而獲得了從網路的隱藏層中獲得輸出的快捷方式。此外，我還引用了startInterval。

startInterval正是關鍵所在，它每間隔100ms引用一個匿名函數。在這個匿名函數中，我們把視頻當前幀放入畫布中，然後壓縮成100*56的圖片後，再用於灰階濾波器。

在下一步中，我們把壓縮後的幀傳遞給MobileNet，之後我們將輸出傳遞給訓練過的模型，通過dataSync方法返回一個一維張量punching。

最後，我們通過punching來確定拳擊的概率是否高於0.4，如果是，將調用onPunch方法，現在我們可以控制一種動作了：

用N元分類識別拳擊和踢腿

在這部分，我們將介紹一個更智能的模型：使用神經網路分辨三種動作：拳擊、踢腿和站立。

我們對壓縮和灰階化的圖片調用MobileNet，之後將輸出傳遞給訓練過的模型。 該模型返回一維張量，我們用dataSync將其轉換為一個數組。 下一步，通過使用Array.from我們將類型化數組轉換為JavaScript數組，數組中包含我們提取幀中三種姿勢的概率。

如果既不是踢腿也不是拳擊的姿勢的概率高於0.4，我們將返回站立不動。 否則，如果顯示高於0.32的概率拳擊，我們會向MK.js發出拳擊指令。 如果踢腿的概率超過0.32，那麼我們發出一個踢腿動作。

以下就是完整的演示效果：

動作識別

如果我們收集到更大的多樣性數據集，那麼我們搭建的模型就能更精確處理每一幀。但這樣就夠了嗎？顯然不是，請看以下兩張圖：

它們都是踢腿動作，但實際上在視頻中有很大的不同，是兩種不同的動作。

為了識別動作，我們還需要使用RNN（循環神經網路），RNN的優勢在處理時間序列問題，比如

自然語言處理，詞語的意思需要聯繫上下文

根據歷史記錄，預測用戶將要訪問的頁面

識別一系列幀中的動作

若要識別動作，我們還需要將數幀畫面輸入CNN，再將輸出結果輸入RNN。

總結

在本文中，我們開發了一個圖像分類模型。為此，我們手動提取視頻幀並收集數據集，將它們分成三個不同的類別，然後使用imgaug進行數據增強。

之後，我們通過MobileNet來解釋什麼是遷移學習，以及我們如何利用MobileNet。經過訓練，我們的模型達到了90％以上的準確率！

為了在瀏覽器中使用我們開發的模型，我們將它與MobileNet一起載入，並從用戶的相機中每100ms取出一幀，識別用戶的動作，並使用模型的輸出來控制《真人快打3》中的角色。

最後，我們簡單討論了如何通過RNN來進一步改進我們的模型。

我希望你們能夠和我一樣喜歡這個小項目。

附錄：

原文地址：

https://blog.mgechev.com/2018/10/20/transfer-learning-tensorflow-js-data-augmentation-mobile-net/

原動作識別項目地址：

https://github.com/mgechev/movement.js

JS版《真人快打》項目地址：

https://github.com/mgechev/mk.js

imgaug：

https://github.com/aleju/imgaug

MobileNet神經網路：

https://www.npmjs.com/package/@tensorflow-models/mobilenet

—完—

加入社群

量子位AI社群開始招募啦，歡迎對AI感興趣的同學，在量子位公眾號（QbitAI）對話界面回復關鍵字「交流群」，獲取入群方式；

此外，量子位專業細分群(自動駕駛、CV、NLP、機器學習等)正在招募，面向正在從事相關領域的工程師及研究人員。

進專業群請在量子位公眾號（QbitAI）對話界面回復關鍵字「專業群」，獲取入群方式。（專業群審核較嚴，敬請諒解）

活動策劃招聘

量子位正在招聘活動策劃，將負責不同領域維度的線上線下相關活動策劃、執行。歡迎聰明靠譜的小夥伴加入，並希望你能有一些活動策劃或運營的相關經驗。相關細節，請在量子位公眾號(QbitAI)對話界面，回復「招聘」兩個字。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！