浏览器端运行Gemma：Go Outside用本地AI让你放下手机

一个反向优化的App：成功=关掉它

大多数应用把成功定义为用户停留的分钟数，而独立开发者 jackydu1981 做的这款 Go Outside 恰恰相反——当你关掉它、走出门去的那一刻，才算这款应用赢了。

这是一款只有一个按钮的网页应用。点击「Give me a mission」，运行在你浏览器中、使用你本地 GPU 的 Gemma 模型，会为接下来的 20、30 或 45 分钟写出一个简短的户外任务。这个任务会结合你所在地的天气、一天中的时段和季节来定制，比如：

水洼镜子。 找三个能倒映高物的水洼：一棵树、一根路灯杆、一道屋檐线。挑一个你最喜欢的。

给出任务后，应用就「让开」了——屏幕几乎全黑，显示一个大大的倒计时，写着 Phone away. Go.（收起手机，出发）。当你回来时，它会问一个可选问题「你看到了什么？」，然后把你一行字的回答存进一本只存在于你设备上的小小「田野日志」。

作者点出了设计核心：这个任务不是徒步也不是健身，而是「一件足够具体、值得去留意的小事」——三种叶子的颜色、五种鸟叫声、黑暗街道上亮着灯的窗户。按挑战赛的说法，最好的作品应该「让屏幕成为整个体验中最短的部分」，而这里屏幕亮着的时间，大约只够你读完一句话。

技术栈：Gemma 如何跑进浏览器

整个项目的技术选型围绕「本地运行」展开，是一个展示浏览器端 AI 可行性的典型案例。

模型通过 WebLLM（@mlc-ai/web-llm@0.2.85）运行，这是 MLC 开源的推理引擎，能把模型编译到 WebGPU 上。默认模型是 gemma-2-2b-it-q4f16_1-MLC-1k——即 Gemma 2 2B 指令版、4-bit 量化、1k 上下文窗口。对于一个简短的 prompt 来说，1k 上下文绰绰有余，还能省内存。如果 GPU 不支持 16-bit shader，应用会自动切到同款模型的 q4f32 构建；手机端则有一个「更轻」选项，使用约 600MB 的 Gemma 3 1B（gemma3-1b-it-q4f16_1-MLC）。推理跑在 Web Worker 里，保证进度条和 UI 不卡顿。

整个应用是纯 HTML、CSS 和 ES modules，无构建步骤、无后端，采用 MIT 许可证。

上下文进，一个任务出

在 Gemma 开始工作前，应用会先构建一份简短的事实清单：

- Time: evening, Saturday
- Season: autumn
- Light: daylight, sunset in about 75 minutes
- Weather: light rain, 11°C (feels like 9°C), wind 14 km/h
- Where: a park or green space
- Time available: 30 minutes

天气和日落时间来自免费、无需 API key 的 Open-Meteo，而且只有在用户主动授权定位时才会请求。规则被写得很短，并随条件变化：一个具体可完成的任务、步行、不冒险、不拍照不用应用；天黑时只走有灯的街道；下雨时把雨水变成任务的一部分；打雷时就待在门廊别出门。

一个有意思的技术细节是：Gemma 的 chat template 没有 system turn，所以所有指令都塞进了一条 user message 里。模型则按固定格式输出 TITLE 和 MISSION 两行。

小模型需要安全网

作者坦言，2B 模型能写出简短生动的指令，但不总是乖乖遵守格式。为此他写了一个解析器：剥离 markdown 和引号、容忍缺失标签、在句子边界截断过长回答、拒绝过短的输出。回复不合格会重试一次；若再失败或模型加载不了，应用会从 22 条手写任务 中按相同条件标记（白天/黑夜、湿/干、冷、热、有风）挑一个出来。换句话说，你永远能带着一个任务出门。

考虑到约 1.5GB 的模型下载量不该「不打招呼就来」，首次任务会先征求同意，并提供手写任务作为替代。此后 WebLLM 把权重存进 Cache Storage，service worker 缓存应用本体和固定版本的 WebLLM bundle——第一次运行后，飞行模式下也能用。

