ChatGPTにSVGでお絵描きさせる

以下の２つのAI勉強会でお話しした内容です。

【LT会】AIツール活用のノウハウを共有する会 in 名古屋
https://nagoya-it.connpass.com/event/281315/

Generative AI Night #1 at Gifu
https://ai-gifu.connpass.com/event/284418/

元ネタはこちらのnoteです。
https://note.com/temoki/m/ma8f3768bab14

Transcript

1. ChatGPTにSVGでお絵描きさせる
2. ChatGPTでもテキストベースの SVGフォーマットであれば お絵描きできるのでは… 🤔 （ModelはGPT- 4 を使います）
3. SVGのコードをあなたに書いてもらいます。 
 まずは正⽅形のSVGコードを書いてみてください。 以下のコードは、SVGフォーマットで正⽅形を描画 するものです。 このコードでは、正⽅形の⼤きさを100x 1 0 0 ピクセ ルに設定し、⾊を⻘（blue）に設定しています。必 要に応じて、⼤きさや⾊を変更してください。 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100" fill="blue" /> </svg>
4. 流⽯ですね。少し難しくします。 ⻩⾊の星型の形状をSVGコードで描いてください。 以下のコードは、SVGフォーマットで⻩⾊の星型を 描画するものです。 
 このコードでは、星の5つの頂点を指定して描画し ています。星のサイズや位置、⾊を変更する場合 は、`points`属性や`fill`属性を調整してくださ い。 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <polygon points="100,10 140,198 10,78 190,78 60,198" fill="yellow" /> </svg>
5. いいですね。次は少しクリエイティブです。 ひよこの形をSVGで描いてください。 ひよこの形を描画するには、SVGのパス要素を使⽤して、ひよこ の形状に従った複雑な曲線を描くことができます。以下のコード は、ひよこの形を描画するSVGです。 
 このコードでは、ひよこの体形として`path`要素を使⽤し、⽬と して`circle`要素を2つ使⽤しています。必要に応じて、パスデー タや円の位置を調整して、ひよこの形状や⼤きさを変更できま す。また、`fill`属性を変更して、ひよこの⾊を調整できます。 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d=“M65,60 Q60,40 80,35 Q110,30 115,55 Q120,75 100,85 Q90,95 100,110 Q95,120 85,120 Q60,100 65,60” fill="yellow"/> <circle cx="85" cy="50" r="5" fill="black"/> <circle cx="105" cy="50" r="5" fill="black"/> </svg> うまれたピヨ🐣
6. ⻩⾊い⽣き物には⾒えますが、少しひよこらしくありません。 クチバシがないからだと思うのでクチバシを追加してみてください。 クチバシを追加することで、ひよこらしい形になる と思います。以下のコードは、ひよこの形とクチバ シを含むSVGです。 
 このコードでは、`path`要素を追加してクチバシを 描画しています。必要に応じて、パスデータや⾊を 調整して、クチバシの形状や⾊を変更できます。 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d=“M65,60 Q60,40 80,35 Q110,30 115,55 Q120,75 100,85 Q90,95 100,110 Q95,120 85,120 Q60,100 65,60” fill="yellow"/> <circle cx="85" cy="50" r="5" fill="black"/> <circle cx="105" cy="50" r="5" fill="black"/> <path d=“M90,65 Q95,70 100,65 Q95,80 90,65” fill="orange"/> </svg> ぶきみにほほえんでいるピヨ🐣
