Code2Pix-用於圖形用戶界面的深度學習編譯器

你好！ 個人名字是Noah Gundotra，我是加州大學伯克利分校的二年級學生。 我將與Uizard合做，介紹加州大學伯克利分校統計學本科生協會（SUSA）的原創研究。

Uizard官網：uizard.io/

在SUSA期間，我帶領一支由其餘6名加州大學伯克利分校本科生組成的團隊在2018年春季學期開展這個項目。如下工做是咱們小組中許多看不見的工做，失敗和樂趣的結果。咱們但願您喜歡閱讀咱們的研究！

此博客文章共有6個部分，其中包含簡短的致謝部分。

TL;DR-Abstract 咱們爲從文本描述生成圖形用戶界面（GUI）的問題提供深度學習解決方案。這項研究可用於提升Pix2Code、以及從圖形用戶界面生成代碼的將來模型的精度（相反的任務）;這個問題在人機交互文獻中被稱爲用戶界面逆向工程。此外，中間工做暗示了能夠跨多個平臺工做的單個文本到GUI編譯器的可能性。

1-Intro 當我第一次閱讀Pix2Code論文時，我感到震驚。一我的Tony Beltramelli提出了一個新的深度學習應用程序，實現了一種方法，並開源了它。本文提出了一種深度學習模型，可以將圖形用戶界面的草圖轉換爲實際代碼。這對我來講彷佛是革命性的。我認爲這是我看到的那些事情中的一個，我忽然明白了爲何這麼多人對機器學習感興趣 - 我真的以爲這是「人工智能」。

Pix2Code論文：arxiv.org/abs/1705.07…

Pix2Code是機器學習工程的一個很是棒的壯舉。爲了改進它，Tony建議嘗試一個補充項目。稱爲Code2Pix，它與Pix2Code相反。Pix2Code來自GUI並將其轉換爲域特定語言（DSL）中的文本描述。Code2Pix在DSL中接收文本描述並生成GUI。所以，Code2Pix其實是一個可以呈現接口的深度學習「編譯器」。爲避免與真正的編譯器混淆，咱們將其稱爲深度學習渲染器（deep learning renderer）。

圖1：Code2pix輸入輸出簡化的可視化描述。這個特別的例子是從原始的pix2code中iOS數據庫提供的。 本着Pix2Code的精神，咱們將發佈與該項目相關的全部代碼。咱們但願咱們可以鼓勵其餘工程師參與這個項目，並經過爲社區作出貢獻來幫助該領域向前發展。

全部代碼地址：uizard.io/research/

2-Why Code2Pix？ 咱們開始經過構建生成對抗神經網絡（GAN）來改進Tony的模型Pix2Code。最近在該領域的工做已經代表，與標準模型相比，相互對立的神經網絡（GAN）能夠爲圖像提供更好的標題。這須要生成器模型和鑑別器模型才能工做。Pix2Code可用於爲用戶界面生成代碼（DSL），咱們可使用Code2Pix來查看捕獲真實圖像時字幕的接近程度。Pix2Code將是生成器，Code2Pix將是鑑別器。總之，它們一塊兒構成了一個GAN，它能夠比Pix2Code自己更準確地生成GUI的代碼。

最近的工做：arxiv.org/abs/1703.06…

Code2Pix與任何普通渲染器完成相同的工做。實際上，任何處理用戶界面代碼的渲染器都是「代碼到像素」系統。可是，Code2Pix是不一樣的，由於它是可區分的。這意味着咱們可使用咱們的深度學習渲染器Code2Pix，經過在層中傳播錯誤信號來訓練其餘深度學習模型。使用標準渲染器沒法作到這一點。

圖2：Pix2Code GAN結構。這是Code2Pix如何與Pix2Code結合使用以提升後續研究中Pix2Code準確性的一個例子。 3-Solving Code2Pix 這是領導這個項目最有趣，最謙卑的部分。咱們最初的方法花了2-3個月的時間來構建和迭代，但最後一步最終沒有使用咱們以前的任何工做。最終的工做模式結果是一種很是簡單，幾乎天真的方法。即使如此，我相信咱們的過程值得分享，用於教育目的，以及展現使用深度學習進行跨平臺用戶界面設計的有趣且相對較新的應用。此外，咱們相信這個項目是一個很好的例子，簡單而優雅的解決方案一般比複雜的解決方案表現更好。

Approach 將代碼轉換爲圖片的問題能夠分解爲三個部分。首先，咱們須要使用DSL來捕獲用戶界面，以減小問題的複雜性，並使其適用於深度學習系統。其次，咱們將爲每一個數據集建立一個自動編碼器。第三，咱們將使用Code2Pix模型中自動編碼器的解碼器部分從編碼空間轉換爲渲染GUI的像素。

圖3：咱們構建code2pix的方法。將模型分紅兩個不一樣的部分。一個用於處理文本信息，另外一個用於構建GUI。咱們將這些分別稱爲「token encoder」和「image decoder」。 幸運的是，Tony已經建立了一個域特定語言（在這種狀況下，DSL能夠被視爲用戶界面的僞代碼），能夠爲每一個數據集編譯成實際代碼（即本機iOS，原生Android，Web HTML）/ CSS）。Pix2Code和Code2Pix使用相同的領域特定語言來捕獲每一個數據集的基本特徵。這是咱們的第一步。若是你想看看這是怎麼作的，請看看這裏。

