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...)
  - ...

- 圖靈測試
  - 1950年代，當時科學家圖靈提出【機器能否思考？】這個問題
  - 測試者透過鍵盤與另一房間內的機器或人自由對話，如果測試者將與他對話的機器誤認為是人，就代表該機器通過【圖靈測試】，表示該機器具有智慧！(如右圖，圖取自維基百科)

簡單好玩的入門應用(熱身一下)
- 限時塗鴉： 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擴展積木
        ML2Scratch
        Posenet2Scratch
        TM2Scratch
    - 測試版本 (β版)(版本編號：1121226)： https://estea8968.github.io/osep_web_serial/app/
      - AI擴展積木
        ML2Scratch
        Posenet2Scratch
        TM2Scratch
        TMPose2Scratch
        facemesh2Scratch
        Handpose2Scratch
        OpenAI
        ...

四、使用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積木

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