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

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

文/仝輝算法

概述

一直以來，如何從「視覺稿」精確的還原出對應的 UI 側代碼一直是端側開發同窗工做裏消耗比較大的部分，一方面這部分的工做比較肯定缺乏技術深度，另外一方面視覺設計師也須要投入大量的走查時間，有大量無謂的溝通和消耗。

不少人會比較好奇，爲何咱們嘗試使用圖片作爲輸入源，一方面基於 Sketch 或者 Photoshop 等插件相對容易拿到肯定性的信息，圖片在某些方面容易丟失一些特徵；另外基於圖片的分析其實挑戰更大。咱們作這個選擇有如下緣由：bash

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

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

所在分層

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

網絡

版面分析

版面分析主要處理 UI 圖像的前景提取和背景分析，經過先後景分離算法，將 UI 視覺稿剪裁爲 GUI 元素:機器學習

背景分析：經過機器視覺算法，分析背景顏色，背景漸變方向，以及背景的連通區域。
前景分析：經過深度學習算法，對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
複製代碼

處理事後的效果以下：

oop

（原圖與處理效果圖）

第三步：經過版面切割，提取 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 網絡實現複雜背景中特定前景內容的提取和復原。

複雜背景的處理流程分爲以下幾個步驟：

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

內容召回：

內容召回咱們採用目標檢測網絡來實現，例如 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等一系列技術來提升咱們的準確率和召回率。
增長適配的特定場景。現有的場景只覆蓋了閒魚和部分淘寶的頁面適配，咱們但願後續可以支持更多的頁面，進一步提升圖像的泛化能力。
引入圖片樣本製造機，下降特定場景的接入門檻。

更多推薦：

imgcook 官網體驗一鍵智能生成代碼
imgcook 知乎專欄爲你帶來前端智能化前沿資訊
釘釘交流