知識星球
導讀：使用者介面設計過程涉及大量創造性的迭代工作。這個過程通常從在白板或白紙上畫草圖開始，設計師和工程師分享他們的想法，儘力表達出潛在的客戶場景或工作流程。當他們在某個設計上達成一致之後，透過照片的形式將草圖拍下來，然後手動將草圖翻譯成 HTML 程式碼。翻譯過程需要耗費很多時間和精力，通常會減慢設計過程。
如果可以將白板上手繪的設計立即反映在瀏覽器中，那會怎樣？如果我們能夠做到這一點，在設計頭腦風暴結束時，我們就可以擁有一個已經由設計師、開發人員甚至客戶驗證過的現成原型，這將為網站和應用程式開發省不少時間。現在，微軟已經藉助 AI 做到了這一點，同時他們還將這個專案在 Github 上開源了。
作者：微軟 ML 部落格團隊
譯者：無明
來源：AI前線（ID：ai-front）
01 Sketch2Code 是什麼？
Sketch2Code 是一個基於 Web 的解決方案，使用 AI 將手繪的使用者介面草圖轉換為可用的 HTML 程式碼。Sketch2Code 由微軟和 Kabel、Spike Techniques 合作開發。讀者可以在 GitHub 上找到與 Sketch2Code 相關的程式碼、解決方案開發過程和其他詳細資訊。
Sketch2Code 專案地址：
https://github.com/Microsoft/ailab/tree/master/Sketch2Code
下圖演示了利用 Sketch2Code 將手繪草圖轉換成程式碼的操作過程。在微軟官方網站上可以做更多嘗試：
https://sketch2code.azurewebsites.net/
02 Sketch2Code 是如何工作的？
讓我們來看看使用 Sketch2Code 將手繪草圖轉換成 HTML 程式碼的過程：
-
使用者將圖片上傳到網站上。
-
自定義視覺模型預測在影象中出現的 HTML 元素，並將它們的位置標出來。
-
手寫文字識別服務讀取預測元素中的文字。
-
佈局演演算法根據預測元素的邊框空間資訊生成網格結構。
-
HTML 生成引擎使用上述資訊來生成 HTML 程式碼。
工作流程如下所示：
03 Sketch2Code 的架構設計
Sketch2Code 使用了以下元件：
-
微軟自定義視覺模型（Custom Vision）：這個模型是基於不同的手繪稿的圖象訓練得出的，並標記了與常見 HTML 元素（如文字框、按鈕、影象等）相關的資訊。
-
微軟計算機視覺服務：用於識別設計元素中的文字。
-
Azure Blob Storage：儲存與 HTML 生成過程的每個步驟相關的資訊，包括原始影象、預測結果、佈局和分組資訊等。
-
Azure Function：它作為後端入口點，透過與其他服務發生互動來協調生成過程。
-
Azure Website：使用者介面前端，使用者可以在這裡上載設計圖，並檢視生成的 HTML。
以上元件透過如下架構組合在一起：
是不是感覺躍躍欲試？
你可以在這裡找到 Sketch2Code 的開原始碼：
https://github.com/Microsoft/ailab/tree/master/Sketch2Code
也可以在這裡對 Sketch2Code 的實際效果進行驗證：
https://sketch2code.azurewebsites.net/
參考連結：
https://blogs.technet.microsoft.com/machinelearning/2018/08/30/turn-whiteboard-ux-sketches-into-working-html-in-seconds-introducing-sketch2code/
http://www.alphr.com/microsoft/1009840/microsofts-ai-sketch2code-builds-websites
更多精彩
在公眾號後臺對話方塊輸入以下關鍵詞
檢視更多優質內容！
PPT | 報告 | 讀書 | 書單 | 乾貨
Python | 機器學習 | 深度學習 | 神經網路
區塊鏈 | 揭秘 | 高考 | 數學
猜你想看
Q: 你會使用這款神器嗎？
歡迎留言與大家分享
覺得不錯，請把這篇文章分享給你的朋友
轉載 / 投稿請聯絡：baiyu@hzbook.com
更多精彩，請在後臺點選“歷史文章”檢視
