GPT-4oのAPIをプロダクトに組み込んでみた

GPT-4oが公開されて1か月ほどが経ってしまいましたが、処理速度が上がって安くなったOmniを使わない理由はないのでプロダクトに組み込んでみました
GPT-4oのAPIを呼び出しけどぱっと仕様を知りという先週の私みたいな方に、GPT-4oの呼び出し方を共有します
NodejsのAxiosでサンプルは書いてありますが非常にシンプルなHTTPリクエストなのでどんな言語にも転用が簡単かと思います

では早速

説明させる画像

ソースコード

import axios from "axios";

const response = await axios.request({
  method: "post",
  url: "https://api.openai.com/v1/chat/completions",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
  },
  data: {
    model: "gpt-4o",
    temperature: 0.2,
    max_tokens: 1024,
    messages: [
      {
        role: "system",
        content: [
          {
            type: "text",
            text: "画像に映ったものを日本語で説明してください",
          },
        ],
      },
      {
        role: "user",
        content: [
          {
            type: "image_url",
            image_url: {
              url: "https://images.unsplash.com/photo-1579014134953-1580d7f123f3",
              detail: "low",
            },
          },
        ],
      },
    ],
  },
});

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

GPT-4oによる説明

この画像には、黒い革製の財布が写っています。財布の中には紙幣が数枚入っています。財布はテーブルの上に置かれています。

解説

https://api.openai.com/v1/chat/completions

これがGPTを使うときのエンドポイントです
OpenAIはこういった会話するAPIのほかにも特徴ベクトルに変換したり翻訳したりするエンドポイントがありますね

Authorization: Bearer ${process.ENV.OPENAI_API_KEY},

OpenAI APIのAPI KeysページでAPIキーを発行してください
最近プロジェクトにAPIキーを紐づけて複数メンバーで共有できるようになったのはありがたいですね

model: "gpt-4o"

おおむねここを変えればほかのモデルも試せると思いますが gpt-4-vision-preview のソースコードそのままでは動かなかったんですよね
モデルごとに仕様は確認したほうがいいかもですが gpt-4o に関しては上記のコードでOKです

temperature: 0.2

回答のランダムさを抑えています
システムに組み込むときはあんまり挙動が変ってほしくないので低めに設定します
0.8とかにすると創造的になるらしいです

role: "system"
role: "user"

GPTに向けた命令はsystemロール、ユーザーからの入力はuserロールという感じですね
GPTからの返事を含めたやり取りのつづきを行う場合はGPTからの返答をassistantロールで含めてあげると会話を続けてくれるらしいです（すみません試していません）

type: "image_url"

gpt-4-vision-preview の時も使えた画像をGPTに渡すフォーマットですね
アクセス可能なURLを送ればそれを入力として扱ってくれます

detail: "low"

low か high を選べます
GPTが画像を見るときの解像度ですが low でも文字とか認識できたりするんで high にしたことがないです
もちろん high のほうが料金高いですね

response.data.choices[0].message.content

GPTの返答はちょっと複雑な構造の中に入っています
APIのレスポンスはこんな感じです

{
    "id": "chatcmpl-9ZoyNRNCq78YEwKUqV5XlTGd6H5sa",
    "object": "chat.completion",
    "created": 1718324447,
    "model": "gpt-4o-2024-05-13",
    "choices": [
        {
            "index": 0,
            "message": {
                "role": "assistant",
                "content": "この画像には、黒い革製の財布が写っています。財布の中には紙幣が数枚入っています。財布はテーブルの上に置かれています。"
            },
            "logprobs": null,
            "finish_reason": "stop"
        }
    ],
    "usage": {
        "prompt_tokens": 107,
        "completion_tokens": 39,
        "total_tokens": 146
    },
    "system_fingerprint": "fp_aa87380ac5"
}

いやぁ生成AIは楽しいですね