見出し画像

ChatGPTにSVGでお絵描きさせる (GPT-3.5の場合)

temoki / Tomoki Kobayashi

前回のnoteでChatGPTにSVGでお絵描きをさせてみて、その結果に驚き、GPTの今後の可能性を強く感じた。

この時はモデルとしてGPT-4を使用したが、はたしてGPT-3.5の場合はどうなのだろうか？テキストコミュニケーションにおいては、GPT-4の方が圧倒的に優れているが、クリエイティブの点ではどうなのだろうか？

そんな疑問から、前回のGPT-4への問いとほぼ同じ流れでGPT-3.5にもSVGでお絵描きさせてみることにした。

(私) svgのフォーマットを知っていますか？はいかいいえで答えてください。

(ChatGPT) はい、SVG（Scalable Vector Graphics）のフォーマットについて知っています。

(私) では、svgのコードをあなたに書いてもらいます。まずは正方形のsvgコードを書いてみてください。

(ChatGPT) 以下は正方形のSVGコードの例です。
このコードは、200x200ピクセルのサイズの正方形を描画しています。正方形の色は青（blue）に設定されています。<svg>要素でSVGのルート要素を定義し、<rect>要素で正方形を描画しています。

GPT-4と同じ結果
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <rect width="200" height="200" fill="blue" />
</svg>

(私) 流石ですね。少し難しくします。黄色の星型の形状をsvgコードで描いてください。

(ChatGPT) 黄色の星型の形状を描画するためのSVGコードは以下のようになります。
このコードでは、<polygon>要素を使用して星型を描画しています。points属性には、各頂点の座標を指定します。上記のコードでは、5つの頂点を持つ星型を描画しています。
座標は、x座標とy座標の組み合わせで指定され、スペースで区切られています。上記のコードでは、星型の各頂点の座標を指定しています。
この星型の形状は、黄色（yellow）で塗りつぶされています。

GPT-4より綺麗な星型
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="yellow" />
</svg>

(私) いいですね。次は少しクリエイティブです。ひよこの形をsvgで描いてください

(ChatGPT) ひよこの形をSVGで描画するためのコードは以下のようになります。
このコードでは、<path>要素を使用してひよこの形状を描画しています。d属性には、パスの指示を含むパスデータを指定します。Mは移動（Move）を表し、Cはキューブベジェ曲線（Cubic Bezier Curve）を表します。
ひよこの体の部分は、2つのキューブベジェ曲線を使用して描画されています。体の内部は黄色（yellow）で塗りつぶされています。
ひよこの目は、2つの<circle>要素を使用して描画されています。cx属性とcy属性は、円の中心のx座標とy座標を指定します。
ひよこの口は、<path>要素を使用して描画されています。d属性では、2つの点を結ぶ直線を描画しています。stroke属性とstroke-width属性は、線の色と太さを指定します。
以上がひよこの形状を描画するためのSVGコードです。

目・クチバシは描いてくれた。左右対称で無機質。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M100,10 C30,80 30,150 100,190 C170,150 170,80 100,10 Z" fill="yellow" />
  <circle cx="75" cy="70" r="10" fill="black" />
  <circle cx="125" cy="70" r="10" fill="black" />
  <path d="M95,100 C95,110 105,110 105,100" stroke="black" stroke-width="2" />
</svg>

(私) 黄色い生き物には見えますが、少しひよこらしくありません。足が足りないのではないでしょうか？

(ChatGPT) おっしゃる通り、ひよこの特徴的な足を追加しましょう。以下は、足を追加したひよこの形状を描画するための修正済みのSVGコードです。
この修正済みのコードでは、新たに2つの足を描画するために2つの<path>要素を追加しました。足はキューブベジェ曲線を使用して描画されており、ひよこの体の下部から伸びています。
ひよこの形状は黄色（yellow）で塗りつぶされ、目や足は黒（black）で描画されています。
これでひよこの形状に足が追加されました。ご希望のイメージに近づけることができましたでしょうか？

