[發(fā)明專利]基于人工智能的前端交互頁(yè)面轉(zhuǎn)換方法、裝置及介質(zhì)

在審

• 申請(qǐng)?zhí)枺?/td>: 202110034032.3
• 申請(qǐng)日: 2021-01-11
• 公開（公告）號(hào): CN112732259A
• 公開（公告）日: 2021-04-30
• 發(fā)明（設(shè)計(jì)）人: 余雄偉;蔡羽;黃德運(yùn)
• 申請(qǐng)（專利權(quán)）人: 贊同科技股份有限公司
• 主分類號(hào): G06F8/38
• 分類號(hào): G06F8/38;G06K9/20;G06K9/62;G06N3/08
• 代理公司: 廣州嘉權(quán)專利商標(biāo)事務(wù)所有限公司 44205
• 代理人: 俞梁清

1.一種基于人工智能的前端交互頁(yè)面轉(zhuǎn)換方法，其特征在于，該方法包括：

分類模型訓(xùn)練，基于MobileNet模型的圖像分類對(duì)HTML5的多個(gè)組件進(jìn)行機(jī)器學(xué)習(xí)，得到HTML5組件的分類模型；

文字定位模型訓(xùn)練，基于CTPN模型學(xué)習(xí)組件的位置，得到OCR文字定位模型；

文字識(shí)別模型訓(xùn)練，基于DenseNet模型學(xué)習(xí)印刷字，得到OCR文字識(shí)別模型；

矢量圖形文件第一轉(zhuǎn)換步驟，獲取待轉(zhuǎn)換矢量圖形參數(shù)信息，根據(jù)參數(shù)信息將矢量圖形轉(zhuǎn)換為HTML5定義文件，進(jìn)而根據(jù)HTML5定義文件生成HTML5的若干第一組件，所述第一組件包括文本、圖片及矢量圖；

矢量圖形文件第二轉(zhuǎn)換步驟，根據(jù)待顯示的前端交互頁(yè)面圖像信息，調(diào)用分類模型進(jìn)行識(shí)別，根據(jù)識(shí)別結(jié)果匹配對(duì)應(yīng)的第一組件，選取相似度最高的第一組件進(jìn)行填充，對(duì)填充的圖像區(qū)域進(jìn)行基于OCR文字識(shí)別模型的識(shí)別，并在第一組件添加OCR文字識(shí)別模型的識(shí)別文字信息，得到第二組件；

其中，矢量圖形文件為Sketch文件。

2.根據(jù)權(quán)利要求1所述的基于人工智能的前端交互頁(yè)面轉(zhuǎn)換方法，其特征在于，所述分類模型訓(xùn)練包括：數(shù)據(jù)預(yù)處理、預(yù)訓(xùn)練模型訓(xùn)練、數(shù)據(jù)標(biāo)注、模型微調(diào)及模型發(fā)布；其中數(shù)據(jù)預(yù)處理包括將ReDraw數(shù)據(jù)集按組件類型進(jìn)行歸類，并統(tǒng)一等比例縮放圖片尺寸至設(shè)定像素；其中預(yù)訓(xùn)練模型訓(xùn)練包括基于MobileNet模型使用多個(gè)ReDraw數(shù)據(jù)集訓(xùn)練模型；其中數(shù)據(jù)標(biāo)注包括對(duì)HTML頁(yè)面數(shù)據(jù)的多個(gè)組件數(shù)據(jù)進(jìn)行對(duì)應(yīng)標(biāo)注；其中模型微調(diào)包括使用MobileNet模型并加載預(yù)訓(xùn)練模型進(jìn)行微調(diào)；模型發(fā)布包括發(fā)布模型并提供HTTP服務(wù)并提供調(diào)用接口。

3.根據(jù)權(quán)利要求1所述的基于人工智能的前端交互頁(yè)面轉(zhuǎn)換方法，其特征在于，所述OCR模型訓(xùn)練包括文字定位模型訓(xùn)練和文字識(shí)別模型訓(xùn)練，其中文字定位模型訓(xùn)練通過CTPN算法實(shí)現(xiàn)，其中文字識(shí)別模型訓(xùn)練通過DenseNet算法實(shí)現(xiàn)。

4.根據(jù)權(quán)利要求3所述的基于人工智能的前端交互頁(yè)面轉(zhuǎn)換方法，其特征在于，所述文字定位模型訓(xùn)練包括：文字定位圖片標(biāo)注、圖像數(shù)據(jù)預(yù)處理與數(shù)據(jù)增強(qiáng)、CTPN模型構(gòu)建、CTPN模型訓(xùn)練、CTPN模型評(píng)估和CTPN模型保存。

5.根據(jù)權(quán)利要求3所述的基于人工智能的前端交互頁(yè)面轉(zhuǎn)換方法，其特征在于，所述文字識(shí)別模型訓(xùn)練包括：文字識(shí)別圖片標(biāo)注、圖像數(shù)據(jù)預(yù)處理與數(shù)據(jù)增強(qiáng)、DenseNet模型構(gòu)建、DenseNet模型訓(xùn)練、DenseNet模型評(píng)估和DenseNet模型保存。

6.根據(jù)權(quán)利要求1所述的基于人工智能的前端交互頁(yè)面轉(zhuǎn)換方法，其特征在于，所述矢量圖形文件第一轉(zhuǎn)換步驟包括：

從Sketch設(shè)計(jì)文件中獲取到各個(gè)圖層信息，具體地，通過sketch-file插件將Sketch文件讀取并轉(zhuǎn)換為JSON文件，其中所使用到JSON文件中字段圖片信息、文檔信息及頁(yè)面信息；

將JSON文件的圖片信息、文檔信息及頁(yè)面信息轉(zhuǎn)換為Def文件，Def文件為定義文件；

將Def文件轉(zhuǎn)換成HTML5標(biāo)準(zhǔn)格式的VUE頁(yè)面文件，VUE頁(yè)面包括文本標(biāo)簽、圖片標(biāo)簽及矢量圖標(biāo)簽，并保持VUE頁(yè)面模塊結(jié)構(gòu)與Sketch文件的模塊結(jié)構(gòu)一致。

7.根據(jù)權(quán)利要求1所述的基于人工智能的前端交互頁(yè)面轉(zhuǎn)換方法，其特征在于，所述矢量圖形文件第二轉(zhuǎn)換步驟包括：

S410，對(duì)前端交互頁(yè)面進(jìn)行截圖，選取獲取所述第一組件的界面區(qū)域，結(jié)合截圖取得界面區(qū)域圖像；

S420，對(duì)界面區(qū)域圖像進(jìn)行Base64編碼，并調(diào)用分類模型對(duì)編碼后的圖片進(jìn)行，識(shí)別結(jié)果按相似度從高至低排列，返回若干候選組件；

S430，根據(jù)用戶所選擇的最匹配組件，對(duì)對(duì)應(yīng)的基礎(chǔ)組件替換為最匹配組件；

S440，調(diào)用OCR識(shí)別模型對(duì)界面區(qū)域圖像的Base64編碼進(jìn)行文字識(shí)別，得到文字識(shí)別結(jié)果；

S450，對(duì)S430規(guī)制后的組件增加文字識(shí)別結(jié)果，得到所述第二組件。