JavaScriptプログラムに関する各種メモ書き
Google Chrome の ブラウザAIによる要約 Summarizer API
Summarizer API は Chrome 138 安定版から利用できます。
138が、リリースされる前まではcanaryバージョンを使用します。こちらからダウンロードできます。
設定1
Google Chrome でこれを開く
chrome://flags/#optimization-guide-on-device-model
次の値を選択する
Enabled BypassPerfRequirement
設定2
Google Chrome でこれを開く
chrome://flags/#prompt-api-for-gemini-nano
次の値を選択する
Enabled
設定の確認方法
alert('Summarizer' in self);
alert( await Summarizer.availability() );
urlが必ず https:// である必要があります。 http://localhost では動作しないので注意が必要です
実際のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Summarizer モデルのダウンロード</title>
</head>
<body>
<button id="loadButton">モデルを読み込む</button>
<script>
const inputText = `ヨーゼフ・アルバース（Josef Albers, 1888–1976）は、20世紀を代表するアーティスト・教育者であり、抽象芸術と色彩理論に多大な影響を与えた人物です。彼が関与した主な芸術運動・活動は以下の通りです。
1. バウハウス（Bauhaus）
時期：1920～1933年（閉校まで）
内容：
アルバースは1920年にバウハウスに入学し、後に教授となりました。\
バウハウスは芸術と工業・建築・デザインを統合する革新的な教育機関であり、モダニズムの中心的存在。
アルバースは特に**素材研究と基礎教育（フォルマレー）**に貢献し、「ガラス絵」なども制作。
2. ブラック・マウンテン・カレッジ（Black Mountain College）
時期：1933年〜1949年
内容：
ナチス政権によるバウハウス閉鎖後、アメリカに亡命し、ノースカロライナ州の実験的大学で教鞭をとる。
ここでアルバースは「芸術教育の実践と自由表現の重要性」を実現。
生徒にはロバート・ラウシェンバーグやスー・ヴァンダーカイらがいる。
3. イェール大学での教育（Yale University）
時期：1950〜1958年（引退まで）
内容：
デザイン学部の初代学部長として、アルバースは色彩教育の体系化を進める。
後の多くのデザイナー・アーティストに影響を与える。
`;
// Summarizer API が利用可能か確認
async function isSummarizerAvailable() {
const availability = await Summarizer.availability();
console.log('Summarizer availability:', availability);
return availability;
}
// モデルをダウンロード
async function downloadSummarizerModel() {
console.log('モデルのダウンロードを開始します...');
const summarizer = await Summarizer.create({
model: 'chrome-ai-summarizer-model-1',
onProgress: (progress) => {
const percent = (progress * 100).toFixed(2);
console.log(`ダウンロード進行中: ${percent}%`);
},
});
console.log('モデルのダウンロードが完了しました ✅');
return summarizer;
}
// Summarizer の準備
async function prepareSummarizer() {
const availability = await isSummarizerAvailable();
if (availability === 'available') {
console.log('モデルはすでに利用可能です。');
return await Summarizer.create({ model: 'chrome-ai-summarizer-model-1' });
}
if (availability === 'downloadable') {
console.log('モデルはダウンロード可能です。ダウンロードを開始します...');
return await downloadSummarizerModel();
}
throw new Error('この環境では Summarizer は使用できません。');
}
// ボタンクリックで準備開始（ユーザージェスチャー内）
document.getElementById('loadButton').addEventListener('click', async () => {
try {
const summarizer = await prepareSummarizer();
console.log('Summarizer 要約開始します...');
const result = await summarizer.summarize('次のテキストを要約して日本語で返してください。: '+inputText);
console.log('要約結果:', result);
} catch (err) {
console.error('準備中にエラーが発生しました:', err);
}
});
</script>
</body>
</html>
添付ファイル1
){kind=link}