1.0.1 • Published 8 months ago

msc-ai-summarization v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

msc-ai-summarization

Published on webcomponents.org DeepScan grade

<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.

<msc-ai-sumarization />

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 typelengthformat and sharedContext for summarize setting.

type:Set type from key-pointstl;drteaser and headline. Default is key-points.\ length:Set length from shortmedium 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 NameTypeDescription
configObjectGetter / Setter config. Developers could set typelengthformat and sharedContext here.
disabledBooleanGetter / Setter disabled. Hides the summarize trigger button once set. It is false by default.
l10nObjectGetter / Setter localization for title or action buttons. Developers could set subjectintroductionsummarizeshowlongersummary and showshortersummary here.
availableStringGetter available. Web developers will get "no" if current browser doesn't support Build-in AI.
summaryStringGetter the last summary.

Mathods

Mathod SignatureDescription
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.

Event

Event SignatureDescription
msc-ai-summarization-errorFired when summarize process error occured. Developers could gather message information through event.detail.
msc-ai-summarization-processFired when prompt processing.
msc-ai-summarization-process-endFired when prompt process end.

Reference