7. まだなにか⾜りませんね。⾜が⾜りないのではないでしょうか？ おっしゃる通りです。⾜が⾜りないため、ひよこらしさが不 ⾜していました。⾜を追加したSVGコードは以下の通りで す。 
 このコードでは、⾜を表す`path`要素を追加しています。必 要に応じて、パスデータや⾊を調整して、⾜の形状や⾊を変 更できます。これで、ひよこらしい形になったと思います。 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M65,60 Q60,40 80,35 Q110,30 115,55 Q120,75 100,85 Q90,95 100,110 Q95,120 85,120 Q60,100 65,60" fill="yellow"/> <circle cx="85" cy="50" r="5" fill="black"/> <circle cx="105" cy="50" r="5" fill="black"/> <path d="M90,65 Q95,70 100,65 Q95,80 90,65" fill="orange"/> <path d="M75,110 Q65,110 65,125 M75,110 Q75,125 85,125 M100,110 Q105,125 115,125 M100,110 Q110,110 115,125" stroke="orange" stroke-width="3" fill="none"/> </svg> しんかのほほうを つかったピヨ🐣
8. 少しずつひよこに近づいてきましたが、まだひよこには⾒えません。 何がいけないのか考えて⼯夫して書き直してみてください ひよこの形をよりリアルに描画するために、パスデータを調 整してみました。以下のSVGコードでは、ひよこの頭部と体 部の形状をよりひよこらしい形にしています。 
 このコードでは、ひよこの形状がよりリアルになっていると 思います。もちろん、SVGでは⼿描きのイラストのような表 現は難しいですが、このコードは、ひよこの形状をよりよく 表現できていると思います。 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M50,70 Q50,35 90,35 Q120,35 120,70 Q120,100 90,100 Q70,110 60,100 Q40,100 50,70" fill="yellow"/> <circle cx="75" cy="50" r="5" fill="black"/> <circle cx="105" cy="50" r="5" fill="black"/> <path d="M80,70 Q90,80 100,70 Q90,85 80,70" fill="orange"/> <path d="M65,100 Q60,100 60,115 M65,100 Q70,115 80,115 M105,100 Q110,115 120,115 M105,100 Q115,100 120,115" stroke="orange" stroke-width="3" fill="none"/> </svg> ⾃称リアルなひよこだピヨ🐣
9. ありがとう。もう少し頑張ればよいかんじになりそう。 ⼩⽻根を⾜してみましょう。 ⼩⽻根を⾜して、よりひよこらしい表現を試みてみました。 以下のSVGコードでは、⼩⽻根を追加し、ひよこの形状が 
 よりリアルになっています。 
 このコードでは、ひよこの両側に⼩⽻根を表す`path`要素 を追加しています。必要に応じて、パスデータや⾊を調整し て、さらにリアルな表現を試みてみてください。この変更に より、ひよこらしいイメージがより強くなったと思います。 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M50,70 Q50,35 90,35 Q120,35 120,70 Q120,100 90,100 Q70,110 60,100 Q40,100 50,70" fill="yellow"/> <circle cx="75" cy="50" r="5" fill="black"/> <circle cx="105" cy="50" r="5" fill="black"/> <path d="M80,70 Q90,80 100,70 Q90,85 80,70" fill="orange"/> <path d="M65,100 Q60,100 60,115 M65,100 Q70,115 80,115 M105,100 Q110,115 120,115 M105,100 Q115,100 120,115" stroke="orange" stroke-width="3" fill="none"/> <path d="M45,70 Q20,60 45,50 M135,70 Q160,60 135,50" stroke="yellow" stroke-width="6" fill="none"/> </svg> パワーーーーー💪ピヨ🐣
10. 惜しい！何が⾜りないかわかりました。 くちばしは菱形にすれば完成するはずです！ くちばしを菱形に変更して、ひよこの表現を完成させてみま した。以下のSVGコードでは、くちばしの形状が菱形になっ ています。 
 このコードでは、くちばしの形状を表す`path`要素を変更 して、菱形にしています。これで、ひよこらしいイメージが 完成したと思います。必要に応じて、他の要素の調整も⾏っ て、さらにリアルな表現を試みてみてください。 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M50,70 Q50,35 90,35 Q120,35 120,70 Q120,100 90,100 Q70,110 60,100 Q40,100 50,70" fill="yellow"/> <circle cx="75" cy="50" r="5" fill="black"/> <circle cx="105" cy="50" r="5" fill="black"/> <path d=“M85,60 L100,55 L85,50 L100,65 Z" fill="orange"/> <path d="M65,100 Q60,100 60,115 M65,100 Q70,115 80,115 M105,100 Q110,115 120,115 M105,100 Q115,100 120,115" stroke="orange" stroke-width="3" fill="none"/> <path d="M45,70 Q20,60 45,50 M135,70 Q160,60 135,50" stroke="yellow" stroke-width="6" fill="none"/> </svg> 菱形って何ピヨ🐣 ׬