請看看這裏：github.com/tonybeltram…

咱們的下一步是訓練自動編碼器，目標是使用一部分自動編碼器模型做爲Code2Pix中的「圖像解碼器」。

Autoencoders 這些是深度學習中的特殊模型，它們在數據集上進行訓練，做爲解決該數據任務的前提。自動編碼器學習將數據壓縮爲較低維度的編碼，而後學習將編碼解壓縮爲原始數據。它們是學習數據重要特徵的好方法。編碼器部分一般會導入到其餘深度學習架構中，以傳輸它學習編碼到的特徵。這被稱爲遷移學習。咱們對解碼器部分特別感興趣，由於它學習解釋抽象有意義的編碼並將它們變成用戶界面的圖片。

圖4：若是咱們訓練一個能夠壓縮和解壓縮GUI的自動編碼器，那麼咱們就能夠在code2pix中使用一個免費的「image decoder」。 咱們嘗試了標準的自動編碼器架構來解決這個問題，可是學習的解碼器在解決咱們的任務時並非頗有用。所以，咱們設計了一個新架構：一個多頭模型，能夠同時解決全部三個數據集（Android，iOS和Web）的任務。在這個被稱爲「Hydra」的模型中，解釋圖像編碼的解碼器取決於圖像來自的數據集。例如，要經過模型傳遞Android圖像，咱們會手動選擇將其傳遞到Android解碼器頭以得到最終結果。

圖5：咱們使用的特定自動編碼器設計在全部三個圖像解碼器之間共享相同的圖像編碼器。這最終成爲一個很是有效的模型，併產生了可推廣的圖像解碼器。 咱們在Code2Pix模型設計中使用解碼器頭。爲了查看編碼器和解碼器頭的具體底層架構，咱們將讀者指向咱們的Github倉庫。

Github倉庫：github.com/ngundotra/c…

Towards Universal Cross-Platform User Interfaces 咱們的Hydra自動編碼器學習了嵌入，這使得能夠編譯通用用戶界面的系統成爲可能。根據咱們的自動編碼器，下圖是3個圖像在不一樣平臺上的樣子。例如，最左邊的列是Android GUI在iOS和Web上的樣子。

圖6：三個列中的三個不一樣圖像在每一個平臺之間被相似地解析。左列是Android圖像，中間是iOS圖像，右列是Web圖像。每行表明該圖像在不一樣平臺上的外觀。 左列和右列顯示出使人驚訝的結構類似度。在左欄中，iOS頭部將Android按鈕視爲橙色框，而且Web頭部看到與綠色按鈕相同的按鈕。在右欄中，咱們能夠看到Android和iOS頭部都捕獲了Web GUI的基本分段結構，使用按鈕和滑塊的組合來複制Web的div元素。

事實上，每一個圖像在解釋到新平臺時仍然保留告終構，這令人們但願有一天可能會成爲一個深度學習編譯器，可以在Android，iOS和Web後端之間無縫轉換用戶界面代碼。這是一個很是簡單的未精煉模型，可是有了更多的時間和經驗，它能夠產生更復雜的結果。這些結果代表，自動編碼器學習的編碼空間具備足夠的結構，可用於將來的應用。

爲了驗證嵌入空間的結構，咱們查詢模型以在不一樣圖像之間進行插值。藉助著名的「King Man + Woman = Queen」論文，可視化模型如何學習解釋單詞數據，咱們製做了本身的「user interface algebra」。

圖7：「A是B，C是D.」這裏咱們計算B - A + C = D以得到上面的結果。B和A之間的主要區別在於第二行中的toggle。經過將B - A添加到C，咱們能夠看到D如今在第二行中有一個按鈕。 咱們注意到並不是每一個圖像組合都像上面的例子同樣乾淨利落。然而，這只是更大的第一步：真正的user interface algebra和跨Android，iOS和Web界面工做的GUI編譯器。

圖8：更多Eyecandy：使用Web解碼器在兩個不一樣的Web GUI之間進行轉換。 Code2Pix Model Design 在分析了自動編碼器的編碼後，咱們準備進入最後一步。咱們但願將模型設計過程構建爲編碼器 - 解碼器動態。必須有一部分模型解釋代碼標籤，而且必須與模型進行通訊，該模型再次將編碼解碼爲實際圖片。

咱們首先嚐試從Pix2Code模型導入預訓練的LSTM（深度學習層，這對學習序列數據頗有幫助），但這並未顯示出任何前景。而後咱們嘗試使用卷積層，最後使用1D卷積層編碼來自領域特定語言的代碼標籤。咱們經過將序列的每一個DSL標籤轉換爲one-hot表示來訓練咱們的模型，而後將它們鏈接起來以建立矩陣，咱們能夠將矩陣提供給Code2Pix模型。咱們用零填充序列，使得它們都具備相同的長度。

