《人工智能應(yīng)用與體驗(yàn)》課件 項(xiàng)目1 猜拳小達(dá)人_第1頁
《人工智能應(yīng)用與體驗(yàn)》課件 項(xiàng)目1 猜拳小達(dá)人_第2頁
《人工智能應(yīng)用與體驗(yàn)》課件 項(xiàng)目1 猜拳小達(dá)人_第3頁
《人工智能應(yīng)用與體驗(yàn)》課件 項(xiàng)目1 猜拳小達(dá)人_第4頁
《人工智能應(yīng)用與體驗(yàn)》課件 項(xiàng)目1 猜拳小達(dá)人_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

猜拳小達(dá)人基于TensorFlow.js框架搭建網(wǎng)頁端猜拳游戲情景導(dǎo)入小派最近學(xué)習(xí)有點(diǎn)累，他想能不能設(shè)計(jì)出一款游戲來緩解疲勞，于是他想到可以和計(jì)算機(jī)進(jìn)行猜拳游戲：計(jì)算機(jī)的攝像頭能夠捕捉到小派的手勢動(dòng)作數(shù)據(jù)，并識(shí)別小派手勢，然后根據(jù)小派和計(jì)算機(jī)隨機(jī)出的手勢，進(jìn)行判斷勝負(fù)。本項(xiàng)目將基于TensorFlow.js框架逐步搭建網(wǎng)頁端應(yīng)用猜拳游戲。先點(diǎn)擊下方鏈接體驗(yàn)一下吧！猜拳游戲總?cè)蝿?wù)分析基于TensorFlow.js框架逐步搭建網(wǎng)頁端應(yīng)用猜拳游戲任務(wù)一

安裝與配置環(huán)境WebServerforChrome插件

WebServerforChrome是一款插件，能夠讓用戶使用Chrome來充當(dāng)自己的臨時(shí)HTTP服務(wù)器。Chrome因?yàn)榘踩囊蛩?，限制直接運(yùn)行本地網(wǎng)頁文件，因此在進(jìn)行網(wǎng)頁相關(guān)項(xiàng)目調(diào)試時(shí)，就需要在本地模擬出一個(gè)網(wǎng)頁服務(wù)器，而WebServerforChrome就是這樣的一款Chrome擴(kuò)展程序。雖說其功能還比不上Apache或者Nginx這樣的專業(yè)網(wǎng)頁服務(wù)器，但從網(wǎng)頁前端開發(fā)而言已經(jīng)夠用，只需要指定項(xiàng)目目錄，就可以在瀏覽器中預(yù)覽項(xiàng)目實(shí)現(xiàn)的效果；當(dāng)然WebServerForChrome也提供了一些基礎(chǔ)設(shè)置功能，比如說開機(jī)啟動(dòng)、阻止電腦進(jìn)入睡眠模式，默認(rèn)直接進(jìn)入Index.html頁面等等。WebServerforChrome插件WebServerforChrome插件功能：1、靜態(tài)網(wǎng)站2、文件列表下載3、其他設(shè)備可以拖動(dòng)上傳文件4、在后臺(tái)運(yùn)行5、局域網(wǎng)訪問（支持公網(wǎng)）6、阻止電腦睡眠7、自動(dòng)展示index.html8、自定義端口WebServerforChrome插件WebServerforChrome插件安裝與配置過程詳見派Lab對(duì)應(yīng)課程。任務(wù)二TensorFlow.js代碼部署網(wǎng)頁與網(wǎng)頁生成什么是網(wǎng)頁：超文本標(biāo)記語言（英語：HyperTextMarkupLanguage，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。網(wǎng)頁生成示例：點(diǎn)擊鏈接：在線體驗(yàn)HTML生成<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>隨機(jī)數(shù)智能</title></head><body><h1>標(biāo)題：我是一門院校課程</h1><p>我是一個(gè)段落</p><div>我是一個(gè)容器</div><ul>下面是我的課程目錄列表。<li>項(xiàng)目1：構(gòu)建XXX</li><li>項(xiàng)目2：實(shí)現(xiàn)YYY</li><li>項(xiàng)目3：完成ZZZ</li></ul></body></html>JavaScript什么是JS腳本：JavaScript是Web的編程語言，用于鏈接跳轉(zhuǎn)等內(nèi)容，作為開發(fā)Web頁面的腳本語言而出名，所有HTML頁面都可以使用JavaScript。JS腳本示例：點(diǎn)擊鏈接：在線體驗(yàn)JS腳本生成<!DOCTYPEhtml><html><head><metacharset="utf-8"><script>functiondisplayDate(){document.getElementById("demo").innerHTML=Date();}</script></head><body><h1>我的第一個(gè)JavaScript腳本</h1><pid="demo">這是一個(gè)段落</p><buttontype="button"onclick="displayDate()">顯示日期</button></body></html>TensorFlow.js簡介

TensorFlow.js是TensorFlow的JavaScript版本。可運(yùn)行在瀏覽器環(huán)境中，也可以通過服務(wù)器端Node.js啟動(dòng)。

