概述
一直以來，如何從“視覺稿”精确的還原出對應的 UI 側代碼一直是端側開發同學工作裡消耗比較大的部分，一方面這部分的工作比較确定缺少技術深度，另一方面視覺設計師也需要投入大量的走查時間，有大量無謂的溝通和消耗。
很多人會比較好奇，為什麼我們嘗試使用圖檔做為輸入源，一方面基于 Sketch 或者 Photoshop 等插件相對容易拿到确定性的資訊，圖檔在某些方面容易丢失一些特征；另外基于圖檔的分析其實挑戰更大。我們做這個選擇有以下原因：
- 首先圖檔作為最終的産出物，更直覺和确定性，另外這個鍊路裡對上遊不會有限制性。
- 視覺稿跟開發代碼不一樣的地方在于布局的不同，比如 listview ，grdview 這類布局類别在設計稿中是不存在的
- 基于圖檔的應用場景會更普适，類似場景。例如自動化測試能力的支援，基于競品直接截圖來套用我們自己的資料源找體感，這類場景是其他的方案做不到的。
- 設計稿有圖層堆疊的問題，從圖檔出發可以更好地合并圖層。
圖像分離是 D2C 圖像處理層的重要組成部分，具體内容包括了版面分析，複雜背景處理，布局識别和屬性提取。本篇會從版面分析和複雜背景内容提取兩個部分加以介紹。版面分析會将圖像分割成若幹個區塊，并對不同的内容做分割和合并。複雜背景處理會在版面分析的基礎上提取一些疊加的元素。
所在分層
本文講述前端智能化 D2C 裡技術分層中的 圖層處理 能力層，主要負責識别圖像的元素類别和提取樣式，同時也為後續的布局算法層賦能。
版面分析
版面分析主要處理 UI 圖像的前景提取和背景分析，通過前後景分離算法，将 UI 視覺稿剪裁為 GUI 元素:
1. 背景分析：通過機器視覺算法，分析背景顔色，背景漸變方向，以及背景的連通區域。
2. 前景分析：通過深度學習算法，對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 元素。
（背景分析後提取的内容子產品）
這個時候我們已經成功将圖檔分層并提取了子產品，後續細節可以在前景分析和複雜背景提取中獲得。
前景分析
前景分析的關鍵在于元件完整性切割與識别。我們通過連通域分析，防止元件碎片化，再通過機器學習識别元件類型，再通過元件類型進行碎片化合并，反複執行上述動作，直到無特征屬性碎片。我們通過瀑布流中提取一個完整 item 為例：
（标紅部分是處理難點）
閑魚頁面中瀑布流卡片識别是實作布局分析的一個重要步驟，需求是當卡片完整出現在截屏圖像中時(允許圖示遮擋)需要識别出來，卡片被背景部分遮擋時不應該識别出來。上圖的瀑布流卡片樣式，由于其布局緊湊且樣式繁多，導緻容易産生漏檢或誤檢。
基于邊緣梯度或連通域的傳統圖像處理方法能根據圖像本身的灰階或者形狀特征提取出瀑布流卡片的輪廓，優點是定位精度高、運算速度快。缺點是容易受到幹擾，召回率不高。
基于目标檢測或者特征點檢測的深度學習方法采用有監督的方式學習卡片的樣式特征，優點是不易受到幹擾，召回率很高。缺點是因為涉及回歸過程，定位精度比傳統圖像處理方法要低，并且需要大量的人工标注，運算速度也比傳統圖像處理方法要慢。
受內建學習的啟發，通過融合傳統圖像處理方法和深度學習方法，結合兩者各自的優點，最終能得到具有較高精确率、召回率和定位精度的識别結果。
傳統圖像處理算法流程如下圖所示:
1》. 輸入的瀑布流卡片圖像轉換成灰階圖後使用對比度受限的自适應直方圖均衡化 (CLAHE) 進行增強
2》. 使用 Canny 算子進行邊緣檢測得到二值化圖像
3》. 對二值化圖像進行形态學膨脹處理，連接配接斷開的邊緣
4》. 提取連續邊緣的外層輪廓，并基于輪廓包含區域的面積大小丢棄面積較小的輪廓，輸出候選輪廓
5》. 使用 Douglas-Peucker 算法進行矩形逼近，保留最像矩形的外輪廓，輸出新的候選輪廓
6》. 最後對第 4 步的候選輪廓進行水準和垂直方向投影得到平滑的輪廓作為輸出
（傳統圖像處理算法流程）
算法流程中 1》-3》可以歸為邊緣檢測部分。
受各種因素影響，圖像會出現降質，需要對其進行增強來提高邊緣檢測的效果。使用全圖單一的直方圖進行均衡化顯然不是最好的選擇，因為截取的瀑布流圖像不同區域對比度可能差别很大，增強後的圖像可能會産生僞影。在單一直方圖均衡化的基礎上，學者基于分塊處理的思想提出了自适應的直方圖均衡化算法 (AHE) ，但是AHE在增強邊緣的同時有時候也會将噪聲放大。後來學者在AHE的基礎上提出了 CLAHE ，利用一個對比度門檻值來去除噪聲的幹擾，如下圖所示直方圖，CLAHE 不是将直方圖中超過門檻值的部分丢棄，而是将其均勻分布于其他 bin 中。
（直方圖均衡）
Canny 算子是一種經典的邊緣檢測算子，它能得到精确的邊緣位置。Canny 檢測的一般步驟為：1) 用高斯濾波進行降噪 2) 用一階偏導的有限差分計算梯度的幅值和方向 3)對梯度幅值進行非極大值抑制 4) 用雙門檻值檢測和連接配接邊緣。實驗過程中，需要多次嘗試選擇較好的雙門檻值參數。
檢測出來的邊緣在某些局部地方會斷開，可以采用特定形狀和尺寸的結構元素對二值化圖像進行形态學膨脹處理來連接配接斷開的邊緣。邊緣檢測的結果如下圖所示，其中 c) 中 CLAHE 設定對比度門檻值為 10.0 ，區域大小為 (10，10)，d) 中 Canny 檢測設定雙門檻值為 (20，80)，e) 中形态學膨脹結構元素使用大小為 (3，3) 的十字線。
（傳統圖像處理結果圖）
算法流程中 4》-6》可以歸為輪廓提取部分。二值圖像形态學膨脹處理後，首先提取連續邊緣的外層輪廓。如下圖所示，對于隻有 0 和 1 的二值圖像，假設 S1 為像素值為 0 的一堆背景點，S2 為像素值為 1 的一堆前景點，外層輪廓 B1 為一堆前景點最外圍的點，内層輪廓 B2 為一堆前景點最内部的點。通過對二值圖像進行行掃描給不同輪廓邊界賦予不同的整數值，進而确定輪廓的類型以及之間的層次關系。提取出外層輪廓後通過計算輪廓包含的面積大小丢棄面積較小的外層輪廓，輸出第一步候選輪廓。
（提取輪廓）
閑魚頁面瀑布流卡片輪廓近似于矩形，在四個角由弧形曲線連接配接。對于提取的候選輪廓使用 Douglas-Peucker 算法進行矩形逼近，保留形狀接近矩形的外輪廓。 Douglas-Peucker 算法通過将一組點表示的曲線或多邊形拟合成另一組更少的點，使得兩組點之間的距離滿足特定的精度。之後輸出第二步候選輪廓。
通過對第二步候選輪廓所處位置對應的第一步候選輪廓進行水準和垂直方向投影，去除毛刺影響，輸出矩形輪廓。輪廓提取的結果如下圖所示，其中 c) 中輪廓包含面積設定的門檻值為 10000 ，d) 中 Douglas-Peucker 算法設定的精度為 0.01 * 輪廓長度。本文所有提取的輪廓均包含輸入框。
（不同方法識别結果）
我們再介紹下機器學習如何處理：
傳統算法中提出采用傳統圖像處理方法提取輪廓特征，這樣會帶來一個問題：當圖像不清晰或者有遮擋的情況下無法提取出輪廓，即召回率不是很高。
基于卷積神經網絡的目标檢測算法能通過輸入大量樣本資料，學習到更具有代表性和差別性的特征。目前目标檢測算法主要分成兩個派系：以 R-CNN 家族為代表的兩階段流和以 YOLO 、SSD 為代表的一階段流。一階段流直接對預測的目标進行分類和回歸，優點是速度快，缺點是 mAP 整體上沒有兩階段流高。兩階段流在對預測的目标進行分類和回歸前需要先生成候選的目标區域，這樣訓練時更容易收斂，是以優點是 mAP 高，缺點是速度上不如一階段流。不管是一階段流還是兩階段流，通用的目标檢測推理過程如圖所示。輸入一張圖像到特征提取網絡(可選擇 VGG 、Inception 、Resnet 等成熟的 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 進行瀑布流卡片的識别，得到下圖的結果。
（目标檢測結果）
傳統算法與機器學習的融合
描述的傳統圖像方法能夠獲得高定位精度的卡片位置，但受卡片本身模式的影響，召回率不高)中右邊卡片沒有檢測到。基于目标檢測的深度學習方法具有較高的泛化能力，能獲得較高的召回率，但是回歸過程無法得到高定位精度的卡片位置)中卡片都能檢測出來，但有兩個卡片的邊緣幾乎粘連在了一起。
将兩種方法得到的結果融合在一起，能同時獲得高精确率、高召回率、高定位精度的檢測結果。融合過程如下：
- 輸入一張圖像，并行運作傳統圖像處理方法和深度學習方法，分别得到提取的卡片框 trbox 和 dlbox 。定位精度以 trbox 為标杆，精确率和召回率以 dlbox 為标杆
- 篩選 trbox 。規則為當 trbox 與 dlbox 的 IOU 大于某個門檻值時(比如 0.8 )保留此trbox，否則丢棄，得到 trbox1
- 篩選 dlbox 。規則為當 dlbox 與 trbox1 的 IOU 大于某個門檻值時(比如0.8)丢棄此 dlbox ，否則保留，得到 dlbox1
- 修正 dlbox1 位置。規則為dlbox1的每條邊移動到距離其最近的一條直線上，限制條件為移動的距離不能超過給定的門檻值(比如 20 個像素)，并且移動的邊不能跨越 trbox1 的邊，得到修正的 dlbox2
- 輸出 trbox1 + dlbox2 為最終融合的卡片框
結果
先介紹幾個基本名額:
True Positive(TP): 被模型預測為正的正例數
True Negative(TN): 被模型預測為負的負例數
False Positive(FP): 被模型預測為正的負例數
False Negative(FN): 被模型預測為負的正例數
精确率 (Precision) = TP/(TP+FP) :反映了被模型預測的正例中真正的正樣本所占比重
召回率 (Recall) = TP/(TP+FN) : 反映了被模型正确預測的正例占總的正樣本比重
定位精度 (IOU) = 兩個框的交集大小/兩個框的并集大小
（不同方式得到的檢測結果）
上圖分别顯示了不同方法識别的卡片, d) 相對于 b) 的優勢是提高了召回率，d) 相對于 c) 的優勢是提高了定位精度。圖一圖二圖三顯示了一些其他執行個體圖像的識别，每行圖像是一類執行個體圖，第一列是原始圖像，第二列是傳統圖像處理識别的卡片，第三列是深度學習識别的卡片，第四列是融合的卡片。
圖一圖二能夠準确識别卡片輪廓：
（前景識别結果示例I）
圖三融合卡片的下邊緣并沒有完全貼合，這是因為融合步驟中修正 dlbox1 位置時，采用傳統圖像處理方法尋找臨域範圍内最近的直線，受到圖像樣式的影響，找到的直線并不是期望的卡片下邊緣。
（前景識别結果示例II）
實驗過程中随機截取了 50 張閑魚瀑布流卡片圖像，共有卡片 96 個(不包含輸入框)，對每張圖像分别采用傳統圖像處理方法、深度學習方法、融合方法得到卡片的識别結果，其中傳統圖像處理方法共識别出 65 個卡片，深度學習方法共識别出 97 個，融合後共識别出 98 個。精确率、召回率、定位精度如下表所示。融合後識别結果結合了傳統圖像處理方法定位精度高、深度學習方法召回率高的優點。
不同方法結果
前景算法小結
通過對閑魚頁面瀑布流卡片識别過程中的描述，我們簡單介紹了前景處理的探索，通過機器視覺算法和機器學習算法協同完成前景元素的提取和識别。
結束語
本篇我們通過對前景提取和背景分析的介紹，提出了一種通過傳統圖像處理和深度學習相融合的方法，來得到高精确率、高召回率和高定位精度的識别結果。但方法本身還存在一些瑕疵，比如融合過程對元件元素進行修正時也會受到圖像樣式的幹擾，後續這部分可以進一步進行優化。
複雜背景内容提取
複雜背景内容提取指的是從複雜的背景中提取出特定的内容，例如在圖檔中提取特定的文字，在圖檔中提取特定的疊加圖層等等。
這是一個業界難題，基于傳統的圖像處理的方法存在準确率和召回率的問題，沒法解決語義的問題。而主流的機器學習的方法，例如目标檢測無法擷取像素級别的位置資訊，而語義分割的方法則隻能提取像素而無法擷取半透明疊加前的像素資訊。
本文考慮到這些痛點，本文采用了目标檢測網絡來實作内容召回，GAN 網絡實作複雜背景中特定前景内容的提取和複原。
複雜背景的處理流程分為如下幾個步驟：
内容召回：
内容召回我們采用目标檢測網絡來實作，例如 Faster-rcnn 或者 Mask-rcnn 等，如下圖所示：
區域判斷：
根據拉普拉斯算子計算周邊梯度，判斷所處區域是否是複雜區域。
簡單背景：
由于目标檢測模型本身的局限性，會導緻沒法達到像素級别的精确性，是以需要對位置做修正。如果是簡單背景就可以基于梯度的思想做位置修正，具體計算方式如下：
（簡單背景位置修正公式）
複雜背景：
背景是複雜背景時，左圖是原圖，右圖是提取的文字區塊：
（原圖和文字區域）
此時提取出的框不是完全正确，那麼此時根據梯度等機器視覺算法已經不能對位置做正确的修正了。本文提出了基于 GAN 網絡的方式來解決複雜背景内容提取問題，網絡的主要結構如下圖所示：
（GAN網絡流程圖）
為什麼選擇 GAN 網絡？
1）基于 srGAN 網絡，該網絡加入了特征圖的損失函數，這樣可以很好保留高頻資訊，能更好的保留邊緣。特征圖的損失函數如下圖所示：
（特征圖損失函數）
該公式将原圖和生成圖特征值差的平方做為損失函數。
2）由于有對抗損失的存在，可以很好的降低誤檢率。
3）最重要的一點是在有透明度的場景下，語義分割網絡隻能“提取”元素，無法“還原”元素。而GAN網絡不僅可以在提取元素的同時還原出未疊加時的像素情況。
網絡訓練流程圖：
（srGAN網絡訓練流程）
針對業務場景對 GAN 網絡做的改進：
由于我們不是超分辨率場景，是以不用 pixelShuffler 子產品做上采樣。
由于場景比較複雜，可以引入 denseNet 和加深網絡來提高準确率。
内容損失函數對于壓制誤判的噪點效果不理想，是以加大了誤判的懲罰，具體如下圖所示：
預測擷取的結果圖 I :
（複雜背景的文字内容提取）
預測擷取的結果圖 II :
（原圖和相應的處理結果）
本篇我們通過複雜背景内容提取的介紹，提出了一種機器學習為主，圖像處理為輔去精确擷取特定前景内容的方法，得到了高精确率、高召回率和高定位精度的識别結果。
下圖分别是傳統算法，語義分割方法和本文融合方法的各個名額的情況。
（不同算法的識别結果）
業務場景落地
本篇我們提出的方法已經應用在如下場景：
- imgcook 圖檔鍊路中應用，對于通用場景的準确率能達到 73% ，特定的卡片場景能達到 92% 以上。
- 淘寶自動化測試圖像内容了解，例如應用在99大促和雙11子產品識别中。整體的準确率和召回率都能達到 97% 以上。
未來展望
未來我們打算從圖檔鍊路出發，做到如下幾點：
- 豐富和完善布局資訊，能夠精确地識别 listview，gridview，waterfull 等布局資訊。
- 進一步提高通用場景的準确率和召回率。針對小目标，我們後續會引入特征金字塔（fpn），Cascade等一系列技術來提高我們的準确率和召回率。
- 增加适配的特定場景。現有的場景隻覆寫了閑魚和部分淘寶的頁面适配，我們希望後續能夠支援更多的頁面，進一步提高圖像的泛化能力。
- 引入圖檔樣本制造機，降低特定場景的接入門檻。