作者：闲鱼技术-青页

背景

长期以来，使用 UI 侧的代码，精确的还原设计师的设计稿，一直是 界面侧的工程师 需要投入大量的时间和精力去完成，另外由于工作中交流涉及到的修改，往往会耗费 设计师和工程师的 大量精力，让我们的时间有大量的消耗。
阿里巴巴集团闲鱼团队在最近有一个黑科技，基于机器视觉理解能力的突破，我们可以让机器人 直接去理解设计师产出的图片，然后通过代码翻译机 来直接生成我们最终的代码

正文

下面是一段演示视频，我们可以一起来看下

“UI2CODE”：让机器去理解图像元素
该框架名为“UI2CODE”,通过该框架可以直接将任意手机截图生成的图片转换成Android，ios和web端可用的代码。UI2CODE最核心的部分是通过机器视觉和深度学习等手段，实现图像的内容理解。
通过前景和背景分离，从而把视觉稿中的各个元素识别出来，知道它内部的元素是什么。比如，是文字，图像还是轮廓等。此外，我们除了知道这些内容，还可以知道它们的属性是什么。其中，轮廓有圆角半径、描边粗细、描边颜色和背景颜色等属性，文字则有行数、行高、行宽、字体颜色、字体大小、字体格式、字体厚度、每行高度、文本修饰、对齐方式、字体类型等属性，图片属性相对简单有覆盖、包含和延展的属性。
UI2CODE是由阿里巴巴闲鱼技术团队开发的，使用并改进了传统的卷积神经网络，能够同时以许多不同尺度记忆并提取图像特征。
可以说，随着UI2CODE框架的不断更新升级，这一创新至少可以允许一些人在更酷的领域进行工作。也就是说，它解放了开发人员，使他们够专注于正在构建的实际功能，而不是花费大量精力去构建用户界面。
“UI2CODE”：让机器去理解图像布局
UI2CODE不仅能理解图像元素，同时也能理解图像布局。
如果说元素是图像的“微观”部分，那么布局是图像的“宏观”部分。通过UI2CODE我们可以知道它由哪些业务组件组成，各个元素的行列排版关系，甚至知道包含哪些重复类型的业务组件等等。
闲鱼技术团队通过机器视觉的方式切割图片，并通过机器学习的方式知道这些分片是否是属于已知的业务组件。如果发现属于这块业务组件，则用原先的业务组件模块替换对应的图像区域。这样能够节省大量的开发构建业务组件的时间。
此外，闲鱼通过深度学习的方式不断地训练和学习已有的样本，通过样本知道它内在的行列排版规律，这样得到的图像布局会越来越准确。
最后，图像元素和图像布局结合能够使得还原的代码更加贴合实际应用，具有高度的可用性。
未来，我们希望将系统技术改进，他让能够对图片本身 有更精确的理解能力，同时我们会把 这项技术和 FLUTTER的开发实践结合起来，来提供更强大的能力
我们将会在 google developer day 2018 上海 来公布这项技术

联系我们

如果对文本的内容有疑问或指正，欢迎告知我们。
闲鱼技术团队是一只短小精悍的工程技术团队。我们不仅关注于业务问题的有效解决，同时我们在推动打破技术栈分工限制（android/iOS/Html5/Server 编程模型和语言的统一）、计算机视觉技术在移动终端上的前沿实践工作。作为闲鱼技术团队的软件工程师，您有机会去展示您所有的才能和勇气，在整个产品的演进和用户问题解决中证明技术发展是改变生活方式的动力。
简历投递：guicai.gxy@alibaba-inc.com