查 編譯整理

量子位 出品 | 公眾號 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的工具（項目地址見附錄），我的數據增強代碼如下：

np.random.seed(44)
ia.seed(44)
def main():
 for i in range(1, 191):
 draw_single_sequential_images(str(i), "others", "others-aug")
 for i in range(1, 191):
 draw_single_sequential_images(str(i), "hits", "hits-aug")
 for i in range(1, 191):
 draw_single_sequential_images(str(i), "kicks", "kicks-aug")
def draw_single_sequential_images(filename, path, aug_path):
 image=misc.imresize(ndimage.imread(path + "/" + filename + ".jpg"), (56, 100))
 sometimes=lambda aug: iaa.Sometimes(0.5, aug)
 seq=iaa.Sequential(
 [
 iaa.Fliplr(0.5), # horizontally flip 50% of all images
 # crop images by -5% to 10% of their height/width
 sometimes(iaa.CropAndPad(
 percent=(-0.05, 0.1),
 pad_mode=ia.ALL,
 pad_cval=(0, 255)
 )),
 sometimes(iaa.Affine(
 scale={"x": (0.8, 1.2), "y": (0.8, 1.2)}, # scale images to 80-120% of their size, individually per axis
 translate_percent={"x": (-0.1, 0.1), "y": (-0.1, 0.1)}, # translate by -10 to +10 percent (per axis)
 rotate=(-5, 5),
 shear=(-5, 5), # shear by -5 to +5 degrees
 order=[0, 1], # use nearest neighbour or bilinear interpolation (fast)
 cval=(0, 255), # if mode is constant, use a cval between 0 and 255
 mode=ia.ALL # use any of scikit-image's warping modes (see 2nd image from the top for examples)
 )),
 iaa.Grayscale(alpha=(0.0, 1.0)),
 iaa.Invert(0.05, per_channel=False), # invert color channels
 # execute 0 to 5 of the following (less important) augmenters per image
 # don't execute all of them, as that would often be way too strong
 iaa.SomeOf((0, 5),
 [
 iaa.OneOf([
 iaa.GaussianBlur((0, 2.0)), # blur images with a sigma between 0 and 2.0
 iaa.AverageBlur(k=(2, 5)), # blur image using local means with kernel sizes between 2 and 5
 iaa.MedianBlur(k=(3, 5)), # blur image using local medians with kernel sizes between 3 and 5
 ]),
 iaa.Sharpen(alpha=(0, 1.0), lightness=(0.75, 1.5)), # sharpen images
 iaa.Emboss(alpha=(0, 1.0), strength=(0, 2.0)), # emboss images
 iaa.AdditiveGaussianNoise(loc=0, scale=(0.0, 0.01*255), per_channel=0.5), # add gaussian noise to images
 iaa.Add((-10, 10), per_channel=0.5), # change brightness of images (by -10 to 10 of original value)
 iaa.AddToHueAndSaturation((-20, 20)), # change hue and saturation
 # either change the brightness of the whole image (sometimes
 # per channel) or change the brightness of subareas
 iaa.OneOf([
 iaa.Multiply((0.9, 1.1), per_channel=0.5),
 iaa.FrequencyNoiseAlpha(
 exponent=(-2, 0),
 first=iaa.Multiply((0.9, 1.1), per_channel=True),
 second=iaa.ContrastNormalization((0.9, 1.1))
 )
 ]),
 iaa.ContrastNormalization((0.5, 2.0), per_channel=0.5), # improve or worsen the contrast
 ],
 random_order=True
 )
 ],
 random_order=True
 )
 im=np.zeros((16, 56, 100, 3), dtype=np.uint8)
 for c in range(0, 16):
 im[c]=image
 for im in range(len(grid)):
 misc.imsave(aug_path + "/" + filename + "_" + str(im) + ".jpg", grid[im])

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

建立模型

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

遷移學習

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

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

在瀏覽器中運行模型

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

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

const video=document.getElementById('cam');
const Layer='global_average_pooling2d_1';
const mobilenetInfer=m=> (p): tf.Tensor<tf.Rank>=> m.infer(p, Layer);
const canvas=document.getElementById('canvas');
const scale=document.getElementById('crop');
const ImageSize={
 Width: 100,
 Height: 56
};
navigator.mediaDevices
 .getUserMedia({
 video: true,
 audio: false
 })
 .then(stream=> {
 video.srcObject=stream;
 });

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

• video：頁面中的HTML5視頻元素
• Layer：MobileNet層的名稱，我們從中獲得輸出并把它作為我們模型的輸入
• mobilenetInfer：從MobileNet接受例子，并返回另一個函數。返回的函數接受輸入，并從MobileNet特定層返回相關的輸出
• canvas：將取出的幀指向HTML5的畫布
• scale：壓縮幀的畫布

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

const grayscale=(canvas: HTMLCanvasElement)=> {
 const imageData=canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
 const data=imageData.data;
 for (let i=0; i < data.length; i +=4) {
 const avg=(data[i] + data[i + 1] + data[i + 2]) / 3;
 data[i]=avg;
 data[i + 1]=avg;
 data[i + 2]=avg;
 }
 canvas.getContext('2d').putImageData(imageData, 0, 0);
};

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

let mobilenet: (p: any)=> tf.Tensor<tf.Rank>;
tf.loadModel('http://localhost:5000/model.json').then(model=> {
 mobileNet
 .load()
 .then((mn: any)=> mobilenet=mobilenetInfer(mn))
 .then(startInterval(mobilenet, model));
});

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

const startInterval=(mobilenet, model)=> ()=> {
 setInterval(()=> {
 canvas.getContext('2d').drawImage(video, 0, 0);
 grayscale(scale
 .getContext('2d')
 .drawImage(
 canvas, 0, 0, canvas.width,
 canvas.width / (ImageSize.Width / ImageSize.Height),
 0, 0, ImageSize.Width, ImageSize.Height
 ));
 const [punching]=Array.from((
 model.predict(mobilenet(tf.fromPixels(scale))) as tf.Tensor1D)
 .dataSync() as Float32Array);
 const detect=(window as any).Detect;
 if (punching >=0.4) detect && detect.onPunch();
 }, 100);
};

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

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

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

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

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

const punches=require('fs')
 .readdirSync(Punches)
 .filter(f=> f.endsWith('.jpg'))
 .map(f=> `${Punches}/${f}`);
const kicks=require('fs')
 .readdirSync(Kicks)
 .filter(f=> f.endsWith('.jpg'))
 .map(f=> `${Kicks}/${f}`);
const others=require('fs')
 .readdirSync(Others)
 .filter(f=> f.endsWith('.jpg'))
 .map(f=> `${Others}/${f}`);
const ys=tf.tensor2d(
 new Array(punches.length)
 .fill([1, 0, 0])
 .concat(new Array(kicks.length).fill([0, 1, 0]))
 .concat(new Array(others.length).fill([0, 0, 1])),
 [punches.length + kicks.length + others.length, 3]
);
const xs: tf.Tensor2D=tf.stack(
 punches
 .map((path: string)=> mobileNet(readInput(path)))
 .concat(kicks.map((path: string)=> mobileNet(readInput(path))))
 .concat(others.map((path: string)=> mobileNet(readInput(path))))
) as tf.Tensor2D;

我們對壓縮和灰階化的圖片調用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

— 完 —