このチュートリアルでは、Google AI JavaScript SDK を使用して、ウェブアプリから Gemini API に直接アクセスする方法について説明します。ウェブアプリで Gemini モデルにアクセスする際に REST API やサーバーサイド コード(Node.js など)を直接操作しない場合は、この SDK を使用できます。
このチュートリアルでは、次の方法を学習します。
- API キーを含めたプロジェクトをセットアップする
- テキストのみの入力からテキストを生成する
- テキストと画像の入力からテキストを生成する(マルチモーダル)
- マルチターンの会話を構築する(チャット)
- ストリーミングを使用して操作を高速化する
さらに、このチュートリアルには、高度なユースケース(トークンのカウントなど)と、コンテンツ生成の制御のオプションに関するセクションも含まれています。
前提条件
このチュートリアルは、JavaScript を使用したウェブアプリの開発に精通していることを前提としています。このガイドはフレームワークに依存していません。
このチュートリアルを最後まで進めるには、開発環境が次の要件を満たしていることを確認してください。
- (省略可)Node.js
- 最新のウェブブラウザ
プロジェクトを設定する
Gemini API を呼び出す前に、API キーの取得、SDK のインポート、モデルの初期化など、プロジェクトを設定する必要があります。
API キーを設定する
Gemini API を使用するには API キーが必要です。キーがない場合は、Google AI Studio で作成します。
API キーを保護する
API キーをバージョン管理システムにチェックインしないことを強くおすすめします。代わりに、モデルを初期化する直前に API キーをアプリに渡す必要があります。
このチュートリアルのすべてのスニペットは、グローバル定数として API キーにアクセスしていることを前提としています。
SDK をインポートして生成モデルを初期化する
API 呼び出しを行うには、SDK をインポートして生成モデルを初期化する必要があります。
<html>
<body>
<!-- ... Your HTML and CSS -->
<script type="importmap">
{
"imports": {
"@google/generative-ai": "https://esm.run/@google/generative-ai"
}
}
</script>
<script type="module">
import { GoogleGenerativeAI } from "@google/generative-ai";
// Fetch your API_KEY
const API_KEY = "...";
// Reminder: This should only be for local testing
// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);
// ...
// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});
// ...
</script>
</body>
</html>
モデルを指定する際は、次の点に注意してください。
ユースケースに固有のモデルを使用します(たとえば、
gemini-1.5-flash
はマルチモーダル入力用です)。このガイドでは、各実装の手順に、各ユースケースに推奨されるモデルを記載しています。
一般的なユースケースの実装
プロジェクトが設定されたので、Gemini API を使用してさまざまなユースケースを実装してみましょう。
テキストのみの入力からテキストを生成する
プロンプト入力にテキストのみが含まれている場合は、Gemini 1.5 モデルまたは Gemini 1.0 Pro モデルと generateContent
を使用して、テキスト出力を生成します。
import { GoogleGenerativeAI } from "@google/generative-ai";
// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);
async function run() {
// The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});
const prompt = "Write a story about a magic backpack."
const result = await model.generateContent(prompt);
const response = await result.response;
const text = response.text();
console.log(text);
}
run();
テキストと画像の入力からテキストを生成する(マルチモーダル)
Gemini には、マルチモーダル入力を処理できるさまざまなモデル(Gemini 1.5 モデル)が用意されており、テキストと画像の両方を入力できます。プロンプトのイメージの要件を必ず確認してください。
プロンプト入力にテキストと画像の両方が含まれている場合は、Gemini 1.5 モデルと generateContent
メソッドを使用してテキスト出力を生成します。
import { GoogleGenerativeAI } from "@google/generative-ai";
// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);
// Converts a File object to a GoogleGenerativeAI.Part object.
async function fileToGenerativePart(file) {
const base64EncodedDataPromise = new Promise((resolve) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result.split(',')[1]);
reader.readAsDataURL(file);
});
return {
inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
};
}
async function run() {
// The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
const prompt = "What's different between these pictures?";
const fileInputEl = document.querySelector("input[type=file]");
const imageParts = await Promise.all(
[...fileInputEl.files].map(fileToGenerativePart)
);
const result = await model.generateContent([prompt, ...imageParts]);
const response = await result.response;
const text = response.text();
console.log(text);
}
run();
マルチターンの会話を構築する(チャット)
Gemini を使用すると、複数のターンで自由形式の会話を構築できます。SDK は会話の状態を管理することでプロセスを簡素化するため、generateContent
とは異なり、会話履歴を自分で保存する必要はありません。
マルチターンの会話(チャットなど)を構築するには、Gemini 1.5 モデルまたは Gemini 1.0 Pro モデルを使用して、startChat()
を呼び出してチャットを初期化します。次に、sendMessage()
を使用して新しいユーザー メッセージを送信します。これにより、メッセージとレスポンスもチャット履歴に追加されます。
会話のコンテンツに関連付けられた role
には、次の 2 つのオプションがあります。
user
: プロンプトを提供するロール。この値はsendMessage
呼び出しのデフォルトであり、別のロールが渡されると、関数は例外をスローします。model
: レスポンスを提供するロール。このロールは、既存のhistory
でstartChat()
を呼び出す場合に使用できます。
import { GoogleGenerativeAI } from "@google/generative-ai";
// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);
async function run() {
// The Gemini 1.5 models are versatile and work with multi-turn conversations (like chat)
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});
const chat = model.startChat({
history: [
{
role: "user",
parts: [{ text: "Hello, I have 2 dogs in my house." }],
},
{
role: "model",
parts: [{ text: "Great to meet you. What would you like to know?" }],
},
],
generationConfig: {
maxOutputTokens: 100,
},
});
const msg = "How many paws are in my house?";
const result = await chat.sendMessage(msg);
const response = await result.response;
const text = response.text();
console.log(text);
}
run();
ストリーミングを使用してより高速にやり取りする
デフォルトでは、モデルは生成プロセス全体を完了するとレスポンスを返します。結果全体を待たずに、ストリーミングを使用して部分的な結果を処理することで、インタラクションを高速化できます。
次の例は、generateContentStream
メソッドを使用してストリーミングを実装し、テキストと画像の入力プロンプトからテキストを生成する方法を示しています。
// ...
const result = await model.generateContentStream([prompt, ...imageParts]);
let text = '';
for await (const chunk of result.stream) {
const chunkText = chunk.text();
console.log(chunkText);
text += chunkText;
}
// ...
テキストのみの入力とチャットのユースケースにも、同様のアプローチを使用できます。
// Use streaming with text-only input
const result = await model.generateContentStream(prompt);
chat
をインスタンス化する方法については、上記のチャットの例をご覧ください。
// Use streaming with multi-turn conversations (like chat)
const result = await chat.sendMessageStream(msg);
高度なユースケースの実装
このチュートリアルの前のセクションで説明した一般的なユースケースは、Gemini API の使用に慣れるのに役立ちます。このセクションでは、より高度なとみなされる可能性のあるユースケースについて説明します。
関数呼び出し
関数呼び出しを使用すると、生成モデルから構造化データの出力を簡単に取得できます。これらの出力を使用して他の API を呼び出し、関連するレスポンス データをモデルに返すことができます。つまり、関数呼び出しを使用すると、生成モデルを外部システムに接続し、生成されたコンテンツに最新で正確な情報を含めることができます。詳細については、関数呼び出しのチュートリアルをご覧ください。
トークンをカウントする
長いプロンプトを使用する場合は、コンテンツをモデルに送信する前にトークンをカウントすると便利です。次の例は、さまざまなユースケースで countTokens()
を使用する方法を示しています。
// For text-only input
const { totalTokens } = await model.countTokens(prompt);
// For text-and-image input (multimodal)
const { totalTokens } = await model.countTokens([prompt, ...imageParts]);
// For multi-turn conversations (like chat)
const history = await chat.getHistory();
const msgContent = { role: "user", parts: [{ text: msg }] };
const contents = [...history, msgContent];
const { totalTokens } = await model.countTokens({ contents });
コンテンツの生成を管理するオプション
コンテンツの生成を制御するには、モデル パラメータを構成し、安全性設定を使用します。
モデル パラメータを構成する
モデルに送信するすべてのプロンプトには、モデルがどのようにレスポンスを生成するかを制御するパラメータ値が含まれています。このモデルは、パラメータ値によって異なる結果を生成できます。モデル パラメータの詳細を確認してください。この構成は、モデル インスタンスの存続期間中に維持されます。
const generationConfig = {
stopSequences: ["red"],
maxOutputTokens: 200,
temperature: 0.9,
topP: 0.1,
topK: 16,
};
// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash", generationConfig });
安全性設定を使用する
安全性設定を使用すると、有害とみなされる可能性のあるレスポンスを受け取る可能性を調整できます。デフォルトでは、安全性設定により、すべての次元で安全でないコンテンツである確率が中程度または高いコンテンツがブロックされます。詳しくは、安全性設定をご覧ください。
安全性設定を 1 つ設定する方法は次のとおりです。
import { HarmBlockThreshold, HarmCategory } from "@google/generative-ai";
// ...
const safetySettings = [
{
category: HarmCategory.HARM_CATEGORY_HARASSMENT,
threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
},
];
// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash", safetySettings });
安全性設定は複数設定できます。
const safetySettings = [
{
category: HarmCategory.HARM_CATEGORY_HARASSMENT,
threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
},
{
category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
},
];
次のステップ
プロンプト設計は、言語モデルから望ましいレスポンスを引き出すプロンプトを作成するプロセスです。適切に構造化されたプロンプトを作成することは、言語モデルからの正確で高品質なレスポンスを実現するために不可欠な要素です。プロンプト作成のベスト プラクティスについて確認する。
Gemini には、入力の種類や複雑さ、チャットやその他のダイアログ言語タスクの実装、サイズの制約など、さまざまなユースケースのニーズを満たすために複数のモデルのバリエーションが用意されています。利用可能な Gemini モデルについて学習する。