前言
當(dāng)你看到你漂亮的網(wǎng)頁，也想?yún)⒖紝崿F(xiàn)應(yīng)該如何做呢？構(gòu)思、設(shè)計、編碼一系列的流程嗎？現(xiàn)在的 AI 真是太神奇了，它讓我們能夠通過截圖來翻譯代碼，再也不用費(fèi)勁地手打了！
今天我們推薦的是一個讓程序員們瘋狂的 GitHub 項目，一鍵將圖片的內(nèi)容翻譯從代碼，在 GitHub 已超過 31K Star 的開源項目：Screenshot to Code。
Screenshot to Code 是什么?
這個簡單的應(yīng)用程序?qū)⑵聊唤貓D轉(zhuǎn)換為代碼（HTML/Tailwind CSS、React、Vue 或 Bootstrap）。它使用 GPT-4 Vision 生成代碼，并使用 DALL-E 3 生成外觀相似的圖像。您現(xiàn)在還可以輸入 URL 來克隆實時網(wǎng)站！
借助 GPT-4 Vision 的突破性能力，Screenshot to Code 讓人看到一種全新的開發(fā)模式正悄然到來。作為一名開發(fā)人員，這個工具讓我非常驚訝。只需點(diǎn)擊幾下鼠標(biāo)，它就能將以前密集的手動流程自動化。
以下是一個執(zhí)行的示例，將泰勒·斯威夫特 Instagram 頁面的屏幕截圖轉(zhuǎn)換為代碼的過程：
在幾秒鐘內(nèi)，屏幕截圖到代碼就可以以驚人的精度對頁面設(shè)計進(jìn)行建模。這是在開發(fā)過程中模擬設(shè)計的令人難以置信的資源。
安裝 Screenshot to Code
Screenshot to Code 提供了在線使用環(huán)境，可以直接上傳圖片并執(zhí)行：
https://screenshottocode.com/
但是這個在線環(huán)境需要購買執(zhí)行次數(shù)，或者綁定自己的 OpenAI API key。這兩件事我都不是很想做，所以還是看看自己安裝部署吧。
目前來看主要有兩種方式：源碼啟動和 docker 啟動。
源碼安裝：
Screenshot to Code 由 React/Vite 開發(fā)前端和 FastAPI 開發(fā)后端。同時需要一個能夠訪問 GPT-4 Vision 的 OpenAI API key。
首先啟動后端（使用 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 訪問應(yīng)用。
docker 啟動：
如果你的本地或服務(wù)器上已經(jīng)有 docker 環(huán)境，那么可以直接使用 docker 來啟動。
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build同樣的，啟動完成后，在 http://localhost:5173 訪問應(yīng)用。
使用 Screenshot to Code
Screenshot to Code 目前支持轉(zhuǎn)換的代碼樣式包括：HTML/Tailwind CSS、React、Vue 和 Bootstrap 等，還有 Ionic 和 SVG 是 bate 狀態(tài)。用戶可以根據(jù)自己的需求選擇適合自己的代碼類型。無論你是前端新手還是經(jīng)驗豐富的開發(fā)者，都能夠輕松地利用這個項目來快速生成所需的代碼。
除了可以上傳截圖以外，還可以通弄過 URL 來獲取截圖，并自動生成代碼。
但是這需要購買 Screenshot to code 的次數(shù)，來獲取 API key 才能使用。
隨便截了個知乎首頁的圖，測試一下，電腦版的效果還挺不錯，但是 mobile 的就差強(qiáng)人意了。
在代碼中還可以向 AI 提出微調(diào)的要求，然后更新到代碼中，一點(diǎn)點(diǎn)的優(yōu)化最后的結(jié)果。
項目特點(diǎn)
優(yōu)點(diǎn)
- 它可以為程序員節(jié)省大量時間。
- 它可以為您省錢。
- 使用起來超級簡單。
缺點(diǎn)
- 它可能不準(zhǔn)確。
- 該工具不能替代人類程序員。
項目信息
- 項目名稱：Screenshot to Code
- 在線體驗：https://screenshottocode.com/
- GitHub 鏈接：https://github.com/abi/screenshot-to-code
- Star 數(shù)：31K+
