景

在上一篇文章詳解阿里99大促活動(dòng)頁(yè)內(nèi)容識(shí)別技術(shù)實(shí)現(xiàn)，我們介紹了在淘寶99大促中，我們使用了怎樣的算法模型去識(shí)別并完成自動(dòng)化測(cè)試的。

迫切解決的樣本問(wèn)題

淘寶大促有近百個(gè)模塊、上千個(gè)頁(yè)面，模塊間具有相似性，并且模塊內(nèi)部具備多種狀態(tài)，如果想要準(zhǔn)確識(shí)別每個(gè)模塊類(lèi)型，單模塊的樣本數(shù)量至少要達(dá)到萬(wàn)級(jí)，而人工標(biāo)注成本高、效率低下、數(shù)據(jù)量少，純靠人力是無(wú)法滿(mǎn)足模型訴求的。基于此，今天，我來(lái)介紹下，模型識(shí)別背后的大批量數(shù)據(jù)樣本生成的技術(shù)方案。

思路

總體技術(shù)方案如下：

模型的樣本要求

算法模型識(shí)別的輸入是99大促的各個(gè)會(huì)場(chǎng)截圖，輸出是目標(biāo)模塊名稱(chēng)及其在截圖中的坐標(biāo)位置。

模型訓(xùn)練時(shí)，就是把模塊渲染圖、相應(yīng)坐標(biāo)位置與模塊類(lèi)型輸入給模型，交給模型去進(jìn)行監(jiān)督學(xué)習(xí)。而模型需要的，就是各個(gè)模塊大批量的圖片樣本。

一個(gè)模塊，是由View和ViewModel組合而成，而View是固定的，ViewModel跟隨會(huì)場(chǎng)場(chǎng)景不同，是動(dòng)態(tài)變化的。

那么，如果我們能拿到描述模塊的View的這一層DSL，輔助以動(dòng)態(tài)的ViewModel數(shù)據(jù)，再把View和ViewModel渲染成圖片，那我們就可以生成無(wú)窮無(wú)盡的樣本數(shù)據(jù)了。

DSL描述View

仔細(xì)梳理之后，View拆分為原子級(jí)元素（Text、Image、Shape）和原子級(jí)元素的組合關(guān)系（Group），即與HTML DOM樹(shù)狀結(jié)構(gòu)中的各層級(jí)容器嵌套與葉子節(jié)點(diǎn)類(lèi)型是同樣的邏輯。

基于節(jié)點(diǎn)類(lèi)型和節(jié)點(diǎn)樣式的DSL，我們就能描述一個(gè)完整的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": "http://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"
}

其中，除了節(jié)點(diǎn)類(lèi)型和節(jié)點(diǎn)樣式之外，最外層的moduleName代表模塊名稱(chēng)，id是為了標(biāo)記每一個(gè)子元素，frame是每個(gè)子元素的坐標(biāo)位置、輔助算法模型識(shí)別模塊內(nèi)部子元素，value值只有text和image才有，對(duì)應(yīng)相應(yīng)的文本值還有圖片鏈接。

獲取模塊View的DSL

有3種方案可以獲取到模塊View的DSL，分別是：

1、從代碼倉(cāng)庫(kù)中獲??；

2、從sketch視覺(jué)稿中生成；

3、從瀏覽器渲染好的頁(yè)面中獲取。

我最后選擇了第三種方案，放棄第一個(gè)方案是因?yàn)榇a寫(xiě)法千差萬(wàn)別，很多展現(xiàn)邏輯還包含在js代碼中，并且還要處理各種for循環(huán)子View、style的映射關(guān)系等等，復(fù)雜度太高。第二個(gè)方案目前集團(tuán)內(nèi)已有技術(shù)方案imgcook，這一塊的準(zhǔn)確率聽(tīng)說(shuō)還不錯(cuò)，并且一直在持續(xù)優(yōu)化，而最終選擇第三個(gè)方案的原因是，能100%準(zhǔn)確地還原模塊DSL，并且只需要關(guān)注模塊最終展現(xiàn)給用戶(hù)時(shí)候的形態(tài)，不需要理會(huì)過(guò)程中開(kāi)發(fā)者做得各種復(fù)雜業(yè)務(wù)邏輯，復(fù)雜度相對(duì)低很多。

