背景:
??隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來(lái)，人類的科學(xué)技術(shù)突飛猛進(jìn)。然而軟件工程師們依舊需要花費(fèi)大量精力在重復(fù)的還原UI視覺(jué)稿的工作。
UI視覺(jué)研發(fā)擁有明顯的特征：組件，位置和布局，符合機(jī)器學(xué)習(xí)處理范疇。能否通過(guò)機(jī)器視覺(jué)和深度學(xué)習(xí)等手段自動(dòng)生成UI界面代碼，來(lái)解放重復(fù)勞動(dòng)力，成為我們關(guān)注的方向。

UI2CODE簡(jiǎn)單介紹：
??UI2CODE項(xiàng)目是閑魚(yú)技術(shù)團(tuán)隊(duì)研發(fā)的一款通過(guò)機(jī)器視覺(jué)理解+AI人工智能將UI視覺(jué)圖片轉(zhuǎn)化為端側(cè)代碼的工具。

??2018年3月UI2CODE開(kāi)始啟動(dòng)技術(shù)可行性預(yù)研工作，到目前為止，經(jīng)歷了3次整體方案的重構(gòu)（或者重寫(xiě)）。我們參考了大量的利用機(jī)器學(xué)習(xí)生成代碼的方案，但都無(wú)法達(dá)到商用指標(biāo)，UI2CODE的主要思想是將UI研發(fā)特征分而治之，避免雞蛋放在一個(gè)籃子里。我們著重關(guān)注以下3個(gè)問(wèn)題的解法：

視覺(jué)稿還原精度：我們的設(shè)計(jì)師甚至無(wú)法容忍1像素的位置偏差；
準(zhǔn)確率：機(jī)器學(xué)習(xí)還處于概率學(xué)范疇，但我們需要100%的準(zhǔn)確率；
易維護(hù)性：工程師們看的懂，改的動(dòng)是起點(diǎn)，合理的布局結(jié)構(gòu)才能保障界面流暢運(yùn)行。
UI2CODE運(yùn)行效果：
??UI2CODE插件化運(yùn)行效果，如下視頻：進(jìn)過(guò)幾輪重構(gòu)，最終我們定義UI2CODE主要解決feeds流的卡片自動(dòng)生成，當(dāng)然它也可以對(duì)頁(yè)面級(jí)自動(dòng)生成。
視頻連接：https://yunqivedio.alicdn.com/od/mm4Te1551157852340.mov

架構(gòu)設(shè)計(jì)：

簡(jiǎn)化分析下UI2CODE的流程：

大體分為4個(gè)步驟:

1.通過(guò)機(jī)器視覺(jué)技術(shù)，從視覺(jué)稿提取GUI元素
2.通過(guò)深度學(xué)習(xí)技術(shù)，識(shí)別GUI元素類型
3.通過(guò)遞歸神經(jīng)網(wǎng)絡(luò)技術(shù)，生成DSL
4.通過(guò)語(yǔ)法樹(shù)模板匹配，生成flutter代碼
版面分析
??版面分析只做一件事：切圖。

??圖片切割效果直接決定UI2CODE輸出結(jié)果的準(zhǔn)確率。我們拿白色背景的簡(jiǎn)單UI來(lái)舉例：

上圖是一個(gè)白色背景的UI，我們將圖片讀入內(nèi)存，進(jìn)行二值化處理：

def image_to_matrix(filename):
im = Image.open(filename)
width, height = im.size
im = im.convert("L")
matrix = np.asarray(im)
return matrix, width, height
得到一個(gè)二維矩陣：將白色背景的值轉(zhuǎn)化為0.

像切西瓜一樣，我們只需要5刀，就可以將GUI元素分離，切隔方法多種多樣：（下面是橫切的代碼片段，實(shí)際切割邏輯稍微復(fù)雜些，基本是遞歸過(guò)程）

def cut_by_col(cut_num, _im_mask):
zero_start = None
zero_end = None
end_range = len(_im_mask)
for x in range(0, end_range):
im = _im_mask[x]
if len(np.where(im==0)[0]) == len(im):
if zero_start == None:
zero_start = x
elif zero_start != None and zero_end == None:
zero_end = x
if zero_start != None and zero_end != None:
start = zero_start
if start > 0:
cut_num.append(start)
zero_start = None
zero_end = None
if x == end_range-1 and zero_start != None and zero_end == None and zero_start > 0:
zero_end = x
start = zero_start
if start > 0:
cut_num.append(start)
zero_start = None
zero_end = None
客戶端的UI基本都是縱向流式布局，我們可以先橫切在縱切。
demo3.png
將切割點(diǎn)的x，y軸坐標(biāo)記錄下來(lái)，它將是處理組件位置關(guān)系的核心。切割完成后，我們獲取到2組數(shù)據(jù)：6個(gè)GUI元素圖片和對(duì)應(yīng)的坐標(biāo)系記錄。后續(xù)步驟通過(guò)分類神經(jīng)網(wǎng)絡(luò)進(jìn)行組件識(shí)別。

在實(shí)際生產(chǎn)過(guò)程中，版面分析會(huì)復(fù)雜些，主要是在處理復(fù)雜背景方面。
demo5.png

