UI2Code智能生成Flutter代码——版面分析篇
開篇:
??在《UI2CODE--整體設計》篇中，我們提到UI2CODE工程的第一步是版面分析，如果是白色的簡單背景，我們可以像切西瓜一樣，將圖片信息切割為GUI元素。但是在實際生產過程中，UI的復雜度會高很多。本篇我們將圍繞版面分析這塊內容分享我們的探索過程。
架構設計：
??版面分析主要處理UI圖像的前景提取和背景分析：
通過前后景分離算法，將UI視覺稿剪裁為GUI元素:
背景分析：通過機器視覺算法，分析背景顏色，背景漸變方向，以及背景的連通區域。 前景分析：通過深度學習算法，對GUI碎片進行整理，合并，識別。背景分析：
??背景分析的關鍵在于找到背景的連通區域和閉合區間；
??我們從一個實際的應用場景來分析整個背景提取的過程：
?
我們期望將上一張圖片，通過UI2CODE，來提取GUI元素。
第一步：判斷背景區塊，通過sobel，Lapacian，canny等邊緣檢測的方法計算出梯度變化方向，從而得到純色背景和漸變色背景區域。
基于拉普拉斯算子的背景區域提取
離散拉普拉斯算子的模板：
擴展模板：
當該區域點與模板點乘，得到的數值越小越是平坦的區域，即接近背景區域。如果是漸變色區域，則統計它的運動趨勢。（左->右，右->左，上->下, 下->上）
提取效果如下：
我們發現上圖雖然能大致提取背景輪廓，但是對于有漸變色的背景還是比較粗糙。
因此我們通過統計背景運動趨勢的方式來判定它是否存在漸變色背景。如果存在，我們將通過第二步進行精細化處理。
第二步：基于漫水填充算法，選取漫水的種子節點，濾除漸變色背景區域噪聲。
def fill_color_diffuse_water_from_img(task_out_dir, image, x, y, thres_up = (10, 10, 10), thres_down = (10, 10, 10), fill_color = (255,255,255)):"""漫水填充：會改變圖像"""# 獲取圖片的高和寬h, w = image.shape[:2]# 創建一個h+2,w+2的遮罩層，# 這里需要注意，OpenCV的默認規定，# 遮罩層的shape必須是h+2，w+2并且必須是單通道8位，具體原因我也不是很清楚。mask = np.zeros([h + 2, w + 2], np.uint8)# 這里執行漫水填充，參數代表：# copyImg：要填充的圖片# mask：遮罩層# (x, y)：開始填充的位置（開始的種子點）# (255, 255, 255)：填充的值，這里填充成白色# (100,100,100)：開始的種子點與整個圖像的像素值的最大的負差值# (50,50,50)：開始的種子點與整個圖像的像素值的最大的正差值# cv.FLOODFILL_FIXED_RANGE：處理圖像的方法，一般處理彩色圖象用這個方法cv2.floodFill(image, mask, (x, y), fill_color, thres_down, thres_up, cv2.FLOODFILL_FIXED_RANGE)cv2.imwrite(task_out_dir + "/ui/tmp2.png", image)# mask是非常重要的一個區域，這塊區域內會顯示哪些區域被填充了顏色# 對于UI自動化，mask可以設置成shape，大小以1最大的寬和高為準return image, mask處理過后的效果如下：
第三步：通過版面切割，提取GUI元素，切割方法之前有提到過。
這個時候我們已經成功提取了80%的GUI元素，但是疊加圖層部分元素還無法解析。
第四步：通過霍夫直線、霍夫圓和輪廓查找的方式找到對稱的輪廓區域。對提取的輪廓區域做第二步到第四步的遞歸處理。
復雜背景的提取是后續前景分析的基礎。當提煉出背景區域后，我們就可以通過連通域分析前景區域，并利用組件識別的方式分析前景類別，再通過語義分析等方式對前景做拆分和合并。
背景分析小結：
對比較簡單的漸變色背景，通過上述四步基本都能夠解決。基于霍夫直線和霍夫圓的思想，去查找特定的輪廓區域，并分析這些輪廓區域做細化分析。再通過漫水填充的方式消除漸變色背景。
對于復雜背景的處理，可以基于目標檢測的方法，找到一些特定含義的內容。再利用馬爾科夫隨機場（mrf）細化邊緣特征。
?
前景分析
前景分析的關鍵在于組件完整性切割與識別；
我們通過連通域分析，防止組件碎片化，再通過機器學習識別組件類型，再通過組件類型進行碎片化合并，反復執行上述動作，直到無特征屬性碎片。
但是有些情況會比較復雜，我們通過瀑布流中提取一個完整item為例：
概述
閑魚頁面中瀑布流卡片識別是實現布局分析的一個重要步驟，需求是當卡片完整出現在截屏圖像中時(允許圖標遮擋)需要識別出來，卡片被背景部分遮擋時不應該識別出來。下圖所示的瀑布流卡片樣式，由于其布局緊湊且樣式繁多，導致容易產生漏檢或誤檢。
瀑布流卡片樣式 a)紅框顯示卡片部分被圖標遮擋 b)紅框顯示卡片內圖片顏色和卡片外背景顏色接近
??基于邊緣梯度或連通域的傳統圖像處理方法能根據圖像本身的灰度或者形狀特征提取出瀑布流卡片的輪廓，優點是定位精度高、運算速度快。缺點是容易受到干擾，召回率不高。
??基于目標檢測或者特征點檢測的深度學習方法采用有監督的方式學習卡片的樣式特征，優點是不易受到干擾，召回率很高。缺點是因為涉及回歸過程，定位精度比傳統圖像處理方法要低，并且需要大量的人工標注，運算速度也比傳統圖像處理方法要慢。
??受集成學習的啟發，通過融合傳統圖像處理方法和深度學習方法，結合兩者各自的優點，最終能得到具有較高精確率、召回率和定位精度的識別結果。
傳統圖像處理
1.算法流程
整個算法流程如下圖所示:?
1》. 輸入的瀑布流卡片圖像轉換成灰度圖后使用對比度受限的自適應直方圖均衡化(CLAHE)進行增強?
2》. 使用Canny算子進行邊緣檢測得到二值化圖像?
3》. 對二值化圖像進行形態學膨脹處理，連接斷開的邊緣?
4》. 提取連續邊緣的外層輪廓，并基于輪廓包含區域的面積大小丟棄面積較小的輪廓，輸出候選輪廓?
5》. 使用Douglas-Peucker算法進行矩形逼近，保留最像矩形的外輪廓，輸出新的候選輪廓?
6》. 最后對第4步的候選輪廓進行水平和垂直方向投影得到平滑的輪廓作為輸出
卡片輪廓提取流程
2.邊緣檢測
算法流程中1》-3》可以歸為邊緣檢測部分。?
受各種因素影響，圖像會出現降質，需要對其進行增強來提高邊緣檢測的效果。使用全圖單一的直方圖進行均衡化顯然不是最好的選擇，因為截取的瀑布流圖像不同區域對比度可能差別很大，增強后的圖像可能會產生偽影。在單一直方圖均衡化的基礎上，學者基于分塊處理的思想提出了自適應的直方圖均衡化算法(AHE)，但是AHE在增強邊緣的同時有時候也會將噪聲放大。后來學者在AHE的基礎上提出了CLAHE，利用一個對比度閾值來去除噪聲的干擾，如下圖所示直方圖，CLAHE不是將直方圖中超過閾值的部分丟棄，而是將其均勻分布于其他bin中。
CLAHE對比度限制示意圖
Canny算子是一種經典的邊緣檢測算子，它能得到精確的邊緣位置。Canny檢測的一般步驟為：1)用高斯濾波進行降噪 2)用一階偏導的有限差分計算梯度的幅值和方向 3)對梯度幅值進行非極大值抑制 4)用雙閾值檢測和連接邊緣。實驗過程中，需要多次嘗試選擇較好的雙閾值參數。?
檢測出來的邊緣在某些局部地方會斷開，可以采用特定形狀和尺寸的結構元素對二值化圖像進行形態學膨脹處理來連接斷開的邊緣。邊緣檢測的結果如下圖所示，其中c)中CLAHE設定對比度閾值為10.0，區域大小為(10，10)，d)中Canny檢測設置雙閾值為(20，80)，e)中形態學膨脹結構元素使用大小為(3，3)的十字線。
邊緣檢測結果 a)原始圖像 b)灰度化圖像 c)CLAHE增強圖像 d)Canny檢測圖像 e)形態學膨脹圖像
3.輪廓提取
算法流程中4》-6》可以歸為輪廓提取部分。?
二值圖像形態學膨脹處理后，首先提取連續邊緣的外層輪廓。如下圖所示，對于只有0和1的二值圖像，假設S1為像素值為0的一堆背景點，S2為像素值為1的一堆前景點，外層輪廓B1為一堆前景點最外圍的點，內層輪廓B2為一堆前景點最內部的點。通過對二值圖像進行行掃描給不同輪廓邊界賦予不同的整數值，從而確定輪廓的類型以及之間的層次關系。提取出外層輪廓后通過計算輪廓包含的面積大小丟棄面積較小的外層輪廓，輸出第一步候選輪廓。
內外輪廓示意圖
閑魚頁面瀑布流卡片輪廓近似于矩形，在四個角由弧形曲線連接。對于提取的候選輪廓使用Douglas-Peucker算法進行矩形逼近，保留形狀接近矩形的外輪廓。Douglas-Peucker算法通過將一組點表示的曲線或多邊形擬合成另一組更少的點，使得兩組點之間的距離滿足特定的精度。之后輸出第二步候選輪廓。?
通過對第二步候選輪廓所處位置對應的第一步候選輪廓進行水平和垂直方向投影，去除毛刺影響，輸出矩形輪廓。輪廓提取的結果如下圖所示，其中c)中輪廓包含面積設置的閾值為10000，d)中Douglas-Peucker算法設置的精度為0.01*輪廓長度。本文所有提取的輪廓均包含輸入框。
輪廓提取結果 a)原始圖像 b)形態學膨脹圖像 c)紅色線段為第一步候選輪廓 d)紅色線段為第二步候選輪廓 e)紅色線段為最終輸出矩形輪廓
我們再介紹下機器學習如何處理：
深度學習算法
1.目標檢測算法
傳統算法中提出采用傳統圖像處理方法提取輪廓特征，這樣會帶來一個問題：當圖像不清晰或者有遮擋的情況下無法提取出輪廓，即召回率不是很高。
基于卷積神經網絡的目標檢測算法能通過輸入大量樣本數據，學習到更具有代表性和區別性的特征。目前目標檢測算法主要分成兩個派系：以R-CNN家族為代表的兩階段流和以YOLO、SSD為代表的一階段流。一階段流直接對預測的目標進行分類和回歸，優點是速度快，缺點是mAP整體上沒有兩階段流高。兩階段流在對預測的目標進行分類和回歸前需要先生成候選的目標區域，這樣訓練時更容易收斂，因此優點是mAP高，缺點是速度上不如一階段流。不管是一階段流還是兩階段流，通用的目標檢測推理過程如圖所示。輸入一張圖像到特征提取網絡(可選擇VGG、Inception、Resnet等成熟的CNN網絡)得到圖像特征，然后將特定區域特征分別送入分類器和回歸器進行類別分類和位置回歸，最后將框的類別和位置進行輸出。
目標檢測推理過程
2.Faster R-CNN
Faster R-CNN對R-CNN家族最大的貢獻是將生成候選目標區域的過程整合到整個網絡中，使得綜合性能有了較大提高，尤其是在檢測速度上。Faster R-CNN的基本結構如圖所示。主要分為4個部分：1)conv layers。作為一種特征提取網絡，使用一組基礎的conv+relu+pooling層提取圖像的特征，該特征被共享用于后續RPN網絡和全連接層。2)Region Proposal Network。該網絡用于生成候選目標框，通過softmax判斷候選框是屬于前景還是背景，并且通過候選框回歸修正候選框位置。3)RoI pooling。收集輸入的特征圖和候選區域，將這些候選區域映射到固定大小并送入后續全連接層。4)classifer。計算候選框的具體類別，并且再次回歸修正候選框的位置。
Faster R-CNN基本結構
使用Faster R-CNN進行瀑布流卡片的識別，得到下圖的結果。
Faster R-CNN識別結果 a)原始圖像 b)紅框顯示識別的卡片
傳統算法與機器學習的融合
1.融合流程
描述的傳統圖像方法能夠獲得高定位精度的卡片位置，但受卡片本身模式的影響，召回率不高)中右邊卡片沒有檢測到。上文描述的基于目標檢測的深度學習方法具有較高的泛化能力，能獲得較高的召回率，但是回歸過程無法得到高定位精度的卡片位置)中卡片都能檢測出來，但有兩個卡片的邊緣幾乎粘連在了一起。?
將兩種方法得到的結果融合在一起，能同時獲得高精確率、高召回率、高定位精度的檢測結果。融合過程如下：
2.結果
先介紹幾個基本指標:?
True Positive(TP):被模型預測為正的正例數?
True Negative(TN):被模型預測為負的負例數?
False Positive(FP):被模型預測為正的負例數?
False Negative(FN):被模型預測為負的正例數?
精確率(Precision) = TP/(TP+FP):反映了被模型預測的正例中真正的正樣本所占比重?
召回率(Recall) = TP/(TP+FN):反映了被模型正確預測的正例占總的正樣本比重?
定位精度(IOU) = 兩個框的交集大小/兩個框的并集大小
融合結果 a)原始圖像 b)紅框顯示傳統圖像處理識別的卡片 c)紅框顯示深度學習識別的卡片 d)紅框顯示融合b)和c)后的卡片
上圖分別顯示了不同方法識別的卡片,d)相對于b)的優勢是提高了召回率，d)相對于c)的優勢是提高了定位精度。
圖一圖二圖三顯示了一些其他實例圖像的識別，每行圖像是一類實例圖，第一列是原始圖像，第二列是傳統圖像處理識別的卡片，第三列是深度學習識別的卡片，第四列是融合的卡片。
圖一圖二能夠準確識別卡片輪廓：
圖一
圖二
圖三融合卡片的下邊緣并沒有完全貼合，這是因為融合步驟中修正dlbox1位置時，采用傳統圖像處理方法尋找臨域范圍內最近的直線，受到圖像樣式的影響，找到的直線并不是期望的卡片下邊緣。
圖三
實驗過程中隨機截取了50張閑魚瀑布流卡片圖像，共有卡片96個(不包含輸入框)，對每張圖像分別采用傳統圖像處理方法、深度學習方法、融合方法得到卡片的識別結果，其中傳統圖像處理方法共識別出65個卡片，深度學習方法共識別出97個，融合后共識別出98個。精確率、召回率、定位精度如下表所示。融合后識別結果結合了傳統圖像處理方法定位精度高、深度學習方法召回率高的優點。
不同方法結果
前景算法小結
通過對閑魚頁面瀑布流卡片識別過程中的描述，我們簡單介紹了前景處理的探索，通過機器視覺算法和機器學習算法協同完成前景元素的提取和識別。
結束語
本篇我們通過對前景提取和背景分析的介紹，提出了一種通過傳統圖像處理和深度學習相融合的方法，來得到高精確率、高召回率和高定位精度的識別結果。但方法本身還存在一些瑕疵，比如融合過程對組件元素進行修正時也會受到圖像樣式的干擾，后續這部分可以進一步進行優化。
#阿里云開年Hi購季#幸運抽好禮！
點此抽獎：https://www.aliyun.com/acts/product-section-2019/yq-lottery?utm_content=g_1000042901
原文鏈接
本文為云棲社區原創內容，未經允許不得轉載。
總結
以上是生活随笔為你收集整理的UI2Code智能生成Flutter代码——版面分析篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 工程师如何“神还原”用户问题？闲鱼回放技
- 下一篇： 阿里大规模数据中心性能分析