技術(shù)方案

在開(kāi)發(fā)流程上，每個(gè)模塊在開(kāi)發(fā)完成后，都會(huì)有對(duì)應(yīng)的模塊預(yù)覽頁(yè)面。我使用了puppeteer模擬真實(shí)瀏覽器，對(duì)模塊的節(jié)點(diǎn)信息進(jìn)行提取，并保存為規(guī)范的DSL。

清洗window.getComputedStyle

通過(guò)window.getComputedStyle獲取DOM節(jié)點(diǎn)的樣式，會(huì)返回包含280個(gè)樣式屬性的對(duì)象，如果把每個(gè)DOM節(jié)點(diǎn)的所有280個(gè)樣式屬性都存儲(chǔ)到DSL中，會(huì)造成兩個(gè)問(wèn)題：

1、DSL文件冗余，且文件大小過(guò)大，解析耗時(shí)；

2、增加算法同學(xué)對(duì)DSL的理解和調(diào)整成本。

第一步，隱藏默認(rèn)屬性值；

大部分的樣式屬性都是默認(rèn)值，我們首先把默認(rèn)的樣式屬性剔除出去。

{
alignSelf: 'auto',
...
}

第二步，剔除無(wú)效屬性；

開(kāi)發(fā)者常用的樣式屬性在20個(gè)左右，有很多的樣式是不具備實(shí)際效用的，把無(wú)效用的樣式屬性剔除掉，比如說(shuō)：

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

第三步，transform動(dòng)態(tài)計(jì)算

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

# 為了方便算法同學(xué)更好使用DSL渲染成圖的工具，這里使用python來(lái)實(shí)現(xiàn)
# screenshotShape是一個(gè)數(shù)組，代表屏幕寬高 [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

通過(guò)以上3個(gè)步驟，最終得到的DOM節(jié)點(diǎn)樣式屬性個(gè)數(shù)一般維持在20個(gè)以?xún)?nèi)，能使輸出的DSL精簡(jiǎn)非常多。

DSL渲染成圖片

同樣的，我們能基于puppeteer去對(duì)頁(yè)面做操作，也能使用它去把DSL渲染成目標(biāo)模塊頁(yè)面，并截圖。

首先，建立DSL與HTML標(biāo)簽的映射關(guān)系

其次，如果是DSL類(lèi)型為Group，就遞歸遍歷里面的所有子元素，以此類(lèi)推。

完整的渲染流程圖如下：

ViewModel動(dòng)態(tài)數(shù)據(jù)

一個(gè)模塊，應(yīng)用到99大促、雙十一等各種會(huì)場(chǎng)，背后樣式都是一致的，只有對(duì)應(yīng)的數(shù)據(jù)不同，動(dòng)態(tài)的數(shù)據(jù)一般是商品圖片和商品信息。

閑魚(yú)有一億多的商品數(shù)據(jù)，如果把這商品數(shù)據(jù)拿過(guò)來(lái)與View一起渲染成模塊，每個(gè)模塊就有了成千上萬(wàn)種展現(xiàn)形態(tài)，且貼合算法模型實(shí)際識(shí)別過(guò)程中的輸入，既能滿(mǎn)足樣本數(shù)量的要求，也能符合模型實(shí)際識(shí)別的場(chǎng)景，使模型準(zhǔn)確率獲得更大地提升。

效果

通過(guò)這樣一條生成樣本的通道，每個(gè)模塊都能夠提供給算法同學(xué)幾萬(wàn)張質(zhì)量很高的樣本截圖，使模型的準(zhǔn)確率達(dá)到98%以上。

未來(lái)

上述文章描述了如何批量生成樣本來(lái)幫助解決算法模型對(duì)99大促和雙十一會(huì)場(chǎng)中各個(gè)模塊的識(shí)別。

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

作者：閑魚(yú)技術(shù)-云聽(tīng)

里國(guó)際運(yùn)營(yíng)篇:阿里國(guó)際站的培訓(xùn)課程中都可以看到內(nèi)頁(yè)首部再次輸入標(biāo)題，并且對(duì)其使用<h2>標(biāo)簽，以此強(qiáng)調(diào)標(biāo)題，提高排名權(quán)重的說(shuō)法，那么這種看似神奇的操作是否行之有效呢？這篇文章從SEO的角度入手，解析一下<h2>的作用和用法。

培訓(xùn)講解的<h2>標(biāo)簽用法：

目前看到的培訓(xùn)課程的說(shuō)法是產(chǎn)品詳情頁(yè)的第一行或首部復(fù)制粘貼一遍標(biāo)題，切換到HTML代碼模式，給標(biāo)題插入<h2>標(biāo)簽如:<h2>你的標(biāo)題</h2>，目的是強(qiáng)調(diào)標(biāo)題，提高搜索權(quán)重，以此提高排名

分析：

插入方式：<h2>標(biāo)簽用于文章的每一個(gè)分段文字的子標(biāo)題，用于描述該段落的核心意思，一篇文章可以出現(xiàn)多次<h2>標(biāo)簽，分塊描述不同的段落。所以SEO角度上看將產(chǎn)品標(biāo)題再次復(fù)制加上<h2>的做法并不對(duì)爬蟲(chóng)方式：產(chǎn)品的標(biāo)題已定義于<title>標(biāo)簽內(nèi)，爬蟲(chóng)蜘蛛爬取過(guò)一遍<title>標(biāo)簽后，已獲取文章標(biāo)題和文章核心內(nèi)容；進(jìn)而深入爬取<h2>標(biāo)簽，意圖獲取不同文本段落的子標(biāo)題，卻再次在<h2>標(biāo)簽內(nèi)爬取到和標(biāo)題一模一樣的內(nèi)容，細(xì)致化一點(diǎn)來(lái)說(shuō)這是內(nèi)容堆砌，二次復(fù)制，對(duì)搜索引擎不友好阿里排名：官方規(guī)則文本上未看到<h2>標(biāo)簽有利于阿里搜索引擎爬取的明文，同時(shí)根據(jù)已知的阿里索引的方式為標(biāo)題和屬性這兩個(gè)部分，內(nèi)頁(yè)詳情頁(yè)文本對(duì)排名沒(méi)有影響（測(cè)試過(guò)內(nèi)頁(yè)填入自創(chuàng)的關(guān)鍵詞，搜索0結(jié)果，無(wú)法排序）

結(jié)論：

從SEO角度看，<h2>標(biāo)簽對(duì)頁(yè)面不同部分的重要性和內(nèi)容解釋性是有幫助，但是對(duì)Google排名的輔助作用是越來(lái)越小。相反頁(yè)面的載入速度對(duì)排名的影響是越來(lái)越大（可以參考圖片優(yōu)化文章，優(yōu)化圖片大小，降低圖片容量：https://www.losvincent.com/no-visitors.html）國(guó)際站這種二三級(jí)URL的產(chǎn)品頁(yè)面，能夠參與上google排名的可能性比獨(dú)立站的首頁(yè)頁(yè)面（權(quán)重一般相對(duì)站內(nèi)是最高）更小，個(gè)人搜索測(cè)試除非小競(jìng)爭(zhēng)的長(zhǎng)尾詞下，大多數(shù)詞基本較難有排名，所以阿里國(guó)際站的產(chǎn)品詳情頁(yè)在Google能產(chǎn)生排名的概率，可以相對(duì)忽略不計(jì)因此目前設(shè)置<h2>的方式，從SEO角度看是不對(duì)勁的寫(xiě)法；從Google排名效果看等于0

那么<H2>標(biāo)簽的正確用法是什么呢？

國(guó)外SEOer的解釋是：H2 is for subheadings of that H1. Use it to divide content into scannable blocks; both Google and your visitor will like it. H3 is for subheadings of that H2

也就是說(shuō),<h2>標(biāo)簽和大學(xué)寫(xiě)論文一樣，是定義每個(gè)段落或模塊的子標(biāo)題，或者說(shuō)二級(jí)標(biāo)題。因此從SEO角度看，目前國(guó)際站流行的<h2>標(biāo)簽用法是不太對(duì)勁的。下圖是標(biāo)配的正確用法：

正規(guī)的寫(xiě)法如下：

My h1 = <h1>H1, H2 and H3 Header Tags for SEO</h1>My h2 = <h2>Why are h1, h2 and h3 header tags important for SEO?</h2>My h3 = <h3>How to use the h1, h2 and h3 tags</h3>

<h2>標(biāo)簽可以出現(xiàn)多次，分別是對(duì)不同文章段落的概述

根據(jù)對(duì)國(guó)外客戶(hù)網(wǎng)站的觀察，發(fā)現(xiàn)如下現(xiàn)象：

<h1>標(biāo)簽被使用的概率小或者直接沒(méi)有使用，這是因?yàn)橐粋€(gè)頁(yè)面最多建議出現(xiàn)一個(gè)<h1>標(biāo)簽，一般為標(biāo)題或者最重要的核心文本部分，不過(guò)可能被濫用，Google似乎對(duì)<h1>標(biāo)簽有點(diǎn)禁忌<h2>標(biāo)簽出現(xiàn)在文章內(nèi)容的不同段落作為段落子標(biāo)題，或者出現(xiàn)在一些欄目等重要節(jié)點(diǎn)（如網(wǎng)站導(dǎo)航欄）

那么阿里國(guó)際站如何使用呢？

以2018 new design mobile phone case這個(gè)標(biāo)題舉例，寫(xiě)法方式為：

2018 new design mobile phone case（產(chǎn)品發(fā)布時(shí)填寫(xiě)的標(biāo)題）

<h2>details of phone case</h2>

一段手機(jī)殼參數(shù)，性能描述的段落

<h2>生產(chǎn)工藝 of phone case</h2>

一段手機(jī)殼工藝流程的段落

<h2>支持型號(hào)of phone case</h2>

一段講支持型號(hào)的的段落

面就是總結(jié)HTML5<meat>的標(biāo)簽：

