如何使用 TensorFlow.js 自動化 Chrome 恐龍遊戲？

知識 06-25

本文為 AI 研習社編譯的技術博客，原標題：

Using TensorFlow.js to Automate the Chrome Dinosaur Game (part 1)

作者 |Aayush Arora

翻譯 | 胡瑛皓編輯 | 王立魚

https://heartbeat.fritz.ai/automating-chrome-dinosaur-game-part-1-290578f13907

本文將介紹如何用TensorFlow.js自動化Chrome自帶的恐龍遊戲。如果你之前沒有玩過，簡單說明一下它是一個附送的遊戲，當你離線時 (或Chrome崩潰時) 可以控制一個2d恐龍，需要控制恐龍跳躍躲避障礙。在這裡可以玩一把：https://chromedino.com/

神經網路簡言之是一個模擬人腦工作的計算系統模型。人類大腦由多個神經元組成，這些神經元結合在一起共同作出判斷。

圖中每個連接都帶有權重和偏執項，優化這些參數得到需要的結果稱為學習。

TensorFlow是近年穀歌的深度學習開發庫，它不僅提升了深度學習和機器學習的性能，同時也使開發者能更好的開發人工智慧應用。

在TensorFlow的Python版本發布後，谷歌發布了用於Android的TensorFlow Lite，以及大家期待已久的 TensorFlow.js。TF.js 為JavaScript瀏覽器及後段提供了深度學習的能力。

TensorFlow.js 的API可分為兩種—核心API，其中包含基礎數學函數、優化器等，發燒友可以據此從零開始構建模型；層API，構建在TensorFlow.js核心之上的高層API，便於用戶直接在瀏覽器上構建、訓練、執行深度學習模型。

安裝 TensorFlow.js

本文中，我們使用層API。若要安裝TensorFlow.js，我需要通過npm安裝，命令如下：

在TensorFlow.js項目，我們通常會用webpack, parcel, 或 rollup等工具構建。

這些構建工具各有優缺點。Parcel適合較小的項目，rollup則剛出來。不過這些工具都是通過內部構建依賴圖映射到項目的每個模塊，最後生成1個或多個bundle。鏈接中的文章對這些工具做了詳細的比較。

這裡打個廣告，如果想收到機器學習的新聞郵件，可在通過此鏈接註冊，你每周都會收到由專業人士審核的機器學習的郵件。

Chrome 恐龍遊戲

我們將創建一個AI系統，像人一樣玩這個遊戲。

首先我們需要模擬Chrome的自帶的恐龍遊戲（我們可以在GitHub中找到）。本例中我們用到一個開源庫，裡面帶有Chrome恐龍遊戲的完整代碼。我們對代碼進行了格式化，使代碼可讀性更好。

讓我們一步步來看一下

主類Runner.js中包含恐龍和遊戲事件相關的實現。該類允許我們同時使用多個恐龍 (後續博客將使用此特性)。

在這個類里加了3個事件分別為:

onCrash

onReset

onRunning

這三個事件是遊戲中主要的分割點。當恐龍碰到障礙物時觸發onCrash

方法，onReset方法用於onCrash觸發後重置遊戲，onRunning方法在每個運動實例中調用以確定恐龍是否應該跳躍。

可參考以下代碼:

https://github.com/aayusharora/GeneticAlgorithms

src/game目錄中包含復現Chrome恐龍遊戲的代碼

runner.js導出這些方法，這樣nn.js，我們的人工智慧類可以訪問以上談到的方法。index.html里包含了HTML的div，在這裡我們注入遊戲畫面以及相關腳本。

很好!! 希望你還在看。

接下來看一下如何設置項目。

設置

src/nn.js

第一步是定義import的內容。

這裡我們使用babel-polyfill，這樣就能使用ES6的全新特性了，其中包含了新的內置對象諸如 WeakMaps。

接下來引入tensorflow庫作為tf對象。

下面導入畫布寬度和高度，可以使用特徵縮放，最後還有我們提到的Runner類。

接下來初始化runner類的實例為null。

這裡寫一個setup函數，當所有DOM元素載入後，該函數將會被調用。

setup函數需要初始化runner實例，設置DINO_COUNT=1，並對應的給出onReset, onCrash, onRunning 事件對應的函數。之前說過Runner類支持多個恐龍同時運行。這裡DINO_COUNT就設定了需要模擬的恐龍數量。

