簡介
眾所周知，作為一個前端開發(fā)來說，尤其是比較偏營銷和頁面頻繁改版的項(xiàng)目，大部分的時間都在”套模板“，根本沒有精力學(xué)習(xí)前端技術(shù)，那么這個項(xiàng)目可謂是讓前端的小伙伴們看到了一絲絲的曙光。
將屏幕截圖轉(zhuǎn)換為代碼（HTML/Tailwind CSS、React、Vue 或 Bootstrap）。它使用 GPT-4 Vision 生成代碼，并使用 DALL-E 3 生成外觀相似的圖像。
還可以輸入 URL 來克隆實(shí)時網(wǎng)站！
Tips:帶上您自己的 OpenAI 密鑰 -您的密鑰必須有權(quán)訪問
GPT-4 Vision項(xiàng)目地址：https://github.com/abi/screenshot-to-code
示例
仿制的INS博主頁面
部署
1：拉取代碼
2：該應(yīng)用程序有一個 React/Vite 前端和一個 FastAPI 后端。您將需要一個能夠訪問 GPT-4 Vision API 的 OpenAI API 密鑰。運(yùn)行后端（我使用 Poetry 進(jìn)行包管理 -pip install poetry如果你沒有它）：
cd backendecho "OPENAI_API_KEY=sk-your-key" > .envpoetry installpoetry shellpoetry run uvicorn main:app --reload --port 7001
3：前端啟動
cd frontend
yarnyarn
dev
4：運(yùn)行
打開http://localhost:5173以使用該應(yīng)用程序。
如果您希望在不同端口上運(yùn)行后端，請更新 VITE_WS_BACKEND_URLfrontend/.env.local
出于調(diào)試目的，如果您不想浪費(fèi) GPT4-Vision 積分，您可以在模擬模式下運(yùn)行后端（該模式會傳輸預(yù)先錄制的響應(yīng)）：
MOCK=true poetry run uvicorn main:app --reload --port 7001文章來源：http://www.zghlxwxcb.cn/news/detail-861692.html
感興趣的小伙伴們，可以操練起來啦。
文章來源地址http://www.zghlxwxcb.cn/news/detail-861692.html
到了這里，關(guān)于一張網(wǎng)頁截圖，AI幫你寫前端代碼，前端竊喜，終于不用干體力活了的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
