[發明專利]一種生成前端代碼的方法及裝置

有效

• 申請號: 202111335972.2
• 申請日: 2021-11-12
• 公開（公告）號: CN113779482B
• 公開（公告）日: 2022-02-25
• 發明（設計）人: 姜旭;楊歡;李鈿;鄒永強;楊暉
• 申請（專利權）人: 云賬戶技術（天津）有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958;G06F8/30;G06V10/44;G06V10/75;G06V10/774;G06V10/764;G06V10/82;G06K9/62;G06N3/04;G06N3/08
• 代理公司: 北京銀龍知識產權代理有限公司 11243
• 代理人: 陳麗寧

本發明提供一種生成前端代碼的方法及裝置，該方法包括：接收用戶輸入的網頁圖像信息；采用圖像識別模型對網頁圖像信息的特征進行提取，獲得特征提取結果，根據特征提取結果生成至少一個待處理區域，并根據特征提取結果確定待處理區域的種類；對待處理區域的邊緣進行定位，獲取待處理區域的位置標記信息；獲取網頁組件庫中的組件，根據組件的組件屬性與待處理區域的種類進行匹配，將組件設置在待處理區域的位置標記信息的對應位置中，并根據組件屬性和待處理區域的位置標記信息生成組件對應的組件代碼。本發明中，通過根據網頁圖像信息設計稿識別各業務組件，以組件化思想自動搭建代碼樣板，提高自動生成代碼的可控性和可讀性。

技術領域

本發明涉及網頁開發領域，尤其涉及一種生成前端代碼的方法及裝置。

背景技術

目前，在網頁開發業務中，同一個團隊設計的頁面組件風格基本一致，開發人員可基于已有的組件庫和樣式庫完成開發，但由于組件具有高度封裝性，新頁面的開發往往出現重復性工作，影響開發效率；目前網頁開發業務中采用的方式主要有手動重復搭建頁面和經過圖像識別后生成底層前端代碼，其他解決方案中對圖像識別方法的研究較多，但缺乏對生成代碼的深入研究。

發明內容

本發明提供了一種生成前端代碼的方法及裝置，用于解決現有技術中手動重復搭建工作量大，開發效率低，并且生成的代碼無法準確匹配到開發人員的業務場景，需要大量增刪的問題。

為了解決上述問題，本發明是這樣實現的：

第一方面，本發明提供一種生成前端代碼的方法，包括：

接收用戶輸入的網頁圖像信息；

采用圖像識別模型對所述網頁圖像信息的特征進行提取，獲得特征提取結果，根據所述特征提取結果生成至少一個待處理區域，并根據所述特征提取結果確定所述待處理區域的種類；

對所述待處理區域的邊緣進行定位，獲取所述待處理區域的位置標記信息；

獲取網頁組件庫中的組件，根據所述組件的組件屬性與待處理區域的種類進行匹配，將所述組件設置在所述待處理區域的位置標記信息的對應位置中，并根據所述組件屬性和所述待處理區域的位置標記信息生成所述組件對應的組件代碼。

可選的，接收用戶輸入的圖像信息之前還包括：

對所述圖像識別模型進行訓練；

其中，所述對所述圖像識別模型進行訓練包括：

獲取訓練圖像集和測試圖像集；所述訓練圖像為包括位置標記信息和組件屬性的網頁圖像；所述測試圖像為無位置標記信息和組件屬性的圖像；

將所述訓練圖像輸入至待訓練的圖像識別模型中進行訓練，根據訓練結果優化所述圖像識別模型的參數；其中，所述圖像識別模型采用卷積神經網絡和前后向長短時記憶網絡對所述訓練圖像進行訓練；

采用所述測試圖像對優化后的所述圖像識別模型進行測試，根據測試結果判斷優化后的圖像識別模型是否符合預期，如果是，停止訓練，否則，返回將所述訓練圖像輸入至待訓練的圖像識別模型中進行訓練的步驟，繼續進行訓練。

可選的，所述待處理區域的種類包括以下至少一項：用戶信息區域、橫幅圖區域、圖文內容區域、評論區以及其他區域。

可選的，所述組件庫中的組件的配置包括以下至少一項：組件標簽、組件屬性和組件擴展功能。

可選的，所述組件庫中的組件包括以下至少一項：通用組件、布局組件、導航組件、數據錄入組件和數據展示組件。

第二方面，本發明提供一種生成前端代碼的裝置，包括：

接收模塊，用于接收用戶輸入的網頁圖像信息；