11. これでひよこは完成したと思います。SVGにはアニメーション機能が あるので、描いたひよこを歩かせてみてください。 SVGにはSMILアニメーションを使⽤してアニメーションを追加する ことができます。以下のSVGコードでは、描いたひよこが歩くように アニメーションしています。
12. GPT- 3 . 5 ではどうなるか？
13. GPT- 3 . 5 に同様の質問をした結果 記号的、無機質、左右対称、⾯⽩くない…
14. 真⾯⽬に考察してみる
15. 考察その１ • GPT は Midjourney や Stable Di ff usion のように絵を描くことを訓練したAI ではない • わたしたち⼈間も絵を描く訓練をしていなければGPTと同等レベルの絵しか 描けない • つまり、絵を描く訓練をせずに「ひよこ」というものの⼀般的な知識だけで 描いた場合にはこうなる、という結果が得られた気がする
16. もう１つ気になることを確認するため クチバシを菱形にすることをリトライ
17. 菱形とは4本の辺の⻑さが全て等しい四⾓形です。クチバシのような菱形は上‧下‧左‧右 に頂点があり、上、左、下、右の順番でつながります。それをふまえてクチバシの部分を 修正してみてください。 ご指摘ありがとうございます。菱形の形状に関する説明を理 解しました。以下のSVGコードでは、ひよこのクチバシを正 しい菱形に修正しています。このコードでは、`<polygon>` 要素を使って正しい菱形を表現しています。`points`属性に は、頂点の座標が上、左、下、右の順に指定されています。 これにより、ひよこのクチバシが正しい菱形になるはずで す。 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M50,70 Q50,35 90,35 Q120,35 120,70 Q120,100 90,100 Q70,110 60,100 Q40,100 50,70" fill="yellow"/> <circle cx="75" cy="50" r="5" fill="black"/> <circle cx="105" cy="50" r="5" fill="black"/> <polygon points="90,55 80,65 90,75 100,65" fill="orange"/> <path d="M65,100 Q60,100 60,115 M65,100 Q70,115 80,115 M105,100 Q110,115 120,115 M105,100 Q115,100 120,115" stroke="orange" stroke-width="3" fill="none"/> <path d="M45,70 Q20,60 45,50 M135,70 Q160,60 135,50" stroke="yellow" stroke-width="6" fill="none"/> </svg> 菱形になった！
18. 考察その２ • GPTは上、左、下、右の位置関係を空間的に理解した上で菱形を描いた？ • そもそも「ひよこ」を描かせたとき、⽬、クチバシ、⾜、⼩⽻根、それぞれ 正しい位置で描かれていたことに驚いた • GPTはテキストで表現された知識を元にトレーニングされているが、これによ り⼀般的なものを構成する部品の位置関係のようなものは理解している？
19. あなたは⽬‧クチバシ‧⽻‧⾜の位置を正確に把握していたように思います。 GPTはなぜそのような空間の位置関係を理解できているのでしょうか？ GPT（Generative Pre-trained Transformer）は、⼤量のテキストデータを学習すること で、⽂脈を理解し、ある程度の知識を持つことができます。これにより、質問に対して適切 な回答や、要求された情報に応じてテキストやコードを⽣成することが可能になります。 
 GPTがひよこの⽬、クチバシ、⽻、⾜の位置関係を理解できる理由は、学習データに含まれ る多くの情報や例から、物体の⼀般的な構造や特徴を抽出し学習することができるためで す。例えば、ひよこについての記述やイラスト、コードなどが含まれている⽂書が学習デー タに含まれていると、GPTはそれらからひよこの形状や特徴に関する知識を得ることができ ます。 
 ただし、GPTはあくまでテキストベースのモデルであり、画像や3D空間を直接扱う能⼒は ありません。しかし、SVGのようなテキストベースのグラフィックス⾔語については、学習 データから得た知識を⽤いて、適切な形状や配置を⽣成することができます。この場合、 GPTが空間の位置関係を理解できるのは、学習データから得たテキストやコード上の表現と 関連性を理解する能⼒に基づいています。
