双 11 模块 79.34% 的代码是怎样智能生成的？（二）-InfoQ

技术方案

基于上述前端智能化发展概括分析，我们对现有的 D2C 智能化技术体系做了能力概述分层，主要分为以下三部分：

识别能力：即对设计稿的识别能力。智能从设计稿分析出包含的图层、基础组件、业务组件、布局、语义化、数据字段、业务逻辑等多维度的信息。如果智能识别不准，就可视化人工干预补充纠正，一方面是为了可视化低成本干预生成高可用代码，另一方面这些干预后的数据就是标注样本，反哺提升智能识别的准确率。
表达能力：主要做数据输出以及对工程部分接入
通过 DSL 适配将标准的结构化描述做 Schema2Code
通过 IDE 插件能力做工程接入
算法工程：为了更好的支撑 D2C 需要的智能化能力，将高频能力服务化，主要包含数据生成处理、模型服务部分
样本生成：主要处理各渠道来源样本数据并生成样本
模型服务：主要提供模型 API 封装服务以及数据回流

前端智能化 D2C 能力概要分层

在整个方案里，我们用同一套数据协议规范（D2C Schema）来连接各层的能力，确保其中的识别能够映射到具体对应的字段上，在表达阶段也能正确地通过出码引擎等方案生成代码。

智能识别技术分层

在整个 D2C 项目中，最核心的是上述识别能力部分的机器智能识别部分，这层的具体再分解如下，后续系列文章会围绕这些细分的分层展开内部实现原理。

物料识别层：主要通过图像识别能力识别图像中的物料（模块识别、原子模块识别、基础组件识别、业务组件识别）。
图层处理层：主要将设计稿或者图像中图层进行分离处理，并结合上一层的识别结果，整理好图层元信息。
图层再加工层：对图层处理层的图层数据做进一步的规范化处理。
布局算法层：转换二维中的绝对定位图层布局为相对定位和 Flex 布局。
语义化层：通过图层的多维特征对图层在生成代码端做语义化表达。
字段绑定层：对图层里的静态数据结合数据接口做接口动态数据字段绑定映射。
业务逻辑层：对已配置的业务逻辑通过业务逻辑识别和表达器来生成业务逻辑代码协议。
出码引擎层：最后输出经过各层智能化处理好的代码协议，经过表达能力（协议转代码的引擎）输出各种 DSL 代码。

D2C 识别能力技术分层

技术痛点

当然，这其中的识别不全面、识别准确度不高一直是 D2C 老生常谈的话题，也是我们的核心技术痛点。我们尝试从这几个角度来分析引起这个问题的因素：

1.识别问题定义不准确：问题定义不准确是影响模型识别不准的首要因素，很多人认为样本和模型是主要因素，但在这之前，可能一开始的对问题的定义就出现了问题，我们需要判断我们的识别诉求模型是否合适做，如果合适那该怎么定义清楚这里面的规则等。

2.高质量的数据集样本缺乏：我们在识别层的各个机器智能识别能力需要依赖不同的样本，那我们的样本能覆盖多少前端开发场景，各个场景的样本数据质量怎么样，数据标准是否统一，特征工程处理是否统一，样本是否存在二义性，互通性如何，这是我们当下所面临的问题。

3.模型召回低、存在误判：我们往往会在样本里堆积许多不同场景下不同种类的样本作为训练，期望通过一个模型来解决所有的识别问题，但这却往往会让模型的部分分类召回率低，对于一些有二义性的分类也会存在误判。

▐ 问题定义

深度学习里的计算机视觉类模型目前比较适合解决的是分类问题和目标检测问题，我们判断一个识别问题是否该使用深度模型的前提是——我们自己是否能够判断和理解，这类问题是否有二义性等，如果人也无法准确地判断，那么这个识别问题可能就不太合适。

假如判断适合用深度学习的分类来做，那就需要继续定义清楚所有的分类，这些分类之间需要严谨、有排他性、可完整枚举。比如在做图片的语义化这个命题的时候，一般图片的 ClassName 通用常规命名有哪些，举个例子，其分析过程如下：

第一步：尽可能多地找出相关的设计稿，一个个枚举里面的图片类型。
第二步：对图片类型进行合理归纳归类，这是最容易有争论的地方，定义不好有二义性会导致最有模型准确度问题。
第三步：分析每类图片的特征，这些特征是否典型，是否是最核心的特征点，因为关系到后续模型的推理泛化能力。
第四步：每类图片的数据样本来源是否有，没有的话能否自动造；如果数据样本无法有，那就不适合用模型，可以改用算法规则等方式替代先看效果。

D2C 项目中很多这样的问题，问题本身的定义需要非常精准，并且需要有科学的参考依据，这一点本身就比较难，因为没有可借鉴的先例，只能先用已知的经验先试用，用户测试有问题后再修正，这是一个需要持续迭代持续完善的痛点。

▐ 样本质量

针对样本问题，我们需要对这部分数据集建立标准规范，分场景构建多维度的数据集，将收集的数据做统一的处理和提供，并以此期望能建立一套规范的数据体系。

在这套体系中，我们使用统一的样本数据存储格式，提供统一的针对不同问题（分类、目标检测）的样本评估工具来评估各项数据集的质量，针对部分特定模型可采取效果较好的特征工程（归一化、边缘放大等）来处理，同类问题的样本也期望能在后续不同的模型里能够流通作比较，来评估不同模型的准确度和效率。

