猜拳小達人一、任務(wù)目標知識目標1、了解TensorFlow.js框架2、了解神經(jīng)網(wǎng)絡(luò)模型3、了解圖像分類技能目標1、能夠熟練安裝瀏覽器插件2、具有使用TensorFlow.js框架的能力素質(zhì)目標1、具有良好的職業(yè)道德2、具有持續(xù)學(xué)習(xí)的能力二、任務(wù)指南步驟1：插件下載將壓縮包下載到本地電腦并解壓。步驟2：WebServer插件安裝與配置1、首先確認電腦上安裝了Chrome瀏覽器。如沒有安裝，可以雙擊安裝包ChromeSetup.exe，安裝Chrome瀏覽器。安裝完成后打開Chrome，再進行插件安裝。2、安裝插件方法一：1）打開Chrome，從右上角打開設(shè)置，從側(cè)邊欄選擇擴展程序。2）進入chrome瀏覽器的擴展程序界面，并將開發(fā)者模式打開。3）修改“ofhbbkphhbklhfoeikjpcbhemlocgigb_0.5.2_.crt”文件的拓展名，將其改為“ofhbbkphhbklhfoeikjpcbhemlocgigb_0.5.2_.zip”，具體如下圖所示：4）將上圖中的zip文件直接拖到擴展程序頁面，出現(xiàn)下圖所示的插件，即安裝完成。方法二：1）按照方法一，將文件擴展名改成zip后，點擊zip文件，然后右鍵選擇解壓到文件夾中，如下圖：2）在擴展程序頁面點擊“加載已解壓的擴展程序”，然后選擇解壓后的文件夾即可。方法三：從應(yīng)用商店直接安裝插件（注意：使用該方法的前提是：你的電腦可以正常連接谷歌）。1）通過Google搜索找到下圖：2）單擊“WebServerforChrome”，打開后，選擇啟動應(yīng)用，即可。注意：如果在以上安裝過程中，插件上顯示“錯誤”，一般不影響任務(wù)的正常運行，可以先嘗試后續(xù)的任務(wù)步驟。步驟3：新建本地文件夾在本地電腦中新建一個文件夾，用于存儲后續(xù)任務(wù)的源碼，比如D盤TensorFlow_JS。步驟4：插件配置1）打開本地電腦中的WebServer插件。比如下圖是win10系統(tǒng)中搜索WebServer應(yīng)用并打開。2）單擊CHOOSEFOLDER，選擇步驟3創(chuàng)建的文件夾TensorFlow_JS，另外，Options中的配置可參照下圖進行。步驟5：打開瀏覽器打開Chrome瀏覽器，并在Chrome中打開下方的URL地址：:8887/，即可打開步驟3創(chuàng)建的文件夾。到這里，WebServer插件的安裝與配置就完成了。步驟6：源碼下載1、下載壓縮包“猜拳PK.zip”。2、解壓到插件配置的對應(yīng)目錄（TensorFlow_JS目錄下）。其中包含了運行猜拳游戲的tensorflow.js腳本代碼以及前端html文件。步驟7：源碼解讀1、retrain.html，在該文件中設(shè)計猜拳游戲中出現(xiàn)的按鈕、布局等。想要實現(xiàn)網(wǎng)頁中的按鈕進行實際操作，就需要編寫相應(yīng)的腳本代碼來實現(xiàn)，即編寫html實際調(diào)用的js腳本。在js腳本中我們要實現(xiàn)圖像數(shù)據(jù)的采集、識別模型的訓(xùn)練以及驗證。2、webcam.js，該腳本用于調(diào)用本機攝像頭來捕捉手勢圖像，構(gòu)建手勢數(shù)據(jù)集。核心代碼如下：//用攝像頭捕捉的畫面來創(chuàng)建圖像對應(yīng)的像素值的張量。constwebcamImage=tf.browser.fromPixels(this.webcamElement);3、rps-dataset.js，該腳本主要有兩個函數(shù)，一是對不同手勢用例添加時的處理，二是將數(shù)據(jù)類別處理成tenforflowjs能處理的tensor形式。核心代碼如下：//當(dāng)某一類手勢中添加了一個樣本時，通過調(diào)用concat并將軸參數(shù)設(shè)置為0來將新樣本連接到現(xiàn)有樣本集this.xs=tf.keep(oldX.concat(example,0));//將每一類手勢對應(yīng)的標簽（整數(shù)）轉(zhuǎn)換為one-hot表示形式tf.tensor1d([this.labels[i]]).toInt(),numClasses)}));4、index.js，該腳本主要用來構(gòu)建、訓(xùn)練手勢識別模型，核心代碼如下：//模型訓(xùn)練代碼示例asyncfunctiontrain(){dataset.ys=null;dataset.encodeLabels(3);//模型結(jié)構(gòu)：兩層全連接網(wǎng)絡(luò)層densemodel=tf.sequential({layers:[tf.layers.flatten({inputShape:mobilenet.outputs[0].shape.slice(1)}),tf.layers.dense({units:100,activation:'relu'}),tf.layers.dense({units:3,activation:'softmax'})]});//設(shè)置優(yōu)化器constoptimizer=tf.train.adam(0.0001);//編譯模型pile({optimizer:optimizer,loss:'categoricalCrossentropy'});letloss=0;//使用fit函數(shù)開始訓(xùn)練model.fit(dataset.xs,dataset.ys,{epochs:10,callbacks:{onBatchEnd:async(batch,logs)=>{loss=logs.loss.toFixed(5);console.log('LOSS:'+loss);}}});}步驟8：打開網(wǎng)頁1、確認插件已開啟，同步驟4，搜索本機應(yīng)用程序，找到WebServeforChrome應(yīng)用->點擊WebServer服務(wù)->開始服務(wù)。2、檢查以上html、js文件在同一文件夾下。3、在Chrome瀏覽器中打開retrain.html網(wǎng)頁，看到攝像頭開啟提醒，選擇“允許”，如下圖：步驟9：采集“石頭”手勢攝像頭開啟后，我們就可以采集數(shù)據(jù)了。在頁面中可以看到“石頭”、“布”、“剪刀”按鈕，也就是我們下面要采集這三種手勢的圖片。??在三個按鈕上方，可以看到攝像頭實時捕捉的畫面。該步驟采集“石頭”手勢，操作步驟如下：1）握拳，放在攝像頭下，確保畫面里捕捉到了拳頭手勢。2）點擊“石頭”按鈕3）確認“石頭”按鈕下方的“石頭用例”次數(shù)加14）變換不同角度、不同大小的拳頭手勢，重復(fù)前三步，觀察“石頭用例”數(shù)目，達到50次以上即可。步驟10：采集“布”手勢該步驟采集“布”手勢，操作步驟如下：1）出布，放在攝像頭下，確保畫面里捕捉到了布的手勢。2）點擊“布”按鈕3）確認“布”按鈕下方的“布用例”次數(shù)加14）變換不同角度的布手勢，重復(fù)前三步，觀察“布用例”數(shù)目，達到50次以上即可。步驟11：采集“剪刀”手勢該步驟采集“剪刀”手勢，操作步驟如下：1）比剪刀手勢，放在攝像頭下，確保畫面里捕捉到了剪刀手勢。2）點擊“剪刀”按鈕3）確認“剪刀”按鈕下方的“剪刀用例”次數(shù)加14）變換不同角度的剪刀手勢，重復(fù)前三步，觀察“剪刀用例”數(shù)目，達到50次以上即可。三種手勢數(shù)據(jù)采集完成后，訓(xùn)練集就生成了。在捕捉手勢圖像時，分別點擊“石頭”、“布”、“剪刀”按鈕，就是給圖像打分類標簽的過程，即數(shù)據(jù)標注。確認三種手勢都有一定量的數(shù)據(jù)即可。步驟12：手勢識別模型訓(xùn)練點擊頁面中的“訓(xùn)練神經(jīng)網(wǎng)絡(luò)”按鈕，開始手勢識別模型的訓(xùn)練。查看訓(xùn)練的過程或者進度，可在頁面空白處右鍵，選擇“檢查”，選擇“控制臺”選項卡，可看到如下界面：LOSS就是模型訓(xùn)練過程中的損失，隨著訓(xùn)練次數(shù)的增加，讓模型朝著損失越來越小的方向去改進。當(dāng)網(wǎng)頁上方出現(xiàn)如下圖所示的彈框，表示模型訓(xùn)練完成。步驟13：進行猜拳PK游戲模型訓(xùn)練完成后，就可以進行猜拳游戲了，在游戲過程中，將會調(diào)用訓(xùn)練好的手勢識別模型對攝像頭下你給出的手勢進行識別，然后將識別結(jié)果和計算機出的手勢進行比較。1）確認攝像頭是開啟狀態(tài)2）在攝像頭下給出任意一種手勢3）點擊“開始PK”按鈕，進入猜拳游戲狀態(tài)4）可以看到按鈕下方輸出了你的手勢識別結(jié)果、計算機出拳結(jié)果及PK結(jié)果5）再次點擊“開始PK”，可以繼續(xù)猜拳游戲。在PK環(huán)節(jié)中攝像頭捕捉到你出的手勢，然后調(diào)用訓(xùn)練好的手勢識別模型識別出你出的手勢是布、石頭或剪刀，此時識別的結(jié)果可能不是每次都正確，準確率更多取決于