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

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

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

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

API Key取得

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

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

作成直後の画面で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呼び出しをしすぎて想定外の費用が発生しないように月額の上限を設定することもできます。

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

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

$ 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バージョンになるようです。

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

$ npm install

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

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

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

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

$ npm run dev

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

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

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

$ PORT=8080 npm run dev

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

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

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

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

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

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

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

    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 のオプションに何があるのかは、以下のページを見ればわかります。

回答例

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

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

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

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

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

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

    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 に対応していません。したがってバージョンも上げる必要があります。

--- 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"
   },

$ npm install

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