長文を貼り付けて「要約」ボタンを押してください。 対応 OS/ハード要件は公式ドキュメントを参照してください。
(async () => {
/* --- 1. Summarizer API 対応検出 --- */
if (!('Summarizer' in self)) { // :contentReference[oaicite:0]{index=0}
document.getElementById('nosupport').classList.remove('hidden');
return;
}
const downloadPane = document.getElementById('download');
const progress = document.getElementById('progress');
/**
* Summarizer オブジェクトを生成
*
* @param {Object} opts - オプション
* @param {string} opts.type - 要約タイプ（`key-points`, `tldr`, `teaser`, `headline`）
* @param {string} opts.length - 要約の長さ（`short`, `medium`, `long`）
* @returns {Promise} - Summarizer オブジェクト
*/
async function createSummarizer(opts) {
// availability() で状態確認（unavailable / downloadable / downloading / available）
// :contentReference[oaicite:1]{index=1}
const avail = await Summarizer.availability();
const summarizer = await Summarizer.create({
...opts,
monitor(m) { // ダウンロード進捗イベント
m.addEventListener('downloadprogress', e => {
downloadPane.classList.remove('hidden');
progress.textContent = `${Math.round(e.loaded * 100)} %`;
});
}
});
await summarizer.ready; // モデル準備完了を待つ
downloadPane.classList.add('hidden');
return summarizer;
}
/* --- 2. UI ハンドラ --- */
document.getElementById('summarize').addEventListener('click', async () => {
const text = document.getElementById('input').value.trim();
if (!text) return;
const type = document.getElementById('type').value;
const length = document.getElementById('length').value;
const streaming= document.getElementById('streaming').checked;
const out = document.getElementById('output');
out.textContent = '';
/* --- 3. Summarizer 作成 & 実行 --- */
const summarizer = await createSummarizer({
type,
length,
});
if (streaming) {
// summarizeStreaming() 例
const stream = summarizer.summarizeStreaming(text);
for await (const chunk of stream) {
out.textContent += chunk;
}
} else {
// summarize() 例（バッチ）
const summary = await summarizer.summarize(text, {
context: '出力は日本語で行ってください',
});
out.textContent = summary;
}
});
})();