圖9：Code2Pix模型的最終結構 4-Code2Pix Results 這種模型的訓練速度很是快，而且能夠爲全部三幅圖像生成使人驚訝的清晰輸出圖像。爲單個數據集訓練Code2Pix須要大約55個epochs，在兩個Nvidia GTX 1080上大約須要30分鐘。有趣的是，該模型在iOS和Web數據集上一樣表現良好，但很難爲Android數據集生成細粒度的細節。

這種最終的結構使人驚訝的結果是，預訓練的圖像解碼器對訓練Code2Pix模型一點幫助也沒有。事實上，在沒有預訓練權重的狀況下訓練模型的速度與預訓練權重同樣快。一個天然的結論是，這是一個很是穩定的模型架構，適用於此任務和數據集。後續假設將是像素到像素問題的編碼向量空間實際上與文本到像素問題的編碼向量空間不一樣。所以，在GUI到GUI問題上使用預訓練權重並不能爲模型提供有價值的信息以便更快地學習DSL到GUI問題。

如下圖片是咱們的驗證數據集中的選定示例。

圖10：(Web) Corresponding code: header { btn-inactive btn-active btn-inactive btn-inactive btninactive} row { quadruple { small-title text btn-green } quadruple { small-title text btn-red }quadruple { small-title text btn-red } quadruple { small-title text btn-orange } } ......

圖11：(Android) Corresponding code: stack { row { radio } row { label slider label } } footer { btnnoti􀁦cations btn-home btn-noti􀁦cations btn-home } 當咱們看到這個時，咱們真的很開心。爲這個模型提供的文字描述相對複雜，圖片也相對複雜 - 但模型肯定了它。鑑於Code2Pix模型的簡單性，它能夠達到這種高分辨率的事實是很是使人驚訝的。Code2Pix最難生成Android圖像的清晰分辨率圖像。Android圖像可能比其餘GUI具備更復雜的細節，例如滑塊上的點。

圖12：(iOS) Corresponding code: stack { row { label btn-add } row { label btn-add } row { labelslider label } row { label slider label } row { label switch } row { label slider label } row { labelslider label } } footer { btn-download btn-search btn-search } iOS圖像比Android版更清晰。 此外，iOS版的Code2Pix模型可以處理更復雜的文本描述。

5-Limitations 咱們的深度學習渲染器的表現力受到數據集和領域特定語言的約束。DSL必須與合成數據集一塊兒手工製做，以擴展深度學習編譯器能夠支持的UI元素的數量和種類。另外，深度學習編譯器生成的圖像不像真實圖像那樣清晰。我認爲這與模型學習在一些模糊的UI元素（如滑塊）上「hedge its bets」有關。這可能只是一個能夠經過一些微調或更多數據刪除的人工製品。

但事實是，這些實驗只是一個開始。在這些項目上工做感受就像學習如何進行化學實驗同樣。如今，咱們只是將氫氣和氧氣結合起來製造水，但咱們還有很長的路要走。咱們尚未開始使用火箭燃料。若是Uizard的演示向咱們展現了任何東西，那麼將來還有更多的東西可供咱們使用。

Uizard's demo：www.youtube.com/watch?v=VsU…

6-Looking Back：Mistakes Made, Lessons Leared 在這個項目上，咱們從新認識了基礎知識的重要性。在解決Code2Pix時，咱們進行了自下而上的開發，構建了自動編碼器，咱們最終模型中不必定須要這些編碼器。咱們能夠經過爲Code2Pix構建基線模型來開始。這可能加快了咱們的模型開發過程。

此外，我我的犯的最大錯誤是技術錯誤。在開發最終的Code2Pix模型時，我沒法驗證數據是否正確加載。事實證實，（x，y）對在加載時不匹配。這花費了咱們2-3周的寶貴時間進行模型設計和應用程序優化。我學到了什麼？ 單元測試數據管道流程，或使用其餘驗證流程。例如，我可能導入了Pix2Code的數據管道流程。相反，咱們的研究代碼在數據中有3-4種不一樣的加載方式，不幸的是只有2-3種方法有效。這樣的錯誤不能再犯。

總而言之，我學到的更重要的經驗教訓是難以用語言表達的，如今已融入個人職業道德中。調整個人溝通技巧，減小微觀管理，有時信任的發展不平衡，以及在團隊會議中控制個人談話內容。這些都是有趣的課程。

Acknowledgements 能在SUSA的團隊中我表示很是高興，由於我相信本身的領導能力，併爲此付出了數小時的努力。致Samyak Parajuli，Luke Dai，Ajay Raj，Aismit Das，Dennis Yang和Japjot Singh - 謝謝你，這對大家來講頗有趣。

沒有Tony Beltramelli的出色指導和指導，咱們就不會作這個項目。謝謝Tony指導咱們！

謝謝你的閱讀！ 若是您對咱們的研究有更多疑問，請隨時發送電子郵件至noah.gundotra@berkeley.edu。 若是您有興趣在Uizard工做，請查看他們的職業生涯頁面！

career page：uizard.io/career/

注： 轉載自 知乎人工智能專欄