GPT-4oを使って手書きの図からHTMLを出してもらった件

Kota Mizushima
nextbeat-engineering
May 15, 2024

驚異のGPT-4o

はじめに

こんにちは。ネクストビートでエンジニアをしている水島です。

今回は、5月14日(火)にOpenAI社によって発表された、新しいモデルGPT-4oについての紹介記事となります。

既にXなどをはじめ多方面でその驚くべき能力が知られ始めているGPT-4oですが、筆者も昨日に試してあまりの凄さに驚いてばかりです。ちなみに昨日意図せずバズったポストの著者でもあります。

GPT-4oはOpenAIが従来から提供してきたGPT-4-Turboの後継とも言えるモデルです。5月14日(火)のデモで発表された内容ではリアルタイムでの音声認識・応答などが目玉になっていましたが、こちらはまだ未公開です(数週間以内には提供されるようですが)。ですので、今回は即日リリースされたチャットボットとしてのGPT-4oの話になります。

GPT-4oについてはこの記事を読まれている皆さんも色々試されているのではないかと思います。個人的な感想としては、純粋な知能レベルでもGPT-4-Turboより大幅な向上を果たしたものの、こちらについては予想の範囲にとどまったというのが正直なところです。

筆者が本当に驚いたのは、昨日バズった記事がそうであるように、その視覚認識能力の凄さと、読み取った構造を他の形式に変換する能力です。

以前からOpenAIはGPT-4Vという形で画像認識の機能を提供してはいました。しかし、細かいところを拾い落とすこともあり、正直なところを言えば「これだけでは実用に使うのは難しいな」という感想でした。

GPT-4oを試してみた結果

しかし、GPT-4oで進化した画像認識の機能は予想を遥かに上回っていました。以下は私自身のポストから抜粋した、ChatGPTへのプロンプトです。

プロンプト画像(字が汚い)

GPT-4oの発表を深夜に聞いてすぐにGPT-4o の画像認識能力が凄まじいものであることは気付いたのですが、そこでふと頭をよぎったのは「これ実は認識した画像を他の形式に変換できるのでは」というものでした。

これまでChatGPTや他のLLMを弄り倒していたせいかもしれません。深い考えはありませんでした。「これはたぶんいけそうだな」という直感に導かれて、手元のノートに数分で殴り書きしてみたのでした。

写真を見ていただければわかりますが「性別:男 or 女」とか「↑をHTMLにして」などの指示はかなり厄介なものですが、書いていたときは「きっとChatGPTはわかってくれる」と信じていました。「わかってくれる」というのは我ながら奇妙な表現ですが、そう感じたのだから仕方ありません。あえていうと、私はチャットボットの「知性」と人間の「知性」にあまり区別をつけていないのかもしれません。

ともあれ、上記の簡素なプロンプトに対して、ChatGPTが返した応答は次のようなものでした。

ChatGPTの返答

Custom Instructionsで人格設定を私好みに変えているのでフランクな返事になっていますが、それはさておき「予想通り」HTMLを出力してくれました。ただ、そうはいっても現実世界に書いた「HTMLにして」というメッセージがAIに届いたのはなんとも奇妙な感覚でした。

動作確認をして無事に以下のように表示されるのを確認して「これ凄いよ!」という素朴な気持ちを共有するためにポストしたのですが、蓋を開けてみれば予想を遥かに上回る反響でした。

作成されたHTMLを表示

今朝の時点でRTが 6000超、Likeが1.8万と私のこれまでのポストと比較しても異例の反響でした。手書き画像から本当にHTMLのフォームができてしまうのはやはり多くの人(特にHTMLを書いた経験のある人)にとってびっくりする出来事だったのでしょうか。

