三只貓
Rich Mindset Zone
richmindsetzone.com
← All posts

本地 AI 生圖入門：唔使 GPU 唔使雲端，瀏覽器直接跑

#build #ai #tech
本地 AI 生圖入門：唔使 GPU 唔使雲端，瀏覽器直接跑

文章儲存在 /tmp/browser-ai-image-generation.md，全文如下：

---
title: "本地 AI 生圖入門：唔使 GPU 唔使雲端，瀏覽器直接跑"
date: "2026-05-28"
slug: "browser-ai-image-generation"
summary: "2026 年 AI 生圖唔再需要 GPU 或者 API。一個瀏覽器、一部 laptop 甚至 iPhone，直接跑 FLUX 級數模型。實測 Bonsai Image 4B WebGPU 版本，拆解技術突破同應用 workflow。"
tags:
  - build
  - ai-image-generation
  - webgpu
  - bonsai-image
  - local-ai
  - browser-ml
cover_image: "../../assets/heroes/browser-ai-image-generation.jpg"
draft: false
lang: zh-Hant
---

2024 年你同朋友講「我想喺 browser 直接生圖」，佢會話你痴線——AI 生圖係 GPU 嘅專利，冇一張 RTX 4090 或者至少一個 Colab Pro 訂閱，連入場券都拎唔到。2026 年 5 月嘅今日，呢個假設已經完全反轉。一部 2023 年嘅 MacBook Air，甚至一部 iPhone，唔駛安裝任何軟件，用 Safari 或者 Chrome 開一個網頁，就可以生成一幅 1024x1024 嘅高質素圖片。改變呢個局面嘅，唔係 NVIDIA 出新卡，而係模型壓縮技術同 WebGPU 標準嘅成熟碰撞。

## 三年前要 GPU 集群，今日一個瀏覽器搞掂

Bonsai Image 4B 係 PrismML 出品嘅圖像生成模型，Caltech 研究團隊 spin-off，背後投資者有 Khosla Ventures、Cerberus 同 Google。呢間公司之前已經出過 1-bit Bonsai LLM，而家將相同嘅極端量化技術應用到 FLUX.2 Klein 4B 架構上面。

重點係「量化」呢兩個字。一般 FLUX.2 Klein 4B 嘅 diffusion transformer 要 7.75 GB，連同 text encoder 同 VAE，整個 deployment payload 接近 16 GB——呢個數字已經超出大多數消費級裝置嘅記憶體上限。Bonsai Image 將 transformer 權重由 16-bit floating point 壓縮成 binary（{-1, +1}，即 1-bit）或者 ternary（{-1, 0, +1}，即 1.58-bit）。

結果好誇張：1-bit 版本嘅 transformer 僅 0.93 GB，係原來嘅 8.3 分 1；ternary 版本 1.21 GB，係 6.4 分 1。加埋壓縮後嘅 text encoder 同 VAE，Apple Silicon 嘅 deployment payload 係 3.42 GB（1-bit）同 3.88 GB（ternary）。比較之下，原來嘅 FLUX.2 Klein 4B 要 15.97 GB。

呢個唔係純粹嘅「壓縮到好細但睇唔到」嘅取捨。Benchmark 數據顯示，ternary Bonsai Image 4B 喺 DPG-Bench 得分 0.851，對比原始 FLUX.2 Klein 4B 嘅 0.853——保留咗 95% 嘅提示跟隨能力。GenEval 得分 0.723 vs 0.819，HPSv3 得分 12.22 vs 12.84。以一個 6.4 倍壓縮嘅模型嚟講，呢個 retention rate 係前所未見。

仲有一個數字更震撼：SDXL 嘅 GenEval 得分只係 0.30，DPG-Bench 0.74，全部被 Bonsai 大幅抛離。換句話講，一個 1.21 GB 嘅模型，質素好過 SDXL，仲要細 4 倍。

## 瀏覽器直接跑：WebGPU 示範實測

模型壓縮到咁細之後，下一步就係點樣喺瀏覽器運行。呢度要講嘅係 Hugging Face 社群成員 Xenova（即係 Transformers.js 嘅主要維護者）喺 5 月 27 號放出嘅 WebGPU demo。成個示範係一個單一 HTML 檔案，用 WebGPU 做 inference backend，直接喺 Chrome 或者 Edge 入面跑 Bonsai Image 4B。

