Summarizer API - Instructions

This page is a simple example of the browser Summarizer API.

The page checks whether the API is available, enables the Summarize button when it can be used, summarizes the textarea content, and displays the generated summary.

Functionality

The Summarizer API page has:

  • A textarea containing text to summarize.
  • A Summarize button that is disabled when the API is not available.
  • An availability message showing the browser API state.
  • A progress indicator for session creation, model download, and summarization.
  • A summary results area.

The JavaScript for the page is in /js/pages/browser-ai-summarize.js so it can be inspected and debugged in browser developer tools.

Testing To Consider

Test the availability flow in browsers with and without Summarizer API support.

Check that the button starts disabled, becomes enabled only when the API is usable, and remains disabled when the API is unavailable or the availability check fails.

Try empty text, short text, long text, and text in different formats. Summaries are generated by an AI model, so exact wording should not be treated as deterministic.

Observe the progress indicator during model download and summarization. The first run may take longer because the model may need to download.

Check error handling by using unsupported browsers (this is a Chrome API), blocked permissions, or test environments where the API exists but cannot create a summarizer.

For automation, assert on stable UI state transitions and the presence of a non-empty result rather than exact AI-generated text.

Nuances

  • Outputs are not consistently repeatable. So how could you automate result checking?
  • What about different machine capabilities - this is AI running in a local browser.