UI2CODE：闲鱼技术团队研发的UI视觉图片转化为端侧代码的工具

背景

随着移动互联网时代的到来，人类的科学技术突飞猛进。然而软件工程师们依旧需要花费大量精力在重复的还原UI视觉稿的工作。UI视觉研发拥有明显的特征：组件，位置和布局，符合机器学习处理范畴。能否通过机器视觉和深度学习等手段自动生成UI界面代码，来解放重复劳动力，成为我们关注的方向。

UI2CODE简介

UI2CODE项目是闲鱼技术团队研发的一款通过机器视觉理解+AI人工智能将UI视觉图片转化为端侧代码的工具。2018年3月UI2CODE开始启动技术可行性预研工作，到目前为止，经历了3次整体方案的重构（或者重写）。我们参考了大量的利用机器学习生成代码的方案，但都无法达到商用指标，UI2CODE的主要思想是将UI研发特征分而治之，避免鸡蛋放在一个篮子里。我们着重关注以下3个问题的解法：视觉稿还原精度：我们的设计师甚至无法容忍1像素的位置偏差；准确率：机器学习还处于概率学范畴，但我们需要100%的准确率；易维护性：工程师们看的懂，改的动是起点，合理的布局结构才能保障界面流畅运行。

UI2CODE运行效果

UI2CODE插件化运行效果，如下视频：

架构设计

UI2CODE的流程大体分为4个步骤：通过机器视觉技术，从视觉稿提取GUI元素；通过深度学习技术，识别GUI元素类型；通过递归神经网络技术，生成DSL；通过语法树模板匹配，生成flutter代码版面。版面分析只做一件事：切图。图片切割效果直接决定UI2CODE输出结果的准确率。

组件识别

进行组件识别前我们需要收集一些组件样本进行训练，使用Tensorflow提供的CNN模型和SSD模型等进行增量训练。UI2CODE对GUI进行了几十种类型分类：IMAGE，TEXT，SHAP/BUTTON，ICON，PRICE等等，分别归类为UI组件，CI组件和BI组件。组件的识别需要反复的通过全局特征反馈来纠正，通常会采用SSD+CNN协同工作。属性提取需要处理3部分内容：shape轮廓，字体属性和组件的宽高。完成属性提取，基本上我们完成所有GUI信息的提取。通过这些数据我们就可以进行布局分析了。

布局分析

前期我们采用4层LSTM网络进行训练学习，由于样本量比较小，我们改为规则实现。规则实现也比较简单，我们在第一步切图时5刀切割的顺序就是row和col。缺点是布局比较死板，需要结合RNN进行前置反馈。UI的布局结构就像房屋的框架，建造完成后通过GUI的属性进行精装修就完成了一个UI图层的代码还原工作。

代码生成及插件化

机器学习本质上来说还属于概率学范畴，自动生成的代码需要非常高的还原度和100%的准确率，概率注定UI2CODE很难达到我们要求，所以我们需要提供一个可编辑工具，由开发者通过工具能够快速理解UI的布局结构和修改布局结构。我们将UI2CODE生成的DSLTREE进行代码模板化匹配，代码模板的内容由资深的flutter技术专家来定义，它代表目前我们发现的最优代码实现方案。代码模板中会引入一些标签，由Intellijplugin来检索flutter工程中是否存在对应的自定义UIKIT，并进行替换，提高代码的复用度。整个插件化工程需要提供自定义UIKIT的检索，替换和校验工作，以及DSLTree的创建，修改，图示等工作，总体来说，更像ERP系统，花费一些时间能够做的更加完美。