This article is an update for the previous articles below:

  1. https://calvin.my/posts/on-device-generative-ai-with-gemini-nano
  2. https://calvin.my/posts/on-device-generative-ai-with-gemini-nano-part-2
  3. https://calvin.my/posts/api-updates-on-chrome-on-device-ai
  4. https://calvin.my/posts/api-updates-on-chrome-on-device-ai-nov-2024
  5. https://calvin.my/posts/api-updates-on-chrome-on-device-ai-apr-2025

Pre-requisites

  1. Chrome version 138 or above. (Mobile Chrome is not supported currently)

  2. In the past, the "Optimization Guide on device" flag should be set to "EnabledBypassPerfRequirement". (Document here for reference purposes)

    chrome://flags/#optimization-guide-on-device-model

  3. Enable the "Summarization API" flag.

    chrome://flags/#summarization-api-for-gemini-nano

Summarizer API

This API is optimized to provide headlines, key points, or TLDR of a much longer text, using Gemini Nano. The API must be triggered from a User Gesture (e.g., a button click) when you use it for the first time.

  1. To start, check if the API is supported.

    if ('Summarizer' in self) {

}

  2. Check if the API is ready to use. (E.g., if the browser downloads the model to your device)

    const availability = await Summarizer.availability();
if (availability === "unavailable") { 

} // could also be downloading, downloadable, available

  3. Specify what it does.

    const options = {
    sharedContext: "This is a blog post about Generative AI",
    type: 'tldr', // Or teaser, key-points, headline
    format: 'plain-text', // Or markdown
    length: 'medium', // Or short, long
    monitor(m) {
        m.addEventListener('downloadprogress', (e) => {
            console.log(`Downloaded ${e.loaded * 100}%`);
        });
    }
};

  4. Getting the result.

    const summarizer = await Summarizer.create(options);
const longText = "The very long text";
const stream = summarizer.summarizeStreaming(longText, {
    context: 'Analyse the content and provide a suitable headlines. Do not include any codes in your result.',
});
for await (const chunk of stream) {
    console.log(chunk);
}

The result

You can check the bottom section of this page for a summary of this article, written by the Summerizer API.