AI Summarization

<msc-ai-summarization /> is a web component based on Chrome Built-in AI > Summarization API. Web developers could use <msc-ai-summarization /> wrap article which want to adopt summarize feature.

Check the following demo and just press the 「Summarize」 button. Then Gemini will give you a short summary about the iPhone article.

Let's see what can <msc-ai-summarization /> do ?

Apple introduces iPhone 16 and iPhone 16 Plus
Built for Apple Intelligence with the all-new A18 chip, both models feature Camera Control, powerful upgrades to the advanced camera system, the Action button to quickly access useful features, and a big boost in battery life

CUPERTINO, CALIFORNIA Apple today announced iPhone 16 and iPhone 16 Plus, built for Apple Intelligence, the easy-to-use personal intelligence system that understands personal context to deliver intelligence that is helpful and relevant while protecting user privacy. The iPhone 16 lineup also introduces Camera Control, which brings new ways to capture memories, and will help users quickly access visual intelligence to learn about objects or places around them faster than ever before. The powerful camera system features a 48MP Fusion camera with a 2x Telephoto option, giving users two cameras in one, while a new Ultra Wide camera enables macro photography. Next-generation Photographic Styles help users personalize their images, and spatial photo and video capture allows users to relive life’s precious memories with remarkable depth on Apple Vision Pro. The new A18 chip delivers a huge leap in performance and efficiency, enabling demanding AAA games, as well as a big boost in battery life.

iPhone 16 and iPhone 16 Plus will be available in five bold colors: black, white, pink, teal, and ultramarine. Pre-orders begin Friday, September 13, with availability beginning Friday, September 20.

“iPhone 16 and iPhone 16 Plus mark the beginning of a new era for iPhone with Apple Intelligence delivering powerful, personal, and private experiences to our users,” said Kaiann Drance, Apple’s vice president of Worldwide iPhone Product Marketing. “With new ways to discover the world around you and capture memories using Camera Control; a 48MP Fusion camera that gives you two optical-quality cameras in one; a big boost in battery life; and powerful, efficient performance thanks to the A18 chip, this is the perfect time for customers to upgrade or make the switch to iPhone.”

Basic Usage

<msc-ai-summarization /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-ai-summarization />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://unpkg.com/msc-ai-summarization/mjs/wc-msc-ai-summarization.js"> </script>

Structure

Put <msc-ai-summarization /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-ai-summarization> <script type="application/json"> { "config": { "type": "key-points", "length": "short", "format": "markdown", "sharedContext": "" }, "l10n": { "subject": "Gemini", "introduction": "Here comes a summary.", "summarize": "Summarize this article", "showlongersummary": "Show me a longer summary", "showshortersummary": "Show me a shorter summary" } } </script> <!-- Put content element(s) which like to adopt summarize feature here --> <div class="intro"> Apple introduces iPhone 16 and iPhone 16 Plus ... ... ... </div> </msc-ai-summarization>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-ai-summarization />.

<msc-ai-summarization remoteconfig="https://your-domain/api-path" > ... </msc-ai-summarization>

JavaScript Instantiation

<msc-ai-summarization /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { MscAiSummarization } from 'https://unpkg.com/msc-ai-summarization/mjs/wc-msc-ai-summarization.js'; const contentElementTemplate = document.querySelector('.my-content-element-template'); // use DOM api const nodeA = document.createElement('msc-ai-summarization'); document.body.appendChild(nodeA); nodeA.appendChild(contentElementTemplate.content.cloneNode(true)); nodeA.config = { type: 'key-points', length: 'short', format: 'markdown' }; // new instance with Class const nodeB = new MscAiSummarization(); document.body.appendChild(nodeB); nodeB.appendChild(contentElementTemplate.content.cloneNode(true)); nodeB.config = { type: 'tl;dr', length: 'long', format: 'markdown' }; // new instance with Class & default config const config = { config: { type: 'teaser', length: 'medium', format: 'plain-text' } }; const nodeC = new MscAiSummarization(config); document.body.appendChild(nodeC); nodeC.appendChild(contentElementTemplate.content.cloneNode(true)); </script>

Style Customization

Developers could apply styles to decorate <msc-ai-summarization />'s looking.

<style> msc-ai-summarization { /* dialog */ --msc-ai-summarization-dialog-background-color: rgba(255 255 255); --msc-ai-summarization-dialog-backdrop-color: rgba(35 42 49/.6); --msc-ai-summarization-dialog-head-text-color: rgba(35 42 49); --msc-ai-summarization-dialog-line-color: rgba(199 205 210); --msc-ai-summarization-dialog-close-icon-color: rgba(95 99 104); --msc-ai-summarization-dialog-close-hover-background-color: rgba(245 248 250); --msc-ai-summarization-dialog-introduction-color: rgba(35 42 49); --msc-ai-summarization-content-text-color: rgba(35 42 49); --msc-ai-summarization-content-highlight-text-color: rgba(68 71 70); --msc-ai-summarization-content-highlight-background-color: rgba(233 238 246); --msc-ai-summarization-content-group-background-color: rgba(241 244 248); } </style>

Delevelopers could add className - align-container-size to make <msc-ai-summarization />'s size same as container's size.（default is inline-size: 100% only）

<msc-ai-summarization class="align-container-size"> ... </msc-ai-summarization>

Otherwise, apply pseudo class ::part(trigger) to direct style the summarize button.

<style> msc-ai-summarization { &::part(trigger) { background: red; } &::part(trigger):hover { background: green; } } </style>

Attributes

<msc-ai-summarization /> supports some attributes to let it become more convenience & useful.

config

Set type、length、format and sharedContext for summarize setting.

- type：Set type from key-points、tl;dr、teaser and headline. Default is key-points.
- length：Set length from short、medium and long. Default is short.
- format：Set format from markdown and plain-text. Default is markdown.
- sharedContext：Set sharedContext. Default is "".

<msc-ai-summarization config='{"type":"key-points","length":"short","format":"markdown","sharedContext":""}'> ... </msc-ai-summarization>

disabled

Hides the summarize trigger button once set. It is false by default (not set).

<msc-ai-summarization disabled> ... </msc-ai-summarization>

l10n

Set localization for title or action buttons.

- subject：Set dialog subject.
- introduction：Set dialog result title.
- summarize：Set summarize trigger button's content.
- showlongersummary：Set advance button's content. (when lenght !== long)
- showshortersummary：Set advance button's content. (when lenght === long)

<msc-ai-summarization l10n='{"subject":"Gemini","introduction":"Here comes a summary.","summarize":"Summarize","showlongersummary":"Show me a longer summary","showshortersummary":"Show me a shorter summary"}'> ... </msc-ai-summarization>

Properties

Property Name Type Description
config Object Getter / Setter config. Developers could set type、length、format and sharedContext here.
disabled Boolean Getter / Setter disabled. Hides the summarize trigger button once set. It is false by default.
l10n Object Getter / Setter localization for title or action buttons. Developers could set subject、introduction、summarize、showlongersummary and showshortersummary here.
available String Getter available. Web developers will get "no" if current browser doesn't support Build-in AI.
summary String Getter the last summary.

Mathod

Mathod Signature Description
summarize({ content = '', useDialog = false }) Go summarize. This is an async function. Default will take <msc-ai-summarization />'s children's text content.

Developers could set useDialog to decide display summary by dialog or not.

Events

Event Signature Description
msc-ai-summarize-error Fired when summarize process error occured. Developers could gather message information through event.detail.
msc-ai-summarize-process Fired when prompt processing.
msc-ai-summarize-process-end Fired when prompt process end.

Reference