GPTは「からあげ」と「とり天」を見分けられるのか。出たばかりのAzure Open AIのGPT-4 Turbo with Visionを試す

一昨日(2023/12/12)、Azure Open AIでVision API（GPT-4 Turbo with Vision）が使えるようになりました。

Azure Open AIのVision APIをJavaScriptから触ってみつつ、
皆さんが気になっている GPTは「からあげ」と「とり天」を見分けられるのかを見ていきます。

• 検証1: GPTはからあげの画像を説明できるのか？
• 検証2: GPTはとり天の画像を唐揚げではなくとり天だと認識できるのか？

を試してみます。気になりますね。
（ からあげ帝国アドベントカレンダー の記事なので 「からあげとAI」がマスト な感じですね。）

インターネット上にも気になってる人は多数（？)

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1035213620

「からあげ」と「とり天」

唐揚げは皆さん知ってると思いますが、とり天はどうでしょう。

農林水産省のページに載っている情報によると 「とり天は、骨のない鶏肉を食べやすい大きさに切り、天ぷら衣をつけて揚げた料理です。とり天は、唐揚げよりさっぱりしていて、ポン酢などを付けて食べます。」とのことです。天ぷら粉かどうかなのかな、割と難しい。

↑の画像の 「からあげ」と「とり天」どっちがどっちか割と難しいですよね。

判別できるのでしょうか。

AzureでGPT-4 Turbo with Visionの準備

Azure Open AIでOpenAIのVison APIを使ってみます。
Teachable Machineなどで、からあげとり天判定の独自モデルを作るわけではなく、OpenAIのモデルを利用します。

使えるリージョン

公式ドキュメントを見ると、現時点だとオーストラリア東部/スウェーデン中部/スイス北部/米国西部の4つのリージョンで使える模様です。

ということでWestUS（米国西部）でOpenAIのインスタンスを作成してみます。

モデルのデプロイ

モデルのデプロイをします。モデルはgpt-4を選択し、モデルバージョンはvision-previewを選択、デプロイ名は任意の名前です。（n0bisuke-visionにしました。）

Node.jsからAPIを叩いてみる

ライブラリのインストールをして進めます。

$ npm i @azure/openai

アクセス情報

他のOpenAIのAPIを使う時と同様でAPIキー、エンドポイント、デプロイ名を使ってアクセスします。

以下のコードで実行

const { OpenAIClient,AzureKeyCredential } = require("@azure/openai");

const endpoint = `https://XXXXXXX.openai.azure.com/`; //エンドポイント
const azureApiKey = `YYYYYYYYYY`; //APIキー
const deploymentId = "ZZZZZZZZZZ"; //デプロイ名 さっきn0bisuke-visionにしてた

const url = `https://i.gyazo.com/a7cba41711444c05b059de7f372bf0ac.png`; //読み込ませたい画像

async function main(){
    const client = new OpenAIClient(endpoint, new AzureKeyCredential(azureApiKey));
    const messages = [
        {role: "system", content: "You are a helpful assistant."},
        {role: "user", content: [
            {type: "text", text: "Describe this picture:" },
            {
                type: "image_url",
                imageUrl: {
                    url,
                    detail: "auto"
                }
            }
        ]}
    ];
    const result = await client.getChatCompletions(deploymentId, messages);
    console.log(`Chatbot: ${result.choices[0].message?.content}`);
}

main().catch((err) => {
  console.error("The sample encountered an error:", err);
});

まずは試しに犬を読ませてみた

ぱくたその犬の画像を読ませてみました。

https://www.pakutaso.com/20231006284post-48113.html

The picture shows a cute, light brown toy poodle sitting in front of a

といい感じに説明を返してくれました。 いいですね。。

途中で文章が途切れてる雰囲気ありますが、max_tokensの指定をしてないからだと思います。

プロンプトをかえてみたら返事が遅くなりすぎた

日本語にしつつ、丁寧に説明してねと。してみました。

    const messages = [
        {role: "system", content: "あなたは画像の説明が上手い優秀なアシスタントです。"},
        {role: "user", content: [
            {type: "text", text: "この画像に何が写っているのかを小学生にも分かるように丁寧に説明をしてください。:" },
            {
                type: "image_url",
                imageUrl: {
                    url: url,
                    detail: "auto"
                }
            }
        ]}
    ];