把runner賦值給window.runner，這樣可以作為全局變數訪問，然後執行runner.init()，啟動遊戲。

看起來已經完成設定，準備開始了

處理重置

定義firstTime變數，表明恐龍遊戲是第一次玩還是需要重置。這樣就可以用同一個帶條件判斷的函數處理重置了。

handleReset方法輸入是恐龍數組，runner類創建了一組恐龍實例，支持多個恐龍同時在遊戲中。這個設定是為接下來的系列，本文中數組裡只含一個恐龍。

既然本例中只有1個恐龍，就取參數第0個元素。

如果是第一次調用，將初始化模型並保存在dino.model對象中。我們用tf.sequential()創建模型，結果返回一個序列模型。接下來在模型中增加2層。

神經網路會接收3個輸入, 即定義恐龍狀態的參數，例如遊戲的速度, 障礙物的寬度，與恐龍間的距離。

所以第一層的輸入形狀是 [3] ，這是一個2D tensor數組，例如 [ [1 , 1 , 0] ], 就代表3個不同的輸入值。我們用的是最基本的激活函數sigmoid函數，為下一層輸出6個值。

這是第二個輸出層，包含6個輸入，來自前一個隱層。

同樣這裡的激活函數是Sigmoid。那你覺得輸出需要多少單元? 現在只需要2個單元, 對么? 1個輸出恐龍跳躍範圍是 [0,1] ，另一個輸出是恐龍不動範圍是 [1,0].

最終我們用 meanSquaredError loss 函數編譯模型，用adam 優化器，其學習率為 0.1，可以試一下這個學習率

在dino.training對象中，含了2個數組保存我們的訓練集inputs和labels。

否則，這不是第一次reset，就用TensorFlow自帶的model.fit函數訓練神經網路。該函數的參數是兩個tensor以向量形式。第一個參數的輸入與input的形狀一致，第二個參數與output的形狀一致。這裡用TensorFlow api中的tensor2d函數將二維數組轉成系統中的tensor。

太棒了, 我們已經完成了模型構建並實現了訓練部分。

那麼…

開始預測!

很顯然模型預測部分將由handleRunning使用，該函數決定接下來要做什麼。

handleRunning方法接收恐龍和狀態作為參數。這裡的狀態是當前Runner的狀態 — 裡面包含與下一個障礙物的距離、其寬度和遊戲速度。返回一個Promise對象，後續會回調恐龍執行的動作。

在promise回調函數里，傳給匿名函數作為參數——解決回調函數。如果恐龍當前不在跳躍狀態，就用模型預測下一個動作。predict方法處會調用ConvertStateToVector方法，其輸入是狀態對象，返回特徵縮放向量。接下來調用 tf.tensor2d 方法將數組轉換成 tensor，然後用它來執行predict方法。

model.predict方法返回一個對象，其中包含data方法，用以返回一個Promise對象。Promise對象中構造匿名回調函數，其輸入為result，result是一個簡單數組包含預測結果。

既然前文定義了 [0,1] 作為跳躍輸出，比較結果 result[1] 和 result[0]: 如果result[1] 大於 result[0], 就讓恐龍跳一下; 否則恐龍繼續保持奔跑狀態。

如果執行跳躍，將action設置為 1 ，將lastJumpingState設置為當前state, 因為我們選擇在這個狀態跳躍。

如果不選擇跳躍，將lastRunningState設置為當前state, 因為我們選擇在這個狀態保持奔跑。

最後, 代入所需的參數執行Promise (0 保持, 1 預測跳躍) resolve(action);

如果恐龍當前已在跳躍狀態，執行 running (0) resolve(0);

好的! 這裡已經決定了恐龍如何行動。接下來要處理失敗的情況，比如當恐龍撞到障礙物。這裡也是創建訓練數據的地方

處理恐龍落在障礙物上

收集訓練數據

handleCrash函數會檢查恐龍在起跳後是否撞到障礙物，基於這個狀態選擇向訓練集增加什麼數據。

如果恐龍在跳躍時撞到障礙物，這表示之前不應該起跳。那麼保存lastJumpingState作為輸入，其label為not-jump作為輸出。

同樣的如果並未及時起跳，但是恐龍碰到了障礙物，這意味著之前應該起跳。取lastRunningState作為輸入，其label為jump作為其輸出。然後將這些數據作為新的訓練數據送入dino.training。