牛逼！50.3K Star！一個自動將螢幕截圖轉換為程式碼的開源工具

狂师發表於2024-05-27
開源工具

1、背景

在當今快節奏的軟體開發環境中，設計師與開發者之間的協同工作顯得尤為重要。然而，理解並準確實現設計稿的意圖常常需要耗費大量的時間和溝通成本。為此，開源社群中出現了一個引人注目的專案——screenshot-to-code，它利用AI人工智慧技術（機器學習演算法和視覺分析技術），將螢幕截圖自動轉換為前端程式碼，為設計師和開發者之間的合作開闢了新的可能性。

對於前端開發者來說，這意味著他們可以節省大量的手工編碼時間，快速從原型或設計稿進入到實際的開發階段。例如，設計師可以直接將設計的介面截圖上傳，然後得到一份初步的程式碼，這極大地加快了設計到開發的轉換速度。此外，這個專案也非常適合用於教育目的，幫助初學者理解UI設計與程式碼實現之間的聯絡。

2、專案介紹

screenshot-to-code是一個創新的開源工具，它能夠將設計圖中的截圖自動轉化為程式碼片段，主要用於網頁和應用介面的開發。透過上傳一張包含設計佈局的截圖，該工具能夠智慧解析其中的各種介面元素，如文字、影像、按鈕、表格、導航欄等，並依據這些元素的位置、尺寸、顏色以及層次關係，精確地生成結構良好、易於維護的前端程式碼，包括HTML、CSS，以及React或Vue等前端框架的程式碼，滿足了不同專案的需求。

專案地址：

https://github.com/abi/screenshot-to-code

支援的技術棧有:

  • HTML + Tailwind
  • React + Tailwind
  • Vue + Tailwind
  • Bootstrap
  • Ionic + Tailwind
  • SVG

3、技術原理

首先，讓我們瞭解一下screenshot-to-code專案的工作原理。這個專案利用了AI人工智慧技術。當使用者上傳一個螢幕截圖時，系統會首先分析這個截圖，識別出其中的各種UI元素，如按鈕、文字框、圖片等。接著，它會將這些視覺元素轉換為相應的HTML標籤和CSS樣式。如果使用者選擇的是React或Vue，它還會自動生成對應的元件程式碼。

具體來講，screenshot-to-code的核心是基於影像識別的深度學習模型。該模型經過訓練，能夠理解和解析設計圖中的元素，如佈局、顏色、字型大小和型別、邊距等。模型的工作原理大致如下：

  • 影像預處理：首先對輸入的截圖進行標準化處理，包括調整尺寸、裁剪、灰度化等，以便於模型進行分析。
  • 特徵提取：模型透過卷積神經網路（CNN）提取影像中的關鍵特徵，如形狀、顏色、紋理等。
  • 元素識別：基於提取的特徵，模型對影像中的介面元素進行識別和分類，如文字、影像、按鈕等。
  • 佈局分析：模型進一步分析元素之間的位置、尺寸、顏色以及層次關係，構建出完整的介面佈局。
  • 程式碼生成：最後，模型根據介面佈局和元素屬性，生成相應的HTML、CSS以及前端框架的程式碼。

4、使用步驟

首先，你需要擁有一個具有訪問GPT-4 Vision許可權的OpenAI API金鑰。

目前screenshot-to-code支援的AI模型有：

  • GPT-4 Turbo (Apr 2024) - Best model
  • GPT-4 Vision (Nov 2023) - Good model that's better than GPT-4 Turbo on some inputs
  • Claude 3 Sonnet - Faster, and on par or better than GPT-4 vision for many inputs
  • DALL-E 3 for image generation

其次，分別部署後端和後端，

切換到backend目錄，建立.env檔案並設定您的OpenAI API金鑰，然後使用Poetry進行依賴安裝和環境啟動。

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

然後執行前端，在frontend目錄下，執行 yarn 安裝依賴，然後執行 yarn dev 開發伺服器。

cd frontend
yarn
yarn dev

開啟瀏覽器訪問 http://localhost:5173 使用該應用。

如果希望用Docker部署，只需在根目錄下配置好環境變數並將API金鑰寫入.env檔案，然後執行docker-compose命令即可。

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

透過以上步驟設定好後，使用者就可以上傳截圖或影片，系統會自動生成對應的程式碼。

具體展示效果，感興趣的讀者可以參考官方提供的演示影片。

5、小結與展望

screenshot-to-code專案的優勢，最明顯的是效率的提升，該工具不僅提高了開發效率，減少了溝通成本，還降低了對設計師和開發者技能水平的要求。

傳統的開發流程中，將設計轉化為程式碼是一個耗時且重複的工作，而這個專案透過自動化的方式大大縮短了這一過程。此外，它還有助於減少人為錯誤，提高程式碼的準確性和一致性。

然而，挑戰也是顯而易見的。首先，由於技術的侷限性，當前的影像識別演算法可能無法完美地識別所有的UI元素和樣式，特別是在複雜的設計中。其次，自動生成的程式碼可能需要進一步的調整和最佳化才能滿足實際的業務需求。此外，對於那些追求定製化和高度最佳化的開發者來說，自動生成的程式碼可能無法達到他們的要求。

儘管存在一些挑戰，但screenshot-to-code專案的潛力是巨大的。隨著技術的不斷進步，我們可以預見到它的準確度和適用性將會不斷提高。未來，隨著技術的不斷髮展和最佳化，我們期待screenshot-to-code能夠在更多領域得到應用和推廣，為軟體開發帶來更多便利和創新。

相關文章