ものすごく色々と考えてくれているのかずっと返事がないまま止まっていました。たぶんStreamのAPIを使って実装すると良い気がします。

やっと帰ってきたと思ったら

nobisuke@nobisuke-PS5 azuregpt4v % node test.js
Chatbot: この写真は、パソコンに向かっている

あっさりだなおい、、

これはトークン設定が大事ですね。たぶん省略されてるだけで本当は長い文章の回答があるんだと思います。

検証1.「からあげ」の画像を読み込ませてみる

いよいよ「からあげ」の画像の判定です。こちらもぱくたそさんの画像になります。

https://www.pakutaso.com/20150240035post-5143.html

プロンプトはこんな感じ

You are an excellent image description assistant. You answer carefully so that even a blind person can understand what the image looks like. All your answers will be given in Japanese.
(あなたは優秀な画像説明アシスタントです。目の見えない人にも画像の様子が伝わるように丁寧に回答します。あなたの回答は全て日本語で回答します。)

読ませたら

$ node test.js
Chatbot: 黒い四角い皿の上にカラッと揚げられたカラアゲが何個か盛り付けられています。カラアゲは金茶色で、衣がふっくらとしていて外はカリッとしてそうです。皿の端にはレモンの薄切りが一切れと、緑のレタスの葉が少し添えられており、彩りを加えています。下に敷かれたキッチンペーパーは油を吸収していて、カラアゲをより美味しそうに見せています。全体の雰囲気はシンプルでありながら、食欲をそそるものになっています。

素晴らしい。。

検証2.「とり天」の画像を読み込ませてみる

プロンプトは「からあげ」と同様です。

画像はこちらで農林水産省さんのページにあったものを使っています。

https://www.maff.go.jp/j/keikaku/syokubunka/k_ryouri/search_menu/menu/toriten_oita.html

さて結果は。。。

・
・
・

$ node test.js
Chatbot: 白い皿に盛り付けられた天ぷらです。軽い金黄色の衣がサクサクとした感じをうかがわせ、熱々の出来立てに見えます。いくつかの天ぷらは厚みがあり、具が大きいことを示しています。一方で、他の何片かは、細かい具が入っているように見えます。どれも外側はカリカリしながら、中は柔らかそうです。皿の隅には、小さな茶色の器に入ったマスタードらしきものが添えられており、味のアクセントになっていそうです。天ぷらの下にはサッと摺られたキッチンペーパーが敷いてあり、余分な油を吸い取りつつも盛り付けの美しさを保っています

・
・
・

・
・
・

すごいですね。「からあげ」ではなく「天ぷら」だと認識しています。

ただ中身が鶏肉かどうかの判断はできてなさそうなので、とり天かどうかまでは分かってなさそうです。
まぁでもこれは人間が見てもわからないと思われます。

おまけ: からあげ先生の画像を読み込ませてみる

かの有名なからあげ先生の画像を読み込ませてみます。

Chatbot: 画像には、ニコニコとした表情をした白いピロー（枕）のキャラクターが描かれています。キャラクターの頭の上には赤い帽子のような形をした物が載っており、その右端には茶色のヘタがついています。これはおそらくリンゴを模した帽子と思われます。キャラクターの顔はシンプルで、閉じた目に幸せそうな笑顔を見せており、左側には目尻に近い少し離れた位置に長いまつげが三本描かれています。また、キャラクターは右口元から出ている白い枝状の物を咥えており、その端には褐色の装飾が付いていて、まるで木の枝を咥えて

説明途中でトークン切れな感じでしたがだいぶ丁寧に説明してくれてますね！

まとめ

優秀ですね。

「天ぷら」か「からあげ」かは判定してくれそうな感じでした。

ここまで来て思ったのは天ぷらとからあげの対比構造な気がしたので、「とり天」「からあげ」ではなく「とり天」「とりから」を判定できるかの方が概念的に良かったのかもしれません。

まぁどちらかが「とり天」、どちらかが「からあげ」という2択の判定ゲームだとしたらちゃんと判定してくれそうな雰囲気でした。

少なくとも料理解像度が低い僕がとり天の画像だけ渡されたらからあげと答えそうな気がしたので僕より優秀だと思います。

とり天食べたくなってきました。