Gemini の API を OpenAI のパッケージ ＋ Node.js で試す（テキスト・複数の画像の入力）【生成AI−2】

この記事は「[生成AI Advent Calendar 2024](https://qiita.com/advent-calendar/2024/kagai)」の 2つ目、8日目の記事として後付けで登録したものです。

上記のカレンダー 8日目の記事として、当初は [Grok の API利用の話（xAI API による）](https://qiita.com/youtoy/items/4d5ac59f52106e96a3e1)を登録していたのですが、今回の Gemini のものに変更しました。

## はじめに
この記事は、情報は集めていたもののあまり試せてなかった「Gemini」の API利用に関して、手をつけてみた流れを書いたものです。

### 試す内容
Gemini は、Google AI Studio 経由で使う形と、Vertex AI 経由で使う形があります。

Vertex AI 経由での利用は、前に以下のハンズオンイベントに参加した時に試していました。

https://x.com/youtoy/status/1786758652973707336

今回の記事で扱う話は、Google AI Studio 経由で使うほうです。

#### OpenAI のパッケージを使う
さらに、今回は Node.js で Gemini を利用する際、Google公式のパッケージではなく、OpenAI のパッケージを使います。
この話については、以下の 2024/11/8 に公開された公式情報などで出ていました。

●Gemini is now accessible from the OpenAI Library - Google Developers Blog
　https://developers.googleblog.com/en/gemini-is-now-accessible-from-the-openai-library/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/44773359-f820-3388-adb7-b207edc8f46f.png)

以下は、その時に自分がポストをしていたものです。

https://x.com/youtoy/status/1855256110871302501

気になってはいたものの、ずっとこの話は寝かせていた状態でした。

## 実際に試す
### API経由で Gemini を使う準備
まずは、Gemini の公式情報を見ていき、API を使う下準備をします。

#### モデルの情報
モデルの情報に関して公式の情報を見てみます。
記事執筆時点だと、以下のモデルが公式ドキュメントに記載されています。

●Gemini models  |  Gemini API  |  Google AI for Developers
　https://ai.google.dev/gemini-api/docs/models/gemini

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a930b6f9-7d42-7d48-eba8-22ef7ad7453f.png)

複数のモデルがありますが、今回はサンプルコードで使われているモデルをそのまま指定します。

#### APIキーの取得
APIキーは、前に発行したような記憶があるのですが、公式ドキュメントから APIキー発行の手順をたどって進んでみます。

具体的には、以下の部分から APIキーのページへと移動してみます。

●Explore vision capabilities with the Gemini API  |  Google AI for Developers
　https://ai.google.dev/gemini-api/docs/vision?lang=rest

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ae7efc46-bc3d-153d-0a22-369d70f7cc2d.png)

以下のページに移動してみると、自分の場合は既に発行済みだった APIキーが 1つ記載されていました。

●API キーを取得 | Google AI Studio
　https://aistudio.google.com/app/apikey

また上記のページでは、以下の curl を使ったサンプルも掲載されています（あと、[クイックスタート](https://ai.google.dev/gemini-api/docs/quickstart?lang=node)へのリンクがあったりも）。

```zsh
curl "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=GEMINI_API_KEY" \
-H 'Content-Type: application/json' \
-X POST \
-d '{
  "contents": [{
    "parts":[{"text": "Explain how AI works"}]
    }]
   }'
```

今回は Node.js を使う予定なので、さらに情報を見ていきます。

#### OpenAI のパッケージを使う話
OpenAI のパッケージで Gemini を使うという話の公式情報を見てみます。

公式ドキュメントでは以下のページが該当するようです。

●OpenAI compatibility  |  Gemini API  |  Google AI for Developers
　https://ai.google.dev/gemini-api/docs/openai

そこで Node.js を選ぶと、以下のサンプルが出てきます。

```javascript
import OpenAI from "openai";

const openai = new OpenAI({
    apiKey: "GEMINI_API_KEY",
    baseURL: "https://generativelanguage.googleapis.com/v1beta/openai/"
});

const response = await openai.chat.completions.create({
    model: "gemini-1.5-flash",
    messages: [
        { role: "system", content: "You are a helpful assistant." },
        {
            role: "user",
            content: "Explain to me how AI works",
        },
    ],
});

console.log(response.choices[0].message);
```

これをもとに最初のお試しをやっていきます。

### OpenAI のパッケージで使ってみる
#### テキスト入力
上記の公式サンプルを少しだけ変更したもので、実際に Gemini を使ってみます。

少しだけ変更したという部分は、具体的には「"GEMINI_API_KEY" という環境変数に APIキーの情報を書き込むようにしたこと」と、「送信するメッセージを日本語にしたりシンプルにしたりしたこと」です。

以下がお試し用に作成したものです。

```javascript
import OpenAI from "openai";

const apiKey = process.env["GEMINI_API_KEY"];
const baseURL = "https://generativelanguage.googleapis.com/v1beta/openai/";

const openai = new OpenAI({
  apiKey,
  baseURL,
});

const response = await openai.chat.completions.create({
  model: "gemini-1.5-flash",
  messages: [
    {
      role: "user",
      content: "あなたは誰？",
    },
  ],
});

console.log(response.choices[0].message);
```

上記を実行したレスポンスで以下が得られました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e743e303-2900-a6ff-1a48-68c0c05ce2f2.png)

#### 複数画像の入力
さらに、過去に OpenAI の API で試したことがある「複数画像の入力」も試してみます。上記の内容と以下の内容（過去に試したもの）をもとに、今回使うコードを作成します。

●GPT-4o の入力に 2つ／3つの画像ファイルを使う（画像は Base64エンコード）：OpenAI の Node.js用ライブラリを利用 - Qiita
 https://qiita.com/youtoy/items/ad46643c4636746bb63f

今回用に用意したコードは以下の通りです。

```javascript
import OpenAI from "openai";
import fs from "fs";

const apiKey = process.env["GEMINI_API_KEY"];
const baseURL = "https://generativelanguage.googleapis.com/v1beta/openai/";

const openai = new OpenAI({
  apiKey,
  baseURL,
});

async function main() {
  const message = "これらの画像には何がうつってる？";
  console.log(message);

  const imagePaths = ["./input1.jpg", "./input2.jpg"];
  const imageBase64List = imagePaths.map((imagePath) => {
    const imageBuffer = fs.readFileSync(imagePath);
    return imageBuffer.toString("base64");
  });

  const response = await openai.chat.completions.create({
    model: "gemini-1.5-flash",
    messages: [
      {
        role: "user",
        content: [
          { type: "text", text: message },
          {
            type: "image_url",
            image_url: {
              url: `data:image/jpeg;base64,${imageBase64List[0]}`,
            },
          },
          {
            type: "image_url",
            image_url: {
              url: `data:image/jpeg;base64,${imageBase64List[1]}`,
            },
          },
        ],
      },
    ],
  });
  console.log(response.choices[0].message);
}
main();
```

そして実行結果は以下のとおりです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3bedf562-1e4f-b3c7-0b24-3d1e29d199f2.png)

今回用いた画像は、前にやったお試しと同じ以下の 2つなので、レスポンスで返ってきていた説明は問題なさそうです。

![input1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cfa659f8-0de6-0db1-6936-bd42182bcb93.jpeg)

![input2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a5ab3f47-15e4-b3e5-533b-60ff1ab8108d.jpeg)