Summarizer API を使用すると、ウェブ デベロッパーは、Chrome の Gemini Nano または Edge の Phi を使用して、ブラウザ内で直接、AI を活用したローカルなテキスト要約を提供できます。この API は、要点、見出し、要約など、さまざまな形式をサポートしています。また、完全にデバイス上で動作するため、ユーザーのプライバシーが保護されます。
スタートガイド
Summarizer API は、Chrome と Edge 138 以降で使用できます。Gemini Nano または Phi(それぞれ)のモデルを 1 回ダウンロードする必要があります。
ハードウェアとソフトウェアの要件
- OS: Windows 10/11、macOS 13 以降、Linux、ChromeOS(Chromebook Plus)。
- ストレージ: プロファイル ボリュームに 22 GB の空き容量。
- RAM / CPU: 16 GB 以上の RAM と 4 つ以上の CPU コア。
- VRAM: 4 GB 以上(GPU を使用する場合)。
モデルのダウンロードと提供状況
モデルが準備完了、ダウンロードが必要、または利用不可のいずれであるかを確認します。
必須オプションの受け渡し: Summarizer.availability(options) と Summarizer.create(options) の両方に、同じ構成オプション オブジェクトを渡す必要があります。非推奨の window.ai.summarizer API サーフェスは使用しないでください。
進捗状況のモニタリングが必須: Summarizer.create() に monitor(m) コールバックを提供し、downloadprogress イベントのリスナーを追加することで、モデルのダウンロードの進捗状況をモニタリングする機能を実装する必要があります。
ユーザー ジェスチャーの要件: availability が 'downloadable' または 'downloading' の場合、Summarizer.create() を介して実際のダウンロードをトリガーするには、ユーザー ジェスチャー(ユーザーのクリックなど)が必要です。NotAllowedError を防ぐには、ページ読み込み時に無条件で呼び出すのではなく、イベント リスナー内で作成呼び出しを行う必要があります。
const options = {
type: 'key-points',
format: 'plain-text',
length: 'medium'
};
const availability = await Summarizer.availability(options);
if (availability === 'available') {
const summarizer = await Summarizer.create(options);
// Ready to use immediately
} else if (availability === 'downloadable') {
// A user gesture is strictly required to start the download
document.getElementById('start-download-btn').addEventListener('click', async () => {
const summarizer = await Summarizer.create({
...options,
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${Math.round((e.loaded / e.total) * 100)}%`);
});
},
});
});
}
API 関数と構成
Summarizer.create(options) を介して要約ツールを作成するときに、出力をカスタマイズできます。
| パラメータ | オプション | 説明 |
|---|---|---|
type |
key-points、tldr、teaser、headline |
要約戦略を定義します。 |
format |
markdown、plain-text |
出力構文スタイル。 |
length |
short、medium、long |
ターゲットの長さ(例: 1 文と 5 文)。 |
preference |
auto、speed、capability |
レイテンシと品質のバランスを取ります。 |
設定の例
const options = {
sharedContext: 'This is a scientific article',
type: 'key-points',
format: 'markdown',
length: 'medium',
};
if (navigator.userActivation.isActive) {
const summarizer = await Summarizer.create(options);
}
言語のサポート
想定される言語を指定して、ブラウザが特定の要約リクエストを処理できるようにすることができます。
const summarizer = await Summarizer.create({
type: 'key-points',
expectedInputLanguages: ['en', 'ja'],
outputLanguage: 'es',
});
要約方法
1. バッチ要約
テキスト全体を一度に処理して結果を返します。
const longText = document.querySelector('article').innerText;
const summary = await summarizer.summarize(longText, {
context: 'This article is intended for a tech-savvy audience.',
});
console.log(summary);
2. ストリームの要約
モデルが生成した結果をリアルタイムで返すため、UI の応答性が向上します。
const stream = summarizer.summarizeStreaming(longText);
for await (const chunk of stream) {
console.log(chunk);
}
セキュリティと権限
- データ プライバシー: Google にデータは送信されません。処理はローカル デバイスで行われます。
クロスオリジン: 権限ポリシーを使用して iframe にアクセス権を付与できます。
<iframe src="https://example.com/" allow="summarizer"></iframe>Web Worker: 現在はサポートされていません。
代替戦略
初期化または可用性のクエリを行う前に、ブラウザが Summarizer API をサポートしているかどうかを確認します。
if ('Summarizer' in self) {
// The Summarizer API is supported.
} else {
// Execute fallback strategy
}
Summarizer API がサポートされていない場合や、可用性チェックで 'unavailable' が返された場合は、適切にフォールバックする必要があります。
推奨されるオプション:
- リモート API フォールバック: 抽出リクエストをサーバー エンドポイントまたはリモート API(Vertex AI Gemini API など)に転送して、ユーザーが要約を取得できるようにします。
- グレースフル デグラデーション: UI で要約コントロールを視覚的に無効にするか、わかりやすいメッセージ(
"Local summarization is currently unsupported in this browser"など)を表示しながらボタンを非表示にします。インタラクションによって、未処理の一般的なランタイム例外がトリガーされないようにします。 - ポリフィル フォールバック:
built-in-ai-task-apis-polyfillsやprompt-api-polyfillなどのコミュニティが管理するポリフィルを使用して、クラウド内のモデルを使用したリモート サービスや、ローカルモデルを使用したオンデバイス推論を使用して、API サーフェスをエミュレートできます。
プライバシーと費用への影響: これらのポリフィルは、リモート サーバー(クラウド経由の Gemini API など)にリクエストをプロキシする可能性があります。これにより、ネイティブの組み込み AI API のオンデバイス プライバシー保証が完全に無効になり、サーバーサイドの API 使用料金が発生します。