足の位置がおかしい
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M100,10 C30,80 30,150 100,190 C170,150 170,80 100,10 Z" fill="yellow" />
  <circle cx="75" cy="70" r="10" fill="black" />
  <circle cx="125" cy="70" r="10" fill="black" />
  <path d="M95,100 C95,110 105,110 105,100" stroke="black" stroke-width="2" />
  <path d="M75,135 C65,155 85,155 75,135 M125,135 C115,155 135,155 125,135" stroke="black" stroke-width="2" />
</svg>

(私) 少しずつひよこに近づいてきましたが、まだひよこには見えません。何がいけないのか考えて工夫して書き直してみてください

(ChatGPT) 申し訳ありません、ひよこの形状をより正確に表現するため、以下の修正済みのSVGコードをご提供します。
この修正済みのコードでは、さらに足の位置や形状を修正しました。足は直線とキューブベジェ曲線を使用して描画され、ひよこの体の下部から伸びています。
また、足の位置を微調整し、よりひよこらしい見た目を目指しました。
このコードを使用してSVGを描画すると、よりひよこの形状に近い結果が得られると思います。ご確認ください。

うーん、面白くない。クリエイティブを感じない。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M100,10 C30,80 30,150 100,190 C170,150 170,80 100,10 Z" fill="yellow" />
  <circle cx="75" cy="70" r="10" fill="black" />
  <circle cx="125" cy="70" r="10" fill="black" />
  <path d="M95,100 C95,110 105,110 105,100" stroke="black" stroke-width="2" />
  <path d="M75,130 C75,140 60,150 75,160" stroke="black" stroke-width="2" />
  <path d="M125,130 C125,140 140,150 125,160" stroke="black" stroke-width="2" />
</svg>

これ以上は良くならないと感じたのでここで実験終了。

星の形状を歪みない正多角形として描いたり、ひよこは左右対称であったりと、無機質で面白みのない結果となった。それはとても機械的で前回GPT-4に感じた人間らしさを感じない。

GPT-3.5 vs GPT-4

逆にGPT-4のあの人間らしさ（それは歪み、有機的な曲線、非対称性から感じるもの）はどこから生まれているのだろうか？どのような学習が影響しているのだろうか？GPT-3.5は大量のウェブサイトや書籍のテキストデータから学習されていることは公表されているが、GPT-4の学習データは非公開である。

非公開ではあるものの RLHF (Reinforcement Learning from Human Feedback) という人からのフィードバックによる強化学習が追加されていることは公表されている。GPTが生成した結果に対して、その良し悪しを人間がフィードバックすることで回答の精度を向上させるという仕組みだ。そのフィードバックの中には、例えば爆弾の作成方法などの危険な行為を回答させないようなものも含まれる。こういった倫理観など、人間の主観を学習したことがお絵描きにも影響しているのかもしれない。

もう１つの可能性。現在のChatGPTでは利用できないが、今後は Image Input という新機能でテキストに加えて画像の入力もできるようになるらしい。そもそもGPT-4はマルチモーダルな言語モデルであり画像解析の能力ももっている。ChatGPTに画像入力というインターフェースは搭載されていないが、GPT-4のモデル自体にはすでに画像に関する学習も含まれていてもおかしくない。これがGPT-3.5にはできなかったような人間味のある画力につながっているのかもしれない。

すべては想像にすぎないが、GPT-3.5からGPT-4への進化はとても面白く、改めて汎用人工知能への期待が高まってしまった。最後に、ChatGPTを開発しているOpenAIのウェブサイトに掲げられているミッションを引用して今回のnoteを終わろうと思う。

Our mission is to ensure that artificial general intelligence benefits all of humanity.
私たちの使命は、汎用人工知能が全人類に利益をもたらすようにすることです。

https://openai.com/about

この記事が気に入ったらサポートをしてみませんか？