GIAC2019 演讲精选 | 面向将来的黑科技——UI2CODE闲鱼基于图片生成跨端代码

一直以来， 如何从‘视觉稿’精确的还原出 对应的UI侧代码 一直是端侧开发同窗工做里消耗比较大的部分，一方面这部分的工做 比较肯定缺乏技术深度，另外一方面视觉设计师也须要投入大量的走查时间，有大量无谓的沟通和消耗。

闲鱼团队 在去年作了一个很特别的黑科技 基于图片直接翻译成对应的UI侧代码，具体完成的部分，咱们有一个演示的视频

不少人会比较好奇，为何我会坚持使用图片作为输入源，一方面基于 sketch 或者 photoshop 等插件 相对容易拿到肯定性的信息，图片在某些方面容易丢失一些特征；另外基于图片的分析其实挑战更大。咱们作 这个选择 有如下缘由，首先图片做为最终的产出物，更直观和肯定性，另外这个链路里对上游不会有约束性。最后也是最重要的一点 基于图片的应用场景会更普适，相似场景 例如自动化测试能力的支持，基于竟品直接截图来套用咱们本身的数据源找体感，等场景是其余的方案作不到的。

上面咱们在讲项目自己的意义和选型上的一些判断，后面咱们会简单介绍下项目的基本流程

首先咱们会使用深度学习的方式，来找到对应的 UI单元，包括基础的UI组件，例如 imgview textview 等，接下来是自定义的BI组件例如 price 等， 最后咱们会寻找已经被实现过的业务组件。下面是一个 常见的业务场景，咱们框选了每一个对应的部分，演示上面的业务逻辑

接下来咱们会基于已经检测出的元素，来作对应的元素提取，这个部分咱们会去分析系统渲染的原理 并使用 opencv 的方法来作对应的功能

项目总体的流程，咱们用下面的这个图来表示

在整个项目落地的过程当中，咱们遇到不少的技术困难的点，下面我会讲2个有意思的点

第一个咱们会发现 autoui 的整个流程结构是一个很是典型的上下游的流形式，每一个关键的单元都会依赖上游的输出，而且为下游提供标准的输入，咱们在项目的开始时候，由于没有特别好的去定义切分的关系，常常会出现当一个同窗调整和PUSH代码后，会对整个链路形成很大的影响，因此咱们对架构设计作了一个关键的升级咱们定义叫流式的架构，咱们用一个图让你们更好的来理解这一块

在这个单元里 咱们定义了 unti,tasks,server三个单元，unit自己是最小粒度的功能切分，tasks是unit的组合，server 会提供具体的服务，每一个部分都会为上下游 提供输入和输出，架构切分的好处是，全部的模块都有标准的输入和输出的部分，咱们能够经过对模块的MOCK来解决标准化调试的问题，另外当一些基础的功能完成后，咱们能够经过搭积木的方式来组合本身想要的 tasks 和 server ，在咱们作了架构调整后，由于总体的切分更合理，也减小了上下游的依赖，对项目的快速迭代产生了很大的帮助。

后续 在架构侧咱们还作了一个有意思的点，由于 咱们的服务有些是须要跑在服务端，有些是须要跑在客户端上，因此咱们设计了一个能够在客户端和服务端同构的场景，目的是但愿开发的人员只须要关系界面和服务的通讯，但并不须要关注具体服务的部署关系

上面咱们讲了一个架构的设计，后面咱们但愿讲一个具体的布局问题具体解法，把静态的DSL转成一个合适的布局属性的TREE，在这个部分咱们仍是分析了能产生布局的因素，以下图所示

这样一个很是常见的布局，咱们拆分出了影响布局的部分，经过元素位置、间距、容器位置分析，咱们参考了 flex 布局的标准，也参考了 新的 grid 的布局标准，经过枚举元素在位置中站位的比例，来得出对应的关系。

可是咱们最后仍是遇到一些Bad Case，如何写出更贴近人写出的UI侧代码，咱们仍是须要去参考相似语意的部分，类似度的部分 咱们才能获得真正合理的布局，例如上面的 这个例子，若是按照枚举的布局去推断的话，咱们很容易获得 一个四个横列的布局关系，可是经过语意和类似度的部分，咱们会很容易的推断出一个 gridview 的布局关系。

去年总体 咱们已经比较好的 让整个工程在业务侧 开始跑起来 开始让你们能解放出来 作一些更须要思考的事情，并把咱们的项目 展现给了 google团队，也获得了不少的关注。

将来，咱们仍是但愿经过更好的分析能力（包括 容器识别、复杂的背景识别、精确的语意理解能力），产生出更接近开发人员手写的代码，从而彻底取代 ‘切图’ 这个工做，另外咱们也在看在这个阶段咱们已经可以 让机器来解放开发链路的最前面一段，后面 在一些弱交互、强展现的部分，例如导购或者营销这样的场景，咱们其实经过数据模型的抽象和识别、甚至固定的PRD的识别 有可能咱们是能真正的解放整段的人力投入，让你们从偏肯定性的需求实现中解放出来。另外 咱们也开始和 D2C 这样的项目 一块儿共建，但愿在闲鱼里已经实现的部分，可以解决更多人的问题，解放更多的生产力。

 

本文做者：闲鱼技术-青页

原文连接

本文为云栖社区原创内容，未经容许不得转载。