Chat-GPTのGPTsを使って、画像からHTMLコードを生成するAIを3分で作る

　これまで紹介したv0やScreenshot to CodeはUIやウェブデザインをHTMLのコードに変換をしてくれるAIでした。内部的にはOpenAIのCodexやStableCodeのようなコード生成するAIモデルを使っています。同様のことをChat-GPTのGPTsでも作ることができるので、簡単なGPTsの作成手順を紹介します。すぐにできる最小限の設定をしていきます。

Chat-GPTsを設定する

 画面左のナビゲーションの中のExplore GPTsをクリックしてGPTs画面を開きます。

右上の+Createをクリックして新規にGPTsを作成します。

GPTs作成画面に遷移します

左側の入力項目に適当に名前と説明を入れていきます。必須な箇所は、「Capabilities」と「Conversation starters」です。

　「Capabilities」のCode Interpreterだけにチェックを入れます。

　「Conversation starters」はChat-GPTとの対話の起点となる最初のプロンプトを設定できます。ここにやりたいことを定義してあげます。ここではシンプルに「画像からHTMLとTailwindのコードを生成する」と入力します。
　そうすると、画面の右側に設定した文が追加されます。ここをクリックしてコードを生成していきます。

右上のSaveを押して保存します。これで完成です！

作ったGPTsを使ってみる

こんなかんじのシンプルな画面になったと思います。

１．まず最初に画面下の「画像からHTMLとTailwindのコードを生成する」をクリックして会話を開始します。

２．するとChat−GPTが返事します。

3.画面下の左にあるファイル選択アイコンをクリックして画像を選択します。

　以前Screenshot to Codeで使用したフォームを選択します。選択ができたら右の上矢印ボタンを押して送信します。

4．コード生成がはじまります。

５．コード生成完了

Codepenで確認

コードをコピーしてCodepenで確認してみましょう。いい感じにできました。

https://codepen.io/masahiro8/pen/gOEGGPo

いかがだったでしょうか？Chat-GPTを使うと画像からのコード生成も簡単にできますね。