Project 04, AI in the browser

AI Text Summarizer

Paste a long article and get key points, a short TL;DR or a headline. Chrome's built-in model does the work, and other browsers get a fast fallback.

Runs on: Chrome built-in AI or your CPU
Model: Gemini Nano or sentence ranking
First download: Handled by Chrome
Your browser: Checking

Summarize text

Checking for Chrome's built-in model

Text to summarize

Browsers are starting to ship their own AI models. Chrome now includes Gemini Nano, a small language model that runs on the device instead of in a data center. Web pages can reach it through a set of task APIs, such as the Summarizer, Translator and Language Detector.

This changes the cost of adding AI features to a website. Before, every summary or translation meant a request to a paid cloud API, plus a server to hide the API key. With a built-in model, the work happens on the visitor's computer. There is no per-request bill, and the text never leaves the device, which matters for private notes, email drafts and internal documents.

There are trade-offs. The model is small, so it is best at focused tasks rather than open-ended reasoning. It needs a fairly fast computer and several gigabytes of disk space, and it is not yet available in every browser. Developers should always check availability first and keep a fallback ready.

For web developers, the practical lesson is simple. Learn the task APIs now, design features that degrade gracefully, and treat on-device AI as one more progressive enhancement, like service workers were a few years ago.

Summary

Your summary shows here.

0words in0words out0%shorter

Type Length

Ready

How it works

Check availabilityThe page calls Summarizer.availability() to see if Gemini Nano is ready, downloadable or missing.
Create a summarizerIt creates one with your type, length and format, showing progress if Chrome needs to download the model.
Fall back when neededWithout the API, sentences are scored by how many important words they share and the best ones are kept in order.

// Feature-detect, then check if the on-device model is ready
if ("Summarizer" in self) {
  const state = await Summarizer.availability(); // "available", "downloadable", ...

  const summarizer = await Summarizer.create({
    type: "key-points", length: "medium", format: "markdown",
    monitor(m) {
      m.addEventListener("downloadprogress", (e) => console.log(e.loaded));
    },
  });

  const summary = await summarizer.summarize(longText);
}