Categories
程式開發

前端代碼是怎樣智能生成的-圖像分離篇


作為阿里經濟體前端委員會四大技術方向之一,前端智能化項目經歷了2019 雙十一的階段性考驗,交出了不錯的答卷,天貓淘寶雙十一會場新增模塊79.34% 的線上代碼由前端智能化項目自動生成。在此期間研發小組經歷了許多困難與思考,本次 《前端代碼是怎樣智能生成的》 系列分享,將與大家分享前端智能化項目中技術與思考的點點滴滴。

概述

一直以來,如何從“視覺稿”精確的還原出對應的UI 側代碼一直是端側開發同學工作裡消耗比較大的部分,一方面這部分的工作比較確定缺少技術深度,另一方面視覺設計師也需要投入大量的走查時間,有大量無謂的溝通和消耗。

很多人會比較好奇,為什麼我們嘗試使用圖片做為輸入源,一方面基於Sketch 或者Photoshop 等插件相對容易拿到確定性的信息,圖片在某些方面容易丟失一些特徵;另外基於圖片的分析其實挑戰更大。我們做這個選擇有以下原因:

  1. 首先圖片作為最終的產出物,更直觀和確定性,另外這個鏈路里對上游不會有約束性。
  2. 視覺稿跟開發代碼不一樣的地方在於佈局的不同,比如 listview ,grdview 這類佈局類別在設計稿中是不存在的
  3. 基於圖片的應用場景會更普適,類似場景。例如自動化測試能力的支持,基於競品直接截圖來套用我們自己的數據源找體感,這類場景是其他的方案做不到的。
  4. 設計稿有圖層堆疊的問題,從圖片出發可以更好地合併圖層。

圖像分離是 D2C 圖像處理層的重要組成部分,具體內容包括了版面分析,複雜背景處理,佈局識別和屬性提取。本篇會從版面分析和復雜背景內容提取兩個部分加以介紹。版面分析會將圖像分割成若干個區塊,並對不同的內容做分割和合併。複雜背景處理會在版面分析的基礎上提取一些疊加的元素。

所在分層

本文講述前端智能化 D2C 裡技術分層中的 圖層處理 能力層,主要負責識別圖像的元素類別和提取樣式,同時也為後續的佈局算法層賦能。

前端代碼是怎樣智能生成的-圖像分離篇 1

版面分析

版面分析主要處理 UI 圖像的前景提取和背景分析,通過前後景分離算法,將 UI 視覺稿剪裁為 GUI 元素:

背景分析:通過機器視覺算法,分析背景顏色,背景漸變方向,以及背景的連通區域。
前景分析:通過深度學習算法,對GUI碎片進行整理,合併,識別。

背景分析

背景分析的關鍵在於找到背景的連通區域和閉合區間,具體的步驟如下:

第一步:判斷背景區塊,通過 sobel,Lapacian,canny 等邊緣檢測的方法計算出梯度變化方向,從而得到純色背景和漸變色背景區域。基於拉普拉斯算子的背景區域提取離散拉普拉斯算子的模板如下:

前端代碼是怎樣智能生成的-圖像分離篇 2

此外,我們通過統計背景運動趨勢的方式來判定它是否存在漸變色背景。如果存在,我們將通過第二步進行精細化處理。

第二步:基於漫水填充算法,選取漫水的種子節點,濾除漸變色背景區域噪聲。

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
"""
漫⽔填充:会改变图像
"""
# 获取图⽚的⾼和宽
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

處理過後的效果如下:

前端代碼是怎樣智能生成的-圖像分離篇 3

(原圖與處理效果圖)

第三步:通過版面切割,提取 GUI 元素。

前端代碼是怎樣智能生成的-圖像分離篇 4

(背景分析後提取的內容模塊)

這個時候我們已經成功將圖片分層並提取了模塊,後續細節可以在前景分析和復雜背景提取中獲得。

前景分析

前景分析的關鍵在於組件完整性切割與識別。我們通過連通域分析,防止組件碎片化,再通過機器學習識別組件類型,再通過組件類型進行碎片化合併,反复執行上述動作,直到無特徵屬性碎片。我們通過瀑布流中提取一個完整 item 為例:

