前端要凉?微软开源Sketch2Code,草图秒变代码
用戶界面設計過程涉及大量創造性的迭代工作。這個過程通常從在白板或白紙上畫草圖開始,設計師和工程師分享他們的想法,盡力表達出潛在的客戶場景或工作流程。當他們在某個設計上達成一致之后,通過照片的形式將草圖拍下來,然后手動將草圖翻譯成 HTML 代碼。翻譯過程需要耗費很多時間和精力,通常會減慢設計過程。
如果可以將白板上手繪的設計立即反映在瀏覽器中,那會怎樣?如果我們能夠做到這一點,在設計頭腦風暴結束時,我們就可以擁有一個已經由設計師、開發人員甚至客戶驗證過的現成原型,這將為網站和應用程序開發省不少時間。現在,微軟已經借助 AI 做到了這一點,同時他們還將這個項目在 Github 上開源了。
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/
imageSketch2Code 是如何工作的?
讓我們來看看使用 Sketch2Code 將手繪草圖轉換成 HTML 代碼的過程:
用戶將圖片上傳到網站上。
自定義視覺模型預測在圖像中出現的 HTML 元素,并將它們的位置標出來。
手寫文本識別服務讀取預測元素中的文本。
布局算法根據預測元素的邊框空間信息生成網格結構。
HTML 生成引擎使用上述信息來生成 HTML 代碼。
工作流程如下所示:
imageSketch2Code 的架構設計
Sketch2Code 使用了以下組件:
微軟自定義視覺模型(Custom Vision):這個模型是基于不同的手繪稿的圖象訓練得出的,并標記了與常見 HTML 元素(如文本框、按鈕、圖像等)相關的信息。
微軟計算機視覺服務:用于識別設計元素中的文本。
Azure Blob Storage:保存與 HTML 生成過程的每個步驟相關的信息,包括原始圖像、預測結果、布局和分組信息等。
Azure Function:它作為后端入口點,通過與其他服務發生交互來協調生成過程。
Azure Website:用戶界面前端,用戶可以在這里上載設計圖,并查看生成的 HTML。
以上組件通過如下架構組合在一起:
image是不是感覺躍躍欲試?
你可以在這里找到 Sketch2Code 的開源代碼:
https://github.com/Microsoft/ailab/tree/master/Sketch2Code
也可以在這里對 Sketch2Code 的實際效果進行驗證:https://sketch2code.azurewebsites.net/
查看原文
http://www.infoq.com/cn/news/2018/09/Ms-sketch2Code-opensourcing
總結
以上是生活随笔為你收集整理的前端要凉?微软开源Sketch2Code,草图秒变代码的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 招商银行的AI野心:转型金融科技公司?
- 下一篇: 【从前端到全栈】- koa快速入门指南