チュートリアル: Gemini API のスタートガイド


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

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

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

前提条件

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

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

  • (省略可)Node.js
  • 最新のウェブブラウザ

プロジェクトを設定する

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

API キーを設定する

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

API キーを取得する

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 を使用してさまざまなユースケースを実装してみましょう。

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

プロンプト入力にテキストのみが含まれる場合は、generateContent を指定して Gemini 1.5 モデルまたは Gemini 1.0 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() {
  // 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.0 Pro Vision)が用意されています。プロンプトの画像の要件を確認してください。

プロンプト入力にテキストと画像の両方が含まれている場合は、Gemini 1.5 モデルまたは Gemini 1.0 Pro Vision モデルで 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 モデルまたは Genmini 1.0 Pro モデルを使用し、startChat() を呼び出してチャットを初期化します。次に、sendMessage() を使用して新しいユーザー メッセージを送信します。これにより、メッセージとレスポンスもチャット履歴に追加されます。

会話のコンテンツに関連付けられた role には、次の 2 つのオプションがあります。

  • user: プロンプトを提供するロール。この値は sendMessage 呼び出しのデフォルトです。別のロールが渡されると、この関数は例外をスローします。

  • model: レスポンスを提供するロール。このロールは、既存の historystartChat() を呼び出すときに使用できます。

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 モデルをご確認ください。

  • Gemini には、レート制限の引き上げをリクエストするオプションが用意されています。Genmini Pro モデルのレート制限は 60 リクエスト/分(RPM)です。