前端代碼是怎樣智能生成的-圖像分離篇 5

(標紅部分是處理難點)

閒魚頁面中瀑布流卡片識別是實現佈局分析的一個重要步驟,需求是當卡片完整出現在截屏圖像中時(允許圖標遮擋)需要識別出來,卡片被背景部分遮擋時不應該識別出來。上圖的瀑布流卡片樣式,由於其佈局緊湊且樣式繁多,導致容易產生漏檢或誤檢。

基於邊緣梯度或連通域的傳統圖像處理方法能根據圖像本身的灰度或者形狀特徵提取出瀑布流卡片的輪廓,優點是定位精度高、運算速度快。缺點是容易受到干擾,召回率不高。

基於目標檢測或者特徵點檢測的深度學習方法採用有監督的方式學習卡片的樣式特徵,優點是不易受到干擾,召回率很高。缺點是因為涉及回歸過程,定位精度比傳統圖像處理方法要低,並且需要大量的人工標註,運算速度也比傳統圖像處理方法要慢。

受集成學習的啟發,通過融合傳統圖像處理方法和深度學習方法,結合兩者各自的優點,最終能得到具有較高精確率、召回率和定位精度的識別結果。

傳統圖像處理算法流程如下圖所示:

  1. 輸入的瀑布流卡片圖像轉換成灰度圖後使用對比度受限的自適應直方圖均衡化 (CLAHE) 進行增強
  2. 使用 Canny 算子進行邊緣檢測得到二值化圖像
  3. 對二值化圖像進行形態學膨脹處理,連接斷開的邊緣
  4. 提取連續邊緣的外層輪廓,並基於輪廓包含區域的面積大小丟棄面積較小的輪廓,輸出候選輪廓
  5. 使用 Douglas-Peucker 算法進行矩形逼近,保留最像矩形的外輪廓,輸出新的候選輪廓
  6. 最後對第 4 步的候選輪廓進行水平和垂直方向投影得到平滑的輪廓作為輸出

前端代碼是怎樣智能生成的-圖像分離篇 6

(傳統圖像處理算法流程)

算法流程中 1-3 可以歸為邊緣檢測部分。

受各種因素影響,圖像會出現降質,需要對其進行增強來提高邊緣檢測的效果。使用全圖單一的直方圖進行均衡化顯然不是最好的選擇,因為截取的瀑布流圖像不同區域對比度可能差別很大,增強後的圖像可能會產生偽影。在單一直方圖均衡化的基礎上,學者基於分塊處理的思想提出了自適應的直方圖均衡化算法 (AHE) ,但是AHE在增強邊緣的同時有時候也會將噪聲放大。後來學者在AHE的基礎上提出了CLAHE ,利用一個對比度閾值來去除噪聲的干擾,如下圖所示直方圖,CLAHE 不是將直方圖中超過閾值的部分丟棄,而是將其均勻分佈於其他bin 中。

前端代碼是怎樣智能生成的-圖像分離篇 7

(直方圖均衡)

Canny 算子是一種經典的邊緣檢測算子,它能得到精確的邊緣位置。 Canny 檢測的一般步驟為:1) 用高斯濾波進行降噪2) 用一階偏導的有限差分計算梯度的幅值和方向3)對梯度幅值進行非極大值抑制4) 用雙閾值檢測和連接邊緣。實驗過程中,需要多次嘗試選擇較好的雙閾值參數。

檢測出來的邊緣在某些局部地方會斷開,可以採用特定形狀和尺寸的結構元素對二值化圖像進行形態學膨脹處理來連接斷開的邊緣。邊緣檢測的結果如下圖所示,其中c) 中CLAHE 設定對比度閾值為10.0 ,區域大小為(10,10),d) 中Canny 檢測設置雙閾值為(20,80),e) 中形態學膨脹結構元素使用大小為(3,3) 的十字線。

前端代碼是怎樣智能生成的-圖像分離篇 8

(傳統圖像處理結果圖)

