サイコロの展開図を書かせよう

概念的な理解と実装

　ChatGPTにSVGでテキスト出力を行わせることによって、絵を描くことが出来る（ChatGPTにグラフィックを書かせる）。

　ChatGPTはインターネット上の膨大なデータで学習を行わせているとのことだが、基本的には言語モデルであるため、学習の大半はテキストベースのものであると推測できる。なので「絵が描ける」といってもそれっぽい絵でお茶を濁す程度のものなのではと自分は考えていた。

　テキストデータオンリーでの学習と考えた場合、例えば目が見えず、触覚もない人に言葉だけで物体の形を教えたとする場合、定義は覚えられるかもしれないが、概念的なことは理解できないだろう。言葉で「これはこういう形のものですよ」と教えたとしても、それを元に絵を描くのは難しいのではないか？

　そう考えて、今回はChatGPTが定義から絵を上手に書くことが出来るのかを調べてみたいと思う。

サイコロの展開図1（GPT-3.5）

　サイコロの展開図を書くように指示してみる。

ChatGPTへの指示

サイコロの展開図を描いて、svg形式のテキストで出力してください章

ChatGPTの応答

下は、SVG形式のテキストで描かれたサイコロの展開図の例です。このコードをテキストエディタにコピーし、.svgの拡張子で保存することで、SVGファイルとして保存できます。

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">

  <rect x="0" y="0" width="200" height="200" fill="#fff" />

  <rect x="20" y="20" width="80" height="80" stroke="#000" stroke-width="4" fill="#fff" />
  
<rect x="100" y="20" width="80" height="80" stroke="#000" stroke-width="4" fill="#fff" />
  
<rect x="20" y="100" width="80" height="80" stroke="#000" stroke-width="4" fill="#fff" />
  
<rect x="100" y="100" width="80" height="80" stroke="#000" stroke-width="4" fill="#fff" />
  
<circle cx="50" cy="50" r="10" fill="#000" />
  <circle cx="50" cy="80" r="10" fill="#000" />
  
<circle cx="50" cy="110" r="10" fill="#000" />
  <circle cx="50" cy="140" r="10" fill="#000" />
  
<circle cx="80" cy="50" r="10" fill="#000" />
  <circle cx="80" cy="80" r="10" fill="#000" />
  
<circle cx="80" cy="110" r="10" fill="#000" />
  <circle cx="80" cy="140" r="10" fill="#000" />
  
<circle cx="110" cy="50" r="10" fill="#000" />
  <circle cx="110" cy="80" r="10" fill="#000" />
  
<circle cx="110" cy="110" r="10" fill="#000" />
  <circle cx="110" cy="140" r="10" fill="#000" />
  
<circle cx="140" cy="50" r="10" fill="#000" />
  <circle cx="140" cy="80" r="10" fill="#000" />
  
<circle cx="140" cy="110" r="10" fill="#000" />
  <circle cx="140" cy="140" r="10" fill="#000" />
</svg>

このコードは、サイコロの展開図を示しています。四角形の輪郭には黒い線が引かれ、内部は白で塗りつぶされています。丸い点はサイコロの目を表しており、それぞれが黒く塗りつぶされています。このコードを保存し、Webブラウザーで開くことで、SVG画像を表示することができます。

相変わらず小気味よく返答してくれるが、ChatGPTの特徴である「堂々と間違いを語る」をやってくれた。
SVGのグラフィックを確認すると以下の通りとなる。（以降、SVGのテキストは表示せず、グラフィックのスナップショットのみ表示する）

展開図の概念が人類とは少し異なるようだ

ChatGPTへの指示

展開図は、切り取って折り曲げると立方体が出来るものです。この図面はうまく組み立てられません。正しく書き直してください

　どうやら、「サイコロ＝いくつかの四角の面と目を表す点が描かれたもの」という概念はあるようだ。ただ、どう表現してよいか分からないようにも見える。それで、立方体に関する概念がどんなものなのかを確認してみた。

