[發明專利]一種基于手繪網頁圖像的前端工程化代碼生成方法

在審

• 申請號: 201911138941.0
• 申請日: 2019-11-20
• 公開（公告）號: CN110968299A
• 公開（公告）日: 2020-04-07
• 發明（設計）人: 陳子豪;賀國平;楊佳現;劉哲;劉宇豪
• 申請（專利權）人: 北京工業大學
• 主分類號: G06F8/33
• 分類號: G06F8/33;G06F8/35;G06F8/38;G06F16/958
• 代理公司: 北京思海天達知識產權代理有限公司 11203
• 代理人: 劉萍

本發明涉及一種基于手繪網頁圖像的前端工程化代碼生成方法。本發明的主要內容為：(1)設計領域特定語言對網頁布局進行泛化；(2)對普通的網頁進行預處理，使其趨近于手繪風格方便訓練；(3)建立視覺模型、語言模型和解碼器構成Draft2Code算法對手繪網頁圖像與其對應的領域特定語言代碼進行訓練得到識別模型，進而對手繪網頁進行識別和轉換；(4)對生成的領域特定語言代碼進行處理轉換為符合Vue或React框架語法的前端代碼。本發明減少了UI設計工序，最終生成的代碼文件可供前端工程師進行進一步開發，縮短了代碼構建時間，從而提高開發效率。

技術領域

本發明屬于軟件效率工程領域，是一種基于深度神經網絡，用于將網頁手繪稿圖像轉換前端工程化代碼的自動代碼生成算法。

背景技術

典型的設計工作流分為三個階段：首先，產品經理依據用戶需求繪制草圖；然后，設計師依據草圖進行UI(User Interface，用戶界面)設計原型；最后，前端工程師依據設計原型實現頁面開發。這種冗長的開發流程很多時候會成為制約企業的瓶頸問題，尤其對于一些并不過于注重前端設計的應用，如很多公司內部使用的B端業務應用，并不需要設計師進行過于精細化的設計，如果能夠精簡掉這一步將會使工作效率大大提升。如果可以直接將產品經理草圖利用深度神經網絡提取特征并轉換成HTML(Hyper Text MarkupLanguage，超文本標記語言)代碼，不但可以省略設計師對草圖進行優化設計的步驟，還能夠節約前端工程師初期編碼的時間，從而精簡設計流。

現有針對自動生成網頁的研究和實現，很難滿足現今的前端開發需求，原因主要有兩點：其一，輸入內容為其他網頁的截圖或設計圖，但是當網頁沒有其他網站作為藍本，或為不需要設計師參與的中小型B端項目，則無法提供相應的輸入，實際工程中更需要能夠將手繪網頁圖像作為輸入；其二，輸出內容為原生HTML頁面，但實際開發中更需要生成基于框架的組件化代碼。

本發明參考圖1架構設計了基于CNN和GRU等深度學習算法實現了對手繪網頁圖像的前端代碼的自動生成算法Draft2Code，讓程序自動的將草圖轉換為可以讓前端工程師直接開始邏輯開發的頁面HTML代碼；同時把算法與最流行的前端框架結合，為使用者提供自定義組件、組件化輸出的功能，增強UI樣式的可重用性。

發明內容

本發明基于手繪網頁圖像和深度學習算法，設計了前端代碼自動生成算法Draft2Code。本發明涉及以下2點：

(1)本發明參考圖1架構設計模型訓練算法。即對輸入的手繪網頁圖像使用卷積神經網絡進行特征提取，對輸入的源代碼使用門控循環單元進行編碼，最后再使用門控循環單元將二者輸出相結合，訓練得到模型；

(2)本發明參考圖2架構設計代碼生成算法。即對輸入的手繪網頁圖像使用卷積神經網絡進行特征提取，并根據已訓練的模型生成DSL，根據映射關系生成前端工程化代碼，實現代碼生成算法。

(1)設計基于手繪網頁圖像的前端代碼自動生成算法Draft2Code

算法架構主要包含3個主要部分：

1)基于CNN的計算機視覺模型，作用是從輸入的頁面設計圖圖像中提取特征；

2)基于GRU的語言模型，作用是編碼源代碼特征序列；

3)基于GRU的解碼器，作用是對1)中獲得的圖像特征和2)中獲得的編碼相結合進行計算，預測序列中的下一個特征。