🪄
AIがスクリーンショットを解析→HTML,Tailwind CSSに変換してくれるscreenshot-to-codeの使い方
使用前の注意点
ChatGPT Plusを契約しており、ChatGPT-4を使用できる必要があります。
screenshot-to-codeとは
GPT-4とDALL-E 3 を使用してスクリーンショットを解析することでHTML/Tailwind CSSに変換してくれるサービスです。
スクリーンショットをドラッグ＆ドロップするかスクリーンショットのURLを入力することでHTML/Tailwind CSSに変換してくれます。
動画を記事に貼ることができないので、以下の公式のリポジトリに8秒の動画があるので見ていただけるとわかりやすいかと思います👀
ちなみにDALL-E 3とは
ChatGPTで画像生成できるDALLサービスです。
screenshot-to-codeではローカルとウェブ上で使用する方法があります。
webで使用する
下記リンクにアクセスします。
Agreeを選択
左側の歯車アイコンを選択、
OpenAI API keyを入力してSaveしてください。
ローカルでDockerコンテナを立ち上げて使用する
次にルートディレクトリに.envファイルを作成してOPEN AIのAPI KEYを入力してください。
.env
OPENAI_API_KEY=""
コンテナを起動します。
docker-compose up -d --build
コンテナが起動したら
http://localhost:5173 にアクセスして、下記が表示されているか確認してください。
料金
GPT-4とDALL-Eの使用料金がそれぞれかかります。
終わりに
何かありましたらお気軽にコメント等いただけると助かります。
ここまでお読みいただきありがとうございます🎉
Discussion