WebGPU 是 W3C 制定的新一代 Web 图形与计算 API，于 2023 年在 Chrome 113 正式上线，目前 Chrome/Edge 桌面版和较新的 Android Chrome 均已默认启用，Safari 和 Firefox 支持仍不完整。与旧版 WebGL 不同，WebGPU 暴露了 GPU 的通用计算能力（Compute Shader），使得在浏览器中运行矩阵乘法等 LLM 核心操作成为可能。WebLLM 正是以 WebGPU 为计算后端，通过 Apache TVM 编译器将模型算子编译为 WGSL（WebGPU Shading Language）着色器，再利用浏览器的 Cache Storage API 将权重持久化到本地，从而实现「一次下载、离线可用」的浏览器端推理。4-bit 量化（q4f16/q4f32）则是在精度与内存之间取得平衡的关键：将每个权重从 16/32-bit 浮点压缩到 4-bit 整数，模型体积可缩减约 75%，使得 2B 参数模型的下载量控制在 1.5GB 左右，成为普通用户可接受的范围。

Cache Storage 是浏览器 Service Worker API 的一部分，允许网页将任意网络请求的响应（包括大型二进制文件）持久化到本地存储，即使关闭标签页后依然保留。与 localStorage 只能存储少量字符串不同，Cache Storage 支持存储数百兆乃至数 GB 的文件，非常适合保存模型权重分片。Service Worker 则充当浏览器与网络之间的可编程代理：当应用离线时，它拦截所有 fetch 请求并从本地缓存中返回已存储的响应，从而实现 PWA（渐进式网页应用）级别的离线体验。Go Outside 将应用本体和固定版本的 WebLLM bundle 均纳入 Service Worker 缓存，意味着首次成功加载后，即便完全断网，用户依然能获得包括模型推理在内的完整功能，这对在公园或步道等弱信号环境中使用尤为关键。

为什么开放权重在这里不可或缺

作者在「为什么开放创新重要」一节给出了相当务实的论证，这也是本项目最值得玩味的部分。对这个应用来说，开放权重直接决定了它能否按设想的方式工作：

• 它在你要去的地方运行。 公园和步道信号往往很差。开放权重能装在设备上离线运行；而闭源 API 恰恰在你想远离网络的时候需要连接。
• 没有什么要上传。 你的大致位置、习惯和日志永远不会发给模型提供商，因为根本就不存在提供商。任务进行中唯一的网络请求，是一个坐标被四舍五入到约 10km 的可选天气请求。
• 运行零成本。 没有 API key、没有按次计费、没有服务器，一个免费小应用才能一直免费。
• 每一层都可见、可替换。 WebLLM 开源，编译后的 Gemma 构建公开，在 Gemma 2 2B 和 Gemma 3 1B 之间切换只需改一行配置。如果下个月出现更好的小型开放模型，应用随时能换上。

作者也诚实地留了个注脚：Gemma 遵循 Google 的 Gemma Terms of Use，属于开放权重（open-weight），而非 OSI 认可的开源许可证。但对这个应用来说，关键在于能下载、能本地运行、能无服务器地交付给用户——开放权重满足了全部这些需求。

一个关于端侧 AI 的小样本

抛开「劝人放下手机」的温情设定，Go Outside 本质上是一次端侧 AI 的工程演示。它用极小的模型（1B–2B）、极轻的技术栈（无后端、无构建）、完整的降级策略（手写任务兜底），把一个本地推理应用做到了可离线、零成本、隐私无忧。

对想要尝试浏览器端 LLM 的开发者而言，这个 MIT 开源项目提供了一套可复用的参考模式：WebLLM + WebGPU 的模型加载与量化选择、Web Worker 隔离推理、针对小模型不稳定输出的解析与重试、以及对大体积模型下载的尊重式处理。这些细节往往比模型本身更能决定一个端侧 AI 产品是否好用。

体验地址在 项目主页，建议用支持 WebGPU 的较新版 Chrome 或 Edge（桌面或 Android）。即便没有 WebGPU，你依然会收到一个结合天气的手写任务，应用也会告诉你原因。