[KongchangAI]
· 2 min read· 1,389 words

Running Gemma in the Browser: Go Outside Uses Local AI to Help You Put Down Your Phone

Running Gemma in the Browser: Go Outside Uses Local AI to Help You Put Down Your Phone

Go Outside uses in-browser Gemma to generate outdoor missions, succeeding only when you put your phone down.

Go Outside is a "reverse-optimized" web app with one button: tap it and a Gemma model running on your local GPU generates a weather- and time-aware outdoor task, then hides the screen so you can go. Built with WebLLM + WebGPU, it runs Gemma 2 2B or Gemma 3 1B at 4-bit quantization (~1.5GB), going fully offline after first load via Cache Storage and a Service Worker. A three-tier fallback — parsing, retry, and 22 hand-written tasks — handles unreliable small-model output. Open weights make it possible: no backend, no API costs, no data uploads.

An App Optimized in Reverse: Success Means Closing It

Most apps measure success in minutes of user engagement. Independent developer jackydu1981's Go Outside does the exact opposite — it wins the moment you close it and walk out the door.

This is a web app with exactly one button. Tap "Give me a mission," and a Gemma model running in your browser on your local GPU will write one short outdoor task for the next 20, 30, or 45 minutes. The task is tailored to your local weather, time of day, and season — something like:

Puddle mirrors. Find three puddles that reflect something tall: a tree, a lamppost, a roofline. Pick your favorite.

Once the mission is delivered, the app gets out of the way — the screen goes nearly black, showing a large countdown and the words Phone away. Go. When you return, it asks an optional question, "What did you see?" and saves your one-line answer to a small "field log" that lives only on your device.

Go Outside app interface

The author captures the design philosophy well: the task isn't a hike or a workout, but "one specific thing worth noticing" — the colors of three leaves, five bird calls, lit windows on a dark street. The best experience is one where "the screen is the shortest part," and here the screen stays on just long enough to read a single sentence.

The Tech Stack: How Gemma Runs in the Browser

The entire project is built around local execution — a textbook case for demonstrating the viability of in-browser AI.

The model runs via WebLLM (@mlc-ai/web-llm@0.2.85), an open-source inference engine from MLC that compiles models to WebGPU. The default model is gemma-2-2b-it-q4f16_1-MLC-1k — Gemma 2 2B instruction-tuned, 4-bit quantized, with a 1k context window. For a short prompt, 1k context is more than enough while keeping memory usage low. If the GPU doesn't support 16-bit shaders, the app automatically falls back to the q4f32 build of the same model; on mobile, a "lighter" option uses the roughly 600MB Gemma 3 1B (gemma3-1b-it-q4f16_1-MLC). Inference runs in a Web Worker to keep the progress bar and UI responsive.

The entire app is pure HTML, CSS, and ES modules — no build step, no backend, MIT licensed.

Context In, One Mission Out

Before Gemma gets to work, the app assembles a short fact sheet:

- 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

Weather and sunset times come from Open-Meteo, which is free and requires no API key — and is only requested when the user explicitly grants location permission. The rules are kept brief and adapt to conditions: one concrete, completable task; walking only; no risk-taking; no photos or apps. After dark, stick to lit streets. In rain, make the rain part of the task. In thunder, stay on the porch.

One interesting technical detail: Gemma's chat template has no system turn, so all instructions are packed into a single user message. The model outputs two fixed lines: TITLE and MISSION.

Small Models Need a Safety Net

The author candidly notes that the 2B model writes vivid, concise instructions but doesn't always follow the format reliably. To handle this, he wrote a parser: strips markdown and quotes, tolerates missing tags, truncates overly long responses at sentence boundaries, and rejects outputs that are too short. A non-conforming response triggers one retry; if that also fails or the model fails to load, the app selects from 22 hand-written tasks tagged with the same conditions (day/night, wet/dry, cold, hot, windy). In other words, you always leave with a mission.