<h2>一些常用的移動(dòng)端的meta屬性設(shè)置</h2>
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不區(qū)分大小寫(xiě) -->
<html lang="zh-cmn-Hans"> <!-- 更加標(biāo)準(zhǔn)的 lang 屬性寫(xiě)法 http://zhi.hu/XyIa -->
<head>
 <!-- 聲明文檔使用的字符編碼 -->
 <meta charset='utf-8'>
 <!-- 優(yōu)先使用 IE 最新版本和 Chrome -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 <!-- 頁(yè)面描述 -->
 <meta name="description" content="不超過(guò)150個(gè)字符"/>
 <!-- 頁(yè)面關(guān)鍵詞 -->
 <meta name="keywords" content=""/>
 <!-- 網(wǎng)頁(yè)作者 -->
 <meta name="author" content="name, email@gmail.com"/>
 <!-- 搜索引擎抓取 -->
 <meta name="robots" content="index,follow"/>
 <!-- 為移動(dòng)設(shè)備添加 viewport -->
 <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
 <!-- `width=device-width` 會(huì)導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開(kāi)頁(yè)面時(shí)出現(xiàn)黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
 
 <!-- iOS 設(shè)備 begin -->
 <meta name="apple-mobile-web-app-title" content="標(biāo)題">
 <!-- 添加到主屏后的標(biāo)題（iOS 6 新增） -->
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <!-- 是否啟用 WebApp 全屏模式，刪除蘋(píng)果默認(rèn)的工具欄和菜單欄 -->
 
 <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
 <!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） -->
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
 <!-- 設(shè)置蘋(píng)果工具欄顏色 -->
 <meta name="format-detection" content="telphone=no, email=no"/>
 <!-- 忽略頁(yè)面中的數(shù)字識(shí)別為電話(huà)，忽略email識(shí)別 -->
 <!-- 啟用360瀏覽器的極速模式(webkit) -->
 <meta name="renderer" content="webkit">
 <!-- 避免IE使用兼容模式 -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- 不讓百度轉(zhuǎn)碼 -->
 <meta http-equiv="Cache-Control" content="no-siteapp" />
 <!-- 針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓 -->
 <meta name="HandheldFriendly" content="true">
 <!-- 微軟的老式瀏覽器 -->
 <meta name="MobileOptimized" content="320">
 <!-- uc強(qiáng)制豎屏 -->
 <meta name="screen-orientation" content="portrait">
 <!-- QQ強(qiáng)制豎屏 -->
 <meta name="x5-orientation" content="portrait">
 <!-- UC強(qiáng)制全屏 -->
 <meta name="full-screen" content="yes">
 <!-- QQ強(qiáng)制全屏 -->
 <meta name="x5-fullscreen" content="true">
 <!-- UC應(yīng)用模式 -->
 <meta name="browsermode" content="application">
 <!-- QQ應(yīng)用模式 -->
 <meta name="x5-page-mode" content="app">
 <!-- windows phone 點(diǎn)擊無(wú)高光 -->
 <meta name="msapplication-tap-highlight" content="no">
 <!-- iOS 圖標(biāo) begin -->
 <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
 <!-- iPhone 和 iTouch，默認(rèn) 57x57 像素，必須有 -->
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
 <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以沒(méi)有，但推薦有 -->
 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
 <!-- Retina iPad，144x144 像素，可以沒(méi)有，但推薦有 -->
 <!-- iOS 圖標(biāo) end -->
 
 <!-- iOS 啟動(dòng)畫(huà)面 begin -->
 <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
 <!-- iPad 豎屏 768 x 1004（標(biāo)準(zhǔn)分辨率） -->
 <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
 <!-- iPad 豎屏 1536x2008（Retina） -->
 <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
 <!-- iPad 橫屏 1024x748（標(biāo)準(zhǔn)分辨率） -->
 <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
 <!-- iPad 橫屏 2048x1496（Retina） -->
 
 <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
 <!-- iPhone/iPod Touch 豎屏 320x480 (標(biāo)準(zhǔn)分辨率) -->
 <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
 <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
 <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
 <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
 <!-- iOS 啟動(dòng)畫(huà)面 end -->
 
 <!-- iOS 設(shè)備 end -->
 <meta name="msapplication-TileColor" content="#000"/>
 <!-- Windows 8 磁貼顏色 -->
 <meta name="msapplication-TileImage" content="icon.png"/>
 <!-- Windows 8 磁貼圖標(biāo) -->
 
 <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
 <!-- 添加 RSS 訂閱 -->
 <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
 <!-- 添加 favicon icon -->
 <!-- sns 社交標(biāo)簽 begin -->
 <!-- 參考微博API -->
 <meta property="og:type" content="類(lèi)型" />
 <meta property="og:url" content="URL地址" />
 <meta property="og:title" content="標(biāo)題" />
 <meta property="og:image" content="圖片" />
 <meta property="og:description" content="描述" />
 <!-- sns 社交標(biāo)簽 end -->
 
 <title>標(biāo)題</title>
</head

下面是小編整理的一整套系統(tǒng)的前端學(xué)習(xí)教程，關(guān)注小編頭條號(hào)，私信【前端】即可免費(fèi)領(lǐng)取！