[發(fā)明專利]基于界面設(shè)計(jì)圖自動(dòng)生成界面代碼的方法、裝置、介質(zhì)及電子設(shè)備

在審

• 申請(qǐng)?zhí)枺?/td>: 201911342703.1
• 申請(qǐng)日: 2019-12-23
• 公開(kāi)（公告）號(hào): CN111190595A
• 公開(kāi)（公告）日: 2020-05-22
• 發(fā)明（設(shè)計(jì)）人: 譚龍智
• 申請(qǐng)（專利權(quán)）人: 平安國(guó)際智慧城市科技股份有限公司
• 主分類號(hào): G06F8/38
• 分類號(hào): G06F8/38;G06F9/451
• 代理公司: 深圳市隆天聯(lián)鼎知識(shí)產(chǎn)權(quán)代理有限公司 44232
• 代理人: 孫強(qiáng)

本公開(kāi)提供了一種基于界面設(shè)計(jì)圖自動(dòng)生成界面代碼的方法、裝置、介質(zhì)及電子設(shè)備。本公開(kāi)涉及智能決策中的檢測(cè)模型。通過(guò)識(shí)別所述界面設(shè)計(jì)圖的界面元素的位置，并根據(jù)識(shí)別的界面元素的位置，查找界面元素位置與代碼模板對(duì)應(yīng)關(guān)系表，獲得與所述界面元素的位置對(duì)應(yīng)的代碼模板和對(duì)應(yīng)的通用代碼，根據(jù)通用代碼與提取所述界面元素的參數(shù)結(jié)合，從而形成對(duì)應(yīng)的界面代碼，另外，還可依據(jù)請(qǐng)求指令中攜帶有需要的風(fēng)格信息進(jìn)行參數(shù)的調(diào)整，使得在原有的通用代碼上填充調(diào)整后的參數(shù)，并生成符合用戶喜好的界面設(shè)計(jì)圖和對(duì)應(yīng)的界面代碼，大大提高界面設(shè)計(jì)圖的工作效率，簡(jiǎn)化界面設(shè)計(jì)圖生產(chǎn)的工序。

技術(shù)領(lǐng)域

本發(fā)明涉及智能決策中的檢測(cè)模型，特別涉及一種基于界面設(shè)計(jì)圖自動(dòng)生成界面代碼的方法、裝置、介質(zhì)及電子設(shè)備。

背景技術(shù)

在相關(guān)技術(shù)中，界面設(shè)計(jì)圖的設(shè)計(jì)需要通過(guò)設(shè)計(jì)師繪圖、人工提煉元素和匹配對(duì)應(yīng)的界面參數(shù)，并將對(duì)應(yīng)的界面參數(shù)交付至開(kāi)發(fā)人員進(jìn)行界面編程，界面設(shè)計(jì)圖對(duì)應(yīng)的界面生成相當(dāng)繁瑣，工作效率低，并且不利于把握用戶喜好。

發(fā)明內(nèi)容

本公開(kāi)旨在提供一種基于界面設(shè)計(jì)圖自動(dòng)生成界面代碼的方法、裝置、介質(zhì)及電子設(shè)備，其能夠依據(jù)用戶的喜好信息進(jìn)行對(duì)應(yīng)的界面代碼自動(dòng)生成，大大提高界面設(shè)計(jì)圖的工作效率，簡(jiǎn)化界面設(shè)計(jì)圖生產(chǎn)的工序。