考えてみると手書きの画像からHTMLの構造に変換する「だけ」でも凄いことですが「男 or 女」という文字を「二つのどちらかだけを選べる」と適切に解釈してラジオボタンに変換したり「(セレクトボックス)」のような曖昧な指示を理解して(ちなみに用語としてはドロップダウンリストが正確ですが)ちゃんとその通りに変換してくれるというのは、GPT-4oがそれだけ素晴らしい知能を持っている証でもあります。

電話番号については「(数字のみ)」と書いたのに、勝手にTELという文字から忖度して「xxx-xxxx-xxxx」形式のバリデーションをするのはやり過ぎ感がありますが、AIの立場になってみれば「TELとあるのだから、数字のみという指示はミスでは」と判断したのかもしれません。

これが成功したのだから、別に変換先がHTMLである必要性もないよねということでJavaで書かれたSwingのGUIアプリに変換するのも試してみました。

プロンプト画像

先程の例を踏まえるとプロンプトすら不要だろうということで、先程の指示をグシャグシャっとボールペンで取り消しした上で「↑Swing+Javaでよろしく」とカジュアルに書いた画像だけをChatGPTに投げてみました。

返ってきたのは次のJavaコード。

ChatGPTの返答

さっと見て「まあうまいく行くだろう」と

$ java UserForm.java

を実行してみたところ、以下のように表示されました。

作成されたSwingのGUIアプリケーション

こんな調子で延々語りたいところですが、キリがなくなるので、もう一つだけ別の例を。

手書きの表をExcelに変換してもらい、各科目の平均値を取ったものを行に追加してもらいます。

プロンプト画像

ポイントは「国語」と「数学」だけ平均値を取るべきであるということです。人間にとっては文脈からこのくらいを推測するのは当たり前のことではありますが、「最後の行に科目ごとの平均もお願い」だけから推測するのは機械にとっても人間にとっても自明ではありません。

結果は次のようになりました。

ChatGPTの応答
生成された.xlsxファイルを開いた結果

予想通り、といったところですが、やはり画像から複雑な文脈を読み取る能力は凄まじいものがあります。

まとめ

これまで、ChatGPTの活用といったとき、もっぱら入力が文字であることが想定されていたように思います(ClaudeやGeminiのマルチモーダル機能を既に活用されていた方も少なくないかもしれませんが)。これは仕方ないといえば仕方ないのですが、一方で振り返ったとき「生成AI」の応用範囲がどうしても限定的にならざるを得なかったとも言えます。

これからは、今回の例のように「画像」を入力とする応用範囲が広がっていきそうです。もちろん、入力元の画像は手書きの文字や図に限りません。状態遷移図を元にプログラムを生成することもできるでしょうし、複雑な業務フローを図にしたものからプログラムの大枠を生成することもできるかもしれません。

GPT-4oはGPT-4と違い無料(一日辺りの制限があるものの)であることも見逃せません。これまで普通のChatGPTユーザーが触れられたのはGPT-3.5であり、ChatGPT Plusに課金しているユーザーから見れば性能で言えばかなり低いものでした。これからはカジュアルにChatGPTを使うユーザーもGPT-4並、あるいはそれ以上の「アシスタント」を使えるのですから、世の中の「ChatGPT」の基準もGPT-4oになっていくでしょう。

そんな激変していく世の中ですが、この記事がGPT-4o活用のきっかけになれば幸いです。

We are hiring!
本記事をご覧いただき、ネクストビートの技術や組織についてもっと話を聞いてみたいと思われた方、カジュアルにお話しませんか?

・今後のキャリアについて悩んでいる
・記事だけでなく、より詳しい内容について知りたい
・実際に働いている人の声を聴いてみたい

など、まだ転職を決められていない方でも、ネクストビートに少しでもご興味をお持ちいただけましたら、ぜひカジュアルにお話しましょう!

🔽申し込みはこちら
https://hrmos.co/pages/nextbeat/jobs/1000008

また、ネクストビートについてはこちらもご覧ください。

🔽エントランスブック
https://note.nextbeat.co.jp/n/nd6f64ba9b8dc

--

--