WebGPU 係 W3C 嘅新一代 GPU API，2023 年尾開始喺 Chrome 同 Edge 上面預設啟用。同舊嘅 WebGL 唔同，WebGPU 俾開發者直接操控 GPU 嘅 compute shader，而唔係透過 graphics pipeline 嚟模擬運算。MLC-AI 之前嘅 Web Stable Diffusion 已經證明呢條路可行，但當時 SD v1.5 已經係相對舊嘅模型，而且 memory footprint 大，要求 8 GB 以上 GPU RAM，實際上只喺高階裝置行得順。

Bonsai Image 嘅 WebGPU demo 唔同。Ternary 版本嘅 mean active memory 喺 512x512 輸出下只係 1.96 GB，1024x1024 都只係 2.38 GB。呢個數字意味住乜？即係一部得 8 GB RAM 嘅 M1 MacBook Air，或者一部 iPhone，都可以流暢運行。

實際速度方面：根據 PrismML 嘅官方數據，ternary Bonsai Image 4B 喺 iPhone 17 Pro Max 上面 512x512 需時 9.4 秒，Mac M4 Pro 大約 6 秒。WebGPU 版本因為多咗一層瀏覽器 abstraction，速度會略慢，但考慮到完全唔需要伺服器、唔需要安裝、唔需要 GPU driver 更新，呢個 trade-off 絕對值得。

留意一個技術細節：WebGPU 喺 Apple Silicon 上面有個 `disable_robustness` flag 嘅問題。唔開嘅話，Chrome 嘅 Dawn 實作會對 buffer bounds 做 clamping，導致效能下降大約 3 倍。如果你係 Chrome 用家，可以喺 `chrome://flags` 啟用相關嘅 WebGPU 最佳化 flag 嚟改善速度。Edge 同 Firefox 嘅情況各異，建議主力用 Chrome Canary 或者最新版 Chrome。

## 開發者可以點樣用？

由技術興奮回到現實：作為開發者，你可以點樣將本地瀏覽器生圖整合到自己的 product？

最快嘅路徑係直接用 Hugging Face 上嘅 WebGPU demo 做參考。成個示範係單一 HTML 檔案，結構清晰，可以 fork 落嚟改做自己嘅前端應用。如果你用 Transformers.js，留意 text-to-image pipeline 仲未正式支援，但 Bonsai Image 嘅 WebGPU demo 用嘅係自訂 pipeline，你可以直接攞嚟用。

第二條路徑係透過 PrismML 嘅 GitHub repo 用 native deployment。佢哋提供咗 `setup.sh` 同 `scripts/generate.sh`，支援 MLX（Apple Silicon）同 CUDA（NVIDIA GPU）。如果你要做 product 而唔係 demo，呢條路更穩陣——iOS 嘅 Bonsai Studio App 已經係 production-grade 嘅參考實作。

第三個方向係將成個模型 cache 喺 Service Worker。Bonsai Image 4B 嘅 deployment payload 約 3-4 GB，第一次 load 需要下載，但之後可以靠 browser cache 做到完全離線運作。對於要支援離線場景嘅 product（例如旅行 App、教育工具、工業檢測），呢個係 killer feature。

Applications 方面，我睇到幾個具體場景：
- **SaaS 減省成本**：將圖像生成嘅 inferencing 由你嘅 GPU server 搬去用戶嘅 browser，Server cost 直接歸零
- **Privacy-first 工具**：醫療、法律、金融行業嘅內容生成，數據唔離開用戶裝置
- **Creative prototyping**：設計師快速 iterate prompt，唔使等 API round-trip，latency 由秒級降到毫秒級心理感受
- **Developer tooling**：VS Code plugin 自動生成 UI mockup、Chrome extension 做 on-the-fly 圖像替換

## 結語：本地生圖嘅 practical next step

Bonsai Image 4B 唔係第一個本地 AI 生圖方案，但係第一個做到「質素夠好、體積夠細、授權夠開」嘅組合。Apache 2.0 license、Hugging Face 上有模型同 demo、iPhone 上已經有 production app——條 path 已經鋪好。

我建議有興趣嘅讀者今日就做三件事：
1. 打開 Hugging Face 上嘅 Bonsai Image WebGPU demo（webml-community/bonsai-image-webgpu），用你嘅 laptop 生一張圖，親身感受 latency
2. 下載 Bonsai Studio iOS App，睇下 mobile 上面嘅表現
3. 思考你嘅 product 有冇地方可以用本地 inferencing 取代 server-side API

本地 AI 唔係未來——未來已經到咗，而且就喺你嘅瀏覽器入面。