根據(jù)本公開(kāi)的一方面，提供了一種基于界面設(shè)計(jì)圖自動(dòng)生成界面代碼的方法，包括：獲取界面設(shè)計(jì)圖；識(shí)別所述界面設(shè)計(jì)圖的界面元素的位置；根據(jù)識(shí)別的界面元素的位置，查找界面元素位置與代碼模板對(duì)應(yīng)關(guān)系表，獲得與所述界面元素的位置對(duì)應(yīng)的代碼模板，所述代碼模板中含有所述位置的界面元素的界面的通用代碼，其中界面元素的參數(shù)在代碼模板中未填寫；提取所述界面元素的參數(shù)；響應(yīng)于接收到用于風(fēng)格轉(zhuǎn)化的請(qǐng)求指令，所述請(qǐng)求指令中攜帶有需要的風(fēng)格信息；根據(jù)所述需要的風(fēng)格信息，查找風(fēng)格信息與參數(shù)改變量匹配關(guān)系表，以確定參數(shù)改變量，以便將所述參數(shù)改變量施加在所述界面元素的參數(shù)上；將改變后的界面元素的參數(shù)填充到所述代碼模板中所述參數(shù)的對(duì)應(yīng)位置，生成對(duì)應(yīng)于所述風(fēng)格信息的界面代碼。

在一個(gè)實(shí)施例中，所述獲取界面設(shè)計(jì)圖，包括：接收到待處理界面設(shè)計(jì)圖，并將所述待處理界面設(shè)計(jì)圖轉(zhuǎn)換成灰度圖像；對(duì)所述灰度圖像進(jìn)行平滑處理，將所述經(jīng)平滑處理后的灰度圖像進(jìn)行中值濾波處理；將所述中值濾波處理后的灰度圖像進(jìn)行二值化處理，得到二值圖像，作為獲取到的界面設(shè)計(jì)圖。

在一個(gè)實(shí)施例中，所述識(shí)別所述界面設(shè)計(jì)圖的界面元素的位置，包括：

識(shí)別所述二值圖像中的邊緣曲線，其中，如果二值圖像中相鄰兩個(gè)像素點(diǎn)的像素值相同，則用線連接所述相鄰兩個(gè)像素點(diǎn)，用線連接二值圖像上所有相鄰的像素值相同的像素點(diǎn)后形成的每一條連通曲線為一條邊緣曲線；將所述邊緣曲線輸入至識(shí)別界面元素的機(jī)器學(xué)習(xí)模型，由機(jī)器學(xué)習(xí)模型輸出所述界面元素。

在一個(gè)實(shí)施例中，所述機(jī)器學(xué)習(xí)模型通過(guò)以下方式預(yù)先訓(xùn)練而成：

獲取邊緣曲線樣本集合，所述邊緣曲線樣本中的每個(gè)邊緣曲線樣本具有貼好的界面元素標(biāo)簽；將所述邊緣曲線樣本中的每個(gè)邊緣曲線樣本輸入機(jī)器學(xué)習(xí)模型，由所述機(jī)器學(xué)習(xí)模型輸出判定的界面元素名稱，將判定的界面元素名稱與貼好的界面元素標(biāo)簽對(duì)應(yīng)，如不一致，則調(diào)整所述機(jī)器學(xué)習(xí)模型的系數(shù)，使得判定的界面元素名稱與貼好的界面元素標(biāo)簽對(duì)應(yīng)。

在一個(gè)實(shí)施例中，所述將改變后的界面元素的參數(shù)填充到所述代碼模板中所述參數(shù)的對(duì)應(yīng)位置，生成對(duì)應(yīng)于所述風(fēng)格信息的界面代碼，包括：逐一標(biāo)記各所述改變后的界面元素的參數(shù)，各所述標(biāo)記依序排列；依照順序檢測(cè)所述代碼模板所空缺的位置，將所述所空缺的位置與所述標(biāo)記進(jìn)行匹配；若匹配成功，則將所述標(biāo)記對(duì)應(yīng)的參數(shù)與對(duì)應(yīng)的所述所空缺的位置進(jìn)行關(guān)聯(lián)，且將所述標(biāo)記對(duì)應(yīng)的參數(shù)填充至對(duì)應(yīng)的所述所空缺的位置，以生成對(duì)應(yīng)于所述風(fēng)格信息的界面代碼。