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