項(xiàng)目1 猜拳小達(dá)人

《猜拳小達(dá)人》教學(xué)設(shè)計(jì)課題：猜拳小達(dá)人授課對(duì)象：中職一年級(jí)課型：新授課課時(shí)：2~3課時(shí)教材分析：結(jié)構(gòu)內(nèi)容：本節(jié)課選自《人工智能通識(shí)》的項(xiàng)目一。本節(jié)課的主要內(nèi)容是體驗(yàn)人工智能的應(yīng)用，了解深度學(xué)習(xí)TensorFlow.js框架，了解深度學(xué)習(xí)神經(jīng)網(wǎng)絡(luò)模型，了解圖像分類的概念，掌握基于TensorFlow.js搭建網(wǎng)頁應(yīng)用的流程和方法。地位作用：如今人工智能已經(jīng)逐步讓人們的生活智能化，讓企業(yè)服務(wù)智能化，那么無論為了工作還是為了跟上時(shí)代步伐，有必要去了解人工智能是如何運(yùn)作的。本節(jié)課的學(xué)習(xí)將帶領(lǐng)學(xué)生從零開始認(rèn)識(shí)人工智能技術(shù)，并在瀏覽器中運(yùn)行人工智能模型，使學(xué)生能夠動(dòng)手搭建一個(gè)簡單的人工智能應(yīng)用，即網(wǎng)頁端的猜拳游戲，讓學(xué)生建立起對(duì)人工智能的興趣。學(xué)情分析學(xué)習(xí)心理特征：本節(jié)課的授課對(duì)象為中職一年級(jí)學(xué)生該階段的學(xué)生學(xué)習(xí)自制力較差，上課注意力易被分散，因此在上課過程中，應(yīng)該采用講練結(jié)合的方式，讓學(xué)生能夠在實(shí)踐中學(xué)習(xí)和鞏固課程內(nèi)容。同時(shí)該階段的學(xué)生有很多自己的想法和創(chuàng)意，因此在設(shè)計(jì)任務(wù)時(shí)，需要給學(xué)生一定的自由發(fā)揮的空間，讓學(xué)生自主地學(xué)習(xí)和實(shí)踐。另外由于中職一年級(jí)的學(xué)生水平各不相同，因此教師在學(xué)生操作過程中應(yīng)該實(shí)時(shí)觀察，引導(dǎo)并鼓勵(lì)基礎(chǔ)較差的學(xué)生完成練習(xí)。知識(shí)基礎(chǔ)：中職一年級(jí)學(xué)生已經(jīng)掌握了計(jì)算機(jī)與瀏覽器的使用，因此可以讓學(xué)生獨(dú)立動(dòng)手安裝實(shí)訓(xùn)需要的環(huán)境。教學(xué)目標(biāo)知識(shí)與技能目標(biāo)：能夠說出什么是人工智能能夠說出人工智能的典型應(yīng)用能夠說出TensorFlow.js是什么能夠說出Html是什么能夠安裝瀏覽器插件WebServerforChrome能夠了解TensorFlow.js構(gòu)建模型的過程能夠部署猜拳游戲的Html與JS代碼過程與方法：使用搜索引擎搜索信息，小組合作討論人工智能的概念及其應(yīng)用。根據(jù)教師發(fā)布的實(shí)訓(xùn)任務(wù)書，自主進(jìn)行WebServerforChrome插件的安裝與配置。根據(jù)教師發(fā)布的實(shí)訓(xùn)任務(wù)書，自主下載代碼包到正確位置根據(jù)教師發(fā)布的實(shí)訓(xùn)任務(wù)書，自主采集手勢數(shù)據(jù)、訓(xùn)練模型并進(jìn)行猜拳游戲。情感態(tài)度與價(jià)值觀：能夠體會(huì)到人工智能技術(shù)的奇妙和給生活帶來的樂趣。通過小組合作的方式，培養(yǎng)學(xué)生的主動(dòng)參與的意識(shí)，強(qiáng)化自身的責(zé)任感，以及增強(qiáng)自己的合作能力。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：1、能夠說出什么是人工智能2、能夠說出TensorFlow.js是什么3、能夠部署猜拳游戲的Html與JS代碼教學(xué)難點(diǎn)：1、能夠部署猜拳游戲的Html與JS代碼教學(xué)方法教法：任務(wù)驅(qū)動(dòng)法、練習(xí)法學(xué)法：自主學(xué)習(xí)法、小組合作學(xué)習(xí)法教學(xué)準(zhǔn)備教學(xué)環(huán)境：多媒體網(wǎng)絡(luò)計(jì)算機(jī)房教學(xué)資源：多媒體網(wǎng)絡(luò)計(jì)算機(jī)，派Lab平臺(tái)，PPT課件，微課教學(xué)過程教學(xué)內(nèi)容及過程時(shí)間分配設(shè)計(jì)意圖一、創(chuàng)設(shè)情景【教師活動(dòng)】小派最近學(xué)習(xí)有點(diǎn)累，他想要一款游戲來緩解疲勞，于是他想到可以和計(jì)算機(jī)進(jìn)行猜拳游戲：計(jì)算機(jī)的攝像頭能夠捕捉到小派的手勢動(dòng)作數(shù)據(jù)，并識(shí)別小派手勢，然后根據(jù)小派和計(jì)算機(jī)隨機(jī)出的手勢，進(jìn)行判斷勝負(fù)。但是小派自己不會(huì)制作游戲，于是小派向我們尋求了幫助。2分鐘該環(huán)節(jié)通過創(chuàng)設(shè)一個(gè)生活中真實(shí)存在的情景，讓學(xué)生了解人工智能的應(yīng)用。二、任務(wù)分析【教師活動(dòng)】小派給我們布置了一個(gè)任務(wù)就是幫忙制作一個(gè)網(wǎng)頁版的猜拳游戲。首先我們需要對(duì)如何開展該任務(wù)進(jìn)行分析（該過程可以讓學(xué)生進(jìn)行小組討論回答）預(yù)設(shè)：首先需要了解搭建網(wǎng)頁端的人工智能應(yīng)用使用什么工具或框架，接著需要了解如何運(yùn)行網(wǎng)頁端的人工智能應(yīng)用及運(yùn)行環(huán)境的配置，然后需要了解猜拳游戲前端頁面的功能有什么，最后了解猜拳游戲中關(guān)鍵的手勢識(shí)別模型。【學(xué)生活動(dòng)】小組展開討論各小組發(fā)表自己的任務(wù)分析結(jié)果【教師活動(dòng)】對(duì)各小組的討論結(jié)果進(jìn)行評(píng)價(jià)，最后進(jìn)行小結(jié)，得出最后的任務(wù)分析結(jié)果：子任務(wù)一：安裝與配置環(huán)境子任務(wù)二：TensorFlow.js代碼部署子任務(wù)三：手勢數(shù)據(jù)采集、模型訓(xùn)練、猜拳PK3分鐘該環(huán)節(jié)主要是對(duì)本節(jié)課的任務(wù)的一個(gè)討論分析，在該過程中，讓每個(gè)學(xué)生對(duì)接下來要完成的任務(wù)進(jìn)行分析和討論，讓學(xué)生成為課堂的主體，提高學(xué)生的參與感，提升學(xué)生的自主思考能力。三、新知學(xué)習(xí)任務(wù)一：安裝與配置環(huán)境【教師活動(dòng)】在進(jìn)行實(shí)訓(xùn)任務(wù)之前呢，老師這里先提供一個(gè)網(wǎng)址“/tools/ai-demo-simple-web/07-rps-dataset/index.html”，同學(xué)們可以通過這個(gè)網(wǎng)址進(jìn)去體驗(yàn)一下猜拳游戲，這樣，同學(xué)們能夠?qū)ξ覀兒竺婕磳⑷?shí)現(xiàn)的猜拳游戲有個(gè)整體的認(rèn)識(shí)，知道這個(gè)游戲主要有什么功能。【學(xué)生活動(dòng)】打開網(wǎng)址進(jìn)行體驗(yàn)，根據(jù)界面功能與提示逐步進(jìn)行猜拳PK?！窘處熁顒?dòng)】同學(xué)們在初次打開這個(gè)網(wǎng)頁的時(shí)候，會(huì)有一個(gè)打開攝像頭的提示，這時(shí)需要點(diǎn)擊“允許”，因?yàn)楹竺娴牟僮髦袝?huì)用到你的電腦內(nèi)置的攝像頭來捕捉你給出的手勢。攝像頭開啟后，我們就可以采集數(shù)據(jù)了。在這個(gè)網(wǎng)頁中我們可以看到“石頭”、“布”、“剪刀”按鈕，也就是說我們下面要采集這三種手勢的圖片。在三個(gè)按鈕上方，可以看到攝像頭實(shí)時(shí)捕捉的畫面。假如這時(shí)你要采集石頭手勢的數(shù)據(jù)，那么你每點(diǎn)擊一次，石頭手勢的樣本就會(huì)自動(dòng)加1，當(dāng)然，采集數(shù)據(jù)的時(shí)候記得觀察攝像頭中的畫面，確認(rèn)你的手勢出現(xiàn)在畫面中。依次采集完數(shù)據(jù)之后呢，就可以點(diǎn)擊按鈕訓(xùn)練手勢識(shí)別模型了。這里需要稍等一會(huì)，模型訓(xùn)練完成，頁面會(huì)給你一個(gè)“完成”的提示。提示出來之后，你就可以開始玩猜拳游戲了。你可以隨意對(duì)著攝像頭給出一個(gè)剪刀、石頭或者布的手勢，然后點(diǎn)擊“猜拳PK”，這時(shí)按鈕下面會(huì)直接出猜拳結(jié)果?！緦W(xué)生活動(dòng)】小組討論探究，各組分享探究結(jié)果【教師活動(dòng)】進(jìn)行總結(jié)這里先簡單的說一下最后猜拳PK部分的邏輯，同學(xué)們訓(xùn)練的手勢識(shí)別模型先對(duì)你給出的手勢進(jìn)行識(shí)別，同時(shí)，計(jì)算機(jī)也會(huì)隨機(jī)出一個(gè)手勢，然后兩個(gè)手勢進(jìn)行比較，再輸出結(jié)果。15分鐘在該環(huán)節(jié)中，設(shè)置了一個(gè)猜拳游戲體驗(yàn)的環(huán)節(jié)，能夠讓學(xué)生自己動(dòng)手體驗(yàn)在網(wǎng)頁上進(jìn)行猜拳的一個(gè)過程，增加課堂的趣味性，調(diào)節(jié)課堂的氛圍，同時(shí)也讓學(xué)生對(duì)項(xiàng)目的目標(biāo)成果有個(gè)整體認(rèn)知?！窘處熁顒?dòng)】請同學(xué)們思考，為什么要安裝Chrome瀏覽器的插件WebServerforChrome呢？預(yù)設(shè)：因?yàn)槲覀円罱ê瓦\(yùn)行網(wǎng)頁版的猜拳游戲，想要運(yùn)行本地的網(wǎng)頁，就需要在本地模擬出一個(gè)服務(wù)器，方便起見，我們直接在Chrome瀏覽器中安裝一個(gè)插件就可以了?！緦W(xué)生活動(dòng)】思考并回答問題【教師活動(dòng)】對(duì)學(xué)生的回答進(jìn)行小結(jié)：同學(xué)們的推斷都是比較準(zhǔn)確的，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ò)展程序，讓用戶使用Chrome來充當(dāng)自己的臨時(shí)HTTP服務(wù)器。同學(xué)們，我們安裝完這個(gè)插件后，要怎么運(yùn)行網(wǎng)頁呢？（同學(xué)們先動(dòng)手安裝，然后討論）預(yù)設(shè)：需要配置一下這個(gè)插件，插件中會(huì)自動(dòng)生成一個(gè)URL地址，點(diǎn)擊這個(gè)地址就能跳轉(zhuǎn)到網(wǎng)頁所在的目錄，然后雙擊網(wǎng)頁就能打開了?！緦W(xué)生活動(dòng)】思考并回答問題30分鐘在該環(huán)節(jié)中，通過提問的方式引出接下來要操作的內(nèi)容，同時(shí)讓學(xué)生在動(dòng)手操作之前能夠思考為什么要做這個(gè)事.另外，讓學(xué)生動(dòng)手安裝之后再拋出一個(gè)問題，讓學(xué)生討論發(fā)現(xiàn)問題的答案，而不是直接給出，增加學(xué)生之間的互動(dòng)與交流。任務(wù)二：TensorFlow.js代碼部署【教師活動(dòng)】剛才我們已經(jīng)把安裝好了程序或者網(wǎng)頁運(yùn)行的插件，那么下面我們就要實(shí)現(xiàn)猜拳游戲的網(wǎng)頁。就如同我們一開始體驗(yàn)的那個(gè)網(wǎng)頁，基本的功能要有。那么一般搭建人工智能的網(wǎng)頁應(yīng)用，流行的工具是什么，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)練。這個(gè)框架有四大優(yōu)勢，我們簡單了解一下即可。第一，不需要安裝軟件或驅(qū)動(dòng)（打開瀏覽器即可使用）；第二，可以通過瀏覽器進(jìn)行更加方便的人機(jī)交互；第三，可以通過手機(jī)瀏覽器，調(diào)用手機(jī)硬件的各種傳感器（如：GPS、電子羅盤、加速度傳感器、攝像頭等）；第四，用戶的數(shù)據(jù)可以無需上傳到服務(wù)器，在本地即可完成所需操作。通過這些優(yōu)勢，TensorFlow.js將給開發(fā)者帶來極高的靈活性。比如現(xiàn)在，我們不需要安裝特別多特別復(fù)雜的依賴包，也不需要你的電腦有多高的配置，我們也可以搭建一個(gè)人工智能的應(yīng)用。這里老師就不過多的講解，考慮到從零開始編碼實(shí)現(xiàn)網(wǎng)頁的前后端難度非常大，那么請同學(xué)們進(jìn)入派Lab平臺(tái)，這里有相關(guān)的資源供我們借鑒。在平臺(tái)上找到這門課這個(gè)項(xiàng)目，我們可以直接下載猜拳游戲的網(wǎng)頁代碼。下載之后，解壓到指定的位置，這個(gè)時(shí)候就要回想一下配置插件的時(shí)候設(shè)置的文件夾目錄?！緦W(xué)生活動(dòng)】參考實(shí)訓(xùn)任務(wù)書或派Lab平臺(tái)上的實(shí)訓(xùn)指南，完成猜拳游戲代碼的部署。掌握Html與js代碼之間的調(diào)用關(guān)系，TensorFlow.js構(gòu)建模型的方法?！窘處熁顒?dòng)】在學(xué)生練習(xí)時(shí)進(jìn)行巡視，對(duì)一些動(dòng)手能力較弱的學(xué)生進(jìn)行相關(guān)的指導(dǎo)，引導(dǎo)學(xué)生完成練習(xí)?！窘處熁顒?dòng)】對(duì)學(xué)生的練習(xí)進(jìn)行簡單小結(jié)，指出學(xué)生常見的錯(cuò)誤。15分鐘在該環(huán)節(jié)中，主要介紹猜拳游戲網(wǎng)頁的實(shí)現(xiàn)，當(dāng)然，這部分要考慮實(shí)現(xiàn)難度與學(xué)生的能力。給出一個(gè)代碼樣例，有條件的學(xué)生可以在此基礎(chǔ)上進(jìn)行改進(jìn)。這里需要老師帶著學(xué)生一起去理解代碼之間的結(jié)構(gòu)以及代碼內(nèi)部的核心部分。重點(diǎn)了解TensorFlow.js構(gòu)建模型的部分。讓學(xué)生對(duì)模型有所認(rèn)知。任務(wù)三：手勢數(shù)據(jù)采集、模型訓(xùn)練、猜拳PK【教師活動(dòng)】現(xiàn)在我們把猜拳游戲的代碼以及運(yùn)行猜拳游戲網(wǎng)頁的環(huán)境都準(zhǔn)備好了，接下來就可以在網(wǎng)頁上一步一步地實(shí)現(xiàn)猜拳PK了。想要實(shí)現(xiàn)最后的猜拳，就得讓計(jì)算機(jī)能夠看出我們出的是什么手勢，然后才能進(jìn)行比較。這就用到了手勢自動(dòng)識(shí)別模型，這個(gè)模型怎么來的呢，當(dāng)然就是使用相關(guān)的手勢數(shù)據(jù)進(jìn)行訓(xùn)練得來的。那首先我們先采集一批手勢數(shù)據(jù)。按照前面我們體驗(yàn)的過程，就可以在我們自己的網(wǎng)頁上進(jìn)行體驗(yàn)了?，F(xiàn)在就請同學(xué)們參考實(shí)訓(xùn)任務(wù)書或者派Lab平臺(tái)的實(shí)訓(xùn)指南，自主完成任務(wù)三。【學(xué)生活動(dòng)】參考實(shí)訓(xùn)任務(wù)書或者派Lab平臺(tái)的實(shí)訓(xùn)指南完成任務(wù)三【教師活動(dòng)】在學(xué)生練習(xí)時(shí)進(jìn)行巡視，對(duì)一些動(dòng)手能力較弱的學(xué)生進(jìn)行相關(guān)的指導(dǎo)，引導(dǎo)學(xué)生完成練習(xí)。最后猜拳PK的結(jié)果（供參考）15分鐘該環(huán)節(jié)是一個(gè)實(shí)訓(xùn)環(huán)節(jié)，結(jié)合學(xué)生自身的特點(diǎn)，讓學(xué)生自己參考任務(wù)書，完成任務(wù)，提高學(xué)生的自學(xué)能力，以及動(dòng)手實(shí)踐能力。四、課堂小結(jié)【教師活動(dòng)】教師請各小組對(duì)本節(jié)課學(xué)習(xí)的內(nèi)容進(jìn)行小結(jié)。最后教師進(jìn)行總結(jié)。布置課后習(xí)題5分鐘讓學(xué)生自己進(jìn)行小結(jié)，加深學(xué)生對(duì)本節(jié)課知識(shí)的理解，也同時(shí)鍛煉學(xué)生總結(jié)歸納的能力。學(xué)習(xí)效果評(píng)價(jià)課后習(xí)題題型題目答案填空題（一空一分）1、闡述什么是人工智能2、列舉至少三個(gè)人工智能的應(yīng)用場景3、臨時(shí)在Chrome瀏覽器中運(yùn)行本地網(wǎng)頁，可以安裝（）插件1、略2、無人駕駛、智能客服、翻譯機(jī)3、WebServerforChrome選擇題（每題2分）4、關(guān)于TensorFlow.js，下列說法錯(cuò)誤的是（）A.TensorFlow.js是一個(gè)JavaScript庫B.使用TensorFlow.js可以在瀏覽器上創(chuàng)建CNN、RNN等模型C.TensorFlow.js可以在瀏覽器或Node.js服務(wù)端運(yùn)行D.TensorFlow.js中的張量即變量5、以下哪個(gè)不是TensorFlow.js的優(yōu)點(diǎn)（）A、網(wǎng)頁應(yīng)用交互性更強(qiáng)B、有訪問GPS，Camera，Microphone，Accelerator等傳感器的標(biāo)準(zhǔn)apiC.通過鏈接即可分享程序D.TensorFlow.js開發(fā)的應(yīng)用運(yùn)行速度非?？?、D5