哥本哈根的一家初創公司 UIzard Technologies 訓練了一個神經網路，能夠把圖形使用者介面的截圖轉譯成程式碼行，成功為開發者們分擔了部分網站設計流程。令人驚歎的是，同一個模型能跨平臺工作，包括 iOS、Android 和 Web 介面，從目前的研發水平來看，該演算法的準確率達到了 77%。
該公司發表的一篇研究論文，解釋了這個叫做 Pix2Code 的模型是如何工作的。要點如下：跟所有機器學習一樣，研究者們需要用手頭的任務例項去訓練模型。但與其他任務不同的是，它需要做的不是從圖片中生成圖片，也不是把文字轉換成文字，這個演算法要做到輸入圖片後生成對應的文字（在這裡就是程式碼）輸出。為了實現這一點，研究者們需要分三個步驟來訓練，首先，透過計算機視覺來理解 GUI 影像和裡面的元素（按鈕、條框等）。接下來模型需要理解計算機程式碼，並且能生成在句法上和語義上都正確的樣本。最後的挑戰是把之前的兩步聯絡起來，需要它用推測場景來生成描述文字。
那些只有基本程式碼知識的 UI 或平面設計師，有了它的幫助就能自己構建起整個網站了。在另一方面，它也能讓複製其他網站的程式碼變得更容易，這是一個已經讓困擾了很多開發者的問題。雖然像在 Github 這樣的網站上，程式設計師之間已經流行起了協作共享的精神，但有些開發者—尤其是那些為需要原始網站的客戶開發網站的—他們並不想讓其他人剽竊自己的程式碼。
以下這段影片展示了應用效果：
在實際工作中，Pix2Cod 肯定能為開發者節省時間，他們就能把設計好介面的 JPEG 影像輸入 Pix2Code，生成可執行的程式碼，並且還能進一步調整和最佳化。而那些只有基本程式碼知識的 UI 或平面設計師，有了它的幫助就能自己構建起整個網站了。
UIzard Technologies 還在繼續最佳化改模型，用更多的資料訓練它以提升準確度。公司創始人兼 CEO Tony Beltramelli 最近完成了他在哥本哈根資訊科技大學（IT University of Copenhagen）和蘇黎世聯邦理工學院（ETH Zurich）的機器學習畢業專案，也有將 Pix2Code 貢獻給學校的考慮。「考慮到線上可訪問網站的數量已經非常多，而且每天都有新的網站被開發出來，網際網路理論上能支援無限數量的訓練資料」他在研究論文裡寫到。「我們推斷，以這種方式使用的深度學習最終會終結對手動程式設計 GUI（圖形使用者介面）的需求」。
Pix2Code 是 UIzard 開發的第一個 app，而且還處於測試階段。這家公司的願景是幫助開發者、設計者和初創公司省去在開發初期階段寫程式碼的流程，為原型設計、迭代和最終生成更好的產品留出更多的時間，最終開發出更好的 app 和網站。
- 論文地址：https://arxiv.org/pdf/1705.07962.pdf
- Github 專案地址：https://github.com/tonybeltramelli/pix2code
- 申請試用地址：https://uizard.io/?email_field=mmill06%40gmail.com
機器之心對這篇論文內容進行了概述性介紹，內容如下：
摘要：計算機開發人員經常將設計師設計的圖形使用者介面（GUI）截圖透過編譯計算機程式碼應用到軟體、網站和移動應用程式中。在本文中，我們展示了給定圖形使用者介面影像作為輸入，深度學習技術可以被用來自動生成程式碼。我們的模型能夠從單一輸入影像中生成針對三種不同平臺（即 iOS、Android 和基於 Web 的技術）的程式碼，其準確率超過 77％。
引言
在客戶端軟體實現基於由設計師設計的圖形使用者介面（GUI）的過程是開發人員的責任。然而，編寫實現 GUI 的程式碼是耗時的，並且佔用了開發人員大量用於實現軟體實際特徵和邏輯的時間。此外，不同的特定平臺用於實現這種 GUI 的計算機語言也不盡相同；從而導致在開發針對多個平臺的軟體時繁瑣而重複的工作（儘管都運用本機技術）。在本文中，我們描述了一個給定圖形使用者介面截圖作為輸入，可以自動生成特定平臺程式碼的系統。我們推斷，此方法的擴充套件版本可能會終止手動程式設計 GUI 的需要。
本文的第一個貢獻是 pix2code，一個基於卷積和迴圈神經網路的新方法，它能夠由單個 GUI 螢幕截圖生成計算機程式碼。
本文的第二個貢獻是釋出來自三個不同平臺的 GUI 螢幕截圖和相關原始碼組成的合成資料集。在本文發表後，此資料集將開源免費使用，以促進今後的研究。
Related Work（略）
pix2code
給出 GUI 螢幕截圖生成程式碼的任務可以類比於給出場景照片生成文字描述的任務。因此，我們可以將問題分為三個子問題。首先，是一個計算機視覺問題：理解給定場景（即這種情況下為 GUI 截圖）並推斷圖中的物件、身份、位置和姿勢（即按鈕、標籤、元素容器）。第二，是一個語言模型問題：理解文字（即這種情況下為計算機程式碼）併產生語法和語義正確的樣本。最後，透過利用前兩個子問題的解決方案生成程式碼，即運用從場景理解推斷出的潛在變數（latent variable）來生成相應文字描述（這裡是計算機程式碼而不是文字）。
圖 1：pix2code 模型的架構概述。訓練中，GUI 螢幕截圖由基於 CNN 的計算機視覺模型編碼；對應於 DSL 程式碼（領域特定語言）的獨熱編碼（one-hot encode）符號的序列由含有 LSTM 層堆疊的語言模型編碼。然後將兩個得到的編碼向量進行級聯並饋送到用作解碼器的第二個 LSTM 層堆疊中。最後，用 softmax 層對符號進行單個抽樣；softmax 層的輸出大小對應於 DSL 的詞彙量大小。給定影像和符號序列，模型（即灰色框中的內容）是可微分的，因此在預測序列中的下一個符號時可以透過梯度下降來端到端地最佳化。在每次預測時，輸入狀態（即符號序列）都會被更新以包含上次預測的符號。在抽樣時，使用傳統的編譯器設計（compiler design）技術將生成的 DSL 程式碼編譯為所需的目標語言。
3.1 視覺模型
CNN 目前是解決各種視覺問題的首選方法，因為它們自身的拓撲結構便於學習訓練的影像中豐富的潛在表徵 [14,10]。我們透過將輸入影像對映到一個學習到的固定長度向量，運用 CNN 來進行無監督特徵學習；從而起到如圖 1 所示的編碼器的作用。
初始化時，輸入影像的大小重新定義為 256×256 畫素（不保留寬高比），畫素值在饋送到 CNN 之前被標準化。不進行進一步的預處理。為了將每個輸入影像編碼為固定大小的輸出向量，我們專門使用卷積步長（stride）為 1 的小 3×3 感受野（receptive field），此方法與 Simonyan 和 Zisserman 用於 VGGNet 的方法相似 [15]。這些操作進行兩次，然後運用最大池化進行下采樣（down sample）。第一個卷積層的寬度為 32，其後是寬度為 64 的層，最後為寬度 128 的層。最後，使用 2 個大小為 1024 的全連線層運用修正線性單元啟用函式（rectified linear unit activation）來完成視覺模型的建模。
圖 2：在 DSL 中編寫本機的 iOS GUI 的例子。
3.2 語言模型
我們設計了一個簡單的 DSL 來描述圖 2 所述的 GUI。在該項工作中，我們只對 GUI 的佈局感興趣，只對那些不同圖形控制元件及其相互間的關係感興趣，因此我們的 DSL 實際上忽略了標籤控制元件的文字值。另外為了縮小搜尋空間的大小，簡化 DSL 減少了詞彙量的大小（即由 DSL 支援的符號總數量）。因此我們的語言模型可以透過使用獨熱編碼（one-hot encoded）向量的離散型輸入執行字元級的語言建模，這也就降低了對如 word2vec [12] 那樣詞嵌入技術的需求，因此也就大大降低了計算量。
在大多數程式語言和標記語言中，元素通常宣告為開放符號。但如果子元素或指令包含在一個塊（block）內，直譯器或者編譯器通常需要一個封閉符號（closing token）。如果包含在父元素中的子元素數量是一個變數，那麼重要的是構建長期相關性（long-term dependencies）以封閉一個開放性的塊（block）。而傳統的迴圈神經網路（RNN）在擬合資料時會出現梯度消失或梯度爆炸的情況，因此我們選擇了能很好解決這個問題的長短期記憶（LSTM）。不同的 LSTM 門控輸出可由以下方程組計算：
其中 W 為權重矩陣，xt 為在時間 t 的新輸入向量，ht−1 是先前生成的輸出向量，ct−1 是先前生成的單元狀態輸出，b 是偏置項，而 φ 和 σ 分別是 S 型啟用函式（sigmoid）和雙曲正切啟用函式（hyperbolic tangent）。
3.3 複合模型
我們的模型採用的是監督學習，它透過投送影像 I 和符號 T 的序列 X（xt, t ∈ {0 . . . T − 1}）作為輸入，而將符號 xT 作為目標標註。正如圖 1 所示，基於 CNN 的視覺模型將輸入影像 I 編碼為向量表徵 p，而基於 LSTM 的語言模型透過將輸入符號 xt 編碼為中間表徵 qt 而允許模型更關注於特定的符號和少關注於其他符號 [7]。
第一個語言模型由兩個 LSTM 層、每層帶有 128 個單元的堆疊而實現。視覺編碼向量 p 和語言編碼向量 qt 可以級聯為單一向量 rt，該級聯向量 rt 隨後可以投送到基於 LSTM 的模型來解碼同時由視覺模型和語言模型學到的表徵。因此解碼器就學到了輸入 GUI 影像中的物件和 DSL 程式碼中的符號間的關係，因此也就可以對這一關係進行建模。我們的解碼器由兩個 LSTM 層、每層帶有 512 個單元的堆疊而實現。整個架構可以數學上表示為：
該架構允許整個 pix2code 模型透過梯度下降實現端到端的最佳化，這樣以便系統在看到影像和序列中前面的符號而預測下一個符號。
3.4 訓練
用於訓練的序列長度 T 對長期相關性（long-term dependencies）建模十分重要。在經驗性試驗後，用於訓練的 DSL 程式碼輸入檔案由大小為 48 的滑動視窗（sliding window）分割，即我們用 48 步展開迴圈神經網路。
訓練由損失函式對神經網路的權重求偏導數而執行反向傳播演算法，因此可以最小化多級對數損失而進行訓練：
其中 xt+1 為預期符號（expected token），yt 為預測符號。
3.5 抽樣
為了生成 DSL 程式碼，我們投送 GUI 影像和 T = 48 符號的序列 X，其中符號 xt . . . xT −1 設定為空符號，而序列 xT 設定為特別的<START>符號。
表 1：資料集統計
試驗
圖 3：在不同訓練集的訓練損失和模型在訓練 10 個 epochs 中的抽樣 ROC 曲線。
表 2：在測試集（表 1 所述）上的試驗結果報告。
圖 4、5、6 展示了輸入 GUI 影像（樣本真值），和由已訓練 pix2code 模型生成輸出的 GUI。
圖 4：iOS GUI 資料集中的試驗樣本。
圖 5：安卓 GUI 資料集中的試驗樣本。
圖 6：網頁 GUI 資料集的試驗樣本。
結語
在本論文中，我們提出了 pix2code 模型，它是一種給定 GUI 圖片作為輸入，且能生成計算機程式碼的新方法。雖然我們的工作展示了這樣一種能自動生成 GUI 程式碼的潛力系統，但我們的工作只是開發了這種潛力的皮毛。我們的模型由相對較少的引數組成，並且只能在相對較小的資料集上訓練。而構建更復雜的模型，並在更大的資料集上訓練會顯著地提升程式碼生成的質量。並且採用各種正則化方法和實現注意力機制（attention mechanism [1]）也能進一步提升生成程式碼的質量。同時該模型採用的獨熱編碼（one-hot encoding）並不會提供任何符號間關係的資訊，而採用 word2vec [12] 那樣的詞嵌入模型可能會有所好轉，同時獨熱編碼（one-hot encoding）也會限制可支援的符號數量。最後，由於近來生成對抗網路（GAN）在圖片生成上有極其出色的表現，也許我們可以藉助 GAN 及其思想由 GUI 影像生成計算機程式碼。