WebLLM - Kerwin AI Information

📌 本文重點

WebLLM 讓瀏覽器直接跑開源大模型

透過 WebGPU 在本機硬體上做推理

純前端 API，像用本地版 OpenAI 一樣簡單

適合前端工具、教育場景與快速原型

在瀏覽器本地跑 LLM 的好處，可以一句話說完：不用後端、跨平台、資料留在自己電腦裡——而 WebLLM 就是讓你用這種方式跑大模型的工具。

💡 關鍵： WebLLM 讓你只用一個前端網頁，就能在本機私有環境中跑開源大模型，完全不需後端與 API 金鑰。

GitHub 專案：https://github.com/mlc-ai/web-llm

核心功能：把 LLM 變成一個 `<script>`

1. 直接在瀏覽器跑多種開源模型

WebLLM 把多個主流開源模型打包成「瀏覽器可用版本」，你可以像引入前端套件一樣使用。

支援模型示意（依官方更新為準）：
Llama 系列（如 Llama 3、Llama 2）
Mistral / Mixtral 等英文、多語模型
部分中文優化模型（需看官方 Model Zoo）
不用自己轉權重：官方已提供 Web-friendly 模型格式（MLC 格式），可透過 CDN 或 GitHub 直接載入。

可行動：
1. 打開 WebLLM Model Zoo：https://github.com/mlc-ai/web-llm/tree/main/model
2. 選一個輕量模型（如 7B 或以下）作為第一個嘗試，避免太大造成載入時間過長。

2. 利用 WebGPU 在前端做推理

WebLLM 的效能關鍵是 WebGPU：它讓瀏覽器可以直接用顯示卡算模型，而不只是 CPU。

效能大概在哪個等級？
筆電內建顯示卡（Mac M 系列、Intel/AMD iGPU）：足夠跑小模型做聊天、摘要、翻譯
獨顯桌機（RTX 系列）：可跑較大模型，輸出速度接近簡單雲端 API
你需要：
支援 WebGPU 的瀏覽器（目前主力是新版 Chrome、Edge、Firefox Nightly、Safari Tech Preview）
打開 WebGPU flag（某些瀏覽器仍在實驗階段）

💡 關鍵： 只要啟用 WebGPU，你的瀏覽器就能用顯示卡跑 LLM，效能從「勉強可用」直接升級到「接近雲端 API」。

可行動：先確認瀏覽器 WebGPU

以 Chrome 為例：

更新到最新版本
在網址列輸入 chrome://flags
搜尋 WebGPU，將 Unsafe WebGPU 設為 Enabled
重新啟動瀏覽器
前往 https://webgpureport.org/ 檢查是否顯示已啟用

3. 純前端 API：像呼叫本地版 OpenAI

WebLLM 封裝了一套前端 API，你可以在 JS 裡這樣用：

import { CreateMLCEngine } from "https://esm.run/@mlc-ai/web-llm";

const engine = await CreateMLCEngine("Llama-3-8B", {
  initProgressCallback: (progress) => {
    console.log("載入進度", progress);
  },
});

const reply = await engine.chat.completions.create({
  messages: [
    { role: "user", content: "用繁體中文解釋什麼是 WebLLM" },
  ],
});

console.log(reply.choices[0].message.content);

風格接近 OpenAI API，但完全在前端執行，不依賴後端。

可行動：在 Codesandbox / StackBlitz 開一個空白 HTML + JS 專案，直接貼上上述範例測試。

適合誰用：三種最常見場景

1. 前端工程師：純前端 AI 小工具

你可以把 WebLLM 當成「瀏覽器版 Ollama」，但只需前端。

範例功能：
文件上傳後，做摘要、關鍵字擷取
表單輸入文字，即時翻譯或重寫
Chrome Extension 內建一個小型 AI 助理

可行動：挑一個現有前端 side project（例如備忘錄、閱讀器），嘗試加一個「本地 AI 摘要」按鈕，只用 WebLLM，不建後端。

2. 教育與隱私敏感場景

如果你是：

老師／家教：希望學生在課堂上用 AI，但不想所有問題都送到雲端
企業內部：要處理合約、簡報草稿，不方便使用外部 API

這時 WebLLM 的優點是：

所有內容都在瀏覽器內運算，不上傳到第三方伺服器
只需發一個 HTML 檔或內網服務給同事／學生即可使用。

可行動：
– 建一個簡單頁面：左側輸入、右側 AI 回覆，放在局域網，替代市售雲端聊天工具。

3. PM / 設計師：快速原型 AI 功能

你想 demo「這個產品如果有 AI 助理會長什麼樣」。

不想等工程師建 API、串模型
不想申請一堆金鑰

WebLLM 的實用點：

一個 HTML 檔就能 demo 聊天、問答、寫文案
Demo 完再決定要不要接正式後端 API。

