查 編譯整理

量子位 出品 | 公眾號 QbitAI

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

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

早在5年前，他就曾展示過體感玩格斗游戲的項(xiàng)目成果：

當(dāng)時(shí)實(shí)現(xiàn)方案很簡單，也沒有利用時(shí)下流行的AI技術(shù)。但是這套算法離完美還相去甚遠(yuǎn)，因?yàn)樾枰獑紊嬅姹尘白鳛閰⒄眨褂脳l件苛刻。

5年間，無論是網(wǎng)絡(luò)瀏覽器的API，還是WebGL都有了長足的發(fā)展。于是這名工程師決定用TensorFlow.js來改進(jìn)他的游戲程序，并在他個(gè)人Blog上放出了完整教程。

量子位對文章做了編譯整理，主要內(nèi)容是訓(xùn)練模型識別《真人快打》這款游戲主要有拳擊、踢腿兩種動作，并通過模型輸出結(jié)果控制游戲人物做出對應(yīng)動作。

以下就是他Blog的主要內(nèi)容：

簡介

我將分享用TensorFlow.js和MobileNet創(chuàng)建動作分類算法的一些經(jīng)驗(yàn)，全文將分為以下幾部分：

• 為圖片分類收集數(shù)據(jù)
• 使用imgaug進(jìn)行數(shù)據(jù)增強(qiáng)
• 使用MobileNet遷移學(xué)習(xí)
• 二元分類和N元分類
• 在瀏覽器中使用TensorFlow.js模型訓(xùn)練圖片分類

簡單討論使用LSTM進(jìn)行動作分類

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

理解本文內(nèi)容需要有基本的軟件工程和JavaScript知識。如果你有一些基本的深度學(xué)習(xí)知識會很有幫助，但非硬性要求。

收集數(shù)據(jù)

深度學(xué)習(xí)模型的準(zhǔn)確性在很大程度上取決于訓(xùn)練數(shù)據(jù)的質(zhì)量。因此，我們首要的目標(biāo)是建立一個(gè)豐富的訓(xùn)練數(shù)據(jù)集。

我們的模型需要識別人物的拳擊和踢腿，所以應(yīng)當(dāng)從以下三個(gè)分類中收集圖像：

• 拳擊
• 踢腿
• 其他

為了這個(gè)實(shí)驗(yàn)，我找到兩位志愿者幫我收集圖像。我們總共錄制了5段視頻，每段都包含2-4個(gè)拳擊動作和2-4個(gè)踢腿動作。由于收集到的是視頻文件，我們還需要使用ffmpeg將之轉(zhuǎn)化為一幀一幀的圖片：

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

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

注：除了拳擊和踢腿外，圖片目錄中最多的是“其他”部分，主要是走動、轉(zhuǎn)身、開關(guān)視頻錄制的一些畫面。如果這部分內(nèi)容太多，會有風(fēng)險(xiǎn)導(dǎo)致訓(xùn)練后的模型產(chǎn)生偏見，把應(yīng)該歸于前兩類的圖片劃分到“其他”中，因此我們減少了這部分圖片的量。

如果只使用這600張相同環(huán)境、相同人物的圖片，我們將無法獲得很高的準(zhǔn)確度。為了進(jìn)一步提高識別的準(zhǔn)確度，我們將使用數(shù)據(jù)增強(qiáng)對樣本進(jìn)行擴(kuò)充。

數(shù)據(jù)增強(qiáng)

數(shù)據(jù)增強(qiáng)是一種通過已有數(shù)據(jù)集合成新樣本的技術(shù)，可以幫助我們增加數(shù)據(jù)集的樣本量和多樣性。我們可以將原始圖片處理一下轉(zhuǎn)變成新圖，但處理過程不能太過激烈，好讓機(jī)器能夠?qū)π聢D片正確歸類。

常見的處理圖片的方式有旋轉(zhuǎn)、反轉(zhuǎn)顏色、模糊等等。網(wǎng)上已有現(xiàn)成軟件，我將使用一款由Python編寫的imgaug的工具（項(xiàng)目地址見附錄），我的數(shù)據(jù)增強(qiáng)代碼如下：

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])

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

建立模型

現(xiàn)在，我們開始建立圖片分類模型。處理圖片使用的是CNN（卷積神經(jīng)網(wǎng)絡(luò)），CNN適合于圖像識別、物體檢測和分類領(lǐng)域。

遷移學(xué)習(xí)

遷移學(xué)習(xí)允許我們使用已被訓(xùn)練過網(wǎng)絡(luò)。我們可以從任何一層獲得輸出，并把它作為新的神經(jīng)網(wǎng)絡(luò)的輸入。這樣，訓(xùn)練新創(chuàng)建的神經(jīng)網(wǎng)絡(luò)能達(dá)到更高的認(rèn)知水平，并且能將源模型從未見過的圖片進(jìn)行正確地分類。

我們在文中將使用MobileNet神經(jīng)網(wǎng)絡(luò)（安裝包地址見附錄），它和VGG-16一樣強(qiáng)大，但是體積更小，在瀏覽器中的載入時(shí)間更短。

在瀏覽器中運(yùn)行模型

在這一部分，我們將訓(xùn)練一個(gè)二元分類模型。

首先，我們?yōu)g覽器的游戲腳本MK.js中運(yùn)行訓(xùn)練過的模型。代碼如下：

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;
 });

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

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

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

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);
};

第三步，把訓(xùn)練過的模型和游戲腳本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方法，從而獲得了從網(wǎng)絡(luò)的隱藏層中獲得輸出的快捷方式。此外，我還引用了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正是關(guān)鍵所在，它每間隔100ms引用一個(gè)匿名函數(shù)。在這個(gè)匿名函數(shù)中，我們把視頻當(dāng)前幀放入畫布中，然后壓縮成100*56的圖片后，再用于灰階濾波器。

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

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

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

在這部分，我們將介紹一個(gè)更智能的模型：使用神經(jīng)網(wǎng)絡(luò)分辨三種動作：拳擊、踢腿和站立。

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;

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

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

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

動作識別

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

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

為了識別動作，我們還需要使用RNN（循環(huán)神經(jīng)網(wǎng)絡(luò)），RNN的優(yōu)勢在處理時(shí)間序列問題，比如

• 自然語言處理，詞語的意思需要聯(lián)系上下文
• 根據(jù)歷史記錄，預(yù)測用戶將要訪問的頁面
• 識別一系列幀中的動作

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

總結(jié)

在本文中，我們開發(fā)了一個(gè)圖像分類模型。為此，我們手動提取視頻幀并收集數(shù)據(jù)集，將它們分成三個(gè)不同的類別，然后使用imgaug進(jìn)行數(shù)據(jù)增強(qiáng)。

之后，我們通過MobileNet來解釋什么是遷移學(xué)習(xí)，以及我們?nèi)绾卫肕obileNet。經(jīng)過訓(xùn)練，我們的模型達(dá)到了90％以上的準(zhǔn)確率！

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

最后，我們簡單討論了如何通過RNN來進(jìn)一步改進(jìn)我們的模型。

我希望你們能夠和我一樣喜歡這個(gè)小項(xiàng)目。

附錄：

原文地址：

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

原動作識別項(xiàng)目地址：

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

JS版《真人快打》項(xiàng)目地址：

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

imgaug：

https://github.com/aleju/imgaug

MobileNet神經(jīng)網(wǎng)絡(luò)：

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

— 完 —