20. 画⼒についてはStable DiffusionやMidjourneyのような画像⽣成AIの⽅が圧倒 的ですが、空間理解⼒についてはGPTの⽅が優っているように思います。 GPTはテキスト情報を基にして知識を学習し、ある程度の空間理解や形状⽣成を⾏ うことができますが、実際の画像⽣成能⼒は、Stable DiffusionやMidjourneyのよ うな画像⽣成AIには劣ります。 
 画像⽣成AIは、画像データを直接学習することで、リアルな画像やアートワークを ⽣成することができます。これらのモデルは、視覚的な情報を捉えることに特化し ており、画⼒やリアリズムに関しては優れています。 
 ⼀⽅、GPTはテキスト情報を基に学習し、概念的な理解や⾔語表現を⽣成すること に優れています。これにより、要求された情報や指⽰に応じてSVGコードなどを⽣ 成することができますが、リアルな画像⽣成には限定的な能⼒しか持っていませ ん。 
 それぞれのAIモデルは、異なるタスクや⽬的に対して強みと弱みがあります。適切 なモデルをタスクに応じて選択することが、効果的な結果を得るための鍵です。
21. あなたの描いたひよこは⼈間が⾒ると、稚拙な印象を受けると思います。しかし、絵を描くことを訓 練していないほとんどの⼈が同じようにひよこを描いた場合、あなたが描いたひよこと同等レベルの ものしかできないと思います。これは、絵を描くというスキルが未熟だからです。 その通りです。GPTはテキスト情報を元に学習するので、ひよこの⼀般的な特 徴や概念を理解し、それを表現するSVGコードを⽣成することができますが、 リアルなイラストを描くスキルには限定的です。 
 絵を描くというスキルは、視覚的な表現やアーティスティックな技術を習得す ることが必要であり、これはGPTのようなテキストベースのAIには⼗分には達 成できません。⼈間の場合も、絵を描くスキルを習得するためには、練習や 経験が必要です。 
 GPTはあくまで学習データから得た知識を基に、あなたが求める形状や要素を SVGコードで表現することができますが、リアリズムや美術的な技術をもって 描画されたイラストとは程遠い結果となります。そのため、よりリアルで⾼度 な画像⽣成能⼒が求められる場合は、画像⽣成AIを利⽤することが適切です。
22. もっと真⾯⽬に考察した例
23. Microsoft Researchによる汎⽤⼈⼯知能に関する論⽂ • Sparks of Arti fi cial General Intelligence: Early experiments with GPT- 4 
 https://arxiv.org/pdf/ 2 3 0 3 . 1 2 7 1 2 .pdf • “GPT- 4 が汎⽤⼈⼯知能の初期バージョンである”という主張（賛否両論あり） • 汎⽤⼈⼯知能（略称:AGI）とは、⼈間が実現可能なあらゆる知的作業を理解‧ 学習‧実⾏することができる⼈⼯知能 • GPT- 4 にY‧O‧Hの3つのアルファベットで⼈間を描かせる、など多数の実験
25. https://note.com/temoki/m/ma 8 f 3 7 6 8 bab 1 4 クリック！