作ったもの
株式会社ファースト・オートメーションCTOの田中(しろくま)です！
ChatGPTを使って、「いらすとや」の画像をいい感じにレイアウトする「れいあうとや」を作ってみました。
これまで、「いらすとや」っぽい画像生成AIはあったと思うのですが、 既存の「いらすとや」の画像をいい感じにレイアウトして新たな画像を生成するAI は無いかも、、と思い作ってみました。
(最近LayerDiffusionなるものが出てきて、画像とレイアウトも一気に生成できるようになったみたいですが、、)
pythonでStreamlitを使っており、Gitでコードを取ってきて、ローカルで試すことができます。
(動画は4倍速です。編集画面はこちらのSVGエディタのものです。)
なぜレイアウト画像なのか？
0からの画像生成でも良いのですが、パワポの資料作成とかで、AIにざっくり絵を作ってもらって微調整したいみたいなときに、既存の「いらすとや」の画像をレイアウトするほうが使いやすそうと思って作ってみました。
「れいあうとや」で生成される画像はSVGなので、生成後に編集で配置の調整などを行うことができます。
GPT-4Vを使ってレイアウトを指示
どういうふうな指示をChatGPTに送っているかですが、いくつか選択された「いらすとや」の画像とそれらのレイアウト指示のプロンプトをGPT-4Vに送って、SVG画像を作ってもらうということを行っています。
実際に使っているプロンプトの簡略版を以下に載せました。
あなたは、優秀なイラストレーターです。
添付の画像を使って、「{scene}」のイラストを描いて下さい。
添付の画像をどのような向きや位置、スケールで配置するかのレイアウトによってシーンを表現するイラストを作成して下さい。
1つの画像を複数回使用したり、1度も使用しない画像があっても問題ありません。
レイアウトの結果はSVGで出力して下さい。
SVGは以下のように、`<svg>`タグで囲まれたものを出力しつつ、添付の画像を`<image>`タグで埋め込んだものを出力して下さい。
必要であれば`<rect>`, `<circle>`, `<eclipse>`, `<line>`, `<polygon>`, `<path>`といったプリミティブな図形も使用して下さい。
画像ファイルは以下の順で添付されています。
{image_filenames}
出力:
上記プロンプトの{scene}には作成したいイラストのシーン、{image_filenames}は選択された「いらすとや」の画像のファイル名を列挙したものが入ります。
これらの画像とプロンプトを送ることで、ChatGPTからSVGのテキストが返ってくるようになります。
あと、あんまり効果なかったのですが、生成結果のリファインを行うために、SVGをレンダリングしたものを再度ChatGPTに与えて、レイアウトの修正処理も行っています。
デモ
以下、「れいあうとや」を使った作品をいくつか載せます。
(SVGが記事に添付できなかったので、pngで添付してます。)
子供が学校へ行くところを見送っている家族の様子
子供が両親に挟まれて、学校に行くのを見送られるような感じになりました。
渋滞している道路の様子
バスが対向してしまって、渋滞が起きてしまったようです。
恐竜をカレーで倒そうとする魔法使い
恐竜の後ろから、今まさにカレーで攻撃しようとしているところ。カレーが小さい．．．
TODO
実際やってみると、なかなかいい感じのレイアウトができないので、もっと良いプロンプトやリファイン方法の検討は必要かなと思ってます。
あと、今回はユーザが使用した画像をチェックして、その中からAIが使用する画像を選択するという形のアプリでしたが、CLIPなどを使ったマルチモーダルRAGを使用することで、「いらすとや」画像のデータベースからいい感じに使用する画像を引っ張ってくることもできるかなと思ってます。
まとめ
「いらすとや」をいい感じにレイアウトする「れいあうとや」を作ってみました。
ぜひ、コードを使って遊んでもらえると嬉しいです！
最後に宣伝ですが、株式会社ファースト・オートメーションは一緒に働いて下さる仲間を絶賛募集中です！
- LangChainを使ったプロダクトに興味がある
- LLMの社会実装に貢献したい
- 製造業をより良くしたい
といったことに少しでも興味がある方、ぜひ下記応募リンクからご連絡下さい！
Discussion