Google開發者大會將揭曉哪些黑科技（上）
作者：閒魚技術-青頁
背景
長期以來，使用 UI 側的程式碼，精確的還原設計師的設計稿，一直是 介面側的工程師 需要投入大量的時間和精力去完成，另外由於工作中交流涉及到的修改，往往會耗費 設計師和工程師的 大量精力，讓我們的時間有大量的消耗。
阿里巴巴集團閒魚團隊在最近有一個黑科技，基於機器視覺理解能力的突破，我們可以讓機器人 直接去理解設計師產出的圖片，然後通過程式碼翻譯機 來直接生成我們最終的程式碼
正文
下面是一段演示視訊，我們可以一起來看下
“UI2CODE”：讓機器去理解影象元素
該框架名為“UI2CODE”,通過該框架可以直接將任意手機截圖生成的圖片轉換成Android，ios和web端可用的程式碼。UI2CODE最核心的部分是通過機器視覺和深度學習等手段，實現影象的內容理解。
通過前景和背景分離，從而把視覺稿中的各個元素識別出來，知道它內部的元素是什麼。比如，是文字，影象還是輪廓等。此外，我們除了知道這些內容，還可以知道它們的屬性是什麼。其中，輪廓有圓角半徑、描邊粗細、描邊顏色和背景顏色等屬性，文字則有行數、行高、行寬、字型顏色、字型大小、字型格式、字型厚度、每行高度、文字修飾、對齊方式、字型型別等屬性，圖片屬性相對簡單有覆蓋、包含和延展的屬性。
UI2CODE是由阿里巴巴閒魚技術團隊開發的，使用並改進了傳統的卷積神經網路，能夠同時以許多不同尺度記憶並提取影象特徵。
可以說，隨著UI2CODE框架的不斷更新升級，這一創新至少可以允許一些人在更酷的領域進行工作。也就是說，它解放了開發人員，使他們夠專注於正在構建的實際功能，而不是花費大量精力去構建使用者介面。
“UI2CODE”：讓機器去理解影象佈局
UI2CODE不僅能理解影象元素，同時也能理解影象佈局。
如果說元素是影象的“微觀”部分，那麼佈局是影象的“巨集觀”部分。通過UI2CODE我們可以知道它由哪些業務元件組成，各個元素的行列排版關係，甚至知道包含哪些重複型別的業務元件等等。
閒魚技術團隊通過機器視覺的方式切割圖片，並通過機器學習的方式知道這些分片是否是屬於已知的業務元件。如果發現屬於這塊業務元件，則用原先的業務元件模組替換對應的影象區域。這樣能夠節省大量的開發構建業務元件的時間。
此外，閒魚通過深度學習的方式不斷地訓練和學習已有的樣本，通過樣本知道它內在的行列排版規律，這樣得到的影象佈局會越來越準確。
最後，影象元素和影象佈局結合能夠使得還原的程式碼更加貼合實際應用，具有高度的可用性。
未來，我們希望將系統技術改進，他讓能夠對圖片本身 有更精確的理解能力，同時我們會把 這項技術和 FLUTTER的開發實踐結合起來，來提供更強大的能力
我們將會在 google developer day 2018 上海 來公佈這項技術
聯絡我們
如果對文字的內容有疑問或指正，歡迎告知我們。
閒魚技術團隊是一隻短小精悍的工程技術團隊。我們不僅關注於業務問題的有效解決，同時我們在推動打破技術棧分工限制（android/iOS/Html5/Server 程式設計模型和語言的統一）、計算機視覺技術在移動終端上的前沿實踐工作。作為閒魚技術團隊的軟體工程師，您有機會去展示您所有的才能和勇氣，在整個產品的演進和使用者問題解決中證明技術發展是改變生活方式的動力。
簡歷投遞：[email protected]