draw a ui

draw-a-ui

これは、TLDRAWとGPT-4-Vision APIを使用して、描画するワイヤーフレームに基づいてHTMLを生成するアプリです。

現在、Draw-A-UIのホストバージョンに取り組んでいます。 draw-a-ui.comのウェイトリストに参加できます。その中核は常にオープンソースであり、ここで利用できます。

これは、現在のCanvas SVGを使用してPNGに変換し、そのPNGをTailwindで単一のHTMLファイルを返すよう指示でGPT-4-Visionに送信するだけで機能します。

免責事項：これはデモであり、生産の使用を目的としていません。承認はないので、展開すると壊れます。

はじめる

これはnext.jsアプリです。開始するには、プロジェクトのルートディレクトリで次のコマンドを実行します。 GPT-4 Vision APIにアクセスできるOpenAI APIキーが必要です。

注これではnext.js 14を使用し、18.17を超えるnodeのバージョンが必要です。詳細はこちらをご覧ください。

 echo " OPENAI_API_KEY=sk-your-key " > .env.local
npm install
npm run dev

http：// localhost：3000を開き、ブラウザを使用して結果を確認します。