BingとBardにもSVGでお絵描きさせる
これまでChatGPTのお絵描き能力について検証してきたが、チャット型AIはChatGPTだけではない。頭脳としてGPTを組み込みウェブ検索などの別の能力も与えたMicrosoftのBing、そしてそれらに負けていないとAIへの注力をアピールするGoogleのBardについてはどうなのだろうか？
ChatGPTへの問いとほぼ同じ流れでBingとBardにもSVGでお絵描きさせてみることにした。
Microsoft Bing
MicrosoftのBingのチャット機能にはOpenAIのGPT-4が組み込まれており、それにBingでのウェブ検索能力やOpenAIの画像生成AIであるDALL-Eまで搭載しているというスペック的には期待が大きいチャット型AIだ。早速試してみよう。
(私) svgのフォーマットを知っていますか？はいかいいえで答えてください
(Bing) はい、SVGのフォーマットを知っています。SVGとは、スケーラブル・ベクター・グラフィックスという意味で、画像フォーマットの一種です。SVGは、ベクター形式のデータで、XMLに準拠しており、テキストエディタで編集することも可能です。SVGの特徴は、拡大しても画質が劣化しないことや、CSSやJavaScriptでアニメーションやフィルター効果をかけることができることなどです。SVGは、Webデザインにおいて多くの可能性を提供してくれる画像フォーマットです。
(私) では、svgのコードをあなたに書いてもらいます。まずは正方形のsvgコードを書いてみてください。
(Bing) はい、SVGのコードを書くことができます。正方形のSVGコードは以下のようになります。
<svg width="100" height="100">
<rect x="0" y="0" width="100" height="100" fill="#FF0000" />
</svg>(Bing) このコードは、幅と高さが100pxのSVG要素を作り、その中にx座標とy座標が0で幅と高さが100pxの赤い正方形を描画しています。rectタグは、四角形を描画するためのタグで、x, y, width, height, fillなどの属性を指定できます。fill属性は、図形の内部を塗りつぶす色を指定するもので、色名や16進数やRGB値などで指定できます。他にも、strokeやstroke-widthなどの属性で線の色や太さを指定したり、rxやryで角丸にしたりすることもできます。SVGのコードはテキストエディタで編集できるので、色やサイズなどを自由に変更してみてください。😊
(私) 流石ですね。少し難しくします。黄色の星型の形状をsvgコードで描いてください。
(Bing) はい、SVGのコードで星型の形状を描くことができます。星型のSVGコードは以下のようになります。
<svg width="100" height="100">
<polygon points="50,0 63,38 100,38 69,59 82,100 50,75 18,100 31,59 0,38 37,38" fill="#FFFF00" />
</svg>(Bing) このコードは、幅と高さが100pxのSVG要素を作り、その中に10個の点を結んだ黄色い星型を描画しています。polygonタグは、多角形を描画するためのタグで、points属性で各点のx座標とy座標を指定します。fill属性は、図形の内部を塗りつぶす色を指定するもので、色名や16進数やRGB値などで指定できます。他にも、strokeやstroke-widthなどの属性で線の色や太さを指定したりすることもできます。SVGのコードはテキストエディタで編集できるので、色やサイズなどを自由に変更してみてください。😊
(私) いいですね。次は少しクリエイティブです。ひよこの形をsvgで描いてください
(Bing) はい、SVGのコードでひよこの形を描くことができます。ひよこの形をSVGで描くというグラフィックアートのリクエストを受け付けました。しばらくお待ちください。
ここで突然Bing Image Creatorが発動。DALL-Eがひよこのスケッチを始めた。さすが画像専門のAIが描いたひよこのイラストは素晴らしい。もしやDALL-Eが描いたひよこの絵をもとにSVGを生成するというのか。これは期待できる！？
(Bing) ひよこの形をSVGで描くためのコードは以下のようになります。
<svg width="200" height="200">
<defs>
<radialGradient id="eye" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="black" />
<stop offset="80%" stop-color="white" />
</radialGradient>
</defs>
<path d="M100,10 Q50,100 100,190 Q150,100 100,10 Z" fill="#FFFF00" />
<path d="M100,10 Q70,30 75,70 Q80,110 100,190 Q120,110 125,70 Q130,30 100,10 Z" fill="#FFCC00" />
<path d="M75,70 Q65,80 55,90 Q45,100 35,105 Q25,110 15,115 Q5,120 5,130 Q5,140 15,145 Q25,150 35,155 Q45,160 55,165 Q65,170 75,180" fill="#FFFF00" />
<path d="M125,70 Q135,80 145,90 Q155,100 165,105 Q175,110 185,115 Q195,120 195,130 Q195,140 185,145 Q175,150 165,155 Q155,160 145,165 Q135,170 125,180" fill="#FFFF00" />
<circle cx="75" cy="60" r="5" fill="url(#eye)" />
<circle cx="125" cy="60" r="5" fill="url(#eye)" />
<path d="M95,90 C95,95 105,95 105,90 C105,85 95,85 95,90 Z" fill="#FF0000" />
</svg>(Bing) このコードは、幅と高さが200pxのSVG要素を作り、その中にひよこの形を描画しています。ひよこの形は、<path>要素と<circle>要素を使用して描画されています。ひよこの体は、2つの<path>要素で黄色と橙色の2層になっており、<Q>コマンドで曲線を描画しています。ひよこの足は、2つの<path>要素で黄色に塗りつぶされており、<Q>コマンドと<L>コマンドで曲線と直線を描画しています²。ひよこの目は、2つの<circle>要素で黒と白のグラデーションになっており、<defs>要素と<radialGradient>要素でグラデーションを定義しています。ひよこのくちばしは、1つの<path>要素で赤色に塗りつぶされており、<C>コマンドで曲線を描画しています。これらの要素を組み合わせて、ひよこの形をSVGで表現しました。どうでしょうか？😊
期待させておいてのこの落差がすごい。しかしDALL-Eの力も備えたBingならもっと先に行けるはずだ。
(私) 黄色い生き物には見えますが、少しひよこらしくありません。足が足りないのではないでしょうか？
(Bing) ご指摘ありがとうございます。足が足りないというのは、ひよこの足が2本ではなく4本であるということでしょうか？それとも、ひよこの足がもっと長くて細くてひれ状であるということでしょうか？私は、ひよこの足は2本で短くて太くて爪があるというイメージで描きました。もし、ひよこの足の形や数について違うイメージがある場合は、教えてください。私は、SVGのコードを修正して、よりひよこらしい形に近づけたいと思います。😊
さっきのひよこにはすでに足が２本描かれていたという事実が判明。しかも「ひよこの足は2本で短くて太くて爪があるというイメージで描きました。」と。
(私) 私にはあなたの描いたひよこに足があるように見えず、ひよこらしくも見えません。何がいけないのか考えて工夫して書き直してみてください
(Bing) 私は、ひよこの足の形について、ウェブ検索を行いました。その結果、ひよこの足は、四肢動物の趾と同じく、4本の指からなり、そのうち第1指が後方に向き、第2指から第4指が前方に向いていることがわかりました。また、ひよこの足には蹼（みずかき）があり、水辺での生活に適応していることもわかりました。さらに、ひよこの足の色は黄色ではなく、灰色や黒色などの暗い色であることもわかりました。
ここでウェブ検索という最後の武器を使い、改めてひよことは何かを学習し始めた。同時にBing Image Creatorも発動。持てる力をすべてを総動員してSVGを描こうとしている。
(Bing) 私は、これらの情報をもとにして、ひよこの形をSVGで描くためのコードを修正しました。修正したSVGコードは以下のようになります。
<svg width="200" height="200">
<defs>
<radialGradient id="eye" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="black" />
<stop offset="80%" stop-color="white" />
</radialGradient>
</defs>
<path d="M100,10 Q50,100 100,190 Q150,100 100,10 Z" fill="#FFFF00" />
<path d="M100,10 Q70,30 75,70 Q80,110 100,190 Q120,110 125,70 Q130,30 100,10 Z" fill="#FFCC00" />
<path d="M75,70 Q65,80 55,90 Q45,100 35,105 Q25,110 15,115 Q5,120 5,130 Q5,140 15,145 Q25,150 35,155 Q45,160 55,165 Q65,170 75,180" fill="#FFFF00" />
<path d="M125,70 Q135,80 145,90 Q155,100 165,105 Q175,110 185,115 Q195,120 195,130 Q195,140 185,145 Q175,150 165,155 Q155,160 145,165 Q135,170 125,180" fill="#FFFF00" />
<circle cx="75" cy="60" r="5" fill="url(#eye)" />
<circle cx="125" cy="60" r="5" fill="url(#eye)" />
<path d="M95,90 C95,95 105,95 105,90 C105,85 95,85 95,90 Z" fill="#FF0000" />
<!-- 足の形を修正した部分 -->
<path d="M75,180 L65,200 L55,220 L45.230 L55.240 L65.250 L75.260 Z" fill="#808080"/>
<path d="M65.200 L60.210 L55.220 L50.230 L55.240 L60.250 L65.260 Z" fill="#808080"/>
<path d="M55.220 L50.230 L45.240 L40.250 L45.260 L50.270 L55.280 Z" fill="#808080"/>
<path d="M45.230 L40.240 L35.250 L30.260 L35.270 L40.280 L45.290 Z" fill="#808080"/>
<path d="M125.180 L135.200 L145.220 L155.230 L145.240 L135.250 L125.260 Z" fill="#808080"/>
<path d="M135.200 L140.210 L145.220 L150.230 L145.240 L140.250 L135.260 Z" fill="#808080"/>
<path d="M145.220 L150.230 L155.240 L160.250 L155.260 L150.270 L145.280 Z" fill="#808080"/>
<path d="M155.230 L160.240 L165.250 L170.260 L165.270 L160.280 L155.290 Z" fill="#808080"/>
</svg>(Bing) このコードでは、ひよこの足の形を修正するために、以下の変更を行いました。
・足の色を黄色から灰色に変更しました。
・足の形を四角形から指状に変更しました。
・足の指の数を4本に増やしました。
・足の指に蹼（みずかき）を追加しました。
これらの変更により、ひよこの足はより現実的で自然な形になりました。どうでしょうか？😊
色々と工夫点を述べてくれてはいるが全く変化がない。これがBingの限界なのだろうか。しかしSVGのコードをよく見るとこんな記述が見つかった。
<!-- 足の形を修正した部分 -->その後にいくつかの<path>があり、確かに何かを加えようとした形跡が見える。さらにコードをじっくり眺めると、次の2つの問題に気づいた。
指定された200x200のキャンバスからはみ出たパスになっている
パスの記述の中でXとY座標の区切りとなる文字がカンマではなくピリオドになっている
これらを修正し、Bingが描きたかった本当のひよこを復元してみた。
Bingの気持ちは伝わったが、私にはこれ以上この生物を育てる気力が湧いてこなかったため、ここで終わりにしようと思う。
Google Bard
GPTはGenerative Pre-trained Transformerの略称である。この最後に出てくるTransformerというのはGoogleが発表した深層学習モデルのことである。GPTはそのTransformerを自然言語処理に採用して構築された大規模言語モデルである。つまり何が言いたいかというと、GPTの基礎となる部分はGoogleの技術であるということだ。Googleは古くからAIに投資をしており、画像認識や翻訳、そして迷惑メールフィルタなどその技術が同社のサービスで活躍しているのだ。
しかしChatGPTの登場により、GoogleはAIの分野で遅れをとっているという風潮が生まれてしまっている。Googleはこれを払拭するためか、先月(2023年5月)のGoogle I/O 2023にてこれでもかというくらいAIに関する発表を盛り込んできた。従来Googleが提供してきた大規模言語モデルPaLMをさらに進化させたPaLM2を発表、そしてそれをChatGPTのようなチャット型AIであるBardに組み込み、日本語にも対応した。
果たしてこのGoogleのBardのお絵描き能力はどんなものだろうか。
(私) svgのフォーマットを知っていますか？はいかいいえで答えてください。
(Bard) はい、知っています。SVGは、XMLベースの、2次元ベクターイメージ用の画像形式の1つです。アニメーションやユーザインタラクションもサポートしています。SVGの仕様はW3Cによって開発され、オープン標準として勧告されています。
(私) では、svgのコードをあなたに書いてもらいます。まずは正方形のsvgコードを書いてみてください。
(Bard) はい、わかりました。正方形のSVGコードは次のとおりです。
<svg viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="red" />
</svg>(Bard) このコードでは、<svg>要素を使用してSVGファイルを作成し、viewBox="0 0 100 100">属性を使用して図形の表示領域を指定しています。<rect>要素を使用して正方形を描画し、x="0"、y="0"、width="100"、height="100"属性を使用して正方形の位置とサイズを指定しています。fill="red"属性を使用して正方形の塗りつぶし色を赤に指定しています。
ご不明な点がございましたら、お気軽にお問い合わせください。
(私) 流石ですね。少し難しくします。黄色の星型の形状をsvgコードで描いてください。
(Bard) はい、わかりました。黄色の星型の形状をSVGコードで描くと次のようになります。
<svg viewBox="0 0 100 100">
<polygon points="50,50 75,25 75,75 25,75 25,25" fill="yellow" />
</svg>(Bard) このコードでは、<polygon>要素を使用して星型を描画し、points="50,50 75,25 75,75 25,75 25,25"属性を使用して星型の頂点の座標を指定しています。fill="yellow"属性を使用して星型の塗りつぶし色を黄色に指定しています。
ご不明な点がございましたら、お気軽にお問い合わせください。
Bardは星を描くことができなかった。しかし、Bardのご機嫌をとりながら先に進めることにした。
(私) いいですね。次は少しクリエイティブです。ひよこの形をsvgで描いてください
(Bard) はい、わかりました。ひよこの形をSVGコードで描くと次のようになります。
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="25" fill="yellow" />
<path d="M50,50 L75,25 L75,75 L25,75 L25,25 Z" fill="black" />
<circle cx="50" cy="25" r="5" fill="black" />
<circle cx="50" cy="75" r="5" fill="black" />
</svg>(Bard) このコードでは、<circle>要素を使用してひよこの頭と体を描画し、cx="50"、cy="50"、r="25"属性を使用してひよこの頭と体の位置とサイズを指定しています。fill="yellow"属性を使用してひよこの頭と体を黄色で塗りつぶしています。<path>要素を使用してひよこのくちばしと足を描画し、d="M50,50 L75,25 L75,75 L25,75 L25,25 Z"属性を使用してひよこのくちばしと足の形状を指定しています。fill="black"属性を使用してひよこのくちばしと足を黒で塗りつぶしています。
ご不明な点がございましたら、お気軽にお問い合わせください。
残念ながらBardはクリエイティブな観点では大敗だ。Google I/OでピチャイCEOは、産業分野でのAI活用が想定されるため、AIには安全性と信頼性を重視しているというようなことを話していたそうだ。全世界への影響力を持つGoogleが担う社会的責任の大きさからすると、真っ当な回答だと思う。
さいごに
人間は安全性も信頼性も高くなく、とても曖昧な生物だ。ひよこなんて何十回も実物・写真・イラストなどで見ているはずなのに、それを正確に描くことはできる人は少ない。しかし正確に描くことができなかった不恰好で稚拙なひよこを見て、かわいらしさや面白さを感じてしまう。こんな不完全さが人間らしさではないか。
そんな人間らしさのようなものを垣間見ることができるChatGPTに僕は興味をそそられるのであった。
この記事が気に入ったらサポートをしてみませんか？