我的瀏覽器竟然能直接跑 AI？透過 Three-LLM 看見 Web AI 的未來

By Gi Pyeong Lee
AI WebGPU Three.js Three-LLM WebLLM
描繪人工智慧在網頁瀏覽器環境中，透過 GPU 加速運作的技術性數位藝術影像
AI Summary

透過 Three-LLM 與 WebLLM 技術，時代正在開啟一個無需連結伺服器，AI 就能在使用者電腦瀏覽器中直接運作的新篇章。

試著想像一下：在沒有網路的咖啡廳打開筆電，請 AI 幫你總結一份冗長的會議資料。若是過去，你得看著 AI 連接雲端伺服器（Cloud Server，即網路上連線的遠端電腦）時那不停旋轉的讀取圈圈並等待，但現在，答案會像變魔術般立即噴湧而出。這是因為你的筆電本身擁有了一個小型的「AI 大腦」。最近出現的「Three-LLM」或「WebLLM」等技術，正是讓這場魔術成真的關鍵。

為何這很重要？ (Why It Matters)

過去我們使用的 AI，絕大多數是透過接收由巨大機房中的超級電腦所處理出來的結果。然而，這產生了一些問題。

首先，維護伺服器的費用極其高昂。其次，伺服器距離越遠，回應速度就越慢。再者，使用者的敏感資料必須透過網路傳輸給伺服器，這讓人對個人隱私安全感到擔憂。這就像為了吃到一道美味料理，必須每次都大老遠跑到很遠的餐廳一樣。

這些全新的網頁技術徹底改變了遊戲規則。當網頁瀏覽器可以直接運行 AI 時，既不需要伺服器費用，所有運算也在自己的電腦內完成，減少了資訊外洩的疑慮。此外，由於沒有網路讀取時間，AI 能達到即時反應，讓使用體驗更加流暢。參考 5

淺顯易懂的解釋 (The Explainer)

網頁瀏覽器究竟是如何運行這麼聰明的 AI 呢？核心技術叫做「WebGPU」。

簡單來說，過去的網頁瀏覽器就像是只能進行簡單計算的「普通辦事員」。而 WebGPU 就像是給了瀏覽器一台強大的「圖形專用計算機」。這台計算機專門負責繪製複雜圖形，或是同時平行處理（一次處理多項工作）AI 複雜的數學運算。

Three-LLM 更進一步將模型的數學結構（推論圖）轉換為 Three.js 可以理解的「著色器（Shader，GPU 專用程式）」。參考 8 比喻的話，就像是把 AI 理解的數學語言翻譯成電腦繪圖能理解的語言來直接執行。

另一方面，WebLLM 是一個以 JavaScript（讓網頁動起來的標準語言）實作的完整框架。參考 4 這就像是在瀏覽器裡額外植入了一個獨立的「AI 作業系統」，當 AI 運算負載過重時，它會聰明地將任務分配給別的「工作者（Web Worker）」，確保瀏覽器畫面不會因此卡住。參考 6

現況 (Where We Stand)

目前這些技術正在飛速發展。Three-LLM 已經成功在網頁瀏覽器環境中直接運行 GPT-2、SmolLM2、Qwen 以及 Phi 等語言模型。參考 8 此外，WebLLM 作為一個開源專案，提供了與 OpenAI 完全相同方式（API）的工具，讓開發者無論是誰，都能輕易地將 AI 功能嵌入自己的網站中。參考 2, 參考 9

只不過，要讓手機上那種擁有數千億參數（AI 智慧程度的指標）的超大型模型現在就在瀏覽器上運行，仍有一定難度。目前主要應用的多是針對瀏覽器環境最佳化、輕量且高效的 AI。這就像是使用快速靈活的機車，而非笨重的貨車一樣。

未來展望 (What’s Next)

未來，我們造訪的所有網站都將「內建」AI。現在我們打開瀏覽器還要另外連結 AI 服務，但很快地，網站本身就會具備智慧。當你說「請調整這張照片的亮度」時，網站不再需要詢問伺服器，而是直接在瀏覽器內即時修圖，或是閱讀長篇文章並自動總結，這些功能將成為標準配備。隨著網頁技術的進步，我們所認識的網頁瀏覽器，終將成為一個巨大的人工智慧工具箱。參考 9, 參考 10

MindTickleBytes 的 AI 記者觀點

AI 不再被侷限於伺服器，而是帶進我們手中的瀏覽器，這是技術自立的開端。開發者們不再需要為了龐大的雲端費用而煩惱，就能帶給使用者強大的 AI 體驗。就像是在自家臥房解決所有煩惱一樣，AI 也正一步步向我們更靠近。

參考資料

  1. Three-LLM—WebGPULLMEngine
  2. WebLLM: High-Performance In-BrowserLLMInferenceEngine
  3. I RanThreeLLMs Entirely in the Browser to Power an AI Coaching Feature - DEV Community
  4. WebLLM: A High-Performance In-BrowserLLMInferenceEngine
  5. Browser-NativeLLMinference: TheWebGPUEngineeringYou…
  6. Welcome to WebLLM —web-llm0.2.84 documentation
  7. mlc-ai/web-llm: High-performance In-browserLLMInferenceEngine…
  8. Running LLMs in the Browser with Three.js - ben3d.ca
  9. WebLLM: A High-Performance In-Browser LLM Inference Engine
  10. WebLLM: A High-Performance In-Browser LLM Inference Engine
AD
測試你的理解
Q1. Three-LLM 執行模型的核心技術是什麼？
  • Python 腳本
  • Three.js TSL 運算著色器
  • 雲端 API
Three-LLM 將模型的推論圖轉換為 Three.js TSL（Three.js Shading Language）運算著色器，並在 WebGPU 上執行。
Q2. WebLLM 的實作語言是什麼？
  • C++
  • Python
  • JavaScript
與大多數推論引擎使用 C++ 或 Python 實作不同，WebLLM 是一個以 JavaScript 實作的開源框架。
Q3. 在網頁瀏覽器內執行 AI 的主要優點是什麼？
  • 即使沒有網路連接也能始終運作
  • 無需伺服器處理並減少網路延遲
  • 模型大小可以無限擴大
在本地瀏覽器中執行 AI 不需要伺服器處理，也沒有網路來回往返，因此可以降低延遲。