01 用Scratch玩AI

• 主題：Scratch之AI課程設計與教學

• 時間：113年1月25日(四)09:00~16:00

• 地點：高雄市國教輔導團

• 講師：黃文玉老師

• 第一版教材(舊)：20221123鳳山國中

• 預告：AIGC初體驗

• 時間：113年5月16日(四)09:00~12:00

• 研習內容參考

• 本次研習的OSEP Scratch：https://estea8968.github.io/osep_web_serial/app/ 

• 本次研習的作品範例：https://educase.kh.edu.tw/navigate/a/#/s/6D7B52C708CC43B58BE90D2D90D894036BL  

一、認識AI

• 與AI做朋友

  • 教育部出版的【與AI做朋友】： https://youtu.be/pLAfujAH81k(簡介)

    • 下載：https://market.cloud.edu.tw/list/ai.jsp (要先登入)

    • 國小為【相逢篇】(有分第一版、第二版及教材與教案)

      • 國中：相識篇

      • 高中：相知篇

    • 國小入門課程：

      • 【第二版】和AI做朋友－相逢篇：人工智慧有意思 (教材

      • 目錄如下左圖

    • 和AI做朋友線上課程：

      • 中華開放教育平台(要先註冊)

      • 線上課程：https://www.openedu.tw/course.jsp?id=876 

      • 目錄如下右圖

• 與AI做朋友內容簡介

  • 生活中的人工智慧

    • 使用Face ID解鎖手機 (影像、人臉辨識)

    • 登入社交媒體獲取訊息：會根據過往的歷史資訊，推薦一些會引起興趣的新聞、訊息或廣告

    • 寄送或收取電子郵件：檢查並糾正拼音錯誤，使用AI垃圾郵件過濾器

    • 使用Google搜尋資料：AI會根據您的搜尋記錄，將您要的資訊送到眼前

    • 數位語音助理協助工作：Siri、OK Google、小愛同學 

    • 使用智慧家庭設備提升生活便利

    • 搭乘自動駕駛交通工具通勤上班：監視交通狀況、規劃路線

    • 使用銀行安全交易業務：交易安全性及偵測欺詐行為

    • 利用Youtube或Netflix串流服務放鬆休閒：了解您可能想觀看的內容

    • 辨識歌名(Shazam...)

    • ...

• 簡單好玩的入門應用(熱身一下)

  • 限時塗鴉： https://quickdraw.withgoogle.com/ 

  • 畫線條草圖：https://www.autodraw.com/ 

  • 語音辨識： https://www.textfromtospeech.com/en/voice-to-text/  (先選中文及語言)

  • 剪刀石頭布： https://tenso.rs/demos/rock-paper-scissors/  (先出石頭開始遊戲)

  • 臉部辨識： https://visagetechnologies.com/HTML5/latest/Samples/ShowcaseDemo/ShowcaseDemo.html 

  • 去除不要的人：https://snapedit.app/ 

  • AI修復老照片：https://imagecolorizer.com/zh-tw 

  • 相片去背： https://www.remove.bg/zh-tw 

• • 人工智慧發展起飛的原因

    • 目標改變

      • 不再是讓機器產生智慧方面發展

      • 而是希望讓人工智慧解決特定的問題，提升人類處理事情的準確度！(不是包山包海)

    • 網路的崛起，資料蒐集更為容易

    • 硬體設備的進步，電腦計算能力越來越快

  • AI基於能力來分類：強AI(通用型人工智慧)與弱AI(狹義型人工智慧)

    • 強AI：

      • 又稱通用型AI，是指能夠執行所有人類的工作並擁有和人類一樣的智慧，其思考和行為判斷能力和人類一樣好，甚至更為出色。

      • chatGPT已開始有通用型AI的雛型了

      • 能夠取代人類的人工智慧。

    • 弱AI：

      • 又稱特定AI，則是指「能下圍棋」、「能自動打掃」、「擁有豐富的醫療知識」等，在特定領域可以做得跟人類一樣好，甚至更好。是可以模擬人類的智慧。

      • 現今的所創造出來的人工智慧都屬於此類。

      • 跳恐龍及Flappy Bird：

        • 電腦會根據【成功的經驗】來學習，進而達有自動控制的功能(自己跳)

        • https://scratch.mit.edu/projects/758888277/ 

        • https://experiments.withgoogle.com/flappylearning 

二、什麼是機器學習

• 要讓機器(電腦)像人類一樣具有學習與判斷的能力，就要把人類大腦學習與判斷的流程轉移到機器(電腦)，基本就是運用數據進行【分析】與【預測】，包括下列四個流程：

  • • 獲取數據：仿人類的大腦經由收集大量的數據，進行分析與處理判讀

    • 分析數據：仿人類的大腦分析收集到的數據找出可能的規則 

    • 建立模型：仿人類的大腦找出可能的規則後，會利用這個規則來建立【模型】(model)】

    • 預測結果：等數學建模完成了，再將新的數據輸入模型就可以預測結果

• • 機器如何學習？

    • 監督式學習

      • 人工智慧的【監督式學習】就跟小孩子學習一樣，在學習的過程中，接收到的資料都有標註【標準答案】(這是貓、這是狗)，當有新的資料要做判斷時，就能藉由現有資料所學習到的經驗，獲得較精準的判別。

      • 世界萬物彼此都存在著差異性，但是同一種類的事物，一定會有相同之處，當要訓練人工智慧並供給大量資料前，就要先找出這些資料的特性，而所謂的特性，就是指資料具有的【特徵值】」。(如：貓有哪些特徵值？) http://gg.gg/featureAI3 

      • 藉由特徵值的蒐集，將資料依照某些規則加以整理，然後產生一套區分該物件的原則，藉此建構出分類器（Classifier），新的事物藉由分類器去判斷是屬於哪一個分類。

    • 最短距離分類器 (Nearest Neighbor Classifier)

      • 最短距離分類器是利用新進未知資料的特徵，與已知類別資料的特徵比較距離，看看新進資料與哪個類別的特徵最相似（即資料相似度最高），就將新進的資料預測為該類別。

        • 近朱者赤、近墨者黑

    • KNN (K-Nearest Neighbor Classifier)

      • https://scratch.mit.edu/projects/762392889/ 

      • 不同的K值會導致不同的分類結果

• • • 決策樹

      • 人工智慧如何分析資料、擷取特徵建立模型呢

      • 決策樹是一種樹狀結構，能清楚的記錄決策過程，也能協助訓練機器，讓機器幫助人類解決分類的問題

      • 決策樹屬於監督式學習的一種方法，是一種樹狀結構，常用來做資料分類，我們能透過現有的資料建構一棵決策樹，為機器提供良好決策的依據。

      • 會猜數字的決策樹 https://scratch.mit.edu/projects/758648649/ 

      • 能認識批薩 https://sliceofml.withgoogle.com/ 

      • 廣告：電腦也會選土豆

• 非監督式學習Unsupervised Learning：

  • 訓練的資料沒有事先給定的【類別】標記，只能透過資料間彼此相互比對，計算出彼此的關連性。

  • 藉由非監督式學習來處理「分群（Clustering）」問題，利用現有資料的特徵分成若干個不同的群體，每個群體中資料的特徵會是相近的。

  • 「分群」的概念簡單來說就是將相近的資料彼此分在同一群體。

  • K-means演算法  https://scratch.mit.edu/projects/764423748/ 

• 參考圖書

• 用Scratch輕鬆學AI (宇宙機器人)

• 邊玩邊學使用Scratch學習AI程式設計(碁峯)

  • 邊玩邊學使用Scratch學習AI程式設計專案不集合(碁峯)

• 從AI到生成式AI(旗標)

三、用Scratch玩AI 

• • 建議使用chrome瀏覽器

  • 日本人寫的客製化Scratch (Stretch3)

    • 連結網址：https://stretch3.github.io

    • 要允許使用鏡頭的權限

  • MIT Media Lab and the MIT RAISE Initiative

    • 官網：https://playground.raise.mit.edu/ 

    • Scratch連結網址：https://playground.raise.mit.edu/create/ 

  • 使用OSEP Scratch

    • OSEP Scratch官網：https://sites.google.com/view/scratch-web-serial-api/home 

    • 許惠美教授的最新AI教學影片(20240120)：https://youtu.be/arYZqksnDqE?si=sDYnqyKnVfdWNJRu 

    • OSEP Scratch 線上編輯器

      • 正式版(版本編號：1110731)：https://osep-scratch.github.io/app/app/ 

        • AI擴展積木

          1. ML2Scratch

          2. Posenet2Scratch

          3. TM2Scratch

      • 測試版本 (β版)(版本編號：1121226)： https://estea8968.github.io/osep_web_serial/app/ 

        • AI擴展積木

          1. ML2Scratch

          2. Posenet2Scratch

          3. TM2Scratch

          4. TMPose2Scratch

          5. facemesh2Scratch

          6. Handpose2Scratch

          7. OpenAI

          8. ...

四、使用Posenet2Scratch

• • 使用Posenet2Scratch積木

    • PoseNet是一種機器學習模型，可以即時推測人臉及身體部位的位置。

    • PoseNet體驗：https://storage.googleapis.com/tfjs-models/demos/posenet/camera.html 

    • 一共可以量測出以下部位的X、Y座標：鼻、左眼、右眼、左耳、右耳、左肩、右肩、左肘、右肘、左手腕、右手腕、左腰、右腰、左膝、右膝、左腳踝、右腳踝，(我的右眼在鏡頭內也是在右邊，除非鏡頭改用【翻轉】)

    • 不論一人或多人都可即時辨識

    • 擴展添加【Posenet2Scratch】積木

    • 擴展積木前，先把鏡頭設備裝好，添加時會問您允不允許【使用相機】，同意後，舞台就會出現鏡頭畫面

• 實作：變裝秀

  • • 粉紅球(小丑鼻)

      • X，Y座標：鼻子的X、Y座標

      • 距離遠近的大小修正：(兩眼距離/60)*100 %

    • 眼鏡

      • X，Y座標：鼻子的X座標、任一眼的Y座標

      • 距離遠近的大小修正：(兩眼距離/30)*100 %

    • 帽子

• 實作：利用肢體玩遊戲

  • • 猴子接香蕉(如下圖)：https://scratch.mit.edu/projects/102032461/ 

    • 打磚塊：https://scratch.mit.edu/projects/103830398/ 

• 實作：簡易防盜系統

• LINE Notify (LINE通傳)介紹

  • • 申請 LINE Notify：notify-bot.line.me/

    • 教學參考：自建 LINE Notify 訊息通知

  • 申請 LINE Notify 權杖

    • 打開 LINE Notify 的網站 ( https://notify-bot.line.me/zh_TW/ )，使用自己的 LINE 帳號登入。

    • 登入後滑鼠移至上方個人帳號，選擇「個人頁面」

    • 我的權杖：i1zs6yKUZoFv71vL812Dur94QyJvDYuVqeXjBAxzQ1RR (別人不要用)

    • 擴展添加【 LINE Notify】積木

      • 權杖積木要放在裡面，不能只宣告一次

      • 可從第一個積木【查閱表情主題與代號】

      • 【圖片】積木好像跟【表情】積木無法共存？

      • 有時積木順序真顛倒也不行？

• 物聯網應用

  • 認識MQTT

    • 這是目前物聯網最夯的應用

    • MQTT由三種角色構成，分別是Publisher(發布者)、 Broker(代理人)和Subscriber(訂閱者)

    • 相當於youtube的訂閱機制(youtuber為【發布者】、youtube網站為【Broker】、你我為【訂閱者】)

    • MQTT的主題（Topic）名稱：MQTT主題名稱是UTF-8（萬國碼）編碼的字串，我們可以自行決定主題名稱，例如，傳送溫度的訊息主題可命名成「溫度」、傳送亮度的訊息主題叫做「照度」…等等。主題名稱也支援類似檔案路徑的階層式命名方式  ，如： wenyu/home/1f/led

    • MQTT伺服器的參考資料：10 MQTT相關工具

  • 實作：從外部控制小貓咪前進、後退

    • 使用夜市小霸王的MQTT伺服器

      • wss://broker.mqttgo.io:8084/mqtt

    • MQTT  client工具 (網頁版)

      • https://mqttgo.io/  或 https://broker.mqttgo.io/ 

    • 擴展添加【MQTT】積木

    • 主題(Topic)與訊息(Payload)(請自訂)，如

      • 主題：wenyu38

      • 訊息：go、back

    • 這積木當收到訊息後，訊息變數會一直存著此值

    • 下面程式理論上在判斷式的外面還要加上一個判斷【主題=wenyu38】的積木

• • 實作：控制Web:Bit 開發板

    • 如果要與Web:Bit或凱比機器人互動的話，請用Web:Bit的MQTT伺服器

      • Web:Bit的MQTT伺服器：

        • wss://mqtt1.webduino.io:443/mqtt (加密，預設443port)

        • Username： webduino

        • Passeord： webduino

  • 擴展MQTT積木

  • 簡單測試：兩者的互動測試

    • 按方向鍵，Web:Bit的LED顯示器會顯示各方向箭頭

    • Web:Bit線上版：https://webbit.webduino.io/blockly (免註冊體驗)

    • Web:Bit程式：https://webbit.webduino.io/blockly/#6yYGXozvO6pqw

    • 法蘭斯Webduino MQTT ：https://fustyles.github.io/webduino/webduino_mqtt.html 

• • 進階測試：控制凱比機器人示範

    • Web:Bit x Kebbi：https://kebbi.webduino.io/login 

    • 利用右手上下移動時，凱比機器人的右手也會上下移動

      • 右手(採用右手腕的Y座標)在舞台上上下移動(-180到180)

      • 凱比(採用右肩上抬)0到240

      • 轉換公式：y(上抬角度) = (2x+360)/3

    • 凱比的程式：https://kebbi-iot.webduino.io/webbit/#GqNzWQXoZaYqg

      • 如果要控制兩隻手，可以用兩個主題

五、使用ML2Scratch積木

• • 使用ML2SCRATCH積木

    • 先擴展添加【ML2SCRATCH】

      • ML：Machine Learning (機器學習)

      • 擴展積木前，先把鏡頭設備裝好，添加時會問您允不允許【使用相機】，同意後，舞台就會出現鏡頭畫面

• 實作：剪刀石頭布

  • • 訓練機器認識剪刀、石頭、布的形狀

      • 訓練4種類別：剪刀、石頭、布及背景

      • 訓練時背景要簡單一點

      • 各種手勢儘量占滿整個畫面

      • 一邊改變角度或位置，一邊拍攝

      • 每一類約拍攝20~30張

      • 完成如下程式

• 進行剪刀、石頭、布各種手勢的學習

  • • 上圖為剪刀的學習

    • 建議也學習一張純背景的圖

• 上傳學習資料時，會把目前既有的資料庫給覆蓋掉

• 存檔時，除了存程式檔也要記得把學習資料下載

• 跟電腦玩剪刀石頭布

六、利用Teachable Machine建立模型

• Google出品的

• 訓練電腦辨識你的圖片、音訊和姿勢。

• 輕鬆快速地建立機器學習模型，以便用於網站、應用程式和其他地方，不需要編寫程式或具備專業知識。

  • • 連結網址：https://teachablemachine.withgoogle.com/  (移到最下方改為中文版)

• 實作：剪刀石頭布訓練及預測

  • 訓練4種類別：剪刀、石頭、布及背景

    • 我之前訓練的模型網址：https://teachablemachine.withgoogle.com/models/NmGTObrCG/ 

  • 也可訓練：有戴口罩、沒戴口罩、背景

    • 我之前訓練的模型網址：https://teachablemachine.withgoogle.com/models/cbZEAWFKY/ 

  • 或其他

• 再度回到OSEP

  • • 擴展添加TM2SCRATCH積木

      • ML2Scratch與TM2Scratch的比較

        1. 儲存分類模型的位置

           • ML2Scratch：在Scratch內(本機的記憶體)

           • TM2Scratch：雲端(Google的伺服器上)

        2. 支援學習功能

           • ML2Scratch：影像辨識

           • TM2Scratch：影像辨識、聲音辨識、姿勢辨識

五、ESP32

• • Web:Bit + EZ Start Kit +

    • CH340晶片的驅動程式 (可用WIN11)

    • Web:Bit的核心是ESP32晶片，燒錄ESP32的韌體

• • Web:Bit + EZ Start Kit+ 的腳位介紹

    • 先將Web:Bit插上EZ Start Kit+ 

    • Web:Bit上各元件的腳位

      • A鍵：GPIO35

      • B鍵：GPIO27

      • 左上光敏感測器：GPIO36

      • 右上光敏感測器：GPIO39

      • 蜂鳴器：GPIO25

      • 全彩LED矩陣：GPIO4 

      • 溫度感應器：GPIO34 (OSEP無此類積木)

      • 九軸感測器：I2C腳位(SCL：GPIO22、SDA：GPIO21) (OSEP無此類積木)

    • EZ Start Kit+ 上各元件的腳位

      • OLED顯示器：I2C腳位(SCL：GPIO22、SDA：GPIO21)

      • 蜂鳴器：GPIO25

      • 光敏感測器：GPIO32 (擴展板供電)

      • 可變電阻器：GPIO33 (擴展板供電)

      • 紅外線接收器：GPIO16  (OSEP無此類積木)

      • 紅燈：GPIO18 (擴展板供電)

      • 黃燈：GPIO19 (擴展板供電)

      • 綠燈：GPIO23 (擴展板供電)

      • 溫濕度感應器(DHT11)：GPIO5 (擴展板供電)

      • 繼電器：GPIO17 (擴展板供電)

      • RGB燈條：GPIO2 (擴展板供電)

• • 擴展ESP32積木

    • 先將Web:Bit插上EZ Start Kit+ 

    • 再把Web:Bit與電腦連接

• LED矩陣燈(燈條)的控制

  • 目前這LED矩陣積木只能控制8顆燈

• 播放全家便利商店歡迎音樂

  • 簡譜：3 1 5(低音) 1  /  2 5~ 2  /   3 2 5(低音) 1

• 按鍵開關燈

• 聲控

  • 錄製的口令有：

    • 控制小貓咪前進、後退

      • 前進

      • 後退

    • 控制開關燈

      • 開紅燈

      • 開綠燈

      • 關紅燈

      • 關綠燈

      • 換顏色

• 使用Teachable Machine訓練出聲音模型

  • 選中間的【音訊專案】

• 模型網址： (可直接點擊進去測試看看)

  • 前進、後退：https://teachablemachine.withgoogle.com/models/4hjDnW8MR/  

  • 開關燈：https://teachablemachine.withgoogle.com/models/HQIM-IsmR/  

  • 擴展添加TM2SCRATCH積木

  • 聲控小貓咪前進、後退

• • 聲控開關燈

• 利用肢體開關燈

  • 同上做法，使用Teachable Machine訓練出肢體模型，選右邊的【姿勢專案】

  • 我建立的模型:https://teachablemachine.withgoogle.com/models/u5t4kVYj7/ 

    • 頭上畫圈 (答對了)

    • 頭前畫叉 (答錯了)

  • 使用繼電器(GPIO17)來開關燈

  • 擴展添加TMPose2SCRATCH積木

• 結束了，希望這課程對大家有所收穫。