佛山網(wǎng)站如何制作云南seo網(wǎng)絡優(yōu)化師
截圖轉代碼
試用地址：https://picoapps.xyz/free-tools/screenshot-to-code
這個簡單的應用可以將截圖轉換為HTML/Tailwind CSS代碼。它使用GPT-4 Vision來生成代碼，并使用DALL-E 3來生成類似的圖像?，F(xiàn)在你也可以輸入一個URL來克隆一個現(xiàn)有的網(wǎng)站！
📚 先看示例
NYTimes
| Original | Replica |
|---|---|
 |  |
Instagram頁面（沒有泰勒·斯威夫特的照片）
截圖轉代碼2
黑客新聞 但是它首先獲取顏色錯誤，所以我們需要糾正
截圖轉代碼示例1
🛠 開始使用
該應用程序有一個React/Vite前端和一個FastAPI后端。你需要一個有訪問GPT-4 Vision API權限的OpenAI API密鑰。
運行后端（我使用Poetry進行包管理 - 如果你沒有安裝，可以使用pip install poetry）：
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001
運行前端：
cd frontend
yarn
yarn dev
打開 http://localhost:5173 來使用應用程序。
如果你更喜歡在不同的端口運行后端，更新 frontend/.env.local 中的 VITE_WS_BACKEND_URL。
為了調試目的，如果你不想浪費GPT4-Vision的信用，你可以在模擬模式下運行后端（它會流式傳輸預錄制的響應）：
MOCK=true poetry run uvicorn main:app --reload --port 7001
Docker
如果你的系統(tǒng)上安裝了Docker，在根目錄下運行：
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
應用程序將在 http://localhost:5173 上運行。注意，你不能用這種設置來開發(fā)應用程序，因為文件更改不會觸發(fā)重建。
🌍 托管版本
🆕 在這里試用 (需要自己提供OpenAI密鑰 - 你的密鑰必須有訪問GPT-4 Vision的權限。詳細信息請查看下方的常見問題部分）?；蛘卟榭聪路降拈_始使用部分以獲取本地安裝指南。