GPT4Vが想像以上に強い
先日GPT4Vが発表されましたね。正直大したことないと思っていたのですが、Xを眺めていた所恐ろしいものが！
Web サイトのスクリーンショットをアップロードし、AI が HTML を徐々に構築し、生成されたコードをスクリーンショットと繰り返し比較することで反復的に改善するのを観察します。
screenshot-to-code:
— Siqi Chen (@blader) November 21, 2023
upload a screenshot of any website, watch as AI progressively builds the html, iteratively improving the generated code by comparing it against the screenshot repeatedly. pic.twitter.com/TCrbJj3VS0
どうやら画像を元にHTML、CSS、JavaScriptを生成できるみたいです。実はこのページや一個前のBlogのトップ画面は僕がデザインしたものをAIがコード化してくれています。どこまでできるか検証してきました。
GPT4VはWebデザイナーの夢を見るか？
結論から言えばデザインはまだできないと思いますが、簡単なフロント部分なら十分実用的だと思います。実際にこのページのテンプレGPT4Vが書いている訳ですし。
ただ全くコードを書いた事のない人は所見ではまず無理でしょうし、何よりAIに一回一回自然言語でお願いするより自分でやった方が早い！ただこのレベルのテンプレをデザインができる人間なら秒速で作れるのは十分脅威だと思います。
実際どのように作ったのか
tuyoi
— mizuame/gamedev (@mizuameisgod) November 19, 2023
イラレでばーっと作るだけでえーあいがどうにかしてくれる pic.twitter.com/8tEcRlS5Vn
ご覧のように基礎のイメージデザインをイラレで作って送り、機能だったり見た目を自然言語で追加していく感じです。一番驚いた点は基本的にPCの画面(16:9)の比率のデザインを送りつけてもきちんとモバイル表示にも対応させてくれます
流石にそのままでは使えなかったですが、JavaScriptをGPT4+僕で修正＆加筆してタグや検索機能などを追加しました。
最後に
QiitaやZennを元にデザイン＆加筆修正してみたのですがどうでしょう。
記事投稿サイトなら#を付けるだけで簡単に書けると思うのですがわざわざVSCodeで手打ちするのめんどくさいですね。ただその分自由度も高く面白いと思います。
現状このページもCSSとJSがHTMLファイルにまとめて書いてあるので分けたりとかQiita的なHTML自動生成的なの作ってもいいかもですね。ちなみに下のタグは押せないです。あとトップページへ戻るボタンもまだないです()