Kerwin AI Information

標籤: WebSerial 控制機器人

  • 用瀏覽器跑 Gemma 4 控機器人

    用瀏覽器跑 Gemma 4 控機器人

    📌 本文重點

    • 只用瀏覽器即可完全離線跑 Gemma 4
    • 結合 WebSerial 可直接控制機器人與 IoT
    • 純前端即可實作迷你 AI agent 控制硬體

    不想把資料丟雲端、又想用 LLM 控機器人？Gemma 4 + Transformers.js + WebGPU 讓你只靠瀏覽器就能離線跑模型、還能直接控制硬體。

    參考實作影片：Gemma 4 fully offline + WebGPU + Reachy Mini（Reddit）
    https://www.reddit.com/r/LocalLLaMA/comments/1ta9mmd/gemma_4_running_fully_offline_on_webgpu_with/

    核心功能：一台電腦 + 一個瀏覽器就夠

    1. 完全離線的瀏覽器 LLM

    這套組合的核心是：

    • Gemma 4：Google 開源 LLM 系列，支援多種量化格式（GGUF / ONNX / JS）。
    • Transformers.js：在瀏覽器裡跑 Hugging Face 模型的 JavaScript 函式庫。
    • WebGPU：用你電腦的顯示卡在「前端」跑推理，不用後端伺服器。

    你可以做的事：

    1. 在本機開啟支援 WebGPU 的瀏覽器（Chrome / Edge / Brave）。
    2. 把公司文件、程式碼丟進前端頁面，讓 Gemma 4 在本機推理，不經過任何外部 API。

    實際效果：隱私資料留在電腦裡，沒有雲端 API log，也不需要申請 OpenAI Key 或部署後端。

    💡 關鍵： 只要一台支援 WebGPU 的電腦與瀏覽器，就能完成完全離線、無雲端依賴的 LLM 推理與控制。

    2. 透過 WebSerial 控制機器人 / IoT

    Reddit 的 demo 裡，用 Transformers.js 跑 Gemma 4，搭配 WebSerial API 直接控制 Reachy Mini 機器人。

    流程概念：

    1. 使用者在瀏覽器輸入：「向右揮手打招呼」。
    2. Gemma 4 把自然語言轉成一段控制指令（例如 JSON 或簡單 DSL）。
    3. JavaScript 把指令透過 WebSerial 傳給機器人控制板（例如 Arduino / microcontroller）。

    你可以照做的行動：

    • 先用 Arduino + USB 線，把一顆 LED 或伺服馬達接到電腦。
    • 寫個簡單的序列通訊協議，像：LED_ON、LED_OFF、SERVO:45。
    • 在網頁裡用 JavaScript：

    js
    const port = await navigator.serial.requestPort();
    await port.open({ baudRate: 115200 });
    // 把 LLM 產生的指令寫進 serial

    先從「LLM 控燈」，再慢慢升級到「LLM 控機器人手臂」。

    3. 純前端的迷你 AI Agent

    有了本地 LLM + WebSerial，你可以在瀏覽器裡做一個小型 AI agent。

    • 理解任務：使用者輸入「每 10 分鐘幫我量一次溫度」。
    • 規劃步驟：Gemma 4 產生一段 JSON 計畫，例如：

    json
    {
    "action": "loop",
    "interval": 600,
    "task": "read_temp"
    }

    • 執行控制：前端 JS 解析 JSON，呼叫對應的 serial 指令。

    可以做的練習：

    1. 先讓 LLM 只輸出固定格式 JSON（用 system prompt 約束）。
    2. 前端寫一個 parser，檢查 JSON 格式合法才發送給硬體。
    3. 加上「模擬模式」（不連接硬體），先在 console 測試 agent 邏輯。

    適合誰用？三種場景舉例

    1. 教學場景：高中 / 大學生的 AI + 機器人課

    • 不用架伺服器，電腦教室只要能開 Chrome。
    • 學生可以：
    • 改 prompt 看機器人動作改變。
    • 寫自己的小指令語言（例如 MOVE LEFT 10）。
    • 觀察 LLM 如何把自然語言轉成這套語言。

    行動建議：

    • 用一台 Reachy Mini 或任何 Arduino 小車當教材。
    • 提供學生一個預先寫好的 HTML + JS 專案，只讓他們改 prompt 和指令 mapping。

    2. 實驗場景：研究邊緣運算 / 隱私的工程師

    • 需要在醫療、工廠、或無網路環境下跑 LLM。
    • 想測試「模型就在裝置上」的延遲和可靠性。

    行動建議：

    • 把現有的 Python LLM pipeline，拆成：
    • 前端：Transformers.js + WebGPU 跑推理。
    • 後端（選配）：只收集匿名統計，不傳原始輸入。
    • 對比雲端 API 與本地推理在速度、穩定度上的差異。

    💡 關鍵： 在醫療或工廠等高隱私、高可靠場景，本地 LLM 能在不傳輸原始資料的情況下提供近乎即時的推理與控制。

    3. 家用場景：DIY 簡易家電自動化

    • 例如：
    • 「用自然語言控制窗簾、風扇」
    • 「讓 LLM 幫你排家中設備的定時腳本」

    行動建議：

    • 先用 USB 連接一塊 ESP32 / Arduino 開發板，只控制一顆繼電器或 LED。
    • 設計簡單語句：
    • 「晚上 10 點關燈」→ 轉成 SCHEDULE:22:00:OFF。
    • 用 LLM 把上面這種語句自動產生，再由 JS 解讀和排程。

    怎麼開始：從開啟 WebGPU 到控制第一顆 LED

    步驟一：開啟瀏覽器 WebGPU

    以 Chrome 為例：

    1. 更新到最新版（至少 120 以上會較穩定）。
    2. 在網址列輸入 chrome://flags。
    3. 搜尋「WebGPU」，啟用：
    4. WebGPU（或 Unsafe WebGPU 視版本而定）。
    5. 重新啟動瀏覽器。

    行動檢查：

    步驟二：從 Hugging Face 抓 Gemma 4 模型

    常見三種格式：

    格式 名稱示例 特點 適合誰
    GGUF gemma-4b-it-q4_0.gguf 量化後較小，適合 CPU/GPU 混合 已熟悉 ggml / llama.cpp 生態的人
    ONNX gemma-4b-it.onnx 通用，很多推理引擎支援 想跨平台跑推理的開發者
    JS Transformers.js 專用權重 直接在瀏覽器載入 前端工程師、想快速起跑的人

    操作建議：

    1. 到 Hugging Face 搜尋「Gemma 4」模型庫（例如 google/gemma-2-2b-it，實際名稱依官方更新為準）。
    2. 找到有 transformers.js 或 onnx 標籤的 repo。
    3. 把權重檔放在自己的靜態網站（或本機 dev server）供前端載入。

    Transformers.js 官方文件：
    https://huggingface.co/docs/transformers.js

    💡 關鍵： 透過 Transformers.js 專用權重，可直接在瀏覽器載入 Gemma 4，省去自建推理後端的成本與複雜度。

    步驟三：在瀏覽器跑起簡單 Chatbot

    最低限度的前端結構：

    <script type="module">
  import { pipeline } from '@xenova/transformers';

  const chat = await pipeline('text-generation', 'path/to/gemma4/model');

  async function ask(prompt) {
    const out = await chat(prompt, { max_new_tokens: 128 });
    console.log(out[0].generated_text);
  }

  ask('你現在是一個 Arduino 助理，請用 JSON 說明如何讓 LED 閃爍。');
