demo · v138

Progressive summary

Paste an article and get three summaries at different lengths — short, medium, and long — side by side. Each streams token-by-token via summarizeStreaming(). When the native API is absent a simulated heuristic streams in the same way so the UX shape is still clear.

checking support…

Enable chrome://flags/#summarizer-api and let Gemini Nano download. Without it the demo runs a heuristic fallback.

The Web Platform has grown steadily over the last decade. Chrome ships new APIs every six weeks, each one a brick in a larger structure. Many additions are invisible to most developers — a CSS keyword that removes a common workaround, a header attribute that fixes a long-standing security gap, a JavaScript method that replaces three lines with one. Others reshape entire categories: the introduction of Promises, then async/await, changed how all asynchronous code was written. Service Workers unlocked offline-capable web apps. Web Components let teams encapsulate UI without a framework dependency.

What is happening now is subtler but equally consequential. AI capabilities are arriving inside the browser itself: the Summarizer API, the Translator API, the Language Detector API, all powered by on-device models. These are not cloud APIs that happen to be called from JavaScript — they run locally, with no round trip, and they work offline once the model has downloaded. The privacy implications are significant. The latency implications are equally significant. A summarization that would take 300 ms of network latency plus 100 ms of model inference in the cloud now takes only the inference time, measured in local milliseconds.

At the same time, speculation rules are closing the gap between perceived and actual navigation speed. Prefetch and prerender have existed for years, but speculation rules make them declarative, budget-aware, and cancellable. The result is that a navigation that looks instant is not a trick — the destination has already loaded. The browser has done the work in advance, behind the scenes, in a low-priority idle window.

Short

short

—

Medium

medium

—

Long

long

—

the code

const lengths = ['short', 'medium', 'long'];

await Promise.all(lengths.map(async (length) => {
  const summarizer = await Summarizer.create({
    type: 'key-points',
    format: 'plain-text',
    length,
  });

  const output = document.getElementById('out-' + length);
  output.textContent = '';

  for await (const chunk of summarizer.summarizeStreaming(article)) {
    output.textContent += chunk;
  }
}));

Short

Medium

Long

the code

see also