公開日: 2025 年 5 月 15 日
一般の人々は、地域、国内、国際的な出来事についての情報や、ニュース メディアの慎重な視点を求めています。現代の急速な変化の時代において、記事の要約は、複雑な情報をアクセス可能なスニペットに凝縮し、読者がさらに詳しく調べたくなるような重要な戦略です。Bright Sites と Terra が Summarizer API を使用してこの戦略に取り組む方法について学びます。
商品の解説 | ウェブ | 拡張機能 | Chrome のステータス | インテント |
---|---|---|---|---|
MDN | 表示 | 発送の意向 |
Summarizer API を使用すると、さまざまな長さと形式(文、段落、箇条書きリストなど)でさまざまなタイプの要約を生成できます。この API は、多くの組み込み AI API と同様に、大規模言語モデルを使用して推論を実行します。Chrome では、モデルは Gemini Nano です。
Bright Sites が The Standard にパーソナライズされた記事の要約を追加
Bright Sites の主要なニュース パブリッシング プラットフォームである Flow は、150 を超えるパブリケーションを支えています。Bright Sites は、Summarizer API を AI を活用した CMS に統合することで、ロンドンの象徴的なニュース ブランドである The Standard が読者に記事のパーソナライズされた要約を提供できるようにしています。これにより、ユーザーは記事に積極的に関心を持ち、The Standard の他の記事を閲覧するようになります。
「Chrome で Gemini の最先端モデルを活用することで、The Standard が 198 年にわたって培ってきた読者への情報提供の伝統と、信頼できるジャーナリズムをいつでも手軽に利用できる新しい技術革新を組み合わせることができます。読者が自分のデバイスで作成した要約を使用してニュースをすばやく確認できるようにすることは、The Standard を再構築し、読者のデジタル習慣を中心に読者重視の新しいプロダクトを構築する方法の一つにすぎません。」
- Jack Riley、The Standard 最高デジタル責任者
クライアントサイドの AI 要約機能を提供することで、The Standard は追加のビジネス費用を発生させることなく、パーソナライズされた要約を生成できるようになりました。概要のスタイルや位置情報などのデータポイントを使用してクライアントサイドでこれを行うと、インターネットにアクセスできなくてもユーザーは読み続けることができます。これは、ロンドン地下鉄でノートパソコンを持ち歩く多くのユーザーによく見られます。
まず、モデルと API のサポートと可用性を確認します。
// Check if the device supports built-in AI
// Trigger the model download if not yet available, on capable devices
export const deviceCheck = async () => {
const availability = await Summarizer.availability();
if (!availability || availability === 'unavailable') {
return {
summarizationAvailable: false,
message:
"AI summarization tools are not supported on this device" +
"or the appropriate permissions are not set.",
}
}
if (availability === 'downloadable') {
const shouldDownload = window.confirm(
`This page contains an AI summary, using an AI model provided by your
browser. Downloading the model, which could be multiple gigabytes in size,
is required to view the summary. Would you like to download the model?`);
if (!shouldDownload) {
return {
summarizationAvailable: false,
message: "User declined installation.",
}
}
// Trigger an installation
Summarizer.create();
return {
summarizationAvailable: false,
message: "Installing in the background. This may take a few minutes...",
}
}
if (availability === 'available') {
return {
summarizationAvailable: true,
message: "Ready for use.",
}
}
}
次の関数は、将来的に別のオンデバイス モデルまたはサーバーサイド モデルを使用できる汎用的な要約ツールを定義します。
/**
* Define the summarizer.
**/
export const aiSummarize = async (textToSummarize, options) => {
const availableSummarizationTools = getAvailableAiSummarizationTools()
if (availableSummarizationTools.has('builtInAi') && options?.builtInAI) {
// Generate the built-in AI summarizer and abort signal
const summarizer = await createBuiltInAISummarizer(options.builtInAi.options)
return await summarizer.summarize(textToSummarize, {
signal: options.builtInAi.signal,
})
}
throw new Error(
'AI summarization tools are not supported on this device or browser.',
)
}
標準では、読者の要約設定を IndexedDB に保存して、パーソナライズされた要約を提供します。
/**
* Log preferences in IndexDB for personalization
**/
abortController.current = new AbortController()
const preferencesDB = new PreferencesDB()
const summarization = await aiSummarize(articleContent, {
clientSideAI: {
options: await preferencesDB.getCreatesummarizerPreferences(),
signal: abortController.current.signal,
},
})
Terra がポルトガル語の記事の編集可能な要約をジャーナリストに提供
Terra はブラジル最大のコンテンツ ポータルの 1 つで、エンターテイメント、ニュース、スポーツを配信し、月間 5,000 万人以上のユニーク ユーザーを抱えています。Terra は、コンテンツ管理システム(CMS)に Summarizer API と Translator API を追加し、ジャーナリストがポルトガル語のニュース記事を即座に要約できるようにしました。ジャーナリストは、スタイルや正確性のためにいくつかの編集を行い、共同作成された要約を公開して、すべての読者が簡単に利用できるようにします。
Terra の CMS ではすでにサーバーサイド LLM が使用されていますが、チームは、新しいメリットが期待できる独自のアプローチとしてクライアントサイド AI を検討しました。結果として、Chrome の Summarizer API と Gemini Nano は、サーバーサイドの実装と同等の品質を提供することがわかりました。クライアントサイド ソリューションは、Translator API と組み合わせて使用すると、良好な結果が得られました。
Terra では、主なメリットがあるため、Chrome の組み込み AI の実装を採用しています。クライアントサイド AI により、費用を削減し、データ ガバナンスが簡素化されました。チームは、Summarizer API でのコンテンツ ウィンドウの制限の管理など、いくつかの課題に直面しましたが、慎重な実装手法によって克服できました。
当初、Terra は、ニーズに対応するのに最適な概要タイプと共有コンテキストを特定することに苦労していました。テストの結果、Translator API でポルトガル語の品質と同等の出力を生成するには、明確で有用な英語の要約が重要であることがわかりました。組み込みの AI プレイグラウンドは、Terra がコードを毎回リファクタリングしなくてもアイデアをすばやくテストできたため、これらの課題を克服するうえで役立ちました。
次のサンプルは、Terra が Summarizer API を呼び出し、使用できない場合にユーザーにアラートを表示する方法を示しています。
async function summarizerByBuiltInAI(text) {
if (!(Summarizer)) {
//Alert users in Portuguese that "Summarizer API is not available"
cms_alert(ALERT_TYPE_ERROR, "Summarizer API não está disponível.")
return null
}
try {
const availability = await Summarizer.availability();
if (availability !== 'available') {
cms_alert(ALERT_TYPE_ERROR, "Summarizer API não está disponível.")
return null
}
const summaryContext = "Avoid jargon, use correct grammar, focus on clarity," +
"and ensure the user can grasp the articles purpose," +
"without needing to open the original content.";
const options = {
sharedContext: summaryContext,
type: 'teaser',
format: 'plain-text',
length: 'long',
}
if (availability === 'available') {
const summarizer = await Summarizer.create(options);
return await summarizer.summarize(text, {
context: summaryContext
})
}
// return the download of the Summarizer Model
if(availability === 'downloadable'){
return await Summarizer.create();
}
} catch (error) {
//EN: "Error using the Summarizer API"
cms_alert(ALERT_TYPE_ERROR, "Erro ao usar o Summarizer API.");
console.error("Erro ao usar o Summarizer API:", error);
return null
}
}
さらに、Terra は、要約ツールと Translator API を組み合わせて、元のポルトガル語の記事のタイトル、サブタイトル、本文を英語に翻訳しました。この翻訳されたバージョンは、Summarizer API によって処理され、要約が生成されて、ポルトガル語に戻されます。これにより、ユーザーはアプリケーションの言語で要約されたコンテンツを受け取ることができます。
async function translateTextByBuiltInAI(text, sourceLanguage, targetLanguage) {
if (!('translation' in self && 'createTranslator' in self.translation)) {
return null
}
try {
const translator = await Translator.create({
sourceLanguage,
targetLanguage,
})
return await translator.translate(text)
} catch (error) {
throw error
}
}
const text = `Title: ${contentTitle};\n\n Sub-title: ${contentSubtitle};\n\n Article content: ${plainText}.`;
const canTranslate = await Translator.availability({
sourceLanguage: 'pt',
targetLanguage: 'en',
})
if (canTranslate !== 'available') {
if (canTranslate === 'downloadable') {
try {
await Translator.create({
sourceLanguage: 'pt',
targetLanguage: 'en',
})
//EN: "Language download completed successfully."
cms_alert(ALERT_TYPE_OK, "Download do idioma concluído com sucesso.");
} catch (downloadError) {
//EN: "Error downloading the language required for translation."
cms_alert(ALERT_TYPE_ERROR, "Erro ao realizar download do idioma necessário para tradução.");
return
}
} else {
//EN: "Translation is not available or not ready."
cms_alert(ALERT_TYPE_ERROR, "A tradução não está disponível ou não está pronta.");
return
}
}
const translatedText = await translateTextByBuiltInAI(text, 'pt', 'en')
const summarizedText = await summarizerByBuiltInAI(translatedText)
const translatedBackText = await translateTextByBuiltInAI(summarizedText, 'en', 'pt')
Terra に組み込み AI API を統合できたことは、コンテンツ管理ワークフローを強化するクライアントサイド AI の大きな可能性を示しています。Terra は、Summarizer API と Translator API を使用して、ジャーナリストの能力を強化し、効率を高め、さまざまなプラットフォームで優れたユーザー エクスペリエンスを提供できるようになりました。
ベスト プラクティス
レビュー入力がトークンの上限を超える場合は、次の緩和策を講じます。
- より小さいサンプル(直近の 4 件のレビューなど)を API に使用します。これにより、より迅速に結果を生成できます。クライアントサイドの要約をスケーリングするに関するガイダンスをご覧ください。
QuotaExceededError
は、入力でリクエストされたトークンの詳細情報を提供します。summarizer
オブジェクトには、API のトークン上限を示すinputQuota
プロパティがあります。これにより、リアルタイムのフィードバックが可能になり、入力が上限を超えると機能を無効にできます。
すべてのユーザーにシームレスなエクスペリエンスを提供するために、ハイブリッド アプローチを検討することをおすすめします。組み込み AI API が初めて呼び出されると、ブラウザはモデルをダウンロードする必要があります。
- Miravia は、モデルのダウンロード中にサーバーサイド モデルを使用して最初の概要を提供しました。組み込みモデルの準備が整うと、サイトはクライアントサイドで推論の実行に切り替わりました。
常に、親しみやすく、コミュニケーションをとりやすいインターフェースを作成するようにしてください。
- モデルのダウンロードに進行状況バーを実装し、レスポンスの遅延を軽減します。
- モデルのダウンロードの透明性について検討してください。Bright Sites は、リソースの使用の透明性と同意を可能にするために、モデルのダウンロードについてユーザーに通知していました。ユーザーは、続行する前に承諾または拒否できます。
結論と推奨事項
Bright Sites と Terra のサンプルは、コンテンツのアクセシビリティと読者エンゲージメントを高めるために Summarizer API の価値を示すものです。これらのプラットフォームは、このクライアントサイド API を使用して、追加のビジネス費用をかけることなく、データ ガバナンスの簡素化を図りながら、読み上げエクスペリエンスとパーソナライズを改善しました。Summarizer API と同様に、すべての組み込み AI API は実用的なクライアントサイド AI を可能にします。
Summarizer API が他のユースケースにどのように役立つかについては、また、Summarizer API が redBus と Miravia の有用なユーザー レビューの要約の作成にどのように役立っているかについても説明しました。
これらの API を使用して新しいものを構築しようとしていますか?X の@ChromiumDev または LinkedIn の Chromium for Developers でぜひお寄せください。
リソース
- Summarizer API の詳細
- Chrome で組み込み API の使用を開始する。
- ブロガーを支援する Prompt API のケーススタディを読む。
- 翻訳と言語検出の事例紹介を読む。
- Summarizer API が redBus と Miravia のユーザー レビューの要約作成に役立つ方法をご覧ください。
謝辞
このドキュメントの作成とレビューにご協力いただいた、Terra の Guilherme Moser 氏と Fernando Fischer 氏、CWI の Aline Souza 氏、Brian Alford 氏、Keval Patel 氏、Jack Riley 氏、Brightsites のエンジニアリング チーム、Swetha Gopalakrishnan 氏、Alexandra Klepper 氏、Thomas Steiner 氏、Kenji Baheux 氏に感謝いたします。