ChatGPT：Code Interpreter実験 Webデザイン編

ChatGPTのCode InterPreterでWebデザインはできるのかサクッとチャレンジしていきたいと思います！この記事では、ChatGPTのCode InterPreterの活用法が学べます！

Code InterPreterとはなにか？

ChatGPTに追加された新機能。これは、Pythonコードの実行可能になります。今までは、ChatGPTにテキストを入力するとAIがテキストを生成するだけでしたが、Code InterPreterを使用することでChatGPT内でPythonコードを実行することが可能になりました。

簡単に言うと、電子レシピ（コード）を読んで、それをコンピュータが理解できるように翻訳し、その結果をすぐに提供する料理人（プログラム）のようなもの。

Code InterPreterでなにができる？

データの分析（Twitterやサーチコンソール）

グラフの作成

ファイルの編集

計算の実行

QRコードの作成　など

Code InterPreterでWebデザインチャレンジ

今回ChatGPTと掛け合わせる生成AIは画像を生成するAI「Midjourney」を使っていきます。どういう事をしていくかというと、Midjourneyで画像生成したWebデザインの画像をCode InterPreterに入れて、その画像から何が分析できるのかをやっていきます。

ステップ１

MidjourneyでWebデザインの画像を生成する。

この画像を使用していきます。

ステップ２

Midjourneyで作成した画像をChatGPTのCode InterPreterに読み込ませる。使うプロンプトは「この画像から読み取れることは何ですか？」

Midjourneyで生成した画像は文字がめちゃくちゃなのになぜか分析した。これは謎ですね。画像からWebデザインということを分析してこんなかんじだろうという推測をしたのかもしれませんね。

ステップ３

試しにHTML、CSSのコードを書いてもらいます。

今回は何も指定せずにただ書かせてみます。

これをVScodeでコピペしたのが以下の画像

画像みたいにはしてくれないが雛形は作成してくれるみたいですね。これだけだと少し寂しいので画像を加えます。Midjourneyでサクッと作成！

ステップ４

画像から色を読み取れるのか調べたかったので聞いてみました。最初に「この画像から色を分析してRGB値で教えて」と聞いたら欲しい答えと違ったので次に「そうではなくて#000000みたいな感じ」とプロンプトを入れました。

そうしたら欲しかった答えがもらえました。じゃあ色はどうなのと思ったので画像を挿入して色も加えてみました。

ステップ５

これまでのステップでできたものを見てみましょう！ちょっと変なところがあったのでザックリ調整しました。

色は参考にした画像の中間をとった色みたいですね。でもこれが一瞬で作れるって普通にすごいですね！

わかったこと

Code InterPreterにMidjourneyのWebデザインの画像を入れると頑張って分析してくれる。おそらくその画像を読み込んで一番確立が高そうなことを推測してくれているのかもしれない。

もし、文字がちゃんとしているWebデザインの画像を読み込ませたらもう少し精度が上がるのかもしれませんね。コードはあくまでも雛形であとは自分で調整する必要あり（現在は）

画像から色を分析できることがわかったのでプロンプト次第でその画像で使われている色の種類を何種類か出せるかも。

最後に

今回は、パッと頭の中でできるのかなと思ってやってみました。おそらくもっといろんなことが出来ると思うのでまた何か浮かんだら試していきます。