共计 8214 个字符，预计需要花费 21 分钟才能阅读完成。
背景介绍
2017 年，一篇论文 pix2code: Generating Code from a Graphical User Interface Screenshot 引起业界关注，论文讲述了应用深度学习技术实现从一张 UI 截图辨认生成 UI 构造形容，而后将 UI 构造形容转成 HTML 代码。有人认为这种从 UI 截图间接生成代码的意义不大，AI 和 Sketch 软件原本就是用数据结构保留设计文件的构造形容，不须要通过机器学习来获取，而且生成的代码不确定性很大。也有一部分人对这个思路给予必定，提出让深度学习模型学习 UI 界面特色，还能够做 UI 智能设计。
随后基于 pix2code 开发的 Screenshot2Code 我的项目进入 Github 排行榜第一名，该工具可能主动将 UI 截图转成 HTML 代码，该我的项目作者号称 3 年后人工智能会彻底改变前端开发，对此也有不少用户示意质疑，认为前端技术简单框架各异，仅 HTML 代码无奈满足需要。
2018 年，微软 AI Lab 开源了草图转代码工具 Sketch2Code， 一些人认为生成代码成果不现实不适用于生产环境，但也有人认为代码主动生成还处于初级阶段，将来倒退值得设想。
2019 年，阿里巴巴对外开放智能生成代码平台 imgcook，能够通过辨认设计稿（Sketch/PSD/ 图片）智能生成 React、Vue、Flutter、小程序等不同品种的代码，并在同年双 11 大促中主动生成了 79.34% 的前端代码，智能生成代码不再只是一个线下试验产品，而是真正产生了价值。
每当这些新的主动生成代码产品公布，网络上总会呈现“人工智能会不会取代前端”“一大批前端程序员要就业了”这些探讨。
那人工智能到底会不会取代前端？人工智能在将来很长的一段时间内不会取代前端，然而会扭转前端。一是会扭转在前端智能化方向的前端畛域探索者，他们除了能够成为 Nodejs 服务端工程师，还能够成为机器学习工程师，为前端智能化畛域发明更多的价值和成绩；二是会扭转享受前端智能化成绩的前端开发者，扭转他们的研发形式，例如代码智能生成、代码智能举荐、代码智能纠错、UI 自动化测试等能够帮忙他们实现大量简略反复的工作，能够把更多的工夫放在更有价值的事件上。
本篇文章将给大家分享作为前端智能化畛域的探索者，咱们是如何对待人工智能在前端畛域的将来倒退方向，如何推动智能化能力在智能生成代码平台 imgcook 上的利用落地和迭代降级助力往年双 11 会场 90.4% 新模块的代码智能生成，编码效率晋升 68% 的。
（更多干货内容请关注【淘系技术】公众号）
阶段性成绩
======
imgcook（https://www.imgcook.com）官网首页均匀每月 PV 6519，均匀每月 UV 3059。相比于 2019 年，2020 年月均匀 PV 和 UV 均是 2019 年的 2.5 倍。
imgcook 用户共有 18305 个，其中社区用户占比 77%，阿里团体内用户占比 23%。imgcook 模块共有 56406 个，其中内部模块占比 68%，外部模块占比 32%。相比 2019 年之前总量，2020 年用户增长 2.7 倍，模块增长 2.1 倍。
社区笼罩公司至多 150 家，团体外部笼罩 BU 10 个以上，双 11 会场新增模块覆盖度 90.4%，无人工辅助状况下智能生成的代码被保留公布上线的占比 79.26%，编码效率（模块复杂度和研发耗时比值）晋升 68%。
与 2019 年相比，用户感官提效晋升 14%；和齐全不应用 D2C 相比，固定人力单位工夫模块需要吞吐量晋升约 1.5 倍。与传统研发模式相比，应用 imgcook 研发链路编码效率可晋升约 68%。
更多具体数据请看 2020 年 imgcook 研发效力报告。
（Imgcook 研发效力数据概览）
技术产品体系降级
技术原理简介
咱们先来理解下 imgcook 智能生成代码的原理，imgcook 可能主动生成代码次要是做了两件事: 从视觉稿中辨认信息，而后将这些信息表白成代码。
实质是通过设计工具插件从设计稿中提取 JSON 形容信息，通过规定零碎、计算机视觉和机器学习等智能还原技术对 JSON 进行解决和转换，最终失去一个合乎代码构造和代码语义的 JSON，再用一个 DSL 转换器，转换为前端代码。DSL 转换器就是一个 JS 函数，输出是一个 JSON，输入就是咱们须要的代码。例如 React DSL 的输入就是合乎 React 开发标准的 React 代码。
（D2C 智能生成代码应用动线）
其中外围局部在于 JSON to JSON 这部分。设计稿中只有图像、文本这些元信息，地位信息是相对坐标，并且设计稿中的款式与 Web 页面中的款式体现存在差别，例如 sketch 中透明度 opacity 属性不会影响子节点，但在网页中 opacity 会影响子节点，而人工编写的代码具备各种布局类型、DOM 构造须要正当可保护、代码须要语义化、组件化、循环等信息。
如何能智能生成像人工编写这样的代码，这是智能还原这部分要解决的事件。咱们把 D2C 智能还原局部做了能力分层，每一层的输出和输入都是 JSON，智能还原局部的实质是一层一层的做 JSON 转换，这就是整个智能还原的流程。如果须要对生成的 JSON 做批改，能够通过 imgcook 编辑器可视化干涉，最终通过 DSL 凋谢层将失去的合乎代码构造和语义的 JSON 转换为代码。
（D2C 智能还原技术分层）
智能还原的外围链路形成了 D2C 的核心技术体系，并通过度量体系来掂量外围还原能力和研发提效成果。上层依靠算法工程体系提供核心技术体系中智能化能力的底层服务，包含样本制作、算法工程服务、前端算法工程框架，下层通过 D2C 研发体系承接智能还原的后置链路，通过提供可视化干涉能力满足用户二次迭代的需要，并通过将工程链路内置到 imgcook 平台实现一站式开发、调试、预览和公布来晋升整体的工程效率。再加上反对自定义 DSL、自定义开发物料等扩展性很强的自定义能力造成的凋谢体系一起形成了整个 D2C 架构，服务于阿里外部 C 端、小程序、中后盾等以及内部社区各种不同的业务场景。
（D2C 技术架构图）
往年在前端智能化大背景下，对 D2C 技术体系全链路进行了智能化能力降级，并为前端同学带来了让前端工程师能成为机器学习工程师的前端算法工程框架 Pipcook 和解决样本收集问题的样本制造机 Samplecook。同时带来了营销模块研发链路产品化降级，助力全链路研发提效。
智能化能力降级
智能化能力分层定义
《汽车驾驶自动化分级规范》基于驾驶自动化零碎可能执行动静驾驶工作的水平，依据在执行动静驾驶工作中的角色调配以及有无设计运行条件限度，将驾驶自动化分成 0 至 5 级。在高级别的主动驾驶中，驾驶员的角色向乘客转变。这种明确的规范有助于各类企业更有针对性开展研发和技术部署的工作。
（主动驾驶分级规范）
参考主动驾驶分级规范，基于 D2C 零碎可能主动生成代码的水平，依据编码的角色以及是否须要再人工干预和验证，咱们定义了一个 D2C 零碎交付的分级规范，用来帮忙咱们意识 D2C 零碎以后所处的级别以及下一阶段的倒退方向。
(D2C 零碎交付分级参考规范)
目前 imgcook 的能力处于 D2C 的 L3 级别，智能生成的代码还须要可视化干涉或人工兜底开发后验证上线。将来冀望达到 L4 级别，咱们须要对 UI 信息架构进行拆解，对从 UI 信息主动生成代码的智能化能力进行细分。
（UI 信息架构拆解）
一个利用由多个页面组成，每个页面中按 UI 颗粒度划分能够分为模块 / 区块、原子模块 / 区块、组件（业务组件、根底组件）、元件。每一个颗粒度的 UI 咱们都须要辨认到它的布局构造和语义，能力生成像人工编写一样模块化、组件化、语义化的可维护性较高的代码。
依据对 UI 信息架构的拆解，咱们联合 imgcook 生成代码的技术体系从不同颗粒度对智能化能力进行分级 I0-I5（I 是 Intelligent 的首字母）。
（D2C 智能化能力分级）
其中涂色局部是目前已具备的能力，从这个维度来看 imgcook 的智能化能力目前处在 I3 和 I4 级别，并与 I2 级别的能力协同运作于生产环境。I3 级别的智能化能力须要一直优化和迭代模型，当线上实在场景准确率达到 75% 以上或模型具备自我迭代能力则进入 I4 级别。如果达到了 I5 级别的智能化能力，依据 D2C 零碎交付分级参考规范，D2C 零碎交付分级能够从 L3 进入 L4，生成的代码将不须要人工干预和验证即可间接上线。
当然咱们可能会长期处于 L4 级别这个人机协同编程的阶段，这种分级的定义是为了促成智能化落地的过程，能够领导 咱们晋升 D2C 智能化能力，对 D2C 智能化有个更清晰的意识。
咱们以生成代码的可用度作为总体技术指标，并依据代码生成链路的技术分层给出各阶段的技术指标以及对代码可用率影响的权重，其中生成代码的实践准确度 = (各个环节准确度 * 权重) 之和，而实在的代码可用率 = imgcook 生成的代码在最终上线的代码中留存的占比。
（各分层技术指标与权重定义）
D2C 的智能化能力散布在还原链路的各个阶段，咱们以晋升代码可用率为指标，对全链路进行智能化能力降级，将技术计划细化到如何让各阶段模型辨认准确率晋升以及如何能将辨认后果最终利用到智能还原链路生成代码，如何做到从样本收集、模型训练、模型部署到模型利用到工程链路整个流程可能自动化、自我迭代优化，一直优化和迭代模型能力。
智能化能力的利用还须要工程链路的撑持，例如模型辨认后果的利用、线上用户行为召回、前端开发组件对 UI 组件辨认后果的承接等，整体的 D2C 技术体系也须要同步降级。
（D2C 技术体系降级大图）
各阶段智能化能力降级
图层解析阶段
imgcook 通过解析设计稿图层信息，并通过规定零碎、智能化技术等辨认和生成代码，但因为设计域与研发域的表达方式、构造和标准等差别，设计稿的图层构造对生成代码的合理性影响较大，一些设计不标准的设计稿须要用 imgcook 的“成组”和“图片合并”协定对设计稿进行调整。
开发同学在开发代码时也常常会有写多余的 console.log、没有正文、变量反复申明等代码不标准的问题，为了解决这些问题，提供了 ESLint、JSLint 等工具来保障代码标准的对立。
在设计域，咱们也同样能够开发一套设计稿标准智能查看工具来保障设计规范，智能审查设计稿的规范性，提醒谬误并辅助调整。咱们把这套工具称为 Design Lint（DLint），具体的实现计划能够查看 设计稿生成代码 Imgcook 3.0 系列 - 设计稿标准智能查看篇。
（设计规范查看）
物料辨认阶段
UI 物料能够分为模块 / 区块、组件和元件，从 Sketch/PSD 中间接提取的信息只有文本、图片和地位信息，间接生成的代码都是由 div、img、span 组成，理论开发中组件化、代码语义化必不可少，如何从设计稿中提取组件和语义信息，这是 NLP、深度学习等智能化技术非常适合解决的问题。
去年咱们在组件辨认、图片辨认、文本辨认这几个方向都有摸索和实际，辨认的后果最终用于语义化和字段绑定，但应用的技术计划对辨认的成果限度较大，往年咱们做了如下改良：
组件辨认
本来应用指标检测的计划来辨认 UI 组件，但这种计划既须要辨认出正确的组件类别还须要辨认出正确的地位，以整个视觉图片作为输出，简单的图片背景很容易被误辨认，并且因为辨认出的地位偏差导致很难挂载到正确的节点上，模型辨认后果在线上的利用准确率较低。
基于这些起因，以及 imgcook 可能从视觉稿中获取每个图层地位信息的劣势，咱们将计划转换成了图片分类，并能将辨认后果真正的利用到线上，这其中依靠一套组件可配置、可辨认、可渲染、可干涉、可出码的智能物料体系。具体实现计划能够查看 设计稿生成代码 Imgcook 3.0 系列 - 组件辨认篇。
（组件辨认利用全链路）
以下是组件辨认利用到线上的演示，辨认视觉稿中的视频信息，并用 rax-video 前端组件承接生成组件粒度的代码，须要配置自定义的组件 (组件库设置)、组件辨认模型服务 (模型服务设置)、反对渲染 video 组件的画布资源（编辑器配置 - 画布资源）以及利用组件辨认后果的业务逻辑点（业务逻辑库配置）。
（组件辨认全链路演示）
Icon 辨认
Icon 辨认其实是一个图片分类的问题，仍然沿用图片分类的计划，但为了可能让模型的泛化能力能自我加强，咱们设计了一个 Icon 主动收集、解决数据、主动训练模型、主动公布模型的模型闭环链路，让模型可能自我迭代优化。
（Icon 辨认模型闭环链路）
自上线以来，新增训练集总数达到了 2729 个，均匀每月回捞无效数据 909 个, 模型通过几次自我迭代测试集的准确度从 80% 晋升到了 83%。具体实现计划能够查看 设计稿生成代码 Imgcook 3.0 系列 -Icon 辨认篇。
图片 / 文本语义辨认
在 imgcook 智能化零碎中有一个很要害的局部，就是如何对 UI 界面内的元素绑定语义化信息，之前解决办法是基于图片和文本分类模型辨认，该办法有很大的局限性：仅对文本进行分类，没有思考与整个 UI 界面内的上下文语义，导致模型成果不好。
举个例子：$200，这个字段文本分类是没方法对其进行语义辨认的，因为它放到不同的场景中有着不同的意思，如：流动价、原价、优惠劵 …，正确的做法是思考该字段与在 UI 界面的分割（即独特的款式）来对它进行语义剖析。
因而，咱们引入了一种能联合 UI 中上下文语义的计划来进行语义辨认，采纳图片元素决策 + 文本分类两步走的计划解决界面元素语义化问题，具体流程是：先基于强化学习对界面元素按款式“过滤”一遍，辨认出有款式的非纯文本字段，再对纯文本的字段进行文本分类。具体框架如下。
（强化学习 + 文本分类）
以下是模型算法训练后果。
（基于上下文的语义剖析）
布局还原阶段
布局即是代码中每个节点与节点之间的关系，是父子关系还是兄弟关系。从颗粒度大小上划分，能够分为页面间模块 / 区块之前的关系、模块 / 区块内原子模块 / 区块之间的关系以及原子模块 / 区块内组件、元件之间的关系。
目前 imgcook 已具备了循环辨认与多态辨认的能力，辨认设计稿中的循环体生成循环代码，辨认同一个节点有多种 UI 状态时生成多状态的 UI 代码，并定义了布局可保护度掂量形式来掂量还原阶段的准确度。
（布局还原阶段辨认能力降级）
逻辑生成阶段
在业务逻辑生成阶段优化原有的配置链路，将业务逻辑库与算法工程链路解耦，并承接所有辨认后果的利用和表白。物料辨认阶段只关怀 UI 中有什么物料，不关怀辨认的后果如何用于生成代码，布局还原阶段的循环辨认和多态辨认同理。这样做的益处是咱们能够自定义辨认后果的表白，并且能够让用户感知智能辨认的后果并抉择是否应用。
除了从业务逻辑库生成逻辑代码也能够从需要稿生成局部逻辑，或者来源于代码片段举荐，或者来源于代码智能举荐（Code to Code，C2C）。
（通用业务逻辑库配置）
算法工程体系降级
样本制造机
算法工程服务提供了 UI 特色辨认的模型训练产品，为所有想应用业务组件辨认的小伙伴打造一个捉弄机器学习的链路。为了解决应用算法工程服务的要害痛点，所以有了新的衍生产品：样本制造机，为前端 UI 辨认的模型提供样本制作捷径。
前端算法工程框架
有很多同学会感觉，让前端同学用机器学习技术去解决前端畛域的问题，会不会难度很大。为了升高前端工程师应用机器学习的门槛，咱们开发了前端算法工程框架 Pipcook。前端工程师能够用相熟的 JavaScript 来实现机器学习工作。
Pipcook 通过提供通用的模型能力，比方图片分类、指标检测、文本分类等，缩小了在 imgcook 中从开发到上线这些模型的门槛，使得如此多的底层辨认能力也具备疾速迭代的可能性。imgcook 全链路的辨认能力，如组件辨认、Icon 辨认、字段语义辨认等都是基于 Pipcook 训练。
（前端算法工程框架 Pipcook）
咱们能够这样了解 Pipcook，Node.js 的呈现能够让前端工程师成为一位服务端工程师，做服务端同学能做的事件，Pipcook 的呈现能够让前端工程师成为一位机器学习工程师，能够做机器学习工程师做的事件。
(前端与机器学习)
研发链路降级
天马模块研发链路
淘系营销以模块开发为主，模块开发的残缺链路是从模块治理平台创立模块 ⇥ 进入 imgcook 平台智能生成代码 & 可视化研发 ⇥ 开发实现后进入 IDE 调试预览 ⇥ 测试实现后进入工程平台公布。整个研发流程须要切换多个平台，开发链路体验和工程效率都有待晋升。
创立模块后进入 imgcook 平台智能生成代码 & 可视化研发，如果可能间接在 imgcook 平台开发、调试、预览和公布，一站式的 D2C 研发模式是晋升整体研发效率和研发体验的一个不错的抉择。
所以咱们自定义了具备可视化模式和源码模式的营销版本 imgcook 可视化编辑器，在可视化模式智能生成代码和可视化研发，并将生成的代码一键同步到源码模式的 WebIDE，在 WebIDE 中反对界面化的调试、预览、公布。
(天马模块 imgcook 可视化研发动线)
咱们通过计算应用传统研发模式开发的模块与应用 imgcook 可视化研发模式开发的模块的效率值（复杂度与研发耗时比值）看到，应用 imgcook 可视化研发链路开发的模块编码效率晋升 68%。
(天马模块 imgcook 可视化研发全链路演示)
智能 UI 研发链路
智能 UI 是一种通过剖析用户特色为用户提供个性化 UI 的计划，因而须要开发大量的 UI 界面，在淘系智能 UI 平台鲸幂中开发智能 UI 的原始链路是在上传视觉稿解析物料之后会批量创立 imgcook 模块，但每种物料都须要进入对应的 imgcook 可视化界面独自开发、创立仓库、独自公布，并且看不到智能 UI 整体的视觉效果。这样导致智能 UI 所须要的大量物料的开发成本很大，业务接入智能 UI 的老本比拟大。
(智能 UI imgcook 可视化研发动线)
这次降级了智能 UI 的研发链路，D2C 可视化研发链路承接了智能 UI 的批量化生产。在上传设计稿解析出 UI 物料之后，创立 imgcook 模块，批量生成物料 UI 代码，同时创立代码仓库与 imgcook 模块关联，并反对将已创立的物料批量导入 imgcook，批量生成 UI 计划（不同类型的 UI），在生成的 UI 计划中集中式对物料进行开发，最初还将反对物料的批量公布，整个链路集中高效了很多。
落地后果
往年前端智能化助力前端研发模式降级，数个 BU 共建前端设计稿辨认算法模型和数据集，并于双 11 会场大规模利用落地。
设计稿生成代码技术体系全面降级（如对 UI 多态、直播视频组件、循环的智能辨认加强等）带来了营销模块研发链路产品化降级：双十一会场有 90.4%（高于去年）新模块的代码智能生成。降级设计稿智能查看能力，在可统计范畴内，无人工辅助的状况下智能生成的代码被保留公布上线的占比 79.26%。
相比传统模块开发模式，应用设计稿生成代码技术后编码效率（模块复杂度和研发耗时比值）晋升 68%，固定人力单位工夫模块需要吞吐量减少约 1.5 倍。
目前还须要人工改变代码的次要起因有：循环未被辨认、条件展现逻辑代码未主动生成、字段绑定猜想谬误（字段标准化状况不佳）、业务个性必须的图片合并问题等，这些问题也都是接下来须要逐步完善的。
（D2C 代码生成用户更改状况）
同时，imgcook 撑持了天猫淘宝的主会场和行业会场智能 UI 的批量化生产，极大的晋升了智能 UI 的生产效率。
（智能 UI 批量化生产后果）
将来瞻望
智能化形式无论是应用计算机视觉还是深度学习技术，都会有准确率的问题，准确率低在线上环境可能无奈被承受。须要建设一套与线上用户应用数据造成闭环的算法工程链路，实现样本自动化收集、算法工程链路的闭环能力让模型线上辨认准确率一直晋升。目前在 imgcook 的零碎中，Icon 辨认从样本收集到模型辨认后果的最终利用曾经造成了残缺的链路闭环，开发同学不须要花太多精力用于模型的优化。对于其余的模型，后续也会用同样的思路让模型具备自我迭代的能力。
另一个 D2C 智能化的难点是模型辨认的后果最终如何用于生成代码，例如组件辨认模型能辨认组件的类别，但最终生成代码应用哪个组件库的组件、如何辨认 UI 中的组件属性值这些问题，imgcook 的平台能力与智能还原技术分层架构具备解决这些问题的能力，将来会有更多的智能化计划用于生产环境。
后续咱们会持续依据对 imgcook 的 D2C 智能化能力拆解，摸索更多智能化解决方案，优化现有模型能力，建设算法工程闭环机制实现每一个模型的自我迭代，一直进步模型的泛化能力和线上辨认准确度，辅助生成可维护性更高语义更强的前端代码。