標籤: WebGPU

📌 本文重點

• 只用瀏覽器即可完全離線跑 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. 重新啟動瀏覽器。

行動檢查：

• 開啟 https://webgpureport.org/ 確認 WebGPU 是否啟用。

---

步驟二：從 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 控燈」實驗