關(guān)注我們的技術(shù)公眾號(hào)，我們后續(xù)會(huì)詳細(xì)分解。

組件識(shí)別：
??進(jìn)行組件識(shí)別前我們需要收集一些組件樣本進(jìn)行訓(xùn)練，使用Tensorflow提供的CNN模型和SSD模型等進(jìn)行增量訓(xùn)練。

??UI2CODE對(duì)GUI進(jìn)行了幾十種類型分類：IMAGE， TEXT，SHAP/BUTTON，ICON，PRICE等等，分別歸類為UI組件，CI組件和BI組件。

UI組件，主要針對(duì)flutter原生的組件進(jìn)行分類。
CI組件，主要針對(duì)閑魚(yú)自定義UIKIT進(jìn)行分類。
BI組件，主要針對(duì)具備一定業(yè)務(wù)意義的feed卡片進(jìn)行分類。

demo4.png

組件的識(shí)別需要反復(fù)的通過(guò)全局特征反饋來(lái)糾正，通常會(huì)采用SSD+CNN協(xié)同工作，比如下圖的紅色“全新“shape，這該圖例中是richtext的部分，同樣的shape樣式可能屬于button或者icon。

圖例1.png

屬性提取：
??這塊的技術(shù)點(diǎn)比較雜，歸納起來(lái)需要處理3部分內(nèi)容：shape輪廓， 字體屬性和組件的寬高。

demo6.png
完成屬性提取，基本上我們完成所有GUI信息的提取。生成的GUI DSL如下圖：

demo7.png
通過(guò)這些數(shù)據(jù)我們就可以進(jìn)行布局分析了。
其中文字屬性的提取最為復(fù)雜，后續(xù)我們會(huì)專門介紹。

布局分析：
??前期我們采用4層LSTM網(wǎng)絡(luò)進(jìn)行訓(xùn)練學(xué)習(xí)，由于樣本量比較小，我們改為規(guī)則實(shí)現(xiàn)。規(guī)則實(shí)現(xiàn)也比較簡(jiǎn)單，我們?cè)诘谝徊角袌D時(shí)5刀切割的順序就是row和col。缺點(diǎn)是布局比較死板，需要結(jié)合RNN進(jìn)行前置反饋。

0:00
/ 0:40

視頻中展示的是通過(guò)4層LSTM預(yù)測(cè)布局結(jié)構(gòu)的效果，UI的布局結(jié)構(gòu)就像房屋的框架，建造完成后通過(guò)GUI的屬性進(jìn)行精裝修就完成了一個(gè)UI圖層的代碼還原工作。

代碼生成及插件化：
??機(jī)器學(xué)習(xí)本質(zhì)上來(lái)說(shuō)還屬于概率學(xué)范疇，自動(dòng)生成的代碼需要非常高的還原度和100%的準(zhǔn)確率，概率注定UI2CODE很難達(dá)到100%的準(zhǔn)確率，所以我們需要提供一個(gè)可編輯工具，由開(kāi)發(fā)者通過(guò)工具能夠快速理解UI的布局結(jié)構(gòu)和修改布局結(jié)構(gòu)。
??我們將UI2CODE生成的DSL TREE進(jìn)行代碼模板化匹配，代碼模板的內(nèi)容由資深的flutter技術(shù)專家來(lái)定義，它代表目前我們發(fā)現(xiàn)的最優(yōu)代碼實(shí)現(xiàn)方案。
001.png
代碼模板中會(huì)引入一些標(biāo)簽，由Intellij plugin來(lái)檢索flutter工程中是否存在對(duì)應(yīng)的自定義UIKIT，并進(jìn)行替換，提高代碼的復(fù)用度.
demo11.png

整個(gè)插件化工程需要提供自定義UIKIT的檢索，替換和校驗(yàn)工作，以及DSL Tree的創(chuàng)建，修改，圖示等工作，總體來(lái)說(shuō)，更像ERP系統(tǒng)，花費(fèi)一些時(shí)間能夠做的更加完美。
002.png

小結(jié)：
??本篇我們簡(jiǎn)單介紹了UI2CODE的設(shè)計(jì)思路，我們將整個(gè)工程結(jié)構(gòu)分為5個(gè)部分，其中4塊內(nèi)容核心處理機(jī)器視覺(jué)的問(wèn)題，通過(guò)機(jī)器學(xué)習(xí)將它們鏈接起來(lái)。代碼的線上發(fā)布是非常嚴(yán)格的事情，而單純的機(jī)器學(xué)習(xí)方式，很難達(dá)到我們要求，所以我們選擇以機(jī)器視覺(jué)理解為主，機(jī)器學(xué)習(xí)為輔的方式，構(gòu)建整個(gè)UI2CODE工程體系。我們將持續(xù)關(guān)注AI技術(shù)，來(lái)打造一個(gè)完美的UI2CODE工具。

轉(zhuǎn)載于:https://blog.51cto.com/14031893/2357945

總結(jié)

以上是生活随笔為你收集整理的UI2Code智能生成Flutter代码--整体设计篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。