ChatGPTへの指示

立方体の展開図を書いてください

なるほど、どうやら立方体が6枚の正方形から成り立っているという概念はあるようだ。このSVGとともに以下のコメントもついていた。

ChatGPTの応答

この展開図には、正方形が描かれていますが、それぞれが一部重なっているため、正しい形状を形成するように配置されています。また、各面には、線で輪郭が描かれています。これらの線を折り曲げることで、立方体を形成することができます。

展開図を印刷し、切り取り、折り曲げると、以下のように立方体を作ることができます。

一生懸命何かしらを表現しようとしているのはよくわかるが、やはりChatGPTに図形概念は難しいのかもしれない。最後にもう一つだけお願いしてみた。

ChatGPTへの指示

サイコロを斜めから見た投影図を書いてください

もはやサイコロでも何でもない何かが出来上がった。ChatGPTには概念から絵を描く能力はないようだ...

と結論に至るのはまだ早い！！

サイコロの展開図2（GPT-4）

　ChatGPTに月額20ドル支払うと、ChatGPT Plusを使えるようになる。ChatGPT Plusはリクエスト回数に制限があるとはいえ、GPT-4を使用することが出来る。

　GPT-4は学習元となっているデータも多く、応答の際に自信満々に間違いを言う確率が40％も低くなっているという。また、学習のためにグラフィックを使用しているとのことだ。

　GPT--4を使用して同じ命題をクリアしてもらおう。

ChatGPTへの指示

サイコロの展開図を描いて、SVG形式のテキストを出力してください

GPT-4は回答が表示されるのが非常に遅い。大量のデータからじっくり考察しているようにも思える。

ChatGPTの応答

サイコロの展開図を描くには、SVG形式のテキストで構成された図形を出力する必要があります。以下に、簡単なサイコロの展開図を示すSVGテキストを提供します。これをウェブページやSVGエディタに貼り付けることで、サイコロの展開図を表示できます。

html
<svg xmlns="http://www.w3.org/2000/svg" width="210" height="140" viewBox="0 0 210 140">
  
<!-- 外枠 -->

  <rect x="1" y="1" width="208" height="138" fill="none" stroke="black" />

  <!-- サイコロの各面 -->

  <rect x="30" y="30" width="30" height="30" fill="white" stroke="black" />

  <rect x="60" y="30" width="30" height="30" fill="white" stroke="black" />
  
<rect x="90" y="30" width="30" height="30" fill="white" stroke="black" />
  
<rect x="60" y="60" width="30" height="30" fill="white" stroke="black" />
  
<rect x="60" y="0" width="30" height="30" fill="white" stroke="black" />
  
<rect x="60" y="90" width="30" height="30" fill="white" stroke="black" />
  
<!-- 数字のドット -->
  <!-- 1 -->
  
<circle cx="75" cy="15" r="2" fill="black" />
  
<!-- 2 -->
  
<circle cx="45" cy="45" r="2" fill="black" />
  
<circle cx="75" cy="75" r="2" fill="black" />
  
<!-- 3 -->
  
<circle cx="105" cy="45" r="2" fill="black" />
  
<circle cx="135" cy="60" r="2" fill="black" />
  
<circle cx="105" cy="75" r="2" fill="black" />
  
<!-- 4 -->
  
<circle cx="15" cy="45" r="2" fill="black" />
  
<circle cx="15" cy="75" r="2" fill="black" />
  
<circle cx="45" cy="45" r="2" fill="black" />
  
<circle cx="45" cy="75" r="2" fill="black" />
  
<!-- 5 -->
  
<circle cx="75" cy="105" r="2" fill="black" />
  
<circle cx="45" cy="105" r="2" fill="black" />
  
<circle cx="75" cy="135" r="2" fill="black" />
  
<circle cx="45" cy="135" r="2" fill="black" />
  
<circle cx="60" cy="120" r="2" fill="black" />
  
