截圖轉(zhuǎn)代碼

試用地址：https://picoapps.xyz/free-tools/screenshot-to-code

這個(gè)簡單的應(yīng)用可以將截圖轉(zhuǎn)換為HTML/Tailwind CSS代碼。它使用GPT-4 Vision來生成代碼，并使用DALL-E 3來生成類似的圖像?，F(xiàn)在你也可以輸入一個(gè)URL來克隆一個(gè)現(xiàn)有的網(wǎng)站！

📚 先看示例

NYTimes

Original	Replica

Instagram頁面（沒有泰勒·斯威夫特的照片）

黑客新聞 但是它首先獲取顏色錯(cuò)誤，所以我們需要糾正

🛠 開始使用

該應(yīng)用程序有一個(gè)React/Vite前端和一個(gè)FastAPI后端。你需要一個(gè)有訪問GPT-4 Vision API權(quán)限的OpenAI API密鑰。

運(yùn)行后端（我使用Poetry進(jìn)行包管理 - 如果你沒有安裝，可以使用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

運(yùn)行前端：

cd frontend
yarn
yarn dev

打開 http://localhost:5173 來使用應(yīng)用程序。

如果你更喜歡在不同的端口運(yùn)行后端，更新 frontend/.env.local 中的 VITE_WS_BACKEND_URL。

為了調(diào)試目的，如果你不想浪費(fèi)GPT4-Vision的信用，你可以在模擬模式下運(yùn)行后端（它會(huì)流式傳輸預(yù)錄制的響應(yīng)）：

MOCK=true poetry run uvicorn main:app --reload --port 7001

Docker

如果你的系統(tǒng)上安裝了Docker，在根目錄下運(yùn)行：

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

應(yīng)用程序?qū)⒃?http://localhost:5173 上運(yùn)行。注意，你不能用這種設(shè)置來開發(fā)應(yīng)用程序，因?yàn)槲募牟粫?huì)觸發(fā)重建。

🌍 托管版本

🆕 在這里試用 (需要自己提供OpenAI密鑰 - 你的密鑰必須有訪問GPT-4 Vision的權(quán)限。詳細(xì)信息請查看下方的常見問題部分）?；蛘卟榭聪路降拈_始使用部分以獲取本地安裝指南。