手繪使用者介面草圖轉換為HTML 程式碼-Sketch2Code

摘要： Sketch2Code是微軟的AI實驗室開源的有趣Web工具，遵守MIT開源協議。工具藉助AI將手繪的使用者介面草圖轉換為可用的 HTML 程式碼，使用簡單，只要上傳手繪的原型圖片，自定義視覺模型會預測在影象中出現的 HTML 元素，並將它們的位置標出來。 同時識別讀取預測元素中的文字。根據...

Sketch2Code是微軟的AI實驗室開源的有趣Web工具，遵守MIT開源協議。工具藉助AI將手繪的使用者介面草圖轉換為可用的 HTML 程式碼，使用簡單，只要上傳手繪的原型圖片，自定義視覺模型會預測在影象中出現的 HTML 元素，並將它們的位置標出來。 同時識別讀取預測元素中的文字。根據預測元素的邊框空間資訊生成網格結構後，生成 HTML 程式碼。

Sketch2Code使用元件包括：

• 微軟自定義視覺模型（Custom Vision）：模型基於不同的手繪稿的圖象訓練，標記了與常見 HTML 元素（如文字框、按鈕、影象等）相關的資訊。
• 微軟計算機視覺服務：用於識別設計元素中的文字。
• Azure Blob Storage：儲存與 HTML 生成過程的每個步驟相關的資訊，包括原始影象、預測結果、佈局和分組資訊等。
• Azure Function：作為後端入口點，通過與其他服務發生互動來協調生成過程。
• Azure Website：使用者介面前端，使用者可以在這裡上載設計圖，並檢視生成的 HTML。

官網試用： ofollow,noindex" target="_blank">https://sketch2code.azurewebsites.net/