数据样本工程体系

▐ 模型

针对模型的召回和误判问题，我们尝试收敛场景来提高准确度。往往不同场景下的样本会存在一些特征上的相似点或者影响部分分类局部关键特征点，导致产生误判、召回低，我们期望能够通过收敛场景来做模式化的识别，提高模型准确度。我们把场景收敛到如下三个场景：无线 C 端营销频道场景、小程序场景以及 PC 中后台场景。这里面几个场景的设计模式都有自己的特色，针对各个场景来设计垂直的识别模型可以高效地提高单一场景的识别准确度。

D2C 场景

过程思考

既然使用了深度模型，有一个比较现实的问题是，模型的泛化能力不够，识别的准确率必然不能 100% 让用户满意，除了能够在后续不断地补充这批识别不到的样本数据外，在这之前我们能做什么？

在 D2C 的整个还原链路里，对于识别模型，我们还遵守一个方法论，即设计一套协议或者规则能通过其他方式来兜底深度模型的识别效果，保障在模型识别不准确的情况下用户仍可完成诉求：手动约定 > 规则策略 > 机器学习 > 深度模型。举个例子比如需要识别设计稿里的一个循环体：

初期，我们可以在设计稿里手动约定循环体的协议来达成
根据图层的上下文信息可做一些规则的判断，来判断是否是循环体
利用机器学习的图层特征，可尝试做规则策略的更上游的策略优化
生成循环体的一些正负样本来通过深度模型进行学习

其中手动约定的设计稿协议解析优先级最高，这样也能确保后续的流程不受阻塞和错误识别的干扰。

业务落地

2019 双十一落地

在今年的双十一场景中，我们的 D2C 覆盖了天猫淘宝会场的新增模块，包括主会场、行业会场、营销玩法会场、榜单会场等，包含了视图代码和部分逻辑代码的自动生成，在可统计范围内，D2C 代码生成占据了大比例。目前代码的人工改动的主要原因有：全新业务逻辑、动画、字段绑定猜测错误（字段标准化情况不佳）、循环猜测错误、样式自适应修改等，这些问题也都是接下来需要逐步完善的。

D2C 代码生成用户更改情况

整体落地情况

我们对外的产品 imgcook，截止 2019.11.09 日，相关的使用数据情况如下：

模块数 12681 个，周新增 540 个左右；
用户数 4315 个，周新增 150 个左右；
自定义DSL：总数 109 个；

目前可提供的服务能力如下：

设计稿全链路还原：通过 Sketch、PhotoShop 插件一键导出设计稿图层，生成自定义的 DSL 代码。
图像链路还原：支持用户自定义上传图片、文件或填写图片链接，直接还原生成自定义的 DSL 代码。

后续规划

继续降低设计稿要求，争取设计稿 0 协议，其中分组、循环的智能识别准确度提升，减少视觉稿协议的人工干预成本。
组件识别准确度提升，目前只有 72% 的准确度，业务应用可用率低。
页面级和项目级还原能力可用率提升，依赖页面分割能力的准确度提升。
小程序、中后台等领域的页面级还原能力提升，含复杂表单、表格、图表的整体还原能力。
静态图片生成代码链路可用度提升，真正可用于生产环境。
算法工程产品完善，样本生成渠道更多元，样本集更丰富。
D2C 能力开源。

未来我们希望能通过前端智能化 D2C 项目，让前端智能化技术方案普惠化，沉淀更具竞争力的样本和模型，提供准确度更高、可用度更高的代码智能生成服务；切实提高前端研发效率，减少简单的重复性工作，不加班少加班，一起专注更有挑战性的工作内容！

感兴趣的同学可加入钉钉群一起交流：21909696

D2 智能化专场

今年的 D2 智能化专场将通过行业的应用案例和实践经验的风向，让大家对智能化改变前端有切实的感受，欢迎大家来一起探讨。

Tensorflow.js 前端的机器学习平台

演讲嘉宾：王铁震
话题介绍：TensorFlow.js 是谷歌开发的机器学习加速平台。这个库用于在浏览器、Node.js 和其他 JavaScript 平台中训练和部署机器学习模型，为 JavaScript 开发者提供了简洁高效的API。在本讲中，您将了解到 TensorFlow.js 生态系统，如何将现有的机器学习模型植入到前端，同时还会探讨进一步优化的方式，未来发展的方向。

前端智能化实践 - 逻辑代码生成

演讲嘉宾：甄子

话题介绍：从生成 UI 代码到生成逻辑代码有多远？如何用页面结构和数据结构的视角去看待并解决代码生成问题？如何赋予开发者自定义的能力来解决业务问题？用实践检验前端智能化的力量，用设计去论证前端智能化的未来，诚邀您一起探讨前端在机器学习和人工智能领域的发展。

数据分析的人工智能画板 - 马良

演讲嘉宾：言顾
话题介绍：随着越来越多的企业重视数据可视化，通过降低工程门槛来帮助用户创建可视化大屏成为当前的一大趋势。然而除了工程成本，数据可视化的设计效率，极大影响着数据挖掘的效率。在此之上，由于多方技术人员的参与，沟通成本过大，导致流程耗时久，且难以迭代，极大限制了潜在用户以及潜在的可适用场景。对可视化大屏搭建平台来说，急需一款产品能够提高用户的数据可视设计能力，让用户突破模版限制，轻松创造属于自己的个性化大屏。