它不但支持完全基于JavaScript從頭開發(fā)、訓(xùn)練和部署模型，也可以用來運(yùn)行已有的Python版TensorFlow模型，或者基于現(xiàn)有的模型進(jìn)行繼續(xù)訓(xùn)練。TensorFlow.js簡介瀏覽器中進(jìn)行機(jī)器學(xué)習(xí)，相對(duì)服務(wù)器端來講，將擁有以下四大優(yōu)勢：不需要安裝軟件或驅(qū)動(dòng)（打開瀏覽器即可使用）；可以通過瀏覽器進(jìn)行更加方便的人機(jī)交互；可以通過手機(jī)瀏覽器，調(diào)用手機(jī)硬件的各種傳感器（如：GPS、電子羅盤、加速度傳感器、攝像頭等）；用戶的數(shù)據(jù)可以無需上傳到服務(wù)器，在本地即可完成所需操作。通過這些優(yōu)勢，TensorFlow.js將給開發(fā)者帶來極高的靈活性。項(xiàng)目代碼如上圖是運(yùn)行猜拳游戲的前端html文件以及Tensorflow.js腳本代碼。前端retrain.html在該文件中設(shè)計(jì)猜拳游戲中出現(xiàn)的按鈕、布局等。想要實(shí)現(xiàn)網(wǎng)頁中的按鈕進(jìn)行實(shí)際操作，就需要編寫相應(yīng)的腳本代碼來實(shí)現(xiàn)，即編寫html實(shí)際調(diào)用的js腳本。在js腳本中我們要實(shí)現(xiàn)圖像數(shù)據(jù)的采集、識(shí)別模型的訓(xùn)練以及驗(yàn)證。后端webcam.js該腳本用于調(diào)用本機(jī)攝像頭來捕捉手勢圖像，構(gòu)建手勢數(shù)據(jù)集。核心代碼如下：//用攝像頭捕捉的畫面來創(chuàng)建圖像對(duì)應(yīng)的像素值的張量。constwebcamImage=tf.browser.fromPixels(this.webcamElement);后端rps-dataset.js該腳本主要有兩個(gè)函數(shù)，一是對(duì)不同手勢用例添加時(shí)的處理，二是將數(shù)據(jù)類別處理成tenforflowjs能處理的tensor形式。核心代碼如下：//當(dāng)某一類手勢中添加了一個(gè)樣本時(shí)，通過調(diào)用concat并將軸參數(shù)設(shè)置為0來將新樣本連接到現(xiàn)有樣本集this.xs=tf.keep(oldX.concat(example,0));//將每一類手勢對(duì)應(yīng)的標(biāo)簽（整數(shù)）轉(zhuǎn)換為one-hot表示形式tf.tensor1d([this.labels[i]]).toInt(),numClasses)}));后端index.js//模型訓(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'})]});該腳本主要用來構(gòu)建、訓(xùn)練手勢識(shí)別模型，核心代碼如下：//設(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);}}});任務(wù)三手勢數(shù)據(jù)采集、模型訓(xùn)練、猜拳PK打開網(wǎng)頁1、確認(rèn)插件已開啟，搜索本機(jī)應(yīng)用程序，找到WebServeforChrome應(yīng)用->點(diǎn)擊WebServer服務(wù)->開始服務(wù)。2、檢查以上html、js文件在同一文件夾下。3、在Chrome瀏覽器中打開retrain.html網(wǎng)頁，看到攝像頭開啟提醒，選擇“允許”采集“石頭”手勢該步驟采集“石頭”手勢，操作步驟如下：1）握拳，放在攝像頭下，確保畫面里捕捉到了拳頭手勢。2）點(diǎn)擊“石頭”按鈕3）確認(rèn)“石頭”按鈕下方的“石頭用例”次數(shù)加14）變換不同角度、不同大小的拳頭手勢，重復(fù)前三步，觀察“石頭用例”數(shù)目，達(dá)到50次以上即可。采集“布”手勢該步驟采集“布”手勢，操作步驟如下：1）出布，放在攝像頭下，確保畫面里捕捉到了布的手勢。2）點(diǎn)擊“布”按鈕3）確認(rèn)“布”按鈕下方的“布用例”次數(shù)加14）變換不同角度的布手勢，重復(fù)前三步，觀察“布用例”數(shù)目，達(dá)到50次以上即可。采集“剪刀”手勢該步驟采集“剪刀”手勢，操作步驟如下：1）比剪刀手勢，放在攝像頭下，確保畫面里捕捉到了剪刀手勢。

2）點(diǎn)擊“剪刀”按鈕

3）確認(rèn)“剪刀”按鈕下方的“剪刀用例”次數(shù)加1

4）變換不同角度的剪刀手勢，重復(fù)前三步，觀察“剪刀用例”數(shù)目，達(dá)到50次以上即可。訓(xùn)練集在捕捉手勢圖像時(shí)，分別點(diǎn)擊“石頭”、“布”、“剪刀”按鈕，就是給圖像打分類標(biāo)簽的過程，即數(shù)據(jù)標(biāo)注。確認(rèn)三種手勢都有一定量的數(shù)據(jù)即可。

三種手勢數(shù)據(jù)采集完成后，訓(xùn)練集就生成了。手勢識(shí)別模型訓(xùn)練點(diǎn)擊頁面中的“訓(xùn)練神經(jīng)網(wǎng)絡(luò)”按鈕，開始手勢識(shí)別模型的訓(xùn)練。手勢識(shí)別模型訓(xùn)練1）點(diǎn)擊頁面中的“訓(xùn)練神經(jīng)網(wǎng)絡(luò)”按鈕，開始手勢識(shí)別模型的訓(xùn)練。

2）當(dāng)網(wǎng)頁上方出現(xiàn)如下圖所示的彈框，表示模型訓(xùn)練完成。進(jìn)行猜拳PK游戲

模型訓(xùn)練完成后，就可

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論