UI2Code智能生成Flutter代碼--總體設計篇

摘要： UI2CODE項目是閒魚技術團隊研發的一款經過機器視覺理解+AI人工智能將UI視覺圖片轉化爲端側代碼的工具。

背景:

隨着移動互聯網時代的到來，人類的科學技術日新月異。然而軟件工程師們依舊須要花費大量精力在重複的還原UI視覺稿的工做。
UI視覺研發擁有明顯的特徵：組件，位置和佈局，符合機器學習處理範疇。可否經過機器視覺和深度學習等手段自動生成UI界面代碼，來解放重複勞動力，成爲咱們關注的方向。

UI2CODE簡單介紹：

UI2CODE項目是閒魚技術團隊研發的一款經過機器視覺理解+AI人工智能將UI視覺圖片轉化爲端側代碼的工具。

2018年3月UI2CODE開始啓動技術可行性預研工做，到目前爲止，經歷了3次總體方案的重構（或者重寫）。咱們參考了大量的利用機器學習生成代碼的方案，但都沒法達到商用指標，UI2CODE的主要思想是將UI研發特徵分而治之，避免雞蛋放在一個籃子裏。咱們着重關注如下3個問題的解法：

視覺稿還原精度：咱們的設計師甚至沒法容忍1像素的位置誤差；
準確率：機器學習還處於機率學範疇，但咱們須要100%的準確率；
易維護性：工程師們看的懂，改的動是起點，合理的佈局結構才能保障界面流暢運行。

UI2CODE運行效果：

UI2CODE插件化運行效果，以下視頻：進過幾輪重構，最終咱們定義UI2CODE主要解決feeds流的卡片自動生成，固然它也能夠對頁面級自動生成。

視頻地址：https://yunqivedio.alicdn.com/od/mm4Te1551157852340.mov

架構設計：

簡化分析下UI2CODE的流程：

大致分爲4個步驟:

1.經過機器視覺技術，從視覺稿提取GUI元素
2.經過深度學習技術，識別GUI元素類型
3.經過遞歸神經網絡技術，生成DSL
4.經過語法樹模板匹配，生成flutter代碼

版面分析

版面分析只作一件事：切圖。

圖片切割效果直接決定UI2CODE輸出結果的準確率。咱們拿白色背景的簡單UI來舉例：

上圖是一個白色背景的UI，咱們將圖片讀入內存，進行二值化處理：

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

獲得一個二維矩陣：將白色背景的值轉化爲0.

 

像切西瓜同樣，咱們只須要5刀，就能夠將GUI元素分離，切隔方法多種多樣：（下面是橫切的代碼片斷，實際切割邏輯稍微複雜些，基本是遞歸過程）

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基本都是縱向流式佈局，咱們能夠先橫切在縱切。

 

將切割點的x，y軸座標記錄下來，它將是處理組件位置關係的核心。切割完成後，咱們獲取到2組數據：6個GUI元素圖片和對應的座標系記錄。後續步驟經過分類神經網絡進行組件識別。

在實際生產過程當中，版面分析會複雜些，主要是在處理複雜背景方面。

 

關注咱們的技術公衆號，咱們後續會詳細分解。

組件識別：

進行組件識別前咱們須要收集一些組件樣本進行訓練，使用Tensorflow提供的CNN模型和SSD模型等進行增量訓練。

UI2CODE對GUI進行了幾十種類型分類：IMAGE， TEXT，SHAP/BUTTON，ICON，PRICE等等，分別歸類爲UI組件，CI組件和BI組件。

UI組件，主要針對flutter原生的組件進行分類。
CI組件，主要針對閒魚自定義UIKIT進行分類。
BI組件，主要針對具有必定業務意義的feed卡片進行分類。

組件的識別須要反覆的經過全局特徵反饋來糾正，一般會採用SSD+CNN協同工做，好比下圖的紅色「全新「shape，這該圖例中是richtext的部分，一樣的shape樣式可能屬於button或者icon。

屬性提取：

這塊的技術點比較雜，概括起來須要處理3部份內容：shape輪廓， 字體屬性和組件的寬高。

完成屬性提取，基本上咱們完成全部GUI信息的提取。生成的GUI DSL以下圖：

經過這些數據咱們就能夠進行佈局分析了。
其中文字屬性的提取最爲複雜，後續咱們會專門介紹。

佈局分析：

前期咱們採用4層LSTM網絡進行訓練學習，因爲樣本量比較小，咱們改成規則實現。規則實現也比較簡單，咱們在第一步切圖時5刀切割的順序就是row和col。缺點是佈局比較死板，須要結合RNN進行前置反饋。

視頻地址：https://yunqivedio.alicdn.com/od/7DD7w1551157938106.mp4

視頻中展現的是經過4層LSTM預測佈局結構的效果，UI的佈局結構就像房屋的框架，建造完成後經過GUI的屬性進行精裝修就完成了一個UI圖層的代碼還原工做。

代碼生成及插件化：

機器學習本質上來講還屬於機率學範疇，自動生成的代碼須要很是高的還原度和100%的準確率，機率註定UI2CODE很難達到100%的準確率，因此咱們須要提供一個可編輯工具，由開發者經過工具可以快速理解UI的佈局結構和修改佈局結構。

咱們將UI2CODE生成的DSL TREE進行代碼模板化匹配，代碼模板的內容由資深的flutter技術專家來定義，它表明目前咱們發現的最優代碼實現方案。

代碼模板中會引入一些標籤，由Intellij plugin來檢索flutter工程中是否存在對應的自定義UIKIT，並進行替換，提升代碼的複用度。

整個插件化工程須要提供自定義UIKIT的檢索，替換和校驗工做，以及DSL Tree的建立，修改，圖示等工做，整體來講，更像ERP系統，花費一些時間可以作的更加完美。

小結：

本篇咱們簡單介紹了UI2CODE的設計思路，咱們將整個工程結構分爲5個部分，其中4塊內容核心處理機器視覺的問題，經過機器學習將它們連接起來。代碼的線上發佈是很是嚴格的事情，而單純的機器學習方式，很難達到咱們要求，因此咱們選擇以機器視覺理解爲主，機器學習爲輔的方式，構建整個UI2CODE工程體系。咱們將持續關注AI技術，來打造一個完美的UI2CODE工具。

 

原文連接 更多技術乾貨 請關注阿里云云棲社區微信號 ：yunqiinsight