Sketch2Code 是什麼？

Sketch2Code 是一個基於 Web 的解決方案，使用 AI 將手繪的使用者介面草圖轉換為可用的 HTML 程式碼。Sketch2Code 由微軟和 Kabel、Spike Techniques 合作開發。

Sketch2Code 專案地址：https://github.com/Microsoft/ailab/tree/master/Sketch2Code

下圖演示了利用 Sketch2Code 將手繪草圖轉換成程式碼的操作過程。在微軟官方網站上可以做更多嘗試：https://sketch2code.azurewebsites.net/

Sketch2Code 是如何工作的？

讓我們來看看使用 Sketch2Code 將手繪草圖轉換成 HTML 程式碼的過程：
使用者將圖片上傳到網站上。
自定義視覺模型預測在影象中出現的 HTML 元素，並將它們的位置標出來。
手寫文字識別服務讀取預測元素中的文字。
佈局演算法根據預測元素的邊框空間資訊生成網格結構。
HTML 生成引擎使用上述資訊來生成 HTML 程式碼。

工作流程如下所示：

Sketch2Code 的架構設計

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

以上元件通過如下架構組合在一起: