背景

在上一篇文章詳解阿里99大促活動頁內容識別技術實現，我們介紹了在淘寶99大促中，我們使用了怎樣的算法模型去識別并完成自動化測試的。

迫切解決的樣本問題

淘寶大促有近百個模塊、上千個頁面，模塊間具有相似性，并且模塊內部具備多種狀態，如果想要準確識別每個模塊類型，單模塊的樣本數量至少要達到萬級，而人工標注成本高、效率低下、數據量少，純靠人力是無法滿足模型訴求的。基于此，今天，我來介紹下，模型識別背后的大批量數據樣本生成的技術方案。

思路

總體技術方案如下：?

模型的樣本要求

算法模型識別的輸入是99大促的各個會場截圖，輸出是目標模塊名稱及其在截圖中的坐標位置。?

模型訓練時，就是把模塊渲染圖、相應坐標位置與模塊類型輸入給模型，交給模型去進行監督學習。而模型需要的，就是各個模塊大批量的圖片樣本。?

一個模塊，是由View和ViewModel組合而成，而View是固定的，ViewModel跟隨會場場景不同，是動態變化的。?

那么，如果我們能拿到描述模塊的View的這一層DSL，輔助以動態的ViewModel數據，再把View和ViewModel渲染成圖片，那我們就可以生成無窮無盡的樣本數據了。

DSL描述View

仔細梳理之后，View拆分為原子級元素（Text、Image、Shape）和原子級元素的組合關系（Group），即與HTML DOM樹狀結構中的各層級容器嵌套與葉子節點類型是同樣的邏輯。?
基于節點類型和節點樣式的DSL，我們就能描述一個完整的View了。

{"layers": [{"frame": {"y": 354,"x": 44,"height": 32,"width": 312},"id": 2,"type": "text","value": "Adidas Stan Smith","textStyles": {"fontFamily": "Helvetica, sans-serif","fontSize": 24}}, {"frame": {"y": 0,"x": 384,"height": 342,"width": 342},"id": 3,"type": "image","value": "//img.alicdn.com/bao/uploaded/i1/TB1.mcuNpXXXXctXFXXSutbFXXX.jpg_350x350Q50s50.jpg_.webp","styles": {"height": 342,"width": 342}}, {"frame": {"y": 0,"x": 384,"height": 342,"width": 342},"id": 4,"type": "shape","styles": {"height": 342,"width": 342,"backgroundColor": "rgba(0, 0, 0, 0.1)"}}],"frame": {"y": 0,"x": 0,"height": 4920,"width": 750},"id": 1,"type": "group","moduleName": "pmod-zebra-recommand-item" }

其中，除了節點類型和節點樣式之外，最外層的moduleName代表模塊名稱，id是為了標記每一個子元素，frame是每個子元素的坐標位置、輔助算法模型識別模塊內部子元素，value值只有text和image才有，對應相應的文本值還有圖片鏈接。

獲取模塊View的DSL

有3種方案可以獲取到模塊View的DSL，分別是：?
1、從代碼倉庫中獲取；?
2、從sketch視覺稿中生成；?
3、從瀏覽器渲染好的頁面中獲取。

我最后選擇了第三種方案，放棄第一個方案是因為代碼寫法千差萬別，很多展現邏輯還包含在js代碼中，并且還要處理各種for循環子View、style的映射關系等等，復雜度太高。第二個方案目前集團內已有技術方案imgcook，這一塊的準確率聽說還不錯，并且一直在持續優化，而最終選擇第三個方案的原因是，能100%準確地還原模塊DSL，并且只需要關注模塊最終展現給用戶時候的形態，不需要理會過程中開發者做得各種復雜業務邏輯，復雜度相對低很多。

技術方案

在開發流程上，每個模塊在開發完成后，都會有對應的模塊預覽頁面。我使用了puppeteer模擬真實瀏覽器，對模塊的節點信息進行提取，并保存為規范的DSL。

清洗window.getComputedStyle

通過window.getComputedStyle獲取DOM節點的樣式，會返回包含280個樣式屬性的對象，如果把每個DOM節點的所有280個樣式屬性都存儲到DSL中，會造成兩個問題：?
1、DSL文件冗余，且文件大小過大，解析耗時；?
2、增加算法同學對DSL的理解和調整成本。

第一步，隱藏默認屬性值；?
大部分的樣式屬性都是默認值，我們首先把默認的樣式屬性剔除出去。

{ alignSelf: 'auto', ... }

第二步，剔除無效屬性；?
開發者常用的樣式屬性在20個左右，有很多的樣式是不具備實際效用的，把無效用的樣式屬性剔除掉，比如說：

{ zoom: '1', writingMode: 'horizontal-tb', ... }

第三步，transform動態計算?
通過getComputedStyle拿到的transform屬性值是一個矩陣方法matrix()，感興趣的同學可以戳這里理解下2D轉換矩陣。我們使用puppeteer模擬瀏覽器設置的屏幕寬度是750，也就是說，得到的transform值中translateX和translateY兩個值是以750為基準換算得到的一個數字，假如想要在下面描述到的將DSL渲染成圖時（算法同學期望能模擬各種各樣的屏幕尺寸去生成樣本），就必須將獲取到的transform值換算成相應屏幕設備時的值。

# 為了方便算法同學更好使用DSL渲染成圖的工具，這里使用python來實現 # screenshotShape是一個數組，代表屏幕寬高 [width, height] if 'transform' in style and 'matrix' in style['transform']:matrix = style['transform'][7:-1].split(',')translate = list(map(float, matrix[-2:]))translateResult = list(map(str, [distance*(screenshotShape[0]/750) for distance in translate]))matrix[-2:] = translateResult

通過以上3個步驟，最終得到的DOM節點樣式屬性個數一般維持在20個以內，能使輸出的DSL精簡非常多。

DSL渲染成圖片

同樣的，我們能基于puppeteer去對頁面做操作，也能使用它去把DSL渲染成目標模塊頁面，并截圖。

首先，建立DSL與HTML標簽的映射關系

其次，如果是DSL類型為Group，就遞歸遍歷里面的所有子元素，以此類推。
完整的渲染流程圖如下：

ViewModel動態數據

一個模塊，應用到99大促、雙十一等各種會場，背后樣式都是一致的，只有對應的數據不同，動態的數據一般是商品圖片和商品信息。?
閑魚有一億多的商品數據，如果把這商品數據拿過來與View一起渲染成模塊，每個模塊就有了成千上萬種展現形態，且貼合算法模型實際識別過程中的輸入，既能滿足樣本數量的要求，也能符合模型實際識別的場景，使模型準確率獲得更大地提升。

效果

通過這樣一條生成樣本的通道，每個模塊都能夠提供給算法同學幾萬張質量很高的樣本截圖，使模型的準確率達到98%以上。

未來

上述文章描述了如何批量生成樣本來幫助解決算法模型對99大促和雙十一會場中各個模塊的識別。

目前，對模塊DSL的動態調整依賴算法同學對模塊的理解，eg.改變圓角borderRadius生成更多正向樣本，或者增加噪聲，eg.刪除商品內容節點等生成負向樣本，這些操作都需要算法同學對DSL進行定制化配置。在未來，我們希望嘗試把這部分的工作也交給模型去處理，讓模型對樣本生成做決策，調整DSL的局部，并生成樣式更加豐富和可靠的樣本。

原文鏈接
本文為云棲社區原創內容，未經允許不得轉載。

總結

以上是生活随笔為你收集整理的阿里99大促 | 模型识别背后的样本生成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。