難度： 中級
課程類型： 教程
學科： 計算機科學
年級水平：
本教程由Youth Mobile Power提供
教程地址: Awesome Dancing with AI Tutorial
我們在YR Media的朋友發表了一個有趣的關於人工智慧的互動故事，題為「你能教人工智慧跳舞嗎？」這引起了我們的思考。有沒有一種算法來描述、識別或測量一種美妙的舞蹈？舞蹈動作可以量化和測量嗎？人工智慧可以幫助我們提高舞蹈技巧嗎？在這個項目中，你將學習如何使用新的AI技術PoseNet來跟蹤身體的關鍵點，創建骨骼模型，並開發一些基本方法來量化、測量和識別一些舞蹈動作。
1. 項目簡介你喜歡跳舞嗎？你擅長嗎？你想要提高嗎？有沒有一種算法來描述、識別或測量一種美妙的舞姿？舞蹈動作可以量化和測量嗎？人工智慧可以幫助你提高你的舞蹈技巧嗎？在這個項目中，我們將學習如何使用新的AI技術PoseNet來跟蹤身體的關鍵點，創建骨骼模型，並開發一些基本方法來量化、測量和識別一些舞蹈動作。
重要: 這個項目不能使用模擬器來測試app，因為模擬器不能運行MIT App Inventor擴展，比如PoseNet擴展。要確保你的行動裝置具備PoseNet所需的硬體功能，請在附件中的.aia測試文件上使用AI2伴侶進行測試。
2. 圖形用戶界面(GUI)在啟動文件中已經創建了一個GUI。可以更改組件的屬性來得到你想要的外觀和感覺。但不要重命名組件，因為本教程會使用操作指南中給出的名稱。
SwapCameraButton按鈕可以根據用戶的意願切換前置或後置攝像頭。CanvasLiveButton將畫布背景從純黑色切換到實時攝像機視圖。ResetButton設置Dance Score得分為零。
WebViewer組件用來顯示攝像頭視圖，Canvas組件是在黑色背景或實時攝像機視圖背景上創建身體骨架模型的地方。WebViewer組件和Canvas組件的尺寸必須匹配，以便對身體進行跟蹤。建議不要更改啟動文件中給出的默認尺寸。
注意，組件面板最底部是PosenetExtension，這是我們用來跟蹤身體關鍵點的AI技術，它可以幫助你構建身體的骨骼版本。
3. PoseNet 關鍵點PoseNet追蹤的身體關鍵點是:眼睛、耳朵、鼻子、肩膀、手肘、手腕、臀部、膝蓋和腳踝。
如果PoseNet能夠跟蹤主體關鍵點，它就會返回一個包含兩個元素的列表，這兩個元素表示關鍵點的x坐標和y坐標。當PoseNet無法跟蹤主體關鍵點時，它會返回一個空列表。
4. 初步的GUI代碼初始文件中已經提供了一些GUI的初步代碼。研究這些代碼可以讓你對它們的作用有一個大致的了解。
上面這兩組代碼塊用於將PoseNet的狀態傳達為「就緒」，或者在出現錯誤時顯示錯誤消息。
每次點擊ResetButton時，重置Dance Score為零。
swapcamera按鈕將相機視圖從默認的「前置」視圖切換到「後置」視圖，反之亦然。
CanvasLiveButton調整一個布爾變量的值，該變量用來在實時背景或純黑色背景上顯示PoseNet構造的骨骼。
5. 輔助函數（1）初始文件中還有一些輔助性的函數。
getX和getY函數提取給定點的x和y坐標。某個點是一個由PoseNet返回的兩個元素組成的列表，它們表示給定點位置的x和y坐標。
6. 輔助函數（2）defined是一個布爾函數，如果給定點是一個包含兩個元素的列表(表示該點位置的x和y坐標)，則返回true，否則返回false。如果PoseNet無法檢測到身體關鍵點中的任何一個，則為每個缺失的關鍵點返回一個空列表。
allDefined是一個布爾函數，用於檢查給定點列表中的所有點是否都已定義。如果所有點都已定義，則返回true，否則如果任意點未定義，則返回false。我們將使用這個輔助函數來共同檢查身體的某些關鍵點是否被PoseNet擴展正確地跟蹤並返回。如果身體的姿勢由於光線不好、背景凌亂、衣服松垮等可能原因導致PoseNet無法追蹤到身體的任何關鍵點，將返回一個空列表，說明未能檢測到這個關鍵點。
7. 輔助函數（3）distance是一個函數，當畫布上的兩個點被定義後，該函數用於計算定義這兩個點之間的距離。它使用畢達哥拉斯Pythagorean公式:
上面的公式也許會讓你回憶起高中的幾何和代數。
8. 輔助函數（4）drawPoint過程在畫布上給定的定義點的位置繪製一個半徑為4像素的小圓。這個過程幫助我們畫出身體的關鍵點如關節。我們設置點的半徑為4像素，這樣關鍵點肉眼可見。
drawLine過程在畫布上的兩個定義點之間畫一條線段。我們使用這個過程來繪製骨架中的骨骼來代表身體。
9. 姿態更新當PoseNet擴展 檢測到它所跟蹤的對象改變了位置時，會觸發PosenetExtension1.PoseUpdated事件。這個事件處理程序的代碼在初始文件中已經創建了，雖然每個被調用的過程(drawKeyPoints, drawBody, drawHead等)的代碼都是空的，但接下來你可以很快創建。注意如果用戶單擊CanvasLiveButton時,事件處理程序中的if then語句可以確保攝像機實時畫面會在畫布上播放，畫布默認為純黑色背景。
10. 構建骨架現在我們來編寫一些過程。
drawKeyPoints過程用來繪製一個紅色圓圈來表示PoseNet返回的身體的每個關鍵點:
對PoseNetExtension1.KeyPoints列表中PoseNet返回的每個點，使用前面提及的輔助過程drawPoint繪製一個點。
提示
解決方案
先嘗試自己編寫代碼，如果遇到困難可以參考提示。
drawBody過程會畫出身體的骨架，通過適當關鍵點之間畫黃線來勾勒骨架：
設置畫布的畫筆顏色為黃色（或者其他與關鍵點不同的顏色）
對於PosenetExtension1.Skeleton列表中的每塊骨骼，使用前面提及的輔助過程drawLine在骨骼的兩端之間繪製一條直線。
注意：PosenetExtension1.Skeleton返回一個「骨骼」列表，其中每個「骨骼」都是一個包含兩個關鍵點的列表，這兩個關鍵點是骨骼兩端的點。比如在骨骼中，小腿的骨頭是一個由腳踝關鍵點和膝蓋關鍵點組成的列表。
提示
解決方案
先嘗試自己編寫代碼，如果遇到困難可以參考提示。
11. 繪製圓形的頭部（可選）如果想在骨骼肩膀上有一個圓形的頭，可以編寫drawHead過程。否則在肩膀上方只有一些標明耳朵、眼睛和鼻子的關鍵點，沒有圓形的頭部，就像在前面動畫中所示。
drawHead過程：
檢查是否已定義LeftEar和RightEar關鍵點。用代數的中點公式，以兩耳連接線的中點為圓心畫一個圓：選擇圓的半徑為兩個耳朵之間距離的一半，確保圓穿過兩隻耳朵。提示
解決方案
注意：如果水平方向的代碼太長，可以使用「外接輸入項」菜單選項(通過右鍵單擊)來縮小操作所需的空間。要回到默認選項，可使用「內嵌輸入項」，如下所示。
先嘗試自己編寫代碼，如果遇到困難可以參考提示。
12. 測試應用現在我們使用AI伴侶來測試應用是否運行良好。注意，不能在測試中使用模擬器，因為它不支持MIT App Inventor擴展，如PoseNet。
檢查你的app是否可以跟蹤你或他人的身體，並可以正確構建骨骼連接身體的關鍵點。為了獲得最佳的PoseNet效果，確保身體部分光線充足，並且背景是純色。松松垮垮的衣服也可能會干擾對身體關鍵點的追蹤。
如果你用的是手機而不是平板電腦，屏幕可能太小，無法一次顯示所有內容。在本例中，由於該項目默認選中了屏幕的「Scrollable」屬性，可以通過滾動屏幕來顯示想要的內容。也可以選擇隱藏HorizontalArrangement1組件(該組件用於顯示影子舞者的圖像)。如果仍然缺少屏幕空間，還可以不勾選webviewwer1的Visible屬性將其隱藏。如果進行了上述操作，要注意Canvas1的尺寸（2500x300）仍然必須完全匹配WebViewer1的尺寸。
13. 檢測舞步我們探討一些簡單的舞蹈動作：
「手在空中」舞步
「膝蓋向上」舞步I, II
「特拉沃爾塔」舞步I, II
約翰·特拉沃爾塔著名的《狂熱周六夜》舞步
「T形」舞步
現在我們編寫代碼來檢測這些舞蹈動作。當這些舞蹈動作被檢測到時，被跟蹤的舞者的舞蹈分數Dance Score將自動增加。
14. 「手在空中」舞步過程checkForHandsintheAirMove：
首先檢查PoseNet返回的以下關鍵點是否定義：左右手腕和左右耳朵。定義「手在空中」舞步的一種方法是確保兩個手腕點都在各邊耳朵點的上方。要做到這一點，只需比較右手腕和右耳的y坐標，並對左手腕和左耳做相似的事情。畫布上的x軸和y軸的位置如下圖所示，原點在畫布的左上角。所以右手腕在右耳上方意味著右手腕的y坐標小於右耳的y坐標。左手腕和左耳也是如此。如果兩個手腕都在各邊耳朵之上，則增加Dance Score。提示
解決方案
先嘗試自己編寫代碼，如果遇到困難可以參考提示。
15. 「膝蓋向上」舞步過程checkForKneeUpMove：
首先檢查PoseNet返回的以下關鍵點是否定義：右膝，右臀，左膝，左臀。定義「膝蓋向上」舞步的一種方法是：或者右膝蓋點在右臀部點之上，或者左膝蓋點在左臀部點之上。要確定這一點，只需比較右膝蓋的y坐標和右臀部的y坐標，並對左膝蓋和左臀部做相似的事情。如果任何一個膝蓋在其對應的臀部之上，那麼增加Dance Score。提示
解決方案
先嘗試自己編寫代碼，如果遇到困難可以參考提示。
16. 「特拉沃爾塔」舞步現在你為什麼不試著自己定義「特拉沃爾塔」舞步和checkfortravoltammove過程呢？
提示
定義「特拉沃爾塔」舞步的一種方法是，右手腕在右耳之上，同時左手腕在左肩膀之下；或者左手腕在左耳之上，同時右手腕在右肩膀之下。
解決方案
先嘗試自己編寫代碼，如果遇到困難可以參考提示。
17. 「T型」舞步如果你想要進行挑戰，可以試著定義「T型」舞步，舞者水平伸展左右手，形成字母「T」的形狀。
提示
為了確保雙手與腕部和肩膀保持水平，兩側的手腕和肩膀的y坐標應該非常接近。同時以伸展的手臂而言，右手腕和右肩膀之間的距離應該非常接近右手腕到右肘部及右肘部到右肩膀的距離之和。左邊也一樣。
解決方案
注意：如果你了解一些三角函數，可以利用關鍵點的角關係來簡化一些代碼。
先嘗試自己編寫代碼，如果遇到困難可以參考提示。
18. 測試app充分檢查你的app，直到你(或你用PoseNet跟蹤的其他人)做的任何舞蹈動作都會被正確檢測到，且Dance Score會增加。正如前面所提到的，為了獲得最佳的PoseNet效果，請確保身體光線充足，並且舞者是在純色背景前。松松垮垮的衣服也可能會干擾對身體關鍵點的追蹤。
在YouTube上找一些舞蹈視頻，這些視頻要滿足只有一個舞者，且背景清晰，用這些視頻測試你的app，看看你的應用如何能跟蹤舞者。
恭喜你，你已經建立了你的第一個基於人工智慧的app，它可以跟蹤一個人的動作，並識別一些基本的舞蹈動作。
拓展你的app當前版本的app，如果你保持某種舞姿，Dance Score會不斷增加。添加一些智能代碼，確保給定的舞蹈動作只會獲得一次獎勵，直到觀察到新的舞蹈動作。
創建一個罰分系統，如果檢測到糟糕的舞姿(比如雖然舞者做出了類似T形動作，但舞者的手臂沒有水平伸展，形成字母Y而不是字母T的姿勢，等等)，則Dance Score會扣分。
想像一下這款應用的瑜伽版本，它可以檢測不同的瑜伽姿勢，並獎勵正確的姿勢。
你還能想到哪些可以用身體的關鍵點來描述和量化的嘻哈舞姿？在你的應用中實現這些想法。
還有什麼其他的好主意？
關於Youth Mobile Power我們很多人整天都在手機上度過，痴迷各種app。儘管我們知道手機會對我們的注意力、隱私甚至安全構成威脅，但我們還是繼續打字和刷手機。但「口袋裡的電腦」也為年輕人創造了未開發的機會，讓他們學習、聯繫並改變我們的社區。
這就是為什麼麻省理工學院和YR媒體聯手推出了青年移動動力系列。YR青少年製作故事，突出年輕人如何以令人驚訝和強大的方式使用手機。與此同時，麻省理工學院的團隊正在不斷改進MIT App Inventor，讓像你這樣的用戶能夠創建像YR報導中提到的那樣的APP。
回歸初心：從故事中獲得靈感，開始製作你自己的應用程式吧!
YR和麻省理工學院的合作部分得到了美國國家科學基金會的支持。本材料基於美國國家科學基金會在批准號下支持的工作。(1906895, 1906636)。本材料中所表達的任何意見、發現、結論或建議均為作者個人觀點，並不一定反映美國國家科學基金會的觀點。
點擊此處查看更多由YR創建的應用程式和交互式新聞內容。
點擊「閱讀原文」下載aia源文件及手機測試文件。