算法流程中 4-6 可以歸為輪廓提取部分。二值圖像形態學膨脹處理後,首先提取連續邊緣的外層輪廓。如下圖所示,對​​於只有0 和1 的二值圖像,假設S1 為像素值為0 的一堆背景點,S2 為像素值為1 的一堆前景點,外層輪廓B1 為一堆前景點最外圍的點,內層輪廓B2 為一堆前景點最內部的點。通過對二值圖像進行行掃描給不同輪廓邊界賦予不同的整數值,從而確定輪廓的類型以及之間的層次關係。提取出外層輪廓後通過計算輪廓包含的面積大小丟棄面積較小的外層輪廓,輸出第一步候選輪廓。

前端代碼是怎樣智能生成的-圖像分離篇 9

(提取輪廓)

閒魚頁面瀑布流卡片輪廓近似於矩形,在四個角由弧形曲線連接。對於提取的候選輪廓使用 Douglas-Peucker 算法進行矩形逼近,保留形狀接近矩形的外輪廓。 Douglas-Peucker 算法通過將一組點表示的曲線或多邊形擬合成另一組更少的點,使得兩組點之間的距離滿足特定的精度。之後輸出第二步候選輪廓。

通過對第二步候選輪廓所處位置對應的第一步候選輪廓進行水平和垂直方向投影,去除毛刺影響,輸出矩形輪廓。輪廓提取的結果如下圖所示,其中 c) 中輪廓包含面積設置的閾值為 10000 ,d) 中 Douglas-Peucker 算法設置的精度為 0.01 * 輪廓長度。本文所有提取的輪廓均包含輸入框。

前端代碼是怎樣智能生成的-圖像分離篇 10

(不同方法識別結果)

我們再介紹下機器學習如何處理:

傳統算法中提出採用傳統圖像處理方法提取輪廓特徵,這樣會帶來一個問題:當圖像不清晰或者有遮擋的情況下無法提取出輪廓,即召回率不是很高。

基於卷積神經網絡的目標檢測算法能通過輸入大量樣本數據,學習到更具有代表性和區別性的特徵。目前目標檢測算法主要分成兩個派系:以 R-CNN 家族為代表的兩階段流和以 YOLO 、SSD 為代表的一階段流。一階段流直接對預測的目標進行分類和回歸,優點是速度快,缺點是 mAP 整體上沒有兩階段流高。兩階段流在對預測的目標進行分類和回歸前需要先生成候選的目標區域,這樣訓練時更容易收斂,因此優點是 mAP 高,缺點是速度上不如一階段流。不管是一階段流還是兩階段流,通用的目標檢測推理過程如圖所示。輸入一張圖像到特徵提取網絡(可選擇VGG 、Inception 、Resnet 等成熟的CNN 網絡)得到圖像特徵,然後將特定區域特徵分別送入分類器和回歸器進行類別分類和位置回歸,最後將框的類別和位置進行輸出。

前端代碼是怎樣智能生成的-圖像分離篇 11

(目標檢測網絡流程示意)

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。計算候選框的具體類別,並且再次回歸修正候選框的位置。

前端代碼是怎樣智能生成的-圖像分離篇 12

(目標檢測網絡基本結構示意)

使用 Faster R-CNN 進行瀑布流卡片的識別,得到下圖的結果。

前端代碼是怎樣智能生成的-圖像分離篇 13

(目標檢測結果)

標題傳統算法與機器學習的融合

描述的傳統圖像方法能夠獲得高定位精度的卡片位置,但受卡片本身模式的影響,召回率不高)中右邊卡片沒有檢測到。基於目標檢測的深度學習方法具有較高的泛化能力,能獲得較高的召回率,但是回歸過程無法得到高定位精度的卡片位置)中卡片都能檢測出來,但有兩個卡片的邊緣幾乎粘連在了一起。

將兩種方法得到的結果融合在一起,能同時獲得高精確率、高召回率、高定位精度的檢測結果。融合過程如下:

  1. 輸入一張圖像,並行運行傳統圖像處理方法和深度學習方法,分別得到提取的卡片框 trbox 和 dlbox 。定位精度以 trbox 為標杆,精確率和召回率以 dlbox 為標杆
  2. 篩選 trbox 。規則為當 trbox 與 dlbox 的 IOU 大於某個閾值時(比如 0.8 )保留此trbox,否則丟棄,得到 trbox1
  3. 篩選 dlbox 。規則為當 dlbox 與 trbox1 的 IOU 大於某個閾值時(比如0.8)丟棄此 dlbox ,否則保留,得到 dlbox1
  4. 修正 dlbox1 位置。規則為dlbox1的每條邊移動到距離其最近的一條直線上,約束條件為移動的距離不能超過給定的閾值(比如 20 個像素),並且移動的邊不能跨越 trbox1 的邊,得到修正的 dlbox2
  5. 輸出 trbox1 + dlbox2 為最終融合的卡片框

