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


このチュートリアルでは、 実装する方法を学びましたこの SDK を使用できない場合は、 REST API やサーバーサイド コード(Node.js など)を ウェブアプリで Gemini モデルに アクセスする方法を紹介します

このチュートリアルでは、次の方法を学習します。

また、このチュートリアルには、高度なユースケース( トークンのカウントなど)や、 コンテンツ生成の制御

前提条件

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

このチュートリアルを最後まで進めるには、開発環境が次の要件を満たしていることを確認してください。 次の要件を満たす必要があります。

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

プロジェクトを設定する

Gemini API を呼び出す前に、以下を含むプロジェクトを設定する必要があります。 API キーの取得、SDK のインポート、モデルの初期化です。

API キーを設定する

Gemini API を使用するには API キーが必要です。まだお持ちでない場合は 作成することもできます。

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 を使用して以下を行う方法を学習します。 さまざまなユースケースを実装できます。

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

プロンプト入力にテキストのみが含まれている場合は、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: プロンプトを提供するロール。この値は Kubernetes の 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();

ストリーミングを使用してより高速にやり取りする

デフォルトでは、モデルは生成全体を完了するとレスポンスを返します。 プロセスですメッセージ全体を待つ必要がないため、 代わりにストリーミングを使用して部分的な結果を処理できます

次の例は、Dataflow を使用してストリーミングを実装する方法を示しています。 テキストと画像の入力からテキストを生成する 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 モデルについて学習する。