📌 本文重點
- 只用瀏覽器即可完全離線跑 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：用你電腦的顯示卡在「前端」跑推理，不用後端伺服器。
你可以做的事：
- 在本機開啟支援 WebGPU 的瀏覽器（Chrome / Edge / Brave）。
- 把公司文件、程式碼丟進前端頁面，讓 Gemma 4 在本機推理，不經過任何外部 API。
實際效果：隱私資料留在電腦裡，沒有雲端 API log，也不需要申請 OpenAI Key 或部署後端。
💡 關鍵： 只要一台支援 WebGPU 的電腦與瀏覽器，就能完成完全離線、無雲端依賴的 LLM 推理與控制。
2. 透過 WebSerial 控制機器人 / IoT
Reddit 的 demo 裡，用 Transformers.js 跑 Gemma 4，搭配 WebSerial API 直接控制 Reachy Mini 機器人。
流程概念：
- 使用者在瀏覽器輸入：「向右揮手打招呼」。
- Gemma 4 把自然語言轉成一段控制指令（例如 JSON 或簡單 DSL）。
- 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 指令。
可以做的練習：
- 先讓 LLM 只輸出固定格式 JSON（用 system prompt 約束）。
- 前端寫一個 parser，檢查 JSON 格式合法才發送給硬體。
- 加上「模擬模式」（不連接硬體），先在 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 為例：
- 更新到最新版（至少 120 以上會較穩定）。
- 在網址列輸入
chrome://flags。 - 搜尋「WebGPU」，啟用：
WebGPU（或Unsafe WebGPU視版本而定）。- 重新啟動瀏覽器。
行動檢查：
- 開啟 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 專用權重 | 直接在瀏覽器載入 | 前端工程師、想快速起跑的人 |
操作建議：
- 到 Hugging Face 搜尋「Gemma 4」模型庫（例如
google/gemma-2-2b-it，實際名稱依官方更新為準）。 - 找到有
transformers.js或onnx標籤的 repo。 - 把權重檔放在自己的靜態網站（或本機 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）
- 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);
}
}
“`
- 前端 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’));
}
“`
-
實際試用：
-
在頁面輸入「開燈」→ LLM 產生
LED_ON→ 燈亮。 - 在頁面輸入「關燈」→ LLM 產生
LED_OFF→ 燈熄。
這就是從「純前端 LLM」到「瀏覽器裡的迷你 AI agent」的第一步。
小結：從簡單控制開始，一步步加功能
建議的練習路線：
- 第一階段：在瀏覽器跑起 Gemma 4 chatbot，確認 WebGPU 正常。
- 第二階段：用 WebSerial 控制一顆 LED 或一個伺服馬達，先用固定按鈕測試。
- 第三階段：讓 LLM 產生中介指令（JSON 或簡單 DSL），由 JS 驗證後再送給硬體。
- 第四階段：加入簡單記憶和排程，做出「瀏覽器內的小型 AI agent」。
只要一台支援 WebGPU 的電腦、一顆開發板，就能在客廳或教室裡體驗「完全離線的 LLM 控機器人」。
🚀 你現在可以做的事
- 到 Hugging Face 下載一個支援
Transformers.js的 Gemma 4 模型，放到本機靜態伺服器測試載入- 依文中示例寫一個最簡單的前端 Chatbot，確認在你的瀏覽器上能透過 WebGPU 正常推理
- 準備一塊 Arduino 或 ESP32，照示例建立
LED_ON/LED_OFF協議，實作第一個「LLM 控燈」實驗