結果

先介紹幾個基本指標:
True Positive(TP): 被模型預測為正的正例數
True Negative(TN): 被模型預測為負的負例數
False Positive(FP): 被模型預測為正的負例數
False Negative(FN): 被模型預測為負的正例數
精確率 (Precision) = TP/(TP+FP) :反映了被模型預測的正例中真正的正樣本所佔比重
召回率 (Recall) = TP/(TP+FN) : 反映了被模型正確預測的正例佔總的正樣本比重
定位精度 (IOU) = 兩個框的交集大小/兩個框的並集大小

前端代碼是怎樣智能生成的-圖像分離篇 14

(不同方式得到的檢測結果)

上圖分別顯示了不同方法識別的卡片, d) 相對於 b) 的優勢是提高了召回率,d) 相對於 c) 的優勢是提高了定位精度。圖一圖二圖三顯示了一些其他實例圖像的識別,每行圖像是一類實例圖,第一列是原始圖像,第二列是傳統圖像處理識別的卡片,第三列是深度學習識別的卡片,第四列是融合的卡片。

圖一圖二能夠準確識別卡片輪廓:

前端代碼是怎樣智能生成的-圖像分離篇 15前端代碼是怎樣智能生成的-圖像分離篇 16

(前景識別結果示例I)

圖三融合卡片的下邊緣並沒有完全貼合,這是因為融合步驟中修正dlbox1 位置時,採用傳統圖像處理方法尋找臨域範圍內最近的直線,受到圖像樣式的影響,找到的直線並不是期望的卡片下邊緣。

前端代碼是怎樣智能生成的-圖像分離篇 17

(前景識別結果示例II)

實驗過程中隨機截取了50 張閒魚瀑布流卡片圖像,共有卡片96 個(不包含輸入框),對每張圖像分別採用傳統圖像處理方法、深度學習方法、融合方法得到卡片的識別結果,其中傳統圖像處理方法共識別出65 個卡片,深度學習方法共識別出97 個,融合後共識別出98 個。精確率、召回率、定位精度如下表所示。融合後識別結果結合了傳統圖像處理方法定位精度高、深度學習方法召回率高的優點。

不同方法結果:

前端代碼是怎樣智能生成的-圖像分離篇 18

前景算法小結

通過對閒魚頁面瀑布流卡片識別過程中的描述,我們簡單介紹了前景處理的探索,通過機器視覺算法和機器學習算法協同完成前景元素的提取和識別。

結束語

本篇我們通過對前景提取和背景分析的介紹,提出了一種通過傳統圖像處理和深度學習相融合的方法,來得到高精確率、高召回率和高定位精度的識別結果。但方法本身還存在一些瑕疵,比如融合過程對組件元素進行修正時也會受到圖像樣式的干擾,後續這部分可以進一步進行優化。

複雜背景內容提取

複雜背景內容提取指的是從復雜的背景中提取出特定的內容,例如在圖片中提取特定的文字,在圖片中提取特定的疊加圖層等等。

這是一個業界難題,基於傳統的圖像處理的方法存在準確率和召回率的問題,沒法解決語義的問題。而主流的機器學習的方法,例如目標檢測無法獲取像素級別的位置信息,而語義分割的方法則只能提取像素而無法獲取半透明疊加前的像素信息。

本文考慮到這些痛點,本文采用了目標檢測網絡來實現內容召回,GAN 網絡實現複雜背景中特定前景內容的提取和復原。

複雜背景的處理流程分為如下幾個步驟:

  • 內容召回:通過目標檢測網絡召回元素,即元素是否需要做背景提取操作。
  • 區域判斷:根據梯度等視覺方法判斷所處區域是否是複雜區域。
  • 簡單區域:基於梯度的方式找到背景區塊。
  • 複雜區域:採用SRGAN網絡進行內容提取。

