No-Code AI Development

Teachable Machine 實作：
剪刀、石頭、布

從訓練模型到下載部署，打造您專屬的網頁版 AI 辨識視窗

影像收集模型訓練網頁部署

🏗️ 第一階段：建立專案與類別

Step 1進入網站

前往 Teachable Machine 官網，點擊 Get Started。

選擇 Image Project (影像專案)，接著選擇 Standard image model (標準影像模型)。

提示： 標準模型準確度較高，適合在電腦運行；嵌入式模型(Embedded)則適合 Arduino 等微控制器。

Step 2定義類別 (Class)

我們要做「剪刀、石頭、布」，所以需要新增三個類別：

點擊左側的筆圖示 ✏️ 修改名稱。
將 Class 1 改為剪刀
將 Class 2 改為石頭
點擊下方 Add a class 新增第三個，改為布

📸 第二階段：收集影像數據

這是 AI 學習的關鍵，照片越多樣化，模型越聰明。

開啟 Webcam

點擊每個類別下的 Webcam 按鈕。瀏覽器會請求相機權限，請點擊「允許」。

捕抓樣本

對著鏡頭做出對應手勢（例如剪刀）。長按 Hold to Record 按鈕。

建議每個動作至少拍攝 150-200 張圖片。

多角度拍攝

拍攝時請稍微轉動手腕、改變距離或改變背景，讓模型學會辨識不同角度的手勢。

🧠 第三階段：訓練模型 (Training)

Step 4開始訓練

收集完三個動作的照片後，點擊中間的 Train Model 按鈕。

重要： 訓練過程中，請勿關閉或切換此分頁，否則訓練會中斷。訓練通常只需要幾十秒。

Step 5即時預覽

訓練完成後，右側的 Preview 視窗會自動開啟。

現在對著鏡頭出拳，下方的長條圖應該會即時跳動，顯示目前的信心指數（Confidence）。

如果辨識不準，請回到左側補充更多照片，再次點擊 Train Model。

💾 第四階段：下載模型 (Export)

這是將模型帶回筆電使用的關鍵步驟。

點擊預覽區上方的 Export Model 按鈕。
在彈出視窗中，確認選單在 Tensorflow.js 分頁。
關鍵動作：選擇下方的 Download 選項（預設可能是 Upload）。
點擊藍色的 Download my model 按鈕。

📂 您會下載到一個 ZIP 檔

解壓縮後，您會看到以下三個檔案，請將它們放在一個名為 my_model 的資料夾中：

model.json (模型架構)
metadata.json (類別名稱：剪刀、石頭、布)
weights.bin (權重檔案)

💻 第五階段：製作辨識視窗 (HTML)

請在您的電腦上建立一個新檔案 index.html，將下方代碼貼上。
注意：請確保 index.html 與 my_model 資料夾在同一層目錄。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>剪刀石頭布 AI 辨識視窗</title>
    <style>
        body { font-family: sans-serif; background: #222; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; }
        h1 { margin-bottom: 20px; }
        #webcam-container { border: 5px solid #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0 20px rgba(0,255,255,0.5); }
        #label-container { margin-top: 20px; width: 300px; }
        .label-bar { background: #444; margin: 5px 0; padding: 10px; border-radius: 5px; display: flex; align-items: center; }
        .progress-bg { flex: 1; height: 10px; background: #666; margin-left: 10px; border-radius: 5px; overflow: hidden; }
        .progress-fill { height: 100%; background: #00ff88; width: 0%; transition: width 0.1s; }
        button { padding: 15px 30px; font-size: 20px; background: #00ff88; border: none; border-radius: 50px; cursor: pointer; font-weight: bold; margin-bottom: 20px; transition: transform 0.2s; }
        button:hover { transform: scale(1.1); }
    </style>
</head>
<body>
    <h1>🤖 剪刀石頭布 AI 辨識</h1>
    <button type="button" onclick="init()">開啟鏡頭開始辨識</button>
    <div id="webcam-container"></div>
    <div id="label-container"></div>

    <!-- 引入 TensorFlow.js 和 Teachable Machine 函式庫 -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
    
    <script type="text/javascript">
        // 模型路徑：請確保您的模型檔案在 my_model 資料夾內
        const URL = "./my_model/";

        let model, webcam, labelContainer, maxPredictions;

        async function init() {
            const modelURL = URL + "model.json";
            const metadataURL = URL + "metadata.json";

            try {
                // 載入模型
                model = await tmImage.load(modelURL, metadataURL);
                maxPredictions = model.getTotalClasses();

                // 設定 Webcam
                const flip = true; 
                webcam = new tmImage.Webcam(300, 300, flip); 
                await webcam.setup(); 
                await webcam.play();
                window.requestAnimationFrame(loop);

                // 更新 DOM
                document.getElementById("webcam-container").appendChild(webcam.canvas);
                labelContainer = document.getElementById("label-container");
                for (let i = 0; i < maxPredictions; i++) { 
                    // 建立顯示條
                    let div = document.createElement("div");
                    div.className = "label-bar";
                    div.innerHTML = `<span id='label-${i}'></span><div class='progress-bg'><div id='bar-${i}' class='progress-fill'></div></div>`;
                    labelContainer.appendChild(div);
                }
                // 隱藏按鈕
                document.querySelector("button").style.display = "none";
            } catch (e) {
                alert("找不到模型！請確認 'my_model' 資料夾是否存在，且須透過網頁伺服器開啟 (Live Server)。");
                console.error(e);
            }
        }

        async function loop() {
            webcam.update(); 
            await predict();
            window.requestAnimationFrame(loop);
        }

        async function predict() {
            const prediction = await model.predict(webcam.canvas);
            for (let i = 0; i < maxPredictions; i++) {
                const classPrediction = prediction[i].className;
                const probability = prediction[i].probability.toFixed(2);
                
                // 更新文字與進度條
                document.getElementById("label-" + i).innerHTML = classPrediction;
                document.getElementById("bar-" + i).style.width = (probability * 100) + "%";
            }
        }
    </script>
</body>
</html>

🚀 最後一步：如何執行網頁

⚠️ 重要：不能直接點兩下開啟 html 檔

由於瀏覽器的安全性限制（CORS），直接雙擊開啟 index.html 通常無法讀取本地的模型檔案。

✅ 推薦方法：使用 VS Code Live Server

下載並安裝 Visual Studio Code (VS Code)。
在 VS Code 中開啟您的專案資料夾（包含 index.html 和 my_model 資料夾）。
安裝擴充套件：搜尋 Live Server 並安裝。
在 index.html 檔案上按右鍵，選擇 Open with Live Server。

✅ 替代方法：Web Server for Chrome

如果你不想裝 VS Code，可以安裝 Chrome 擴充功能「Web Server for Chrome」，選擇你的資料夾並啟動即可。

🎉 恭喜！您已完成 AI 部署

現在，您的筆電上有了一個獨立運作的 AI 影像辨識視窗。

您可以嘗試訓練不同的模型（例如：戴口罩偵測、寵物辨識），只需替換 my_model 資料夾內的檔案即可！