UI2CODE智慧生成Flutter程式碼——整體設計篇

摘要： 0 1  背景 隨著移動網際網路時代的到來，人類的科學技術突飛猛進。然而軟體工程師們依舊需要花費大量精力在重複的還原UI視覺稿的工作。 UI視覺研發擁有明顯的特徵：元件，位置和佈局，符合機器學習處理範疇。能否通過機器視覺和深度學習等手段自動生成UI介面程式碼，來解...

UI視覺研發擁有明顯的特徵：元件，位置和佈局，符合機器學習處理範疇。能否通過機器視覺和深度學習等手段自動生成UI介面程式碼，來解放重複勞動力，成為我們關注的方向。

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

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

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

0 5  版面分析

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

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元素圖片和對應的座標系記錄。後續步驟通過分類神經網路進行元件識別。

在實際生產過程中，版面分析會複雜些，主要是在處理複雜背景方面。 關注我們的技術公眾號，我們後續會詳細分解。

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

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

元件的識別需要反覆的通過全域性特徵反饋來糾正，通常會採用SSD+CNN協同工作，比如下圖的紅色“全新“shape，這該圖例中是richtext的部分，同樣的shape樣式可能屬於button或者icon。

完成屬性提取，基本上我們完成所有GUI資訊的提取。生成的GUI DSL如下圖：

通過這些資料我們就可以進行佈局分析了。其中文字屬性的提取最為複雜，後續我們會專門介紹。

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

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