OpenAIのAPIを使ったチュートリアルアプリを試してみる

ChatGPTのAPIを使う練習をしました。

OpenAIのサイトに公式にアプリのチュートリアルがあります。

https://platform.openai.com/docs/quickstart/build-your-application

これをなぞるだけですが、私が作業した内容を書いておきます。


# API Key取得

まずAPI Keyが必要です。API KeyはOpenAIのサイトから取得します。ChatGPTを使う時と同じようにログインしていることが必要です。

https://platform.openai.com/account/api-keys

ログインして上記URLにアクセスするとAPI Keyを取得できる画面になります。「+ Create new secret key」をクリックして、適当な名前を付けて「Create secret key」をクリックすればキーを作成できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/91a6c22f-21d4-8ad2-f898-76670fbe5490.png)

作成直後の画面でKeyが表示されますので、それをコピペしておいてください。 `sk-...` というような文字列です。Keyを確認できるのはこのタイミングだけです。見落としたり紛失したら、もう一度Keyを作り直せばよいです。


# 支払い設定

APIを使うにはお金が必要です。ChatGPTに課金している人はAPIも5ドル分の無料利用枠があるようです。課金していない人は無料枠がなく、最初にクレジットカードの登録が必要です。このあたりの事情は今後頻繁に変わるかもしれないので、ご注意ください。

クレジットカード登録が必要なのにしていない場合は、API Keyを使ってAPI呼び出し可能ですが、HTTPステータスコード429で

> You exceeded your current quota, please check your plan and billing details.

というメッセージが返ってきます。

さきほどAPI Keyを作成した画面の左のメニューにあるBillingからクレジットカード情報を登録できます。API呼び出しをしすぎて想定外の費用が発生しないように月額の上限を設定することもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/c0ee148b-7d99-3155-bcf0-20c88e048f0e.png)


# アプリのソースコードをセットアップ

まず、ソースコードをダウンロードします。

```bash
$ git clone https://github.com/openai/openai-quickstart-node.git
$ cd openai-quickstart-node
```

ソースコードはNext.js(JavaScript)で書かれています。

`git clone https://github.com/openai/openai-quickstart-python.git` にすればPythonバージョンになるようです。

次に、必要なパッケージをインストールします。

```bash
$ npm install
```

最初に作成したAPI Keyを設定します。ダウンロードしたソースコードの中に `.env.example` というファイルがありますので、これを `.env` という名前にコピーして編集します。もしくは、次のようにしてもよいです。

```bash
$ echo 'OPENAI_API_KEY=sk-...' > .env
```


# アプリを起動してブラウザで確認

以下のコマンドを実行すると3000番ポートで待ち受けが始まります。

```bash
$ npm run dev
```

ブラウザで http://localhost:3000 にアクセスするとアプリにアクセスできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/db04dbae-4017-79fa-c379-3373d9af22aa.png)

こんな画面になります。自分のペットにスーパーヒーローのようなかっこいいい名前を提案してくれるようです。

ポート番号を変えたい場合は次のようにします。

```bash
$ PORT=8080 npm run dev
```

ChatGPTに投げているプロンプトは `pages/api/generate.js` の最後にある `generatePrompt` という関数に書いてあります。

https://github.com/openai/openai-quickstart-node/blob/master/pages/api/generate.js


# ちょっとコードをいじってみる その1

`pages/api/generate.js` をいじってみます。

`generatePrompt` を以下のようにしてみました。

```javascript
function generatePrompt(keyword) {
  return `宇宙の話題です。

${keyword}とはどういう天体ですか？100文字程度で説明してください。`;
}
```

`createCompletion` の箇所にオプションとして `max_tokens` を指定しました。これがないと短すぎる回答しか来なかったので少し大きめの値を設定しました。

```javascript
    const completion = await openai.createCompletion({
      model: "text-davinci-003",
      prompt: generatePrompt(animal),
      temperature: 0.6,
      max_tokens: 500,
    });
    res.status(200).json({ result: completion.data.choices[0].text });
```

`createCompletion` のオプションに何があるのかは、以下のページを見ればわかります。

https://platform.openai.com/docs/api-reference/completions/create

回答例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/fbbcef7b-f171-b906-4223-eb243410a5ab.png)

ちょっとわけのわからない回答をしている。。。

※HTMLソースはいじっていないのでボタンの意味がずれていますが、質問内容はあくまで `${keyword}とはどういう天体ですか？100文字程度で説明してください。` です。


# ちょっとコードをいじってみる その2

モデルが `text-davinci-003` という名前になっていたので、これを `gpt-3.5-turbo` に変えてみることにします。ただしここを変更するには、モデル名だけではなくAPIが変わるようです。

https://platform.openai.com/docs/models/model-endpoint-compatibility

チュートリアルアプリでは `/v1/completions` というエンドポイント(JavaScriptのライブラリでのメソッド名は `createCompletion`)にアクセスしていましたが、 `/v1/chat/completions` (JavaScriptのライブラリでのメソッド名は `createChatCompletion`)に変える必要があります。メソッドの引数も変わります。

コードは次のようになりました。

```javascript
    const completion = await openai.createChatCompletion({
      model: "gpt-3.5-turbo",
      messages: [{
        role: "user",
        content: generatePrompt(animal),
      }],
      temperature: 0.6,
      max_tokens: 500,
    });
    res.status(200).json({ result: completion.data.choices[0].message.content });
```

チュートリアルアプリが読み込んでいたopenaiのライブラリはバージョンが少し古くて `createChatCompletion` に対応していません。したがってバージョンも上げる必要があります。

```diff
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "next": "^13.1.1",
-    "openai": "^3.1.0",
+    "openai": "^3.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
```

```bash
$ npm install
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/d85eaefc-dbe5-e495-9b08-ed096e2b96eb.png)

モデルを変えることで少しマシになりました。