公開日: 2025 年 5 月 20 日、最終更新日: 2025 年 7 月 21 日
商品の解説 | ウェブ | 拡張機能 | Chrome ステータス | インテント |
---|---|---|---|---|
GitHub | 表示 | テストの目的 |
Prompt API を使用すると、ブラウザで Gemini Nano に自然言語リクエストを送信できます。
ウェブ アプリケーションやウェブサイトで Prompt API を使用する方法は数多くあります。たとえば、次のようなビルドが可能です。
- AI を活用した検索: ウェブページの内容に基づいて質問に回答します。
- パーソナライズされたニュース フィード: 記事をカテゴリで動的に分類し、ユーザーがそのコンテンツをフィルタリングできるようにするフィードを構築します。
これらは可能性のほんの一例です。皆様がどのようなものを作成されるか、楽しみにしています。
ハードウェア要件を確認する
Chrome でこれらの API を使用して機能を操作するデベロッパーとユーザーには、次の要件があります。他のブラウザでは動作要件が異なる場合があります。
言語検出 API と翻訳 API は、パソコン版 Chrome で動作します。これらの API はモバイル デバイスでは動作しません。Prompt API、Summarizer API、Writer API、Rewriter API は、次の条件を満たす場合に Chrome で動作します。
- オペレーティング システム: Windows 10 または 11、macOS 13 以降(Ventura 以降)、Linux、または [Chromebook Plus](https://www.google.com/chromebook/chromebookplus/) デバイスの 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 を初めて使用するときに個別にダウンロードされます。
モデルが使用可能かどうかを確認するには、LanguageModel.availability()
を呼び出します。availability()
へのレスポンスが downloadable
の場合は、ダウンロードの進行状況をリッスンし、ダウンロードに時間がかかる可能性があることをユーザーに伝えます。
const availability = await LanguageModel.availability();
ダウンロードをトリガーして言語モデルをインスタンス化するには、ユーザーのアクティベーションを確認します。次に、非同期の LanguageModel.create()
関数を呼び出します。
const session = await LanguageModel.create({
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
},
});
モデル パラメータ
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,
},
]);
メッセージを追加する
推論には時間がかかることがあります。特に、マルチモーダル入力でプロンプトを表示する場合は時間がかかることがあります。事前に所定のプロンプトを送信してセッションにデータを入力しておくと、モデルが処理をすぐに開始できるため便利です。
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 は拒否されます。
セッションの永続性と上限
各セッションは会話のコンテキストを追跡します。セッションのコンテキスト ウィンドウがいっぱいになるまで、以前のインタラクションが今後のインタラクションに考慮されます。
const session = await LanguageModel.create({
initialPrompts: [
{
role: 'system',
content:
'You are a friendly, helpful assistant specialized in clothing choices.',
},
],
});
const result1 = await session.prompt(
'What should I wear today? It is sunny. I am unsure between a t-shirt and a polo.',
);
console.log(result1);
const result2 = await session.prompt(
'That sounds great, but oh no, it is actually going to rain! New advice?',
);
console.log(result2);
各セッションには、処理できるトークンの最大数があります。この上限に対する進捗状況は、次の方法で確認できます。
console.log(`${session.inputUsage}/${session.inputQuota}`);
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 スキーマまたは正規表現を含めることができます。これは、入力割り当ての一部を使用します。session.measureInputUsage()
に responseConstraint
オプションを渡すことで、入力割り当ての使用量を測定できます。
この動作は、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 });
セッションのクローンを作成する
リソースを保持するには、clone()
関数を使用して既存のセッションを複製します。会話のコンテキストはリセットされますが、最初のプロンプトはそのまま残ります。clone()
関数は、signal
フィールドを含むオプションのオプション オブジェクトを受け取ります。これにより、AbortSignal
を渡してクローン セッションを破棄できます。
const controller = new AbortController();
stopButton.onclick = () => controller.abort();
const clonedSession = await session.clone({
signal: controller.signal,
});
モデルにプロンプトを表示する
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,
});
セッションを終了する
セッションが不要になった場合は、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 のオリジン トライアルでは、音声と画像の入力がサポートされています。API はテキスト出力を返します。
これらの機能を使用すると、次のことができます。
- ユーザーがチャット アプリケーションで送信された音声メッセージを文字起こしできるようにします。
- ウェブサイトにアップロードされた画像について説明し、キャプションや代替テキストで使用します。
const session = await LanguageModel.create({
// { type: 'text' } only required when including expected input languages.
expectedInputs: [{ type: 'audio' }, { type: 'image' }],
});
const referenceImage = await (await fetch('/reference-image.jpeg')).blob();
const userDrawnImage = document.querySelector('canvas');
const response1 = await session.prompt([
{
role: 'user',
content: [
{
type: 'text',
value:
'Give an artistic critique of how well the second image matches the first:',
},
{ type: 'image', value: referenceImage },
{ type: 'image', value: userDrawnImage },
],
},
]);
console.log(response1);
const audioBlob = await captureMicrophoneInput({ seconds: 10 });
const response2 = await session.prompt([
{
role: 'user',
content: [
{ type: 'text', value: 'My response to your critique:' },
{ type: 'audio', value: audioBlob },
],
},
]);
オーディオ入力で Prompt API を使用する方法については、Mediarecorder Audio Prompt デモを、画像入力で Prompt API を使用する方法については、Canvas Image Prompt デモをご覧ください。
パフォーマンス戦略
ウェブ用の 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 を開いて共有してください。
- 早期プレビュー プログラムに参加する。