前端要涼？微軟開源的Sketch2Code碉堡了！

來自專欄 Web前端開發工程師成長營

用戶界面設計過程涉及到許多創造力的迭代，這個過程通常從一張白紙上開始，設計師和工程師分享彼此的想法，儘力設計出客戶想要的場景或工作流程，一旦有了初步的設計作品，它通常通過照片捕獲，然後手動翻譯成可在Web瀏覽器中工作的HTML頁面。這種翻譯需要花費許多時間和精力，並且通常會延緩設計的過程。

如果可以把設計圖紙中的展示效果直接反映在瀏覽器中，那就省事多了？如果我們能夠做到這一點，當設計作品雛形的時候，我們就可以擁有一個已經由設計師、開發人員甚至客戶驗證過的現成原型，如今，Microsoft也做到了。

近日，Microsoft開發了一種人工智慧的網頁設計工具，能夠將網站草圖轉換為功能性HTML代碼。不過目前Sketch2Code在GitHub上的名氣還不算大，只收穫了 1100 個「star」以及 174 個「fork」。

Microsoft AI的高級產品經理Tara Shankar Jana將它命名為Sketch2Code，是由Microsoft與Kabel和Spike Techniques合作開發。該工具旨在讓所有的開發人員和組織都能使用AI去做更多的事情。

Sketch2Code簡介

Sketch2Code是一種基於Web的解決方案，它使用AI將手繪用戶界面的圖片轉換為可用的HTML代碼。

讓我們仔細看看使用Sketch2Code將手繪圖像轉換為HTML的過程：

● 用戶首先要把圖片上傳到網站上。

● 自定義視覺模型可預測圖像中存在的HTML元素，並確定其位置。

● 手寫文本識別服務讀取預測元素內的文本。

● 布局演算法通過預測元素邊框的空間信息生成可適應所有這些組件的網格結構。

● HTML生成引擎，使用以上信息來生成最終結果的HTML代碼。

應用程序工作流程如下所示：

Sketch2Code使用以下元素：

● Microsoft自定義視覺模型：此模型已使用不同手寫設計的圖片進行訓練，標記了常見的HTML相關的元素信息，包括文本框，按鈕，圖像等。

● Microsoft計算機視覺服務：用於標識設計元素中的文本。

● Azure Blob Storage：存儲與HTML生成過程的每個步驟相關聯的信息，包括原始圖像，預測結果，布局和分組信息等。

● Azure功能：它用作後端入口點，通過與服務交互來協調生成過程。

● Azure網站：用戶界面前端，可以上傳新設計並查看生成的HTML結果。

以上元素通過以下架構組合在一起：

你現在是不是也對這個項目充滿了好奇，那就到GitHub上看看Sketch2Code相關的所有代碼吧。

類似項目

類似的項目還有：去年Tony Beltramelli推出的pix2code paper，該項目能夠通過深度神經網路，可以從截圖直接生成 UI 代碼，兼容安卓、iOS以及Web界面三種平台。（項目地址：https://github.com/tonybeltramelli/pix2code）

今年，Airbnb推出的sketch2code。（項目地址：https://github.com/emilwallner/Screenshot-to-code-in-Keras）

1、向訓練過的神經網路輸入一個設計圖

2、神經網路將圖片轉化為 HTML 標記語言

3、渲染輸出

來源：開源最前線（ID：OpenSourceTop） 猿妹 編譯

鏈接：https://blogs.technet.microsoft.com/machinelearning/2018/08/30/turn-whiteboard-ux-sketches-into-working-html-in-seconds-introducing-sketch2code/