GPT-4o と Node.js の process.loadEnvFile() と OpenAI のライブラリを組み合わせる

リリースされたばかりの GPT-4o を API経由で試すのに、以前、以下の記事で書いた「Node.js の process.loadEnvFile()」を組み合わせてみたという内容です。

●【小ネタ】Node.js v21.7.0 の新機能で環境変数用のファイル読みこみを軽く試す： process.loadEnvFile() - Qiita
　https://qiita.com/youtoy/items/ae838cacd43b3c3e61e1

## GPT-4o について
GPT-4o　については、既にいろいろな方が記事を書いていると思うので、詳細はそれらをご参照ください。

●GPT-4o - Google 検索
　https://www.google.com/search?q=GPT-4o

## OpenAI の Node.js ライブラリ
今回、GPT-4o を API経由で試します。
その処理には、以下の OpenAI の Node.js用ライブラリを使います。

●openai - npm
　https://www.npmjs.com/package/openai

### 公式のサンプルコード
公式のサンプルコードは、上記の npm のページやドキュメントなどに書かれています。
それらを、いくつかピックアップしてみます。

#### npm のページの内容
npm のページのサンプルをピックアップしてみます。

以下は、[Create chat completion](https://platform.openai.com/docs/api-reference/chat/create) のサンプルです。
モデルは、元の記載から GPT-4o に変更して掲載しています。

```javascript
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env['OPENAI_API_KEY'], // This is the default and can be omitted
});

async function main() {
  const chatCompletion = await openai.chat.completions.create({
    messages: [{ role: 'user', content: 'Say this is a test' }],
    model: 'gpt-4o',
  });
}

main();
```

以下のサンプルは、レスポンスをストリーミングで得られるようにしているものです。

なお上記と違って、以下では明示的に APIキーを指定してないですが、その場合は「OPENAI_API_KEY」という名前の環境変数をデフォルトで読みこむようです。

```javascript
import OpenAI from 'openai';

const openai = new OpenAI();

async function main() {
  const stream = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages: [{ role: 'user', content: 'Say this is a test' }],
    stream: true,
  });
  for await (const chunk of stream) {
    process.stdout.write(chunk.choices[0]?.delta?.content || '');
  }
}

main();
```

### 環境変数で APIキーを設定する： 公式の情報
公式のクイックスタートでは、以下の部分で Mac・Windows のそれぞれの環境で、環境変数を設定する方法が紹介されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ef43ccff-1efe-f80e-bf97-8a81b5d54329.png)

以下は、Mac用の内容が書かれた部分を展開したものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0053073e-fc61-310e-14d6-e9a1e9da38cc.png)

今回は、このようなコマンドで環境変数を設定する方法ではなく、Node.js のプログラムの中で「process.loadEnvFile()」を使って設定します。

### 環境変数で APIキーを設定する： process.loadEnvFile()
[冒頭で紹介していた記事](https://qiita.com/youtoy/items/ae838cacd43b3c3e61e1)にも書いてい「process.loadEnvFile()」を使って試してみます。
※ Node.js のバージョンに依存する処理になるので、その点はご注意ください

上記サンプルの 2つ目をベースに、内容を作ってみます。

#### 実装内容
具体的なコードは、以下のとおりです。
`process.loadEnvFile('./development.env')` という指定をしているので、環境変数に関するファイルは「development.env」というファイル名で用意します。

```javascript:appStreaming.mjs
import OpenAI from "openai";

process.loadEnvFile("./development.env");

const openai = new OpenAI();

const message = "GPT-4 について、特長を説明してください。";

console.log("\n【ユーザー】：");
console.log(message + "\n");

async function main() {
  const stream = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: [
      {
        role: "user",
        content: message,
      },
    ],
    stream: true,
  });

  console.log("\n【GPT-4o】：");
  for await (const chunk of stream) {
    process.stdout.write(chunk.choices[0]?.delta?.content || "");
  }
}

main();
```

また、 `process.loadEnvFile()` は `new OpenAI()` よりも前に書くようにしてください。

```javascript
process.loadEnvFile("./development.env");

const openai = new OpenAI();
```

以下、「development.env」のサンプルです。
「【ご自身の OpenAI の APIキー】」の部分は、適宜書きかえてください。

```zsh:development.env
OPENAI_API_KEY="【ご自身の OpenAI の APIキー】"
```

#### 上記を実行してみる
上記のプログラムを実行してみます。

レスポンスは良い感じです！

https://twitter.com/youtoy/status/1790421483778633820

## おわりに
今回、GPT-4o を OpenAI の Node.js用ライブラリで試すのに、以前試した Node.js v21.7.0 の新機能を一緒に使ってみました。

GPT-4o のお試しはとりあえず版という感じにとどめたので、今後は色々 GPT-4o を試していければと思います。

## その他
その他、公式の情報でサンプルコード・GPT-4o に関する情報が書かれた部分を、以下に掲載してみます。

### APIリファレンスのサンプル
APIリファレンスの「[Create chat completion](https://platform.openai.com/docs/api-reference/chat/create)」のページでもサンプルを確認できます。

こちらは上部のメニューを選ぶことで、画像を入力にしたものや、Tools（Function Calling）を使う例なども、簡単に切り替えて見ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a824833f-87e5-3a31-581c-6fef2f7f2c6b.png)

また、その下にあるメニューから、用いるモデルや言語を簡単に変更することもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/81acc62c-e182-28ca-88df-3cfefeb82bd9.png)

例えば「Default」の場合は、以下の選択肢から選ぶことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/da9f88ab-204e-0458-8e16-3eb46a49e620.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a8585855-6e44-4bac-edb6-b35c64fc35ec.png)

### 公式ドキュメント内のサンプル
公式ドキュメントで「Text generation ＞ Chat Completions」とたどった先にもサンプルが掲載されていて、こちらもライブラリを切り替えられるようになっています。

●Text generation - OpenAI API
　https://platform.openai.com/docs/guides/text-generation/chat-completions-api?lang=node.js

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/46092545-054f-d946-6d77-12664638c5b4.png)

### OpenAI公式の GPT-4o に関する情報
OpenAI公式の記事、ドキュメントで、GPT-4o について書かれたページをいくつか掲載します。

#### 公式の紹介記事

●Hello GPT-4o | OpenAI
　https://openai.com/index/hello-gpt-4o/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ef3c879f-a61a-1796-2c70-55b0af5103f2.png)

#### Cookbook

●Introduction to gpt-4o | OpenAI Cookbook
　https://cookbook.openai.com/examples/gpt4o/introduction_to_gpt4o

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9a8e04f1-e6a1-ba43-cb78-6b54b9d384ac.png)

#### モデルの情報

●Models - OpenAI API
　https://platform.openai.com/docs/models/gpt-4o

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/be3dff67-2d4b-9f7e-2890-5db9d77e3070.png)

#### 価格

●Pricing | OpenAI
　https://openai.com/api/pricing/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/152b3b03-d455-5c38-d511-6667a0dd823f.png)