Chrome138が安定版となり、AI関係のAPIが使えるようになりました。
プリザンターで試してみたいと思います。
ローカル環境でもGemini Nanoが使えるようになりました。
環境
- Chrome_バージョン 138.0.7204.97（Official Build） （64 ビット）
Edge138の安定版ではまだ対応していないようです - プリザンター_バージョン1.4.15.0
Summarizer API
- 組み込みの AI による要約
- 要約ボタンを追加して、クリックしたら
Bodyの内容を要約します - 初回実行時にモデルがダウンロードされます
- が、ダウンロード中の出力がされないかも？
- 初回のモデルダウンロード以外はローカルのみで処理されます
async function initializeSummarizer() {
console.log("要約の初期化");
const options = {
sharedContext: 'This is a scientific article',
type: 'key-points',
format: 'markdown',
length: 'medium',
};
const availability = await Summarizer.availability();
console.log(availability);
let summarizer;
if (availability === 'unavailable') {
// The Summarizer API isn't usable.
return;
}
if (availability === 'available') {
// The Summarizer API can be used immediately .
summarizer = await Summarizer.create(options);
} else {
// The Summarizer API can be used after the model is downloaded.
summarizer = await Summarizer.create(options);
summarizer.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
await summarizer.ready;
}
const summary = await summarizer.summarize($p.getControl('Body').val(), {
context: 'This article is intended for a tech-savvy audience.',
});
console.log(summary);
}
// カスタムインポートのボタンを追加する
function CreateSummarizerButton() {
const mainCommands = document.getElementById('MainCommands');
// ボタンを作成
const button = document.createElement('button');
button.textContent = '内容を要約する';
button.id = "buttonCustomSummarizer";
button.addEventListener('click', () => initializeSummarizer());
// MainCommands の子要素として追加
mainCommands.appendChild(button);
};
CreateSummarizerButton();
// 更新した時に発生する処理
$p.events.after_set_Update = function () {
CreateSummarizerButton();
};
日本語にならない
- これで要約はできましたが、英語で出力されてしまいます
- optionsに追加してみる
outputLanguage: 'ja-JP',- エラー、対応していないようでした
- Summarizer: outputLanguage property
Cannot proceed with API call for Summarizer. Expected language contains one or more unsupported languages. This API call requires expected language to specify only languages from our supported list to ensure successful processing and guarantee output characteristics. Please update it with valid language codes from this list: ['en']Understand this error
main.js:43 Uncaught (in promise) NotAllowedError: The requested language options are not supported.
Translator API
- AI を組み込んだ翻訳
- こちらでは翻訳を試してみます
- 初回の言語セットの場合はインターネットからダウンロードされます
async function initializeTranslator() {
const options = {
sourceLanguage: 'ja',
targetLanguage: 'en',
};
const availability = await Translator.availability(options);
console.log(availability);
let translator;
if (availability === 'unavailable') {
// The Summarizer API isn't usable.
return;
}
if (availability === 'available') {
// The Summarizer API can be used immediately .
translator = await Translator.create(options);
} else {
options.monitor = function (m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
};
translator = await Translator.create(options);
await Translator.ready;
}
const output = await translator.translate($p.getControl('Body').val());
// "Où est le prochain arrêt de bus, s'il vous plaît ?"
console.log(output);
}
要約を日本語で出力
-
Summarizer APIで英語に要約された内容を、日本語に翻訳するためTranslator APIを使用します
// 翻訳のための初期化
async function initializeTranslator() {
const options = {
sourceLanguage: 'en',
targetLanguage: 'ja',
};
const availability = await Translator.availability(options);
console.log(availability);
let translator;
if (availability === 'unavailable') {
// The Summarizer API isn't usable.
return;
}
if (availability === 'available') {
// The Summarizer API can be used immediately .
translator = await Translator.create(options);
} else {
options.monitor = function (m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
};
translator = await Translator.create(options);
await translator.ready;
}
return translator;
}
// 要約のための初期化
async function initializeSummarizer() {
console.log("要約の初期化");
const options = {
sharedContext: 'これは日本語のコンテンツです。',
type: 'teaser', // teaser tldr
format: 'markdown',
length: 'medium',
// 対応していない
// expectedInputLanguages: ['ja-JP'],
// outputLanguage: 'ja-JP',
};
const availability = await Summarizer.availability();
console.log(availability);
let summarizer;
if (availability === 'unavailable') {
// The Summarizer API isn't usable.
return;
}
if (availability === 'available') {
// The Summarizer API can be used immediately .
summarizer = await Summarizer.create(options);
} else {
// The Summarizer API can be used after the model is downloaded.
summarizer = await Summarizer.create(options);
summarizer.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
await summarizer.ready;
}
return summarizer;
}
// 要約した英語を日本語に変換して出力します
async function japaneseSummarizer() {
const summarizer = await initializeSummarizer();
const summaryContent = await summarizer.summarize($p.getControl('Body').val(), {
context: 'これは日本語のコンテンツです。',
});
const translator = await initializeTranslator();
const translatorContent = await translator.translate(summaryContent);
console.log(translatorContent);
}
// カスタムインポートのボタンを追加する
function CreateSummarizerButton() {
if (document.getElementById("buttonCustomSummarizer")) return;
const mainCommands = document.getElementById('MainCommands');
// ボタンを作成
const button = document.createElement('button');
button.textContent = '内容を要約する';
button.id = "buttonCustomSummarizer";
button.addEventListener('click', () => japaneseSummarizer());
// MainCommands の子要素として追加
mainCommands.appendChild(button);
};
CreateSummarizerButton();
// 更新した時に発生する処理
$p.events.after_set_Update = function () {
CreateSummarizerButton();
};
要約
- 檸檬 梶井基次郎の冒頭
元の文章
えたいの知れない不吉な塊が私の心を始終圧おさえつけていた。焦躁しょうそうと言おうか、嫌悪と言おうか――酒を飲んだあとに宿酔ふつかよいがあるように、酒を毎日飲んでいると宿酔に相当した時期がやって来る。それが来たのだ。これはちょっといけなかった。結果した肺尖はいせんカタルや神経衰弱がいけないのではない。また背を焼くような借金などがいけないのではない。いけないのはその不吉な塊だ。以前私を喜ばせたどんな美しい音楽も、どんな美しい詩の一節も辛抱がならなくなった。蓄音器を聴かせてもらいにわざわざ出かけて行っても、最初の二三小節で不意に立ち上がってしまいたくなる。何かが私を居堪いたたまらずさせるのだ。それで始終私は街から街を浮浪し続けていた。
何故なぜだかその頃私は見すぼらしくて美しいものに強くひきつけられたのを覚えている。風景にしても壊れかかった街だとか、その街にしてもよそよそしい表通りよりもどこか親しみのある、汚い洗濯物が干してあったりがらくたが転がしてあったりむさくるしい部屋が覗のぞいていたりする裏通りが好きであった。雨や風が蝕むしばんでやがて土に帰ってしまう、と言ったような趣きのある街で、土塀どべいが崩れていたり家並が傾きかかっていたり――勢いのいいのは植物だけで、時とするとびっくりさせるような向日葵ひまわりがあったりカンナが咲いていたりする。
時どき私はそんな路を歩きながら、ふと、そこが京都ではなくて京都から何百里も離れた仙台とか長崎とか――そのような市へ今自分が来ているのだ――という錯覚を起こそうと努める。私は、できることなら京都から逃げ出して誰一人知らないような市へ行ってしまいたかった。第一に安静。がらんとした旅館の一室。清浄な蒲団ふとん。匂においのいい蚊帳かやと糊のりのよくきいた浴衣ゆかた。そこで一月ほど何も思わず横になりたい。希ねがわくはここがいつの間にかその市になっているのだったら。――錯覚がようやく成功しはじめると私はそれからそれへ想像の絵具を塗りつけてゆく。なんのことはない、私の錯覚と壊れかかった街との二重写しである。そして私はその中に現実の私自身を見失うのを楽しんだ。
私はまたあの花火というやつが好きになった。花火そのものは第二段として、あの安っぽい絵具で赤や紫や黄や青や、さまざまの縞模様しまもようを持った花火の束、中山寺の星下り、花合戦、枯れすすき。それから鼠花火ねずみはなびというのは一つずつ輪になっていて箱に詰めてある。そんなものが変に私の心を唆そそった。
要約された出力
それなりにまとめられてる？
著者は、圧倒的な不安感に悩まされ、音楽と文学の美しさに慰めを求めていますが、老田や長崎などの都市の老朽化や無視されている地域に惹かれます。
現在の場所から逃れようとしている間、著者は、自分たちの悩みから逃れることができる世界を想像しながら、静かでなじみのない町の静けさに安らぎを見出します。
しかし、著者は、日本の伝統的な花火大会、鮮やかな色と複雑なパターンにも魅力を感じ、驚きと逃避の感覚を味わっています。
- optionsで要約の仕方が変えられます
- summarizeのcontextでも精度を高められるようです
この記事を要約
- この記事自体を要約してみるとこのようになりました
う～ん なるほど
この Chrome 拡張機能を使用すると、ユーザーは Web ページを簡単に要約して英語または日本語に翻訳できます。
Chrome 138 組み込みの AI API を要約と変換の両方に利用し、ブラウザのインターフェイスとのシームレスな統合を実現します。
ユーザーは、長さやコンテキストの指定など、要約プロセスをカスタマイズして、要約をトリガーするボタンを追加できます。