</script>

    行動建議：

    • 先在 console 裡確認模型可以正常回答，再加上簡單的 <textarea> + <button> 當聊天介面。

    步驟四：把 Chatbot 接到 WebSerial（Arduino）

    1. Arduino 端草稿：

    “`cpp
    void setup() {
    Serial.begin(115200);
    pinMode(13, OUTPUT);
    }

    void loop() {
    if (Serial.available()) {
    String cmd = Serial.readStringUntil(‘\n’);
    if (cmd == “LED_ON”) digitalWrite(13, HIGH);
    if (cmd == “LED_OFF”) digitalWrite(13, LOW);
    }
    }
    “`

    1. 前端 WebSerial + LLM：

    “`js
    async function connectSerial() {
    const port = await navigator.serial.requestPort();
    await port.open({ baudRate: 115200 });
    const writer = port.writable.getWriter();
    return writer;
    }

    async function sendCommandFromLLM(userText, writer) {
    const response = await chat(使用者的指令：${userText}
    請只回應一行指令，LED_ON 或 LED_OFF    );
    const cmd = response[0].generated_text.trim();
    await writer.write(new TextEncoder().encode(cmd + ‘\n’));
    }
    “`

    1. 實際試用：

    2. 在頁面輸入「開燈」→ LLM 產生 LED_ON → 燈亮。

    3. 在頁面輸入「關燈」→ LLM 產生 LED_OFF → 燈熄。

    這就是從「純前端 LLM」到「瀏覽器裡的迷你 AI agent」的第一步。

    小結：從簡單控制開始，一步步加功能

    建議的練習路線：

    1. 第一階段：在瀏覽器跑起 Gemma 4 chatbot，確認 WebGPU 正常。
    2. 第二階段：用 WebSerial 控制一顆 LED 或一個伺服馬達，先用固定按鈕測試。
    3. 第三階段：讓 LLM 產生中介指令（JSON 或簡單 DSL），由 JS 驗證後再送給硬體。
    4. 第四階段：加入簡單記憶和排程，做出「瀏覽器內的小型 AI agent」。

    只要一台支援 WebGPU 的電腦、一顆開發板，就能在客廳或教室裡體驗「完全離線的 LLM 控機器人」。

    🚀 你現在可以做的事

    • 到 Hugging Face 下載一個支援 Transformers.js 的 Gemma 4 模型，放到本機靜態伺服器測試載入
    • 依文中示例寫一個最簡單的前端 Chatbot，確認在你的瀏覽器上能透過 WebGPU 正常推理
    • 準備一塊 Arduino 或 ESP32，照示例建立 LED_ON / LED_OFF 協議，實作第一個「LLM 控燈」實驗