Screenshot to Code是一款開(kāi)源工具，利用先進(jìn)的人工智能技術(shù)（GPT-4V和DALL·E 3），能夠?qū)⒂脩羯蟼鞯钠聊唤貓D轉(zhuǎn)換為前端網(wǎng)頁(yè)代碼。這款工具的主要目標(biāo)是自動(dòng)化網(wǎng)頁(yè)設(shè)計(jì)過(guò)程，使得開(kāi)發(fā)者可以通過(guò)簡(jiǎn)單的截圖快速生成HTML、CSS和JavaScript代碼，從而顯著提升前端開(kāi)發(fā)的效率和便利性。

Screenshot to Code是什么

Screenshot to Code是一個(gè)備受歡迎的開(kāi)源項(xiàng)目，借助人工智能技術(shù)（GPT-4V和DALL-E 3）將用戶的屏幕截圖轉(zhuǎn)化為前端網(wǎng)頁(yè)代碼，已在GitHub上獲得超過(guò)34,000個(gè)星標(biāo)。其核心功能在于自動(dòng)化網(wǎng)頁(yè)設(shè)計(jì)的編碼流程，開(kāi)發(fā)者只需上傳截圖，即可迅速生成相應(yīng)的HTML、CSS和JavaScript代碼，大幅度節(jié)省前端開(kāi)發(fā)人員的時(shí)間和精力。

官網(wǎng)入口：https://screenshottocode.com/

GitHub代碼庫(kù)：https://github.com/abi/screenshot-to-code

Screenshot to Code的主要功能

• 智能代碼生成：該項(xiàng)目利用GPT-4 Vision模型，能夠分析用戶上傳的屏幕截圖，自動(dòng)生成相應(yīng)的HTML、CSS和JavaScript代碼，從而迅速將設(shè)計(jì)轉(zhuǎn)化為可運(yùn)行的網(wǎng)頁(yè)代碼。
• 相似圖像生成：結(jié)合DALL-E 3的圖像生成能力，項(xiàng)目可以根據(jù)生成的HTML代碼中的<img>標(biāo)簽，自動(dòng)創(chuàng)建與原始截圖相似的圖像，并將這些圖像嵌入網(wǎng)頁(yè)，以保持頁(yè)面的視覺(jué)一致性。
• 實(shí)時(shí)代碼更新：用戶能夠在應(yīng)用中實(shí)時(shí)查看生成的代碼，并通過(guò)與AI的交互來(lái)調(diào)整樣式或更新代碼中的缺失部分，以滿足特定的設(shè)計(jì)需求。
• 靈活的配置選項(xiàng)：提供多樣的配置選項(xiàng)，用戶可以選擇不同的前端技術(shù)（如HTML + Tailwind、React + Tailwind、Bootstrap、Vue + Tailwind），并決定是否啟用DALL-E圖像生成等功能。
• URL網(wǎng)頁(yè)克隆：除了手動(dòng)上傳截圖外，用戶還可以輸入U(xiǎn)RL自動(dòng)截圖，以克隆在線網(wǎng)站。
• 編輯生成的代碼：內(nèi)置的代碼編輯器允許開(kāi)發(fā)者對(duì)生成的代碼進(jìn)行修改，提供微調(diào)輸出、修正任何問(wèn)題或添加個(gè)人代碼風(fēng)格的功能。
• 效果預(yù)覽和代碼導(dǎo)出：該工具支持實(shí)時(shí)預(yù)覽，用戶能夠即時(shí)查看編輯和修改的效果，同時(shí)支持下載或復(fù)制最終代碼。
• 支持本地部署：用戶可以選擇在本地計(jì)算機(jī)上部署該項(xiàng)目，以便在本地環(huán)境中運(yùn)行，滿足對(duì)本地使用的需求。

如何使用Screenshot to Code

方法一：在線托管版運(yùn)行Screenshot to Code

1. 訪問(wèn)Screenshot to Code官網(wǎng)（screenshottocode.com），注冊(cè)或登錄賬戶。
2. 點(diǎn)擊左側(cè)的設(shè)置圖標(biāo)，輸入OpenAI API密鑰。
3. 選擇生成代碼所用的技術(shù)或框架，上傳或粘貼你的截圖。
4. 等待系統(tǒng)識(shí)別并生成代碼，生成的代碼可進(jìn)行修改和下載。

方法二：本地部署運(yùn)行Screenshot to Code

1. 將GitHub項(xiàng)目庫(kù)克隆到本地：git clone https://github.com/abi/screenshot-to-code.git
2. 配置后端和API密鑰：
   1. 安裝Poetry包管理器：pip install poetry
   2. 進(jìn)入項(xiàng)目的后端目錄：cd backend
   3. 設(shè)置OpenAI API密鑰：echo "OPENAI_API_KEY=your-key" > .env
   4. 安裝后端依賴項(xiàng)：運(yùn)行poetry install命令。
   5. 啟動(dòng)后端服務(wù)器：poetry run uvicorn main:app --reload --port 7001
3. 安裝前端依賴項(xiàng)：cd frontend切換到前端目錄，使用yarn安裝依賴項(xiàng)，并運(yùn)行yarn dev命令。
4. 在瀏覽器中訪問(wèn)應(yīng)用：通過(guò)瀏覽器訪問(wèn)http://localhost:5173即可開(kāi)始使用Screenshot to Code。

Screenshot to Code的產(chǎn)品價(jià)格

• 免費(fèi)版：Screenshot to Code提供開(kāi)源版本，用戶可以自行在本地部署或使用官網(wǎng)的在線托管版，輸入自己的OpenAI API密鑰即可免費(fèi)使用。
• 付費(fèi)版本：對(duì)于沒(méi)有API密鑰的用戶，官網(wǎng)托管版提供了付費(fèi)訂閱計(jì)劃，Hobby計(jì)劃為每月15美元（提供100積分/月），Pro計(jì)劃為每月40美元（提供300積分/月），年付用戶可享受免費(fèi)2個(gè)月的優(yōu)惠。

常見(jiàn)問(wèn)題

Screenshot to Code是免費(fèi)的嗎？
Screenshot to Code是一個(gè)免費(fèi)開(kāi)源的項(xiàng)目，用戶可以通過(guò)輸入自己的OpenAI API密鑰來(lái)免費(fèi)使用。

Screenshot to Code基于什么大模型？
該工具利用GPT-4 Vision生成代碼，同時(shí)使用DALL-E 3生成相似的圖像。

Screenshot to Code可以將截圖轉(zhuǎn)換成什么代碼？
Screenshot to Code能夠?qū)⒔貓D轉(zhuǎn)換為HTML + Tailwind、React + Tailwind、Bootstrap、Vue + Tailwind以及Ionic + Tailwind等多種格式的代碼，以及SVG格式的內(nèi)容。