Given that a ~1.5GB model download shouldn't happen "without asking," the first mission request seeks consent and offers hand-written tasks as an alternative. After that, WebLLM stores the weights in Cache Storage, and a service worker caches the app itself and a pinned version of the WebLLM bundle — after the first run, it works in airplane mode.


WebGPU is the W3C's next-generation Web graphics and compute API, which shipped in Chrome 113 in 2023. It's now enabled by default in Chrome/Edge on desktop and newer Android Chrome, while Safari and Firefox support remains incomplete. Unlike the older WebGL, WebGPU exposes general-purpose GPU compute (Compute Shaders), making it possible to run matrix multiplications and other core LLM operations in the browser. WebLLM uses WebGPU as its compute backend, compiling model operators into WGSL (WebGPU Shading Language) shaders via the Apache TVM compiler, then persisting weights locally using the browser's Cache Storage API — enabling "download once, use offline" in-browser inference. 4-bit quantization (q4f16/q4f32) is key to balancing precision and memory: compressing each weight from 16/32-bit floating point to a 4-bit integer reduces model size by roughly 75%, keeping a 2B parameter model's download around 1.5GB — within reach for typical users.

Cache Storage is part of the browser's Service Worker API, allowing web pages to persist arbitrary network responses (including large binary files) to local storage even after the tab is closed. Unlike localStorage, which only handles small strings, Cache Storage can hold hundreds of megabytes to gigabytes of data — ideal for model weight shards. The Service Worker acts as a programmable proxy between the browser and the network: when the app is offline, it intercepts all fetch requests and returns stored responses from the local cache, enabling PWA-level offline functionality. Go Outside caches both the app itself and a pinned version of the WebLLM bundle via the Service Worker, meaning that after a successful first load, users get the full experience — including model inference — with no network connection at all. This is especially valuable in parks and trails where signal is weak.

Why Open Weights Are Essential Here

The author makes a notably pragmatic case for open weights in the "Why Open Innovation Matters" section — arguably the most thoughtful part of the project. For this app, open weights directly determine whether it can work as designed:

  • It runs where you're going. Parks and trails often have poor signal. Open weights can be stored on-device for offline use; closed-source APIs require a connection precisely when you're trying to get away from one.
  • Nothing gets uploaded. Your approximate location, habits, and journal never reach a model provider — because there is no provider. The only network request during a mission is an optional weather request with coordinates rounded to roughly 10km.
  • Zero cost to run. No API key, no per-call billing, no server. A free little app can stay free.
  • Every layer is visible and replaceable. WebLLM is open source, the compiled Gemma builds are public, and switching between Gemma 2 2B and Gemma 3 1B is a one-line config change. If a better small open model ships next month, the app can adopt it immediately.

The author is honest about one caveat: Gemma is governed by Google's Gemma Terms of Use — it's open-weight, not an OSI-approved open-source license. But for this app, what matters is that the weights can be downloaded, run locally, and delivered to users without a server. Open weights satisfy all of those requirements.

A Small Case Study in On-Device AI

Beyond its warmhearted premise of nudging people outside, Go Outside is fundamentally an engineering demonstration of on-device AI. It uses a minimal model (1B–2B), a minimal stack (no backend, no build step), and a complete degradation strategy (hand-written task fallback) to deliver a local inference app that's offline-capable, zero-cost, and privacy-preserving.

For developers looking to try browser-based LLMs, this MIT-licensed open-source project offers a reusable reference pattern: model loading and quantization selection with WebLLM + WebGPU, Web Worker isolation for inference, parsing and retry logic for unstable small-model output, and respectful handling of large model downloads. These details often matter more than the model itself when determining whether an on-device AI product is actually usable.

You can try it at the project homepage. A recent version of Chrome or Edge with WebGPU support (desktop or Android) is recommended. Even without WebGPU, you'll still receive a hand-written task tailored to the weather — and the app will tell you why.

#Gemma browser#WebLLM#WebGPU#on-device AI#local LLM#open weights#offline web app#in-browser inference
Share:

Related articles