可行動：
– Figma 設計完流程後，自己做一個「原型聊天頁」，用 WebLLM 模擬最終效果，拿去跟團隊溝通。

10 分鐘跑起一個 WebLLM 聊天頁

以下是一個最小可用範例，從 0 到能聊天，大致流程。

步驟 1：建立 HTML 檔

建立 index.html，放入基本 UI：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <title>WebLLM 本地聊天</title>
  <style>
    body { font-family: system-ui; max-width: 800px; margin: 20px auto; }
    #log { border: 1px solid #ccc; padding: 10px; height: 400px; overflow-y: auto; }
    .msg-user { color: #0055aa; margin: 4px 0; }
    .msg-ai { color: #333; margin: 4px 0; }
  </style>
</head>
<body>
  <h1>WebLLM 本地聊天</h1>
  <div id="log"></div>
  <textarea id="input" rows="3" style="width: 100%;"></textarea>
  <button id="send">送出</button>
  <script type="module" src="app.js"></script>
</body>
</html>

步驟 2：在 JS 中載入 WebLLM

建立 app.js：

import { CreateMLCEngine } from "https://esm.run/@mlc-ai/web-llm";

const logEl = document.getElementById("log");
const inputEl = document.getElementById("input");
const sendBtn = document.getElementById("send");

function addMsg(text, cls) {
  const div = document.createElement("div");
  div.className = cls;
  div.textContent = text;
  logEl.appendChild(div);
  logEl.scrollTop = logEl.scrollHeight;
}

let engine;
let messages = [];

async function init() {
  addMsg("正在載入模型，請稍候……", "msg-ai");
  engine = await CreateMLCEngine("Llama-3-8B", {
    initProgressCallback: (p) => {
      console.log("載入進度", p);
    },
  });
  addMsg("模型載入完成，可以開始聊天", "msg-ai");
}

sendBtn.onclick = async () => {
  const content = inputEl.value.trim();
  if (!content) return;
  inputEl.value = "";
  addMsg(content, "msg-user");

  messages.push({ role: "user", content });

  // 控制上下文長度：只保留最近 10 則對話
  if (messages.length > 10) {
    messages = messages.slice(-10);
  }

  addMsg("AI 正在思考……", "msg-ai");

  const reply = await engine.chat.completions.create({
    messages,
    max_tokens: 512,
  });

  const text = reply.choices[0].message.content;
  messages.push({ role: "assistant", content: text });

  // 刪掉「AI 正在思考……」那一行
  logEl.lastChild.remove();
  addMsg(text, "msg-ai");
};

init();

步驟 3：用本機開啟頁面

在資料夾中放好 index.html、app.js
用 VS Code Live Server、或簡單的開發伺服器開啟：
Node 環境下可用 npx serve .
開瀏覽器（已啟用 WebGPU）訪問 http://localhost:3000 或對應網址。

如果顯示模型載入成功，就能開始聊天。

優化建議：讓速度和體驗更順

1. 控制上下文長度

不要用整個聊天紀錄，每次只帶最近 N 則對話
實作方式如上範例，用 messages.slice(-10) 保留最近 10 則
好處：
減少推理時間
降低記憶體消耗

2. 壓縮 UI 日誌

不需在 UI 顯示完整系統 prompt、或太長的技術訊息
可以把多輪簡短問答整合成一段摘要，定期替換舊內容。

3. 選模型時兼顧容量與速度

初次嘗試優先選小模型（例如 4B、7B），觀察效能
若顯示卡記憶體不足，載入過程可能失敗或非常緩慢，換更小模型即可。

總結：先用 WebLLM 做一個小工具，再想後端

WebLLM 的定位，可以簡化成一句話：讓你在瀏覽器裡，像呼叫 OpenAI 一樣用 LLM，但完全不需要後端與金鑰。

💡 關鍵： 從一個靜態 HTML + JS 開始，你就能在瀏覽器裡跑大模型，快速驗證想法，再決定是否接入雲端服務。

最實際的做法：

選一個你現在就想做的 AI 小功能（翻譯、摘要、助理）
用本文的聊天頁範例改成自己的需求
在團隊或課堂中 demo 本地 LLM 效果，再決定要不要接雲端 API。

從一個 HTML 檔開始，你就能把「在瀏覽器跑大模型」變成真正可用的功能，而不是只停留在技術新聞上。

🚀 你現在可以做的事

在瀏覽器啟用 WebGPU，測試官方 WebLLM Demo 或 Model Zoo 中的 7B 模型

建立一個最小版 index.html + app.js，照範例跑起本地聊天頁

選一個現有前端專案（例如閱讀器或筆記），嵌入 WebLLM 按鈕實作「本地 AI 摘要」功能

標籤: WebLLM

用瀏覽器跑大模型：WebLLM 實戰指南

核心功能：把 LLM 變成一個 <script>