<!-- 6 -->
  
<circle cx="135" cy="45" r="2" fill="black" />
  
<circle cx="135" cy="60" r="2" fill="black" />
  
<circle cx="135" cy="75" r="2" fill="black" />
  
<circle cx="165" cy="45" r="2" fill="black" />
  
<circle cx="165" cy="60" r="2" fill="black" />
  
<circle cx="165" cy="75" r="2" fill="black" />

</svg>

このSVGテ

回答が途中で止まってしまったが、問題ない。6つのrectとそれぞれの目の数に応じたcircleを書いてくれているようだ。これは期待できる。

　おしい。展開図はうまくいっている

ChatGPTへの指示

目の位置が面の外側に描かれています。修正してください

お前もダメな子なのか？もう一度チャンスをやろうと思う。

ChatGPTへの指示

1から6の目はrectで描かれたそれぞれの面の内側に描かれなければなりません。修正してください

！！！！なんと！！！！！やればできる子だったではないか！！

ChatGPTへの指示

6の目の位置が右側にズレてます。修正してください

完ぺきではないか！

ChatGPTへの指示

良いですね。外枠は必要ないので消してください。一の目は少し大きめに描いて、色を赤にしてください

ちなみに、背景が白なので、分かりにくいが、サイコロの展開図以外の部分は透明色になっている。透明色部分を緑色にすると、以下のようになる。

　素晴らしいの一言に尽きる。サイコロは通常、反対側の目を足すと7になる。この法則もきちんと把握しているようだ。ChatGPTは立方体の展開図に対する概念を持ち合わせており、それぞれの面が立方体のどの位置を表しているかも理解しているようだ。

　最初は目の位置がうまく面に乗っていなかったが、それでも指摘することによりこの面にはこの目のドットを描くという自分の中にある認識に従って書き直してきた。また、6の目だけずれていたが、こちらもどの面のグラフィックを描いているつもりだったかは後の指示で適切な位置に変更できたことにより、明らかになった。

　もともと「サイコロの展開図」という知識は持っていなかったように思える。ChatGPTが持ち合わせていた知識は「立方体の展開図」と「サイコロは立方体」と、「立方体のそれぞれの面に目を表すドットが打ってあること」さらに、「反対側の面を足すと7になる」という法則だったと思われる。それらを組み合わせて、きちんとした回答を出せたことは驚異的だと思う。

　さて、展開図はできたので、今度は投影図を書かせてみよう。

ChatGPTへの指示

このサイコロを斜め上から見た投影図を描いてください

透明部分は緑色に変更している。

ChatGPTへの指示

変な投影図です。面が六角形に見えるところがあります

おしいな。2の面と3の面がつながれば、少し間延びしているが、立体的に見えるんだが...

ChatGPTへの指示

2の面と3の面が正しく接続されていません

うむ、悪化してしまったようだ。投影図についてはあきらめよう。最後に少し意地悪な問題を出してみる。

ChatGPTへの指示

3の目と4の目が見えるように描いてください。

これは不可能な注文だ。3と4の面はちょうど反対側にあるので、投影図で両方を描くことはできない。これで、3と4が隣り合っているサイコロを書こうとしたら、ChatGPTはサイコロの形の概念を理解していないことになるが...

何かわけのわからない図を描いた。ただ、わけのわからない図ではあるが、以下のようなソースになっている。

ソース

このグラフィックでは1,2,3,4の目を描こうとしている。3と4が隣り合っている図を描いてしまえばリクエストには答えられたのかもしれないが、それではサイコロの目の配置と矛盾するため、1,2,3の投影図と3の反対側の4の目を何とかして書こうとしたのではないかと考えられる。どこをどう描こうとしたかを理解したくて、目の色を変えてみた。

でもやっぱり理解はできなかった

まとめ

さっき、サイコロの展開図完成時点で散々語ったので一言だけ。GPT-4やべぇ。以上。

このブログを検索

ChatGPTのある生活