The Google AI JavaScript SDK is in public preview, which means its behavior and features could change in backward-incompatible ways. Preview releases should not be used in production.

このページは Cloud Translation API によって翻訳されました。

ウェブアプリで Gemini API を使ってみる

このチュートリアルでは、Google AI JavaScript SDK を使用して、ウェブアプリから Gemini API に直接アクセスする方法について説明します。この SDK は、ウェブアプリで Gemini モデルにアクセスするために REST API やサーバーサイドコード（Node.js など）を直接操作しない場合に使用できます。

このチュートリアルでは、次の方法について学びます。

API キーを含めてプロジェクトを設定する
テキストのみの入力からテキストを生成する
テキストと画像の入力からテキストを生成する（マルチモーダル）
マルチターンの会話を構築する（チャット）
ストリーミングを使用してインタラクションを高速化する

さらに、このチュートリアルには、高度なユースケース（トークンのカウントなど）と、コンテンツ生成の制御のオプションに関するセクションも含まれています。

前提条件

このチュートリアルは、JavaScript を使用したウェブアプリ開発に精通していることを前提としています。このガイドはフレームワークに依存しません。

このチュートリアルを完了するには、開発環境が次の要件を満たしていることを確認してください。

（省略可）Node.js
最新のウェブブラウザ

プロジェクトを設定する

Gemini API を呼び出す前に、API キーの取得やモデルの初期化など、プロジェクトをセットアップする必要があります。

API キーを設定する

Gemini API を使用するには、API キーが必要です。まだ作成していない場合は、Google AI Studio でキーを作成します。

API キーを取得する

API キーを保護する

API キーはバージョン管理システムにチェックインしないことを強くおすすめします。代わりに、モデルを初期化する直前に API キーをアプリに渡す必要があります。

このチュートリアルのすべてのスニペットは、グローバル定数として API キーにアクセスすることを前提としています。

生成モデルの初期化

API 呼び出しを行うには、生成モデルをインポートして初期化しておく必要があります。

<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 = "...";

      // Access your API key (see "Set up your API key" above)
      const genAI = new GoogleGenerativeAI(API_KEY);

      // ...

      const model = genAI.getGenerativeModel({ model: "MODEL_NAME"});

      // ...
    </script>
  </body>
</html>

モデルを指定する際は、次の点に注意してください。

ユースケースに固有のモデルを使用します（たとえば、gemini-pro-vision はマルチモーダル入力に使用します）。このガイドでは、各実装の手順に、各ユースケースで推奨されるモデルを示します。

注: 機能やレート制限など、使用可能なモデルの詳細については、Gemini モデルをご覧ください。Gemini Pro モデルのレート制限は 1 分あたり 60 リクエスト（RPM）です。レート制限の引き上げをリクエストするオプションが用意されています。

一般的なユースケースの実装

プロジェクトを設定したら、Gemini API を使用してさまざまなユースケースを実装してみましょう。

テキストのみの入力からテキストを生成する
テキストと画像の入力からテキストを生成する（マルチモーダル）
マルチターンの会話を構築する（チャット）
ストリーミングを使用してインタラクションを高速化する

テキストのみの入力からテキストを生成する

プロンプト入力にテキストのみが含まれている場合は、generateContent メソッドで gemini-pro モデルを使用して、テキスト出力を生成します。

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() {
  // For text-only input, use the gemini-pro model
  const model = genAI.getGenerativeModel({ model: "gemini-pro"});

  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-pro-vision）が用意されているため、テキストと画像の両方を入力できます。入力の画像の要件を確認してください。

プロンプト入力にテキストと画像の両方が含まれている場合は、generateContent メソッドで gemini-pro-vision モデルを使用して、テキスト出力を生成します。

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() {
  // For text-and-images input (multimodal), use the gemini-pro-vision model
  const model = genAI.getGenerativeModel({ model: "gemini-pro-vision" });

  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-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() {
  // For text-only input, use the gemini-pro model
  const model = genAI.getGenerativeModel({ model: "gemini-pro"});

  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 を使いやすくなります。このセクションでは、より高度とみなされるユースケースについて説明します。

トークンをカウントする

長いプロンプトを使用する場合は、コンテンツをモデルに送信する前にトークンをカウントすると便利な場合があります。次の例は、さまざまなユースケースで 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,
};

const model = genAI.getGenerativeModel({ model: "MODEL_NAME",  generationConfig });

安全性設定を使用する

安全性設定を使用して、有害とみなされる可能性のあるレスポンスを受け取る可能性を調整できます。デフォルトでは、安全性設定により、すべての次元において安全でないコンテンツである可能性が高いコンテンツが中程度または高い確率でブロックされます。詳しくは、安全性設定をご覧ください。

安全性に関する設定を 1 つ設定する方法は次のとおりです。

import { HarmBlockThreshold, HarmCategory } from "@google/generative-ai";

// ...

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
];

const model = genAI.getGenerativeModel({ model: "MODEL_NAME", 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 モデルをご確認ください。
Gemini には、レート制限の引き上げをリクエストするオプションが用意されています。Genmini Pro モデルのレート制限は 60 リクエスト/分（RPM）です。