公開日: 2025 年 5 月 20 日、最終更新日: 2025 年 9 月 21 日
商品の解説 | ウェブ | 拡張機能 | Chrome ステータス | インテント |
---|---|---|---|---|
GitHub | 表示 | テストの目的 |
Prompt API を使用すると、ブラウザで Gemini Nano に自然言語リクエストを送信できます。
Prompt API の使用方法は多岐にわたります。たとえば、次のようなビルドが可能です。
- AI を活用した検索: ウェブページの内容に基づいて質問に回答します。
- パーソナライズされたニュース フィード: 記事をカテゴリで動的に分類し、ユーザーがそのコンテンツをフィルタリングできるようにするフィードを構築します。
- カスタム コンテンツ フィルタ。ニュース記事を分析し、ユーザー定義のトピックに基づいてコンテンツを自動的にぼかしたり非表示にしたりします。
- カレンダーの予定の作成。ウェブページからイベントの詳細を自動的に抽出する Chrome 拡張機能を開発し、ユーザーが数ステップでカレンダーの予定を作成できるようにします。
- シームレスな連絡先の抽出。ウェブサイトから連絡先情報を抽出する拡張機能を作成して、ユーザーがビジネスに連絡したり、連絡先リストに詳細情報を追加したりしやすくします。
これらは可能性のほんの一例です。皆様がどのようなものを作成されるか、楽しみにしております。
ハードウェア要件を確認する
Chrome でこれらの API を使用して機能を操作するデベロッパーとユーザーには、次の要件があります。他のブラウザでは動作要件が異なる場合があります。
言語検出 API と翻訳 API は、パソコン版 Chrome で動作します。これらの API はモバイル デバイスでは動作しません。プロンプト API、要約 API、ライター API、書き換え API、校正 API は、次の条件を満たす場合に Chrome で動作します。
- オペレーティング システム: Windows 10 または 11、macOS 13 以降(Ventura 以降)、Linux、または Chromebook Plus デバイスの ChromeOS(プラットフォーム 16389.0.0 以降)。Chromebook Plus 以外のデバイスの Android 版 Chrome、iOS 版 Chrome、ChromeOS 版 Chrome は、Gemini Nano を使用する API でまだサポートされていません。
- ストレージ: Chrome プロファイルを含むボリュームに 22 GB 以上の空き容量が必要です。
- GPU: 4 GB を超える VRAM。
- ネットワーク: 無制限のデータ通信または従量制でない接続。
Gemini Nano の正確なサイズは、ブラウザがモデルを更新するにつれて変化する可能性があります。現在のサイズを確認するには、chrome://on-device-internals
にアクセスしてください。
Prompt API を使用する
Prompt API は Chrome で Gemini Nano モデルを使用します。API は Chrome に組み込まれていますが、モデルはオリジンが API を初めて使用するときに個別にダウンロードされます。この API を使用する前に、Google の生成 AI の使用禁止に関するポリシーを確認してください。
モデルが使用可能かどうかを確認するには、LanguageModel.availability()
を呼び出します。
const availability = await LanguageModel.availability();
モデルをダウンロードするには、クリック、タップ、キー押下などのユーザー操作が必要です。
レスポンスが downloadable
または downloading
の場合、モデルと API は利用可能ですが、機能を使用する前にダウンロードする必要があります。ダウンロードを許可するには、ユーザーがページを操作する(クリック、タップ、キーを押すなど)必要があります。
モデルをダウンロードしてインスタンス化するには、create()
関数を呼び出します。
const session = await LanguageModel.create({
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
},
});
availability()
へのレスポンスが downloading
の場合は、ダウンロードの進行状況をリッスンし、ダウンロードに時間がかかる可能性があることをユーザーに伝えます。
モデル パラメータ
params()
関数は、言語モデルのパラメータを通知します。オブジェクトには次のフィールドがあります。
await LanguageModel.params();
// {defaultTopK: 3, maxTopK: 128, defaultTemperature: 1, maxTemperature: 2}
セッションを作成する
Prompt API を実行できるようになったら、create()
関数を使用してセッションを作成します。
各セッションは、オプションのオプション オブジェクトを使用して topK
と temperature
でカスタマイズできます。これらのパラメータのデフォルト値は LanguageModel.params()
から返されます。
const params = await LanguageModel.params();
// Initializing a new session must either specify both `topK` and
// `temperature` or neither of them.
const slightlyHighTemperatureSession = await LanguageModel.create({
temperature: Math.max(params.defaultTemperature * 1.2, 2.0),
topK: params.defaultTopK,
});
create()
関数のオプションのオプション オブジェクトは、signal
フィールドも受け取ります。これにより、セッションを破棄する AbortSignal
を渡すことができます。
const controller = new AbortController();
stopButton.onclick = () => controller.abort();
const session = await LanguageModel.create({
signal: controller.signal,
});
最初のプロンプトでコンテキストを追加する
初期プロンプトを使用すると、以前のインタラクションに関するコンテキストを言語モデルに提供できます。たとえば、ブラウザの再起動後にユーザーが保存されたセッションを再開できるようにします。
const session = await LanguageModel.create({
initialPrompts: [
{ role: 'system', content: 'You are a helpful and friendly assistant.' },
{ role: 'user', content: 'What is the capital of Italy?' },
{ role: 'assistant', content: 'The capital of Italy is Rome.' },
{ role: 'user', content: 'What language is spoken there?' },
{
role: 'assistant',
content: 'The official language of Italy is Italian. [...]',
},
],
});
接頭辞でレスポンスを制約する
以前のロールに加えて "assistant"
ロールを追加して、モデルの以前のレスポンスを詳しく説明できます。次に例を示します。
const followup = await session.prompt([
{
role: "user",
content: "I'm nervous about my presentation tomorrow"
},
{
role: "assistant",
content: "Presentations are tough!"
}
]);
新しいレスポンスをリクエストする代わりに、"assistant"
ロールのレスポンス メッセージの一部を事前入力することもできます。これは、特定のレスポンス形式を使用するように言語モデルを誘導するのに役立ちます。これを行うには、末尾の "assistant"
-role メッセージに prefix: true
を追加します。次に例を示します。
const characterSheet = await session.prompt([
{
role: 'user',
content: 'Create a TOML character sheet for a gnome barbarian',
},
{
role: 'assistant',
content: '```toml\n',
prefix: true,
},
]);
想定される入力と出力を追加する
Prompt API にはマルチモーダル機能があり、複数の言語をサポートしています。セッションの作成時に、expectedInputs
と expectedOutputs
のモダリティと言語を設定します。
type
: 期待されるモダリティ。expectedInputs
の場合、text
、image
、audio
のいずれかになります。expectedOutputs
の場合、Prompt API で許可されるのはtext
のみです。
languages
: 期待される言語を設定する配列。Prompt API は"en"
、"ja"
、"es"
を受け入れます。他の言語のサポートは開発中です。expectedInputs
の場合は、システム プロンプトの言語と、ユーザー プロンプトの言語を 1 つ以上設定します。- 1 つ以上の
expectedOutputs
言語を設定します。
const session = await LanguageModel.create({
expectedInputs: [
{ type: "text", languages: ["en" /* system prompt */, "ja" /* user prompt */] }
],
expectedOutputs: [
{ type: "text", languages: ["ja"] }
]
});
モデルがサポートされていない入力または出力を検出すると、"NotSupportedError"
DOMException が発生する可能性があります。
マルチモーダル機能
これらの機能を使用すると、次のことができます。
- ユーザーがチャット アプリケーションで送信された音声メッセージを文字起こしできるようにします。
- ウェブサイトにアップロードされた画像について説明し、キャプションや代替テキストで使用します。
音声入力で Prompt API を使用する Mediarecorder Audio Prompt デモと、画像入力で Prompt API を使用する Canvas Image Prompt デモをご覧ください。
メッセージを追加する
推論には時間がかかることがあります。特に、マルチモーダル入力でプロンプトを表示する場合は時間がかかることがあります。事前に所定のプロンプトを送信してセッションにデータを入力しておくと、モデルが処理をすぐに開始できるため、便利です。
initialPrompts
はセッションの作成時に便利ですが、append()
メソッドは prompt()
メソッドまたは promptStreaming()
メソッドに加えて使用できます。これにより、セッションの作成後に追加のコンテキスト プロンプトを指定できます。
次に例を示します。
const session = await LanguageModel.create({
initialPrompts: [
{
role: 'system',
content:
'You are a skilled analyst who correlates patterns across multiple images.',
},
],
expectedInputs: [{ type: 'image' }],
});
fileUpload.onchange = async () => {
await session.append([
{
role: 'user',
content: [
{
type: 'text',
value: `Here's one image. Notes: ${fileNotesInput.value}`,
},
{ type: 'image', value: fileUpload.files[0] },
],
},
]);
};
analyzeButton.onclick = async (e) => {
analysisResult.textContent = await session.prompt(userQuestionInput.value);
};
append()
によって返された Promise は、プロンプトが検証、処理され、セッションに追加されると完了します。プロンプトを追加できない場合、Promise は拒否されます。
JSON スキーマを渡す
responseConstraint
フィールドを prompt()
メソッドまたは promptStreaming()
メソッドに追加して、JSON スキーマを値として渡します。次に、Prompt API で構造化出力を使用できます。
次の例では、JSON スキーマにより、モデルが true
または false
で応答し、特定のメッセージが陶器に関するものかどうかを分類します。
const session = await LanguageModel.create();
const schema = {
"type": "boolean"
};
const post = "Mugs and ramen bowls, both a bit smaller than intended, but that
happens with reclaim. Glaze crawled the first time around, but pretty happy
with it after refiring.";
const result = await session.prompt(
`Is this post about pottery?\n\n${post}`,
{
responseConstraint: schema,
}
);
console.log(JSON.parse(result));
// true
実装では、モデルに送信されるメッセージの一部として JSON スキーマまたは正規表現を含めることができます。これは、入力割り当ての一部を使用します。responseConstraint
オプションを session.measureInputUsage()
に渡すことで、入力割り当ての使用量を測定できます。
この動作は、omitResponseConstraintInput
オプションで回避できます。その場合は、プロンプトにガイダンスを含めることをおすすめします。
const result = await session.prompt(`
Summarize this feedback into a rating between 0-5. Only output a JSON
object { rating }, with a single property whose value is a number:
The food was delicious, service was excellent, will recommend.
`, { responseConstraint: schema, omitResponseConstraintInput: true });
モデルにプロンプトを入力する
prompt()
関数または promptStreaming()
関数を使用して、モデルにプロンプトを表示できます。
ストリーミングされていない出力
短い結果が予想される場合は、レスポンスが利用可能になったらレスポンスを返す prompt()
関数を使用できます。
// Start by checking if it's possible to create a session based on the
// availability of the model, and the characteristics of the device.
const { defaultTemperature, maxTemperature, defaultTopK, maxTopK } =
await LanguageModel.params();
const available = await LanguageModel.availability();
if (available !== 'unavailable') {
const session = await LanguageModel.create();
// Prompt the model and wait for the whole result to come back.
const result = await session.prompt('Write me a poem!');
console.log(result);
}
ストリーミング出力
長いレスポンスが予想される場合は、モデルから部分的な結果が返されるたびに表示できる promptStreaming()
関数を使用する必要があります。promptStreaming()
関数は ReadableStream
を返します。
const { defaultTemperature, maxTemperature, defaultTopK, maxTopK } =
await LanguageModel.params();
const available = await LanguageModel.availability();
if (available !== 'unavailable') {
const session = await LanguageModel.create();
// Prompt the model and stream the result:
const stream = session.promptStreaming('Write me an extra-long poem!');
for await (const chunk of stream) {
console.log(chunk);
}
}
プロンプトを停止する
prompt()
と promptStreaming()
の両方で、signal
フィールドを含むオプションの 2 番目のパラメータを受け取ります。これにより、実行中のプロンプトを停止できます。
const controller = new AbortController();
stopButton.onclick = () => controller.abort();
const result = await session.prompt('Write me a poem!', {
signal: controller.signal,
});
セッション管理
各セッションは会話のコンテキストを追跡します。セッションのコンテキスト ウィンドウがいっぱいになるまで、以前のインタラクションが今後のインタラクションに考慮されます。
各セッションには、処理できるトークンの最大数があります。この上限に対する進捗状況は、次の方法で確認できます。
console.log(`${session.inputUsage}/${session.inputQuota}`);
詳しくは、セッション管理をご覧ください。
セッションのクローンを作成する
リソースを保持するには、clone()
関数を使用して既存のセッションを複製します。会話のコンテキストはリセットされますが、最初のプロンプトはそのまま残ります。clone()
関数は、signal
フィールドを含むオプションのオプション オブジェクトを受け取ります。これにより、AbortSignal
を渡してクローン セッションを破棄できます。
const controller = new AbortController();
stopButton.onclick = () => controller.abort();
const clonedSession = await session.clone({
signal: controller.signal,
});
セッションを終了する
セッションが不要になった場合は、destroy()
を呼び出してリソースを解放します。セッションが破棄されると、そのセッションは使用できなくなり、進行中の実行はすべて中止されます。セッションの作成には時間がかかるため、モデルを頻繁にプロンプトする場合は、セッションを維持することをおすすめします。
await session.prompt(
"You are a friendly, helpful assistant specialized in clothing choices."
);
session.destroy();
// The promise is rejected with an error explaining that
// the session is destroyed.
await session.prompt(
"What should I wear today? It is sunny, and I am choosing between a t-shirt
and a polo."
);
デモ
Prompt API のさまざまなユースケースを試すためのデモを複数作成しました。次のデモはウェブ アプリケーションです。
Chrome 拡張機能で Prompt API をテストするには、デモ拡張機能をインストールします。拡張機能のソースコードは GitHub で入手できます。
パフォーマンス戦略
ウェブ用の Prompt API は現在開発中です。この API を構築する間は、最適なパフォーマンスを実現するために、セッション管理に関するベスト プラクティスを参照してください。
Permission Policy、iframe、Web Worker
デフォルトでは、Prompt API はトップレベル ウィンドウとその同一オリジンの iframe でのみ使用できます。Permission Policy の allow=""
属性を使用すると、API へのアクセスをクロスオリジンの iframe に委任できます。
<!--
The hosting site at https://main.example.com can grant a cross-origin iframe
at https://cross-origin.example.com/ access to the Prompt API by
setting the `allow="language-model"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="language-model"></iframe>
権限ポリシーのステータスを確認するために各ワーカーの責任あるドキュメントを確立する複雑さから、現時点では Prompt API は Web Workers で利用できません。
参加してフィードバックを共有する
皆様からのご意見は、この API とすべての組み込み AI API の将来のバージョンを構築して実装する方法に直接影響します。
- Chrome の実装に関するフィードバックについては、バグレポートまたは機能リクエストを送信してください。
- API の形状に関するフィードバックは、既存の Issue にコメントするか、Prompt API GitHub リポジトリで新しい Issue を開いて共有してください。
- 早期プレビュー プログラムに参加する。