內容召回

內容召回我們採用目標檢測網絡來實現,例如 Faster-rcnn 或者 Mask-rcnn 等,如下圖所示:

前端代碼是怎樣智能生成的-圖像分離篇 19

區域判斷

根據拉普拉斯算子計算周邊梯度,判斷所處區域是否是複雜區域。

簡單背景

由於目標檢測模型本身的局限性,會導致沒法達到像素級別的精確性,因此需要對位置做修正。如果是簡單背景就可以基於梯度的思想做位置修正,具體計算方式如下:

前端代碼是怎樣智能生成的-圖像分離篇 20

(簡單背景位置修正公式)

複雜背景

背景是複雜背景時,左圖是原圖,右圖是提取的文字區塊:

前端代碼是怎樣智能生成的-圖像分離篇 21

(原圖和文字區域)

提取出的框不是完全正確,那麼此時根據梯度等機器視覺算法已經不能對位置做正確的修正了。本文提出了基於 GAN 網絡的方式來解決複雜背景內容提取問題,網絡的主要結構如下圖所示:

前端代碼是怎樣智能生成的-圖像分離篇 22

(GAN網絡流程圖)

為什麼選擇 GAN 網絡?

1)基於 srGAN 網絡,該網絡加入了特徵圖的損失函數,這樣可以很好保留高頻信息,能更好的保留邊緣。特徵圖的損失函數如下圖所示:

前端代碼是怎樣智能生成的-圖像分離篇 23

(特徵圖損失函數)

該公式將原圖和生成圖特徵值差的平方做為損失函數。
2)由於有對抗損失的存在,可以很好的降低誤檢率。
3)最重要的一點是在有透明度的場景下,語義分割網絡只能“提取”元素,無法“還原”元素。而GAN網絡不僅可以在提取元素的同時還原出未疊加時的像素情況。

網絡訓練流程圖

前端代碼是怎樣智能生成的-圖像分離篇 24

(srGAN網絡訓練流程)

針對業務場景對 GAN 網絡做的改進

1.由於我們不是超分辨率場景,因此不用 pixelShuffler 模塊做上採樣。
2.由於場景比較複雜,可以引入 denseNet 和加深網絡來提高準確率。
3.內容損失函數對於壓制誤判的噪點效果不理想,因此加大了誤判的懲罰,具體如下圖所示:

前端代碼是怎樣智能生成的-圖像分離篇 25

預測獲取的結果圖 I :

前端代碼是怎樣智能生成的-圖像分離篇 26

(複雜背景的文字內容提取)

預測獲取的結果圖 II :

前端代碼是怎樣智能生成的-圖像分離篇 27

(原圖和相應的處理結果)

結束語

本篇我們通過複雜背景內容提取的介紹,提出了一種機器學習為主,圖像處理為輔去精確獲取特定前景內容的方法,得到了高精確率、高召回率和高定位精度的識別結果。

下圖分別是傳統算法,語義分割方法和本文融合方法的各個指標的情況。

前端代碼是怎樣智能生成的-圖像分離篇 28

(不同算法的識別結果)

業務場景落地

本篇我們提出的方法已經應用在如下場景:

1.imgcook 圖片鏈路中應用,對於通用場景的準確率能達到 73% ,特定的卡片場景能達到 92% 以上。
2.淘寶自動化測試圖像內容理解,例如應用在99大促和雙11模塊識別中。整體的準確率和召回率都能達到 97% 以上。

未來展望

未來我們打算從圖片鏈路出發,做到如下幾點:

1.豐富和完善佈局信息,能夠精確地識別 listview,gridview,waterfull 等佈局信息。
2.進一步提高通用場景的準確率和召回率。針對小目標,我們後續會引入特徵金字塔(fpn),Cascade等一系列技術來提高我們的準確率和召回率。
3.增加適配的特定場景。現有的場景只覆蓋了閒魚和部分淘寶的頁面適配,我們希望後續能夠支持更多的頁面,進一步提高圖像的泛化能力。
4.引入圖片樣本製造機,降低特定場景的接入門檻。