Screenshot to Code – AI將截圖轉換爲網頁代碼的開源項目

Screenshot to Code是什麼

Sscreenshot to Code是一個開源的項目，利用人工智能技術（GPT-4V 和 DALL-E 3）將用戶的屏幕截圖轉換爲前端網頁代碼，已在GitHub上斬獲3.4萬星標。項目的核心功能是自動化網頁設計的編碼過程，使得開發者能夠通過提供網頁的截圖，快速生成相應的HTML、CSS和JavaScript代碼，節省前端開發人員的時間和精力。

官網入口：https://screenshottocode.com/

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

Screenshot to Code的主要功能

• 智能代碼生成：利用GPT-4 Vision模型，項目能夠分析用戶提供的屏幕截圖，並自動生成相應的HTML、CSS 和 JavaScript 代碼，可以快速將設計稿轉換爲可運行的網頁代碼。
• 相似圖像生成：項目還結合了DALL-E 3的圖像生成能力，能夠根據生成的HTML代碼中的<img>標籤，自動創建與原始截圖相似的圖像，並將這些圖像嵌入到網頁中，以保持頁面的視覺一致性。
• 實時代碼更新：用戶可以在應用程序中實時查看生成的代碼，並且可以通過與AI的交互來調整樣式或更新代碼中缺失的部分，以滿足特定的設計要求。
• 靈活的配置選項：應用程序提供了配置選項，允許用戶選擇使用的前端技術（如HTML + Tailwind、React + Tailwind、Bootstrap、Vue + Tailwind）以及是否啓用DALL-E圖像生成和功能
• URL網頁克隆：除開手動上傳截圖外，允許用戶輸入 URL 自動截圖以克隆在線網站。
• 編輯生成的代碼：Screenshot to Code 內置了代碼編輯器允許開發者對生成的代碼進行修改，可以微調輸出、糾正任何異常或添加個人代碼風格
• 效果預覽和代碼導出：該工具提供實時預覽功能，用戶能夠實時查看編輯和修改的效果，並支持下載或複製最終代碼
• 支持本地部署：用戶可以選擇將該項目在本地電腦上部署，以便在自己的計算機上運行，這爲那些希望在本地環境中使用該工具的用戶提供了便利。

如何使用Screenshot to Code

方法一：在線託管版運行Screenshot to Code

1. 訪問Screenshot to Code的官網（screenshottocode.com），然後註冊/登錄
2. 點擊左側的設置圖標，輸入OpenAI API key
3. 選擇你要生成的代碼所用的技術/框架，上傳或粘貼你的截圖
4. 等待識別和生成代碼，生成後的代碼可以更新修改和下載

方法二：本地部署運行Screenshot to Code

1. 克隆GitHub項目庫到本地電腦：git clone https://github.com/abi/screenshot-to-code.git
2.  配置後端和API密鑰：
   1. 安裝Poetry包管理器：pip install poetry
   2. 定位到項目的後端目錄：cd backend
   3. 設置OpenAI API密鑰：echo "OPENAI_API_KEY=your-key" > .env
   4. 安裝後端依賴項：運行poetry install命令安裝所有Python依賴項
   5. 啓動後端服務器：poetry run uvicorn main:app --reload --port 7001
3. 安裝前端依賴項：cd frontend切換到前端目錄，然後使用yarn安裝依賴項，並使用yarn dev命令運行
4. 瀏覽器訪問該應用：使用任何瀏覽器訪問http://localhost:5173即可開始使用Screenshot to Code

Screenshot to Code的產品價格

• 免費版：Screenshot to Code提供免費開源的版本，用戶可以自行在本地進行部署，也可以使用官方的在線託管版，輸入自己的OpenAI API密鑰使用
• 付費版本：對於沒有API密鑰的用戶，Screenshot to Code官網託管版也提供了付費訂閱版，Hobby計劃15美元每月（提供100積分/月）、Pro計劃40美元每月（提供300積分每月），年付的話免費2個月。

常見問題