Screenshot to Code是一款開源工具，利用先進的人工智能技術（GPT-4V和DALL·E 3），能夠將用戶上傳的屏幕截圖轉換為前端網頁代碼。這款工具的主要目標是自動化網頁設計過程，使得開發者可以通過簡單的截圖快速生成HTML、CSS和JavaScript代碼，從而顯著提升前端開發的效率和便利性。

Screenshot to Code是什么

Screenshot to Code是一個備受歡迎的開源項目，借助人工智能技術（GPT-4V和DALL-E 3）將用戶的屏幕截圖轉化為前端網頁代碼，已在GitHub上獲得超過34,000個星標。其核心功能在于自動化網頁設計的編碼流程，開發者只需上傳截圖，即可迅速生成相應的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

1. 訪問Screenshot to Code官網（screenshottocode.com），注冊或登錄賬戶。
2. 點擊左側的設置圖標，輸入OpenAI API密鑰。
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命令。
   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密鑰的用戶，官網托管版提供了付費訂閱計劃，Hobby計劃為每月15美元（提供100積分/月），Pro計劃為每月40美元（提供300積分/月），年付用戶可享受免費2個月的優惠。

常見問題

Screenshot to Code是免費的嗎？
Screenshot to Code是一個免費開源的項目，用戶可以通過輸入自己的OpenAI API密鑰來免費使用。

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

Screenshot to Code可以將截圖轉換成什么代碼？
Screenshot to Code能夠將截圖轉換為HTML + Tailwind、React + Tailwind、Bootstrap、Vue + Tailwind以及Ionic + Tailwind等多種格式的代碼，以及SVG格式的內容。