手繪用戶界面草圖轉換爲HTML 代碼-Sketch2Code

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

手绘用户界面草图转换为HTML 代码-Sketch2Code

Sketch2Code使用組件包括:

  • 微軟自定義視覺模型(Custom Vision):模型基於不同的手繪稿的圖象訓練,標記了與常見 HTML 元素(如文本框、按鈕、圖像等)相關的信息。

  • 微軟計算機視覺服務:用於識別設計元素中的文本。

  • Azure Blob Storage:保存與 HTML 生成過程的每個步驟相關的信息,包括原始圖像、預測結果、佈局和分組信息等。

  • Azure Function:作為後端入口點,通過與其他服務發生交互來協調生成過程。

  • Azure Website:用戶界面前端,用戶可以在這裡上載設計圖,並查看生成的 HTML。

開源派紅包福利

搶支付寶紅包啦!注意是2個紅包,ZE2RMd43oN餘額寶紅包一定要領!領到餘額寶消費紅包的,可以用來還信用卡、充話費、水電氣繳費。長按複製此消息,打開支付寶就能領取! 

微信訂閱號:開源派 (opensourcepie)


分享到:


相關文章: