https://blog.csdn.net/ejinxian/article/details/82593681
Sketch2Code 前端智能AI-識別草圖生成代碼
2018年09月10日 18:11:56?ejinxian?閱讀數(shù)：1072
微軟開源Sketch2Code
用戶界面設(shè)計過程涉及大量創(chuàng)造性的迭代工作昔头。這個過程通常從在白板或白紙上畫草圖開始嚎研，設(shè)計師和工程師分享他們的想法塑荒，盡力表達(dá)出潛在的客戶場景或工作流程。當(dāng)他們在某個設(shè)計上達(dá)成一致之后吏祸，通過照片的形式將草圖拍下來，然后手動將草圖翻譯成 HTML 代碼。翻譯過程需要耗費很多時間和精力被因，通常會減慢設(shè)計過程
Sketch2Code 是什么
Sketch2Code 是一個基于 Web 的解決方案，使用 AI 將手繪的用戶界面草圖轉(zhuǎn)換為可用的 HTML 代碼衫仑。Sketch2Code 由微軟和 Kabel梨与、Spike Techniques 合作開發(fā)。讀者可以在 GitHub 上找到與 Sketch2Code 相關(guān)的代碼文狱、解決方案開發(fā)過程和其他詳細(xì)信息粥鞋。
Sketch2Code 項目地址：https://github.com/Microsoft/ailab/tree/master/Sketch2Code
在微軟官方網(wǎng)站上可以做更多嘗試：https://sketch2code.azurewebsites.net/
Sketch2Code 是如何工作的？
讓我們來看看使用 Sketch2Code 將手繪草圖轉(zhuǎn)換成 HTML 代碼的過程： ?
用戶將圖片上傳到網(wǎng)站上瞄崇。
自定義視覺模型預(yù)測在圖像中出現(xiàn)的 HTML 元素呻粹，并將它們的位置標(biāo)出來壕曼。
手寫文本識別服務(wù)讀取預(yù)測元素中的文本。
布局算法根據(jù)預(yù)測元素的邊框空間信息生成網(wǎng)格結(jié)構(gòu)等浊。
HTML 生成引擎使用上述信息來生成 HTML 代碼腮郊。
工作流程如下所示：
Sketch2Code 的架構(gòu)設(shè)計
Sketch2Code 使用了以下組件： ?
微軟自定義視覺模型（Custom Vision）：這個模型是基于不同的手繪稿的圖象訓(xùn)練得出的，并標(biāo)記了與常見 HTML 元素（如文本框筹燕、按鈕轧飞、圖像等）相關(guān)的信息。
微軟計算機(jī)視覺服務(wù)：用于識別設(shè)計元素中的文本撒踪。
Azure Blob Storage：保存與 HTML 生成過程的每個步驟相關(guān)的信息过咬，包括原始圖像、預(yù)測結(jié)果制妄、布局和分組信息等掸绞。
Azure Function：它作為后端入口點，通過與其他服務(wù)發(fā)生交互來協(xié)調(diào)生成過程耕捞。
Azure Website：用戶界面前端集漾，用戶可以在這里上載設(shè)計圖，并查看生成的 HTML砸脊。
以上組件通過如下架構(gòu)組合在一起：
