「またりさま」の状態遷移規則をプロンプトとして説明し、ChatGPT, GeminiおよびClaudeiにその状態遷移をシミュレートするpythonのプログラムを生成させることに成功したことについては既に報告済ですが、この記事では、その成果に基づき、Webページのプログラム(html+javascript)をChatGPT, GeminiおよびClaudeiに生成させた結果を報告します。
なお本記事の実験は、前回までの状態遷移シミュレータの生成に用いたプロンプトを紹介したら、ある方がClaudeでWebページを作ってくれたというご報告を頂いたのがきっかけで、その報告をもとに、一通りのシミュレーションのための機能を備えたWebページ実現のためにどんなプロンプトが必要かを確認する目的で実施したものです。実験のきっかけを与えてくださった三輪眞弘さんおよび（ここでは紹介できませんが）見事な出来栄えのWebページを作成された方に謝意と敬意を表します。本稿では、実験の主旨に鑑み、使用したプロンプトを紹介する一方で、どのような機能を持っているのかはプロンプトをご覧いただければわかるため、html+javascriptのプログラムを含む生成AIの回答自体の紹介は割愛させて頂き、生成されたプログラムをWebブラウザに読み込ませて実行した時の画像を示すことにします。
実際の実験は、まずChatGPTに対してプロンプトを逐次的に与えることで、目的のWebページ作成に必要なプロンプトのセットを突きとめた後、そのセットをClaude, Geminiに与えるという手順で行いました。Geminiについてだけ、色の指定を追加しましたが、それ以外は、不具合の修正指示を除けば、プロンプトとして指定した仕様上の情報は同一です。
なお、Webページ作成のプロンプトの最初でいきなり「XOR変数計算プログラム(ChatGPT)／排他的論理和計算プログラム(Claude, Gemini)を実行するWebページ」という言い方をしていますが、これは事前の文脈として、既に報告済の「またりさま」の状態遷移プログラム（python版）の生成を行っているというのが前提です。（参考として、状態遷移プログラム作成時のプロンプトも示すことにしました。）変数の数、状態遷移規則は先行するプログラムを生成した際に与えているため、ここで省略できていることに注意が必要です。（それらの情報を与えずに、いきなりこの最初のプロンプトを与えたらどうなるのかも興味深い課題かも知れませんが、ここでの実験の主旨上、検証は行いません。）
機能的には概ね同一ですが、同一のプロンプトを与えても、具体的な実現の詳細はChatGPT, Gemini, Claudeのそれぞれで異なることが確認できました。特に機能についての指示はしていても、デザインの詳細についての指示は基本的にない（一部、スライドバーの使用を指定したり、Geminiに対しては色の指定をしたりしていますが）状態での実現された画面のデザインの差異は、各生成AIの或る種の「個性」と言って良いように感じられました。（個人的な感想を言えば、デザインに関してはClaudeの結果が際立っていると感じました。）Geminiは最初の生成で、html/css/javascrptを3ファイルに分けた形で生成を行いましたので、1つのファイルにまとめるように指示をしています。
またChatGPTに逐次的にプロンプトを与えた際に、鈴と掛（ここでは手を叩く音で代替表現しました）の音を生成するのに外部のmp3を用意する回答が示されたので、プログラム内で生成するような指示をプロンプトとして追加し、Claude, Geminiへのプロンプトはそれを引き継いで、最初から当該指示を含めたプロンプトを与えています。
生成AI毎の個別のプログラム生成の過程の違いについてコメントすると、Geminiの場合には、事前に指示をして修正させた変数自体の更新タイミングとは別に、表示においても配列を一括更新するのではなく各変数毎に逐次的に更新表示するようなプログラムにならず、結果として、8つの変数が一気に変更されるために音もほとんど同時に8つの音が鳴ってしまうという奇妙な動作になったため、変数の表示を8つ一度に更新するのではなく、一つ一つ順番に更新するという指示を明示的に追加しなくてはなりませんでした。これは仕様上の整合性からすれば考えにくいことではありますが、人間であれば、変数更新のやり方は変えたのに表示の方は修正を忘れた、といったケースに該当するでしょうか？人間であれば、変数の更新が起きるたびに逐次的に更新後の状態に基づいて音を鳴らすことと、更新された変数を8つ同時に表示することは、常識的には両立しにくいと判断するかも知れませんが、そうした推論までは手が届いていないように見えます。
一方Claudeにおいても、音を鳴らすタイミングについて別の問題が起きました。こちらは変数の更新毎に逐次的に音を鳴らすことは問題なくできたのですが、更新後ではなく更新前に音を鳴らすため、XOR演算によって変数の状態が変化した場合には、見た目上、鳴っている音と表示されている状態がずれてしまうことになりました。そのため、変数の更新後の状態で音を鳴らすように明示的に指示する必要がありました。こちらもGeminiの場合と同様に、更新後の変数状態を音響的にリアライズするというのは当たり前のように思えますが、確かに明示的にそのように指示はしていない訳で、人間であれば音を鳴らすタイミングをうっかり間違えてしまった、という状況にあたるのかも知れませんが、そのことの不自然さに生成AIは恐らく気づいていないと思われ、このあたりにギャップが存在するように感じました。より一般的な解釈学的な前了解レベルに近いものであれば、明示的な推論とか事後的な適応とかではなく、事前学習における事例発生の頻度が解決してくれるかも知れませんが、こうした微妙なレベルの「常識」に準ずる判断については、現時点では限界があるように見えます。しかしながら大規模言語モデルの近年の急激な性能向上の状況からすると、今後のモデルの改良によってこうした問題についても対応できてしまうのでしょうか。
Claudeについてはもう一点、停止やリセットができるような機能を持たせたにも関わらず、演算の繰り返し回数（状態遷移のステップ数）の上限を指定するインタフェースが残っていたために削除の指示をしました。こちらについては、事前に作成させたpython版の状態遷移シミュレーションプログラムにおいて、無限ループを回避する目的でClaudeが自発的に付けた処理が残っていたことに対応して、Web版のユーザインタフェースの方も残したものと思われます。無限ループ回避のためのコードを自動的に生成するのは気が利いていますし、停止・リセットのインタフェースがあれば回数指定は冗長であり、不要であるというのは仕様の選択のレベルの問題かも知れないので、この点については問題視するまでもないのではというように感じました。
なお、いずれのプログラムでもタイトルは「またりさまシミュレータ」に変更してもらいましたが、生成AIが自分で生成したWebページのタイトルをどう名付けたかについては報告の価値があると思いますので、最後にご紹介しておきます。
- ChatGPT：XOR計算プログラム（音付き）
- Claude：XOR演算ビジュアライザー
- Gemini：排他的論理和計算（python版のまま）
デザインもですが、この点でもやはりClaudeは際立っているように感じました。ちなみに本稿の実験のきっかけとなった、ある方がClaudeに作成させたWebページは「XOR演算リズムプレーヤー」と命名されていました。私にはちょっと思いつかない、IAMASの関係者ならではの素晴らしいネーミングですが、これは恐らく作成者の創意であって、Claudeが自動的に生成したものではないと推測されます。とはいえ、こちらは機能そのままの名称ながら、頼みもしないのにClaudeがWebページの「命名」を試みたことに少しく感心したので、併せてご報告させて頂くことにしました。
（2025.3.17）
* * *
プロンプト(ChatPGTに対して)：
（参考）事前のXOR変数計算プログラム作成時のプロンプト：
「8個の[0,1]変数x1～x8について、x1とx2、x2とx3,...x8とx1というように隣り合った変数間で排他的論理和の計算を順番にします。x1とx2の計算結果でx2を更新してからx2とx3の計算をするというように順番に計算をします。変数の値の変化を表示するプログラムを作って下さい。計算は63回繰り返します。初期値は[0,0,0,1,0,1,0,1]とします。」「初期状態に戻ったらループを停止するようにしてください。」
Webページ作成時のプロンプト：
「XOR変数計算プログラムを実行するWebページを作って下さい。」「実行速度を変えられるようにしてください。」「途中で実行を停止したり、最初から実行しなおせるようにしてください。」「表示の際に音をつけてください。0は鈴の音、1は手を叩く音にしてください。」「mp3ファイルを使わずにファイル中で鈴の音と手を叩く音を設定するようにしてください。」「速度をスライドバーで変えられるようにしてください。」「0を表示する毎に鈴の音を1回、1を表示する毎に手を叩く音を1回鳴らしてください。」「ステップ毎の音の合い間は必要ありません、」「タイトルを「またりさま」シミュレータに変更してください。」
ChatGPT（2025.3.15）：最終版Webページ動作時の画像
* * *
プロンプト(Claudeに対して)：
（参考）事前の排他的論理和計算プログラム作成時のプロンプト：
「8個の[0,1]変数x1～x8について、x1とx2、x2とx3,...x8とx1というように 隣り合った変数間で排他的論理和を計算します。 x1とx2の計算結果でx2を更新してからx2とx3の計算をするというように 順番に計算をします。変数の値の変化を表示するプログラムを作って下さい。 計算は63回繰り返します。初期値は[0,0,0,1,0,1,0,1]とします。」「初期状態に戻ったらループを停止するようにしてください。」
Webページ作成時のプロンプト：
「排他的論理和計算プログラムを実行するWebページを作って下さい。 初期状態を設定できるようにしてください。 スライドバーで実行速度を変えられるようにしてください。 途中で実行を停止したり、最初から実行しなおせるようにしてください。 表示の際に音をつけてください。0は鈴の音、1は手を叩く音にしてください。 鈴の音、手を叩く音は0,1を1つ表示する毎に1回ずつ鳴るようにしてください。 音はmp3ファイルを使わずにファイル中で鈴の音と手を叩く音を設定するようにしてください。 ステップ毎の音の合い間は必要ありません、」「タイトルを「またりさま」シミュレータに変更してください。」「繰り返し回数設定は不要です。変数の更新後の状態で音を鳴らしてください。」「タイトルを「またりさま」シミュレータに変更してください。」
Claude（2025.3.15）：最終版Webページ動作時の画像
* * *
プロンプト(Geminiに対して)：
（参考）事前の排他的論理和計算プログラム作成時のプロンプト：
「8個の[0,1]変数x1～x8について、x1とx2、x2とx3,...x8とx1というように 隣り合った変数間で排他的論理和を計算します。 x1とx2の計算結果でx2を更新してからx2とx3の計算をするというように 順番に計算をします。変数の値の変化を表示するプログラムを作って下さい。 計算は63回繰り返します。初期値は[0,0,0,1,0,1,0,1]とします。」「初期状態に戻ったらループを停止するようにしてください。」
Webページ作成時のプロンプト：
「排他的論理和計算プログラムを実行するWebページを作って下さい。 初期状態を設定できるようにしてください。 スライドバーで実行速度を変えられるようにしてください。 途中で実行を停止したり、最初から実行しなおせるようにしてください。 表示の際に音をつけてください。0は鈴の音、1は手を叩く音にしてください。 鈴の音、手を叩く音は0,1を1つ表示する毎に1回ずつ鳴るようにしてください。 音はmp3ファイルを使わずにファイル中で鈴の音と手を叩く音を設定するようにしてください。 ステップ毎の音の合い間は必要ありません、」「1つのhtmlファイルにまとめてください。」「 x1とx2の排他的論理和でx2を更新してからx2とx3の計算をするというように順番に更新するようにしてください。」「変数の表示を8つ一度に更新するのではなく、一つ一つ順番に更新してください。」「0,1の表示の背景に色をつけてください。0の背景色をピンクにしてください。１の背景色を薄い水色にしてください。」「タイトルを「またりさま」シミュレータに変更してください。」
Gemini（2025.3.15）：最終版Webページ動作時の画像
0 件のコメント:
コメントを投稿