微軟使用人工智能將網頁設計手稿自動轉換成HTML頁面

發布時間:2019-12-18 18:55:00

微軟已經在其ai.lab網站上發布了sketch2code項目,它是GitHub中的開源項目。只要用戶在白板或筆記本上繪制網頁的界面設計,sketch2code就可以利用圖像識別將界面設計草稿轉換成HTML線框,幫助簡化網頁應用程序開發過程。

微軟使用人工智能將網頁設計手稿自動轉換成HTML頁面

微軟已經在其ai.lab網站上發布了sketch2code項目,它是GitHub中的開源項目。只要用戶在白板或筆記本上繪制網頁的界面設計,sketch2code就可以利用圖像識別將界面設計草稿轉換成HTML線框,幫助簡化網頁應用程序開發過程。

微軟指出,用戶界面設計需要大量的創造力和時間,設計師在繪制設計圖后,還需要花費大量的時間將草稿轉換成HTML線框,以便在web瀏覽器中打開。這個過程需要一些努力,但也會延遲開發過程。因此微軟希望利用人工智能技術來加速這一進程。他們建立了一個系統,可以了解設計師在白板上畫什么,并將這些理解轉換成HTML,這樣設計就可以立即轉換成HTML頁面展示,從而加快設計和開發過程。

該系統允許用戶上傳圖片,從自定義的視覺模型中推斷HTML元素及其在圖像中的位置,識別手寫單詞,推斷元素中的單詞,利用布局算法推斷元素邊界生成網格結構等空間信息,利用HTML生成引擎及上述階段塊信息的綜合

為了滿足sketch2code系統的功能,識別設計者的手繪草圖,需要建立自定義模型,并利用手繪元素的圖像進行訓練,如下拉菜單、按鈕或文本輸入單元等HTML元素。Sketch2code使用Microsoft自定義vision服務創建自定義模型并執行對象檢測。

在得到HTML對象后,利用Microsoft computer vision服務的字符識別功能對設計圖上的手寫文本進行識別。通過前兩個階段獲得的HTML元素和文本信息,生成多個HTML片段,然后從確定的元素位置推斷出整個設計的布局,生成最終的HTML程序源代碼。

在識別生成HTML程序源代碼的整個過程中,系統將圖像、推測結果、布局分組等信息存儲在azureblob存儲器中,并以azurefunction為后端入口點,通過與所有云服務的交互和通信來協調生成過程,并將生成的結果放在azurewebsite中作為與用戶交互的前端,以查看生成的HTML頁面


聯系我們,談您的需求

立即咨詢
青海十一选五走势图表