スクリーンショットからHTML＋Tailwind+JSを自動コーディングする方法

「screenshot-to-code」プロジェクトは、スクリーンショットからHTML、Tailwind、JSのコードに変換するアプリケーションです。このアプリケーションはReact/Viteをフロントエンドとして、FastAPIをバックエンドとして使用し、OpenAIのGPT-4 Vision APIを活用しています。以下は、導入方法の詳細です：

1. バックエンドのセットアップ:

• プロジェクトはPoetryをパッケージマネージャとして使用しています。Poetryがまだインストールされていない場合は、pip install poetryでインストールしてください。
• バックエンドディレクトリに移動し、.envファイルにOpenAI APIキーを設定します。このキーはOpenAIから取得する必要があり、GPT-4 Vision APIへのアクセスが必要です。
• Poetryを使用して依存関係をインストールし、FastAPIサーバーを起動します。以下のコマンドを実行します：

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7000

1. フロントエンドのセットアップ:

• フロントエンドディレクトリに移動し、Yarnを使用して依存関係をインストールし、フロントエンドの開発サーバーを起動します。
• 以下のコマンドを実行して、フロントエンドを設定します：

cd frontend
yarn
yarn dev

• ローカルホストの指定されたアドレス（通常は http://localhost:5173）でアプリケーションにアクセスできます。

これらの手順に従ってアプリケーションをセットアップし、ローカル環境で動作させることができます。さらに、バックエンドとフロントエンドは独立して動作し、FastAPIとReact/Viteの知識があればカスタマイズすることも可能です。