作者：vivo 互聯網前端團隊- Su Ning
在設計稿轉網頁中運用基于self-attention機制設計的機器學習模型進行設計稿的布局，能夠結合dom節點的背景關系得出合理的方案，
一、背景
切圖作為前端的傳統手藝卻是大多數前端開發者都不愿面對的作業，
為了解決切圖的各種問題，人們絞盡腦汁開發了各種各樣的設計稿轉代碼（D2C）工具，這些D2C工具隨著設計師使用的軟體的變更又在不斷地迭代，
從Photoshop時代，前端需要手動標記節點進行單獨的樣式匯出（如圖1），到sketch measure，可以整體頁面輸出（如圖2），其效率、結果都已經有了一個質的提升，
但是還是未能徹底解決切圖的問題，因為設計稿所包含的資訊只負責輸出樣式，而沒有辦法輸出網頁布局，我們還是沒有辦法直接copy生成的代碼到我們的專案中直接使用，
圖1
圖2
在學習現有的D2C案例的程序中，我們發現很多成熟的方案中參考了機器學習輔助代碼的生成，其中絕大多數的作業是用于視覺識別和語意識別，于是我們想，機器學習是否能夠應用到網頁的布局中呢？
為了驗證我們的猜想，也為了解決我們作業中的實際痛點，我們決定自己開發一個D2C工具，希望能夠通過機器幫我們實作網頁布局的程序，整體作業流程大致如圖3，首先獲取設計稿的元資料，然后對設計稿的資料進行一系列的處理匯出自由的dsl，然后根據這個dsl生成相應端的代碼，
圖3
二、頁面布局
要處理網頁的布局需要解決兩個問題，節點的父子關系以及節點之間的位置關系，
2.1 節點的父子關系
節點的父子關系指的是一個節點包含了哪些子節點，又被哪個節點所包含，這部分的內容可以直接使用規則處理，通過節點的頂點位置和中心點的位置資訊判斷一個節點是否是另一個節點的子節點，這里我們就不展開討論了，
同一層級節點之間的位置關系，才是我們這次著重需要解決的問題，
2.2 節點之間的位置關系
網頁的布局有很多種，線性布局，流式布局，網格布局，還有隨意定位的絕對定位等等，而我們在匯出樣式的時候，無非需要確認兩件事情，節點的定位方式（relative、absolute、fixed）和節點的布局方向（縱向、橫向），
線性布局
流式布局
網格布局
按照*時切圖的習慣，我們會首先識別一組*級節點之間有沒有明顯的上下或者左右的位置關系，然后將他們放入到網格中，最后獨立在這些節點外面的節點就是絕對定位，
讓機器識別節點之間的位置關系，就成了解決問題的關鍵一環，
判斷節點之間的位置關系只需要節點的位置和寬高資訊，因此我們的輸入資料設計如下：
[
{
width:200,
height:50,
x:0,
y:0
},
{
width:200,
height:100,
x:0,
y:60
},
{
width:200,
height:100,
x:210,
y:60
}
]同時我們希望獲得的輸出結果是每一個節點是上下排列，左右排列，還是絕對定位的，輸出的資料設計如下：
[
{
layout:'col'
},
{
layout:'row'
},
{
layout:'absolute'
}
]起初我們是希望通過書寫一定的規則進行布局的判斷，通過判斷前后兩個節點的位置關系是上下還是左右來進行布局，然而這樣只關注兩個節點位置關系的規則卻很難判斷絕對定位的節點，并且固定的規則總是不夠靈活，于是我們想到了善于處理分類問題的機器學習，
很顯然通過大量資料訓練的機器學習模型可以很好的模仿我們*時切圖的習慣，在處理各種邊緣場景的時候也能夠更加的靈活，只要進行合理的模型設計，就可以輔助我們進行布局的處理，
三、為什么是self-attention？
從上文我們可以看出，我們需要訓練一個模型，輸入一個節點的串列，輸出一個節點的布局資訊，是不是有點像文本識別里面的詞性翻譯呢？
對于具體的一個節點，我們是沒有辦法判斷其真正的布局的，只有將其放到檔案流中結合背景關系來看才能體現出其實際的意義，
在處理詞性標記這塊，RNN(回圈神經網路)、LSTM(長短期記憶網路)都比較合適此類場景，RNN作為經典的神經網路模型通過將前一次訓練的權重帶入到下一次訓練中建立背景關系的關聯，LSTM作為RNN的一種變體解決了RNN難以解決的長期依賴問題，用來訓練網頁布局看起來是一個不錯的選擇，
RNN（回圈神經網路）
665px LSTM(長短期記憶網路)
使用LSTM的確可以解決我們的問題，但是由于此類神經網路對于時序的依賴導致背景關系的資料沒有辦法進行并行運算，這使得我們的計算機沒有辦法更高效的訓練模型，并且網頁布局只需要獲取不同節點的定位資訊，對于裝載的順序并沒有強要求，
隨著2017年的一篇文章《Attention is All you Need》的橫空出世，整個機器學習領域迎來了新一輪的革命，目前最主流的框架transformer、BERT、GPT全是在attention的基礎上發展起來的，
self-attention自注意力機制是attention機制的變體，通過全域關聯權重得出單個向量在全域中的加權資訊，因為每一個節點都采用相同的運算方式，所以同一個序列中的節點可以同時進行背景關系計算，極大地提升了模型訓練的效率，也更方便我們優化和回歸模型，
self-attention
綜上，考慮到attention對于背景關系更好的關聯和更好的并行性能，我們決定基于此進行建模，
四、模型設計
我們起初設計了一個輸出的向量用于識別資料處理的結果，[1,0,0,0]代表是正常的豎向排列，[0,1,0,0]代表了橫向排列，以此類推依次代表了absolute和fixed定位方式，但是后來我們發現fixed由于是相對于整個頁面的定位方式，所以在單一層級下很難做標記，所以我們將輸出值精簡成了豎向排列，橫向排列和絕對定位三種情況，
模型的整體設計如下，通過self-attention將節點轉化為背景關系資訊，再通過前饋神經網路將背景關系資訊訓練成具體的布局，
（1）在獲取到一組資料后，為了去掉數值的大小的影響，我們首先對資料進行一次歸一處理，將輸入資料的每一個值分別除以這一組資料中的最大值，
（2）將每一組資料分別進行三次線性變換， 得到每組資料相應的Q，K，V，接下來我們就可以進行self-attention運算了，
（3）我們以node1為例，如果需要計算node1和其他節點的相關性，則需要使用Q1分別和每一個節點的key進行點積操作，將他們的和與V1相乘，為了防止權重值相乘以后過大，最后進行一次softmax計算，就得到了node1和其他節點的背景關系資訊，
我們將一組資料中所有QKV看成三個矩陣，得到的背景關系context的集合就可以看成一個矩陣計算，
（4）為了提升訓練的效果，每個節點的背景關系資訊輸入到前饋神經網路進行最后的布局結果的訓練，將得到的結果進行softmax計算就可以得到單個節點在一組資料中布局的概率分布了，由于同一組節點的運算沒有前后順序，故單個節點的運算可以同時進行，配合GPU加速極大地提升了訓練的效率，
五、資料準備
由于機器學習需要海量的資料，資料的數量和質量都會極大地影響模型最終的訓練效果，所以資料的數量和質量都非常重要，我們采用了三種資料源用于資料的訓練，分別是標記過的設計稿，抓取的真實網頁資料，以及自動生成的資料，
5.1 設計稿的標記
在獲取到設計稿資料以后只取每個節點的定位和寬高資料，通過上文的父子關系處理后獲取每一層的節點資料，為了防止出現過擬合的情況我們去掉節點數量相對較少的層級，并對每一層的布局進行手動標記，設計稿標記資料是質量最好，但也是最費時費力的作業，所以需要其他的資料源進行數量的補充，
5.2 真實網頁的抓取
作為標記設計稿的補充，網頁中的真實資料也是可靠的資料源，但是抓取網頁的程序中最大的難點在于判斷頁面中的節點屬于橫向還是縱向，
由于實作橫向排列的方式千奇百怪，可以通過float，inline-block，flex等等方法，我們如果只獲取網頁中節點的定位和寬高資訊，還是需要手動標記他的布局，所以還是要從節點的css入手，在批量獲取之后進行手動篩選，去掉低質量的資料，相對于標記的設計稿是一個有效的補充，
5.3 網頁生成器
為了更快的生成大量的資料，我們寫了一個網頁生成的演算法，在一開始就決定節點的定位方式，然后將節點渲染成網頁，最后在抓取節點的定位資訊，但是隨機生成的資料存在一些不穩定的邊界場景，譬如生成的絕對定位的節點會正好定位到橫向布局的右邊，這時就需要手動進行甄別，
我們最終收集了大約兩萬多條資料，經過反復的訓練與除錯，最終準確率穩定在99.4%左右，達到一個相對可用的水*，
使用真實的dom進行回歸驗證，可以看出準確的識別出了網頁的橫向豎向布局以及絕對定位的節點，
六、優化方向
6.1 元素換行
設計稿中會出現串列一行放不下然后換行的情況，這些節點應該是屬于橫向的位置關系，但是機器面對兩行會將每一行的首個元素識別成縱向排布，這就需要對重復節點進行相似度檢測，對相似節點采用相同的布局策略，
6.2 分組問題
基于規則的分組會導致兩個不相交的節點不會分配到一個組里面，比如網格中的圖示和文字，導致布局的時候會分成兩個獨立的組，可以通過訓練常見的布局結合內容識別進行更精準的分組，
6.3 通用布局
通過self-attention機制我們不僅可以判斷單個節點在其層級的布局資訊，我們也可以進行發散，通過訓練整個層級的節點資料得出當前節點屬于卡片流，標簽，個人資訊頁等功能性的標記，進一步推匯出每個節點的功能，再結合節點具體的布局資訊，不僅可以更好的實作網頁的排布，還可以節點的功能推到實作標簽的語意化，
6.4 資料生成
為了解決更多的網頁布局問題，同時減少我們人工標記的作業量，可以運用強化學習模型開發一套網頁生成工具，讓我們的資料更接*真實的網頁布局，從而使布局模型訓練的結果更加貼*生產的場景，
七、總結
機器學習非常擅長處理分類問題，相比于傳統的手寫規則布局，機器學習是基于我們現有的開發習慣進行訓練，最終生成的代碼也更加貼*我們*時的切圖習慣，代碼的可讀性和可維護性都更上一層樓，
而機器生成的靜態頁面相較于不同的人手寫的靜態頁面，遵循一致的代碼規范，代碼風格也更加統一，
在模型搭建的程序中可以將具體的使用場景類比為文本或者影像領域的內容，便于尋找現有的模型進行遷移學習，
運用機器學習解決網頁布局問題的核心在于建立節點的背景關系的關聯，通過了解各種經典的神經網路模型的運行原理我們選出了回圈神經網路和自注意力機制這種能夠建立背景關系關聯的模型，而通過對于其運行原理的進一步了解我們選擇了更貼*網頁布局場景以及運行效率更高的self-attention模型，由此也可以看出了解模型的運行機制可以更好的幫助我們解決實際的應用場景，
分享 vivo 互聯網技術干貨與沙龍活動，推薦最新行業動態與熱門會議，轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503209.html
標籤：其他
上一篇：continue與break