Day 29 - 剪刀石頭布

今天我們將使用 Teachable Machine 來自製一個簡單的「剪刀、石頭、布」辨識模型。透過相同的方法，我們也可以創建其他用途的辨識模型。

Teachable Machine 簡介

Teachable Machine 是由 Google 開發的一款基於瀏覽器的機器學習工具，旨在讓非技術人員也能輕鬆地訓練機器學習模型。使用者只需透過簡單的圖形化介面，即可建立、訓練並導出用於識別影像、音頻或姿勢的自訂模型。

主要功能

1. 簡單易用的介面

   • 使用者只需透過拖曳、點擊等簡單操作，即可建立分類並訓練模型，無需撰寫任何程式碼。
   • 提供視覺化操作步驟，讓初學者也能輕鬆上手。

2. 即時預覽

   • 訓練完成後，使用者可以立即在瀏覽器中測試模型的準確度，並即時調整模型的訓練數據，以提升辨識效果。

3. 多類型模型支持

   • 影像分類：訓練模型以識別不同的影像或物件。本次的模型製作即是使用影像分類來實現。
   • 音頻識別：使用音頻樣本來訓練模型以辨識不同的聲音。
   • 姿勢檢測：使用姿勢數據來訓練模型辨識不同的身體動作或姿態。

4. 模型導出

   • 訓練完成的模型可以匯出為 TensorFlow、TensorFlow.js 或 TensorFlow Lite 格式，方便在各種平台上部署與應用，包括網頁應用、移動設備或嵌入式系統。

5. 無需專業硬體

   • 所有操作均在瀏覽器中完成，無需專門的硬體設備，只需有網絡連接和攝像頭、麥克風等基本外設即可開始。

Teachable Machine 讓機器學習不再只是專家們的領域，而是讓任何有興趣的人都能參與其中，開啟了機器學習的大眾化時代。

製作流程

1. 進入網站
   首先，訪問 Teachable Machine 網站，然後點選 Image Project，選擇標準模型，進入模型創建界面。

2. 創建類別
   創建 4 個類別，分別是「剪刀」、「石頭」、「布」以及「背景」。

   背景類別的必要性
   添加「背景」類別是為了防止模型在沒有手勢輸入時錯誤地識別為其他手勢。這可以提高模型的準確性，避免誤報。

3. 收集資料
   在每個類別下點選 Webcam，對著鏡頭比出對應手勢，並按住 Hold to record 鍵來錄製數據。確保每個類別都有足夠的資料以進行訓練。

4. 訓練模型
   所有類別的資料錄製完成後，點選右側的 Train Model 按鈕開始訓練。如果需要更細緻的控制，還可以在 Advanced 部分調整訓練參數。訓練過程可能需要一段時間，可以利用這段時間去休息一下。

5. 測試與調整
   訓練完成後，系統會自動生成預覽。你可以立即測試模型的準確度，並根據預覽結果進行調整。

6. 模型匯出
   確認模型運作正常後，可以將模型匯出為 TensorFlow 或 TensorFlow Lite 格式。將 .h5 模型檔案放置在指定資料夾中，以便後續使用。

接下來要使用到python，有點複雜，不想看程式碼的可以看到這裡為止。

安裝相關套件

由於 TensorFlow 和 Python 的版本更新頻繁，建議在虛擬環境中進行開發。以下是經測試可用的版本：

• Python 版本：3.9.6
• OpenCV 版本：4.9.0.80
• TensorFlow 版本：2.15.0

在虛擬環境中安裝所需套件：

pip install opencv-python
pip install tensorflow

使用 OpenCV 進行影像辨識並添加文字標註

以下程式碼展示如何使用 OpenCV 即時讀取攝影鏡頭影像，並利用訓練好的模型進行手勢分類，同時在影像上添加對應的文字標註。

程式碼範例

from keras.models import load_model  # TensorFlow is required for Keras to work
import cv2  # Install opencv-python
import numpy as np

# Disable scientific notation for clarity
np.set_printoptions(suppress=True)

# Load the model
model = load_model("keras_Model.h5", compile=False)

def text(text):  # 建立顯示文字的函式
    global show_img  # 設定 img 為全域變數
    org = (0, 50)  # 文字位置
    fontFace = cv2.FONT_HERSHEY_SIMPLEX  # 文字字型
    fontScale = 2.5  # 文字尺寸
    color = (255, 255, 255)  # 顏色
    thickness = 5  # 文字外框線條粗細
    lineType = cv2.LINE_AA  # 外框線條樣式
    cv2.putText(show_img, text, org, fontFace, fontScale, color, thickness, lineType)  # 放入文字

cap = cv2.VideoCapture(0)
if not cap.isOpened():
    print("Cannot open camera")
    exit()

while True:
    ret, frame = cap.read()
    if not ret:
        print("Cannot receive frame")
        break

    img = cv2.resize(frame, (398, 224))
    show_img = img[0:224, 80:304]

    img = np.asarray(show_img, dtype=np.float32).reshape(1, 224, 224, 3)
    img = (img / 127.5) - 1

    prediction = model.predict(img)
    index = np.argmax(prediction)
    print(index)

    if index == 0:
        text('a')  # 使用 text() 函式，顯示文字
    elif index == 1:
        text('b')
    elif index == 2:
        text('c')

    cv2.imshow("Webcam Image", show_img)

    if cv2.waitKey(1) == ord('q'):
        break  # 按下 q 鍵停止

cap.release()
cv2.destroyAllWindows()

使用 Pillow 加入中文文字

如果需要在影像上加入中文標註，可以使用 Pillow 函式庫。首先，安裝 Pillow：

pip install pillow

接著，修改程式碼如下，以支持中文文字顯示：

from keras.models import load_model  # TensorFlow is required for Keras to work
import cv2  # Install opencv-python
import numpy as np
from PIL import ImageFont, ImageDraw, Image  # 載入 PIL 相關函式庫

fontpath = 'NotoSansTC-Regular.ttf'  # 設定字型路徑

# Disable scientific notation for clarity
np.set_printoptions(suppress=True)

# Load the model
model = load_model("keras_Model.h5", compile=False)

def text(text):  # 建立顯示文字的函式
    global show_img  # 設定 img 為全域變數
    org = (0, 50)  # 文字位置
    font = ImageFont.truetype(fontpath, 50)  # 設定字型與文字大小
    imgPil = Image.fromarray(show_img)  # 將 img 轉換成 PIL 影像
    draw = ImageDraw.Draw(imgPil)  # 準備開始畫畫
    draw.text((0, 0), text, fill=(255, 255, 255), font=font)  # 寫入文字
    show_img = np.array(imgPil)

cap = cv2.VideoCapture(0)
if not cap.isOpened():
    print("Cannot

 open camera")
    exit()

while True:
    ret, frame = cap.read()
    if not ret:
        print("Cannot receive frame")
        break

    img = cv2.resize(frame, (398, 224))
    show_img = img[0:224, 80:304]

    img = np.asarray(show_img, dtype=np.float32).reshape(1, 224, 224, 3)
    img = (img / 127.5) - 1

    prediction = model.predict(img)
    index = np.argmax(prediction)
    print(index)

    if index == 0:
        text('布')  # 使用 text() 函式，顯示文字
    elif index == 1:
        text('剪刀')
    elif index == 2:
        text('石頭')

    cv2.imshow("Webcam Image", show_img)

    if cv2.waitKey(1) == ord('q'):
        break  # 按下 q 鍵停止

cap.release()
cv2.destroyAllWindows()