截圖轉程式神器：一鍵生成HTML/Tailwind/JS程式

GitHub上的abi/screenshot-to-code項目提供了一個獨特的應用，能夠將截圖轉換為乾淨的HTML、Tailwind CSS和JavaScript程式。這個簡單的應用程式使用GPT-4 Vision來生成程式，並利用DALL-E 3生成類似的圖像。用戶還可以輸入一個URL來clone現有的網站。該項目包括一個React/Vite前端和一個FastAPI後端，並需要OpenAI API密鑰來訪問GPT-4 Vision API。

使用 Docker-Compose 安裝截圖轉程式工具

1. 安裝 Docker 和 Docker-Compose

確保您的系統上安裝了 Docker 和 Docker-Compose。如果尚未安裝，請訪問 Docker 官網 進行安裝。

2. clone GitHub 倉庫

使用 Git clone abi/screenshot-to-code 倉庫到您的本地系統：

git clone https://github.com/abi/screenshot-to-code.git

3. 配置環境變數

在clone的項目目錄中，建立一個 .env 文件，並添加您的 OpenAI API 密鑰：

echo "OPENAI_API_KEY=sk-your-key" > .env

請將 sk-your-key 替換為您的實際 OpenAI API 密鑰。

4. 使用 Docker-Compose 啟動應用

在項目的根目錄中，運行以下命令來構建並啟動應用：

docker-compose up -d --build

5. 訪問應用

應用啟動後，您可以通過瀏覽器訪問 http://localhost:5173 來使用該工具。

6. 停止和清理

當您不再需要運行該應用時，可以使用以下命令來停止並移除容器：

docker-compose down

注意事項

確保您的 OpenAI API 密鑰具有訪問 GPT-4 Vision 模型的權限。 如果您在設置或運行過程中遇到問題，請參考項目的 README.md 文件或在 GitHub 倉庫中提出問題。 通過這個過程，您可以輕鬆地在本地環境中部署和使用截圖轉程式工具，享受快速且便捷的開發體驗。