设计生成代码的前端智能研发实践

人工智能正在改变这个世界，作为一个前端工程师，我们也能参与其中，为前端技术领域换上前端智能化引擎。本文整理自阿里巴巴淘宝技术部高级前端专家甄焱鲲（甄子）在 QCon全球软件开发大会（北京站）2019 上的演讲，他用前端工程师熟悉的语言定义，阐释了“什么是前端智能化”，从实际应用场景出发，设计应用案例，分享了相关技术体系在实践中进行工程化落地经验。点此下载完整版PPT。

之前有一个评价说张勇是在高速公路上换引擎的人，阿里巴巴在高速发展的时候张勇带着大家为阿里巴巴换上移动端的新引擎，推动阿里巴巴持续快速增长。反观前端领域，经历由 Angular、React、Vue、Webpack 等技术驱动的高速发展阶段，整个前端领域就像行驶在高速公路的汽车。这辆车已经拥有了三部引擎：Web、Server、Native，Web 这部引擎在 PWA、WASM、WebGL 等技术增强下继续保持强劲势头，Server 引擎以 Node.js 为核心借势 Serverless 在云端大放异彩，Native 引擎以 PhoneGap、React-Native、Weex 技术为核心抢占客户端快速开发原生应用的滩头阵地。前端智能化将是未来的新前端引擎，而我们就是在前端高速发展中，给前端技术换引擎的人。希望可以启发你，在人工智能改变这个世界的时候，作为一个前端工程师参与其中，为前端技术领域换上前端智能化引擎。

虽然接触推荐算法是 2009 年，第一次组建人工智能团队却在 2014 年底。在经历了应用发行、广告、信息流和浏览器等业务，看到人工智能给业务带来的巨大价值，因参与其中而被彻底征服。那时起我就坚定认为，人工智能是继计算机以来最强大的力量，将会从每个角落彻底改变世界。

1. 理解人工智能

“人工智能”或许是迄今为止最神秘的编程方式。通过机器学习程序，在神经网络中总结出规律和模式，就可以推理出结果。用数学理论无法简单证明，用工具分析也难以理解，但是神经网络却工作的很好。在语音、图像识别等领域已经达到工业标准，识别准确率远超人类。不同以往、难以解释的编程方式，正在改进安检、支付等场景的效率和体验，这正是人工智能的神秘之处。

这种神秘的编程方式和之前有何不同？以往的编程方式以计算为核心，可以总结为算法加数据结构。人工智能的编程方式以推理为核心，通过模型预测的概率推理结果，可以总结为数据加模型。过去，编程过程中逻辑条件都是确定的数值区间，逻辑背后执行的是各种规则，规则的背后是程序员凭经验制定的策略。现在，人工智能通过机器学习的方式，在数据中根据规则测试各种策略，找出不同数值区间下最优的策略，学习最优策略背后的规律和模式，即使输入的数值区间发生变化也能利用学到的规律和模式产生最优的策略。

从规则和计算到规律和模式：

3x3x3x3 = 81

34 = 81

ln(3) = 1.0986

eln(3) = 2.9999

2.99994 = 80.9892

81 = eln(3).4

Q = erate.time

Q是结果 e约2.71828 rate是单位时间增长率 time是经历了多少个时间单位的增长

拿围棋举例，通过编程实现一个围棋游戏。按照棋盘看，在纵横 19 条线 361 个交叉点上，每个点可能有黑、白、空三种可能，落子的可能性有 3^361 的数值区间。按照走法看，合法棋局总数在 10^170 量级，合法棋路总数在 10^300 量级，远大于全宇宙原子数量 10^80 的海量数值区间。传统编程方式穷举所有可能性的搜索空间巨大，如果下一步棋需要算几个小时，那么，这游戏根本没法玩。Alpha Go 通过自己和自己对弈的方式，借助深度神经网络学习棋局、棋路背后的模式和规律，应对不同棋局、棋路下落子的可能性，推理出最佳策略。从 2015 年起，Alpha Go 在网上实现快棋 600 连胜，在韩国战胜李世石，在围棋发源地中国战胜柯洁，“狗狗”用实力证明：自己并非一个简单的棋谱搜索程序。

人工智能的核心是用特殊编程方法使程序具备推理能力，既可以根据推理结果纠正模型，进行监督的学习，也可以让程序像 Alpha Go 一样自己和自己对弈，从而让模型无监督的学习。模型学成出师后，可以在无人干预的情况下进行推理，利用概率预测分析，产生最佳策略，借助最佳策略处理模型未曾见过却似曾相识的问题。

2. 定义前端智能化

从围棋的问题中可以看到，如果规则和运算不能解决，那么，这就是人工智能擅长解决的。在前端技术领域当然也会有规则和运算不能直接解决的问题，所以，这些问题就是前端智能化要解决的问题。前端智能化就是在复杂场景中，借助人工智能技术，解决规则和运算不能直接解决的复杂问题。

2.1 编程领域不能直接通过规则和运算解决的问题

可以从“该不该”和“能不能”两个不同角度分析，“该不该”是从投入产出比分析，“能不能”是从不可替代性分析。在围棋的例子中，使用传统编程穷举所有可能性，只要算力足够是可以实现的，但投入产出比差。还是围棋的例子，使用围棋游戏规则为规则，棋谱为运算依据，当玩家下出棋谱之外的局面和棋路，传统程序就会因为缺失运算依据而无法处理，就是不能用规则和运算解决的问题。

2.2 前端领域不能直接通过规则和运算解决的问题

还是从“该不该”和“能不能”进行分析。JavaScript 在不同脚本引擎上会以解释和编译两种方式执行，在不同的脚本引擎和执行方式上存在很大的性能差异。针对 JavaScript 的性能优化，以执行速度快为规则，依据不同脚本引擎特性，穷举所有优化可能性对算力的要求巨大，计算过程缓慢而影响研发效率。这种复杂条件下，采用规则和运算的解法投入产出不成正比。在优化 JavaScript 可维护性的时候，有较强的团队属性和主观性，传统的前端编程技术无法理解可维护性背后的模式和规律。前端智能化可以借助模型的能力进行自然语言处理，理解代码的语义，总结可维护性好的代码背后语义的模式和规律，然后，给可维护性打个分。

2.3 前端智能化解决的问题

前端智能化就是在传统前端编程投入产出不成正比或无法处理的复杂场景中，借助模型对规律和模式的理解，在无人干预的情况下进行推理，产生最佳策略，借助最佳策略解决传统前端投入产出比差或无法处理的问题。

3. 可行性评估

前端智能化价值评估解决的是“该不该做”的问题，前端智能化可行性评估解决的是“能不能做”的问题。人工智能可以总结为数据加模型的神秘编程方式，因为前端智能化是在前端领域应用人工智能技术，所以，只要解决了数据和模型的问题，就可以解决前端智能化可行性问题。

3.1 数据评估

面对一个前端智能化适合的问题时，首先要审查是否有充分的数据描述这个问题，有充分的数据描述就意味着模型有可能学会数据背后的规律和模式。在技术工作中经常要面对技术选型，其中一个衡量技术可采纳性的标准就是文档是否丰富，尤其在新技术的采纳性评估中，有多少人用过踩过坑？沉淀了多少文档资料？直接决定了采纳该技术的可行性。假设要解决的问题是 Javascript 代码可维护性问题，就要审查可维护性好的代码有多少？可维护性差的代码有多少？维护性好的代码和维护性差的代码是否能充分覆盖现实中的所有情况？各种情况的代码数量分布是否均衡？

所谓“读万卷书，行万里路”，见多才能识广，数据应该是越多越好。但是，不能简单理解为多多益善，假如一个人见过上万人但没见过很多外国人，她很难认出一个外国人是哪国人，这就是所谓数据是否均衡。应该被标注为外国人而误标注为中国人，这就是错误数据或噪声。相对数据均衡性，通常错误数据是数据处理中比较麻烦的部分，数据不均衡可以批量处理，数据噪声只能单独识别处理。

当面对不同的问题，错误数据和噪声可能是很有价值的。在语音识别领域核心挑战是抗噪，当语音混杂在不同背景噪声下，模型识别的时候就会受到干扰。一个解决办法是去不同背景噪声的环境下采集数据，让模型学会从噪声中分辨语音。当最终要解决的问题是在噪声中识别语音，对数据的要求就是要拥有噪声背景的标注数据。如果只是做演讲的同声翻译系统，就不需要采集那么多带背景噪声的语音识别数据。

3.2 模型评估

前端智能化要解决的问题是否有成熟的模型解决，是判断可行性的核心问题。这就像上一个内六角螺丝，是否有对口的螺丝刀直接决定了可行性。模型提供特定的功能，有的模型用来识别图像、有的模型用来识别文本、有的模型用来识别语音、也有模型用来合成语音……成熟的模型会在泛化能力和准确率上具有很高的水准。

成熟的模型一般都会提供预训练的模型，通常，这些预训练的模型会在海量数据集和大型分布式设备上进行过精心的训练和调试，能够在不加训练的情况下保持较高的准确率。此外，成熟的模型都拥有较高品质的代码，可以直接 Git Clone 进行实验。最后，成熟的模型都拥有较完善的文档，这些文档会对模型的原理和功能进行较完整的介绍，同时有丰富的实验教程和实验数据。你可以根据这些教程来快速实验，根据实验数据要求组织自己的数据，训练自己的模型。

除非模型效果很好、文档齐全、代码质量高，否则，尽量避免看到新论文就去做实验，因为实践证明这些实验对前端智能化应用人工智能的意义不大。环境配置、收集数据、处理数据、训练模型这个过程需要耗费大量时间和精力，然而在实际业务中应用的机会很小，核心原因是这些开源项目更多是为论文服务，从实验目的出发并非为了产品和业务，这是技术到产品的鸿沟。如果新论文涉及的方法有价值，同时是一些名校名师、名企名家的新论文，才值得去做实验。

重要的事情说三遍：准确定义问题、准确定义问题、准确定义问题！

只有准确的定义问题才能探求数据和模型是否足以支撑实现我们的目标。实践中需要反复检查：定义的问题是否符合未来应用场景的客观情况？数据是否能够充分、高质量描述定义的问题？模型是否足够成熟？

4. Imgcook.taobao.org 的实践

4.1 问题

一般软件工程会从应用到平台再到生态不断发展，整体的协作范围和复杂度都有大幅度增加，借助机器学习带来的前端智能化能力，就可以降低协作成本。举例来说，之前设计稿生成代码需要给设计师提供大量的规范和要求，而设计师对这些要求有个人解读，设计师的设计习惯也千差万别，最终造成大量 Bad Case 让规范失效。机器学习借助计算机视觉对设计稿进行识别，无法直接用阈值和规范测量计算的一些视觉内容，可以借助机器学习进行识别从而辅助规则提升兼容性。对于设计师来说，无需记住冗长的规范，怎么顺手怎么设计极少约束，降低了设计师和前端工程师的协作成本。

4.2 目标

目标很简单：用机器学习和插件辅助给设计师和前端工程师提供统一的协作界面，自动完成设计稿到代码的过程。除了能够用设计稿直接生成代码的方式减少 UI 开发工作量，未来可以对数据绑定、简单交互逻辑也通过语义化分析和自然语言理解的机器学习能力进行支撑。

4.3 架构

4.4 数据收集和处理

借助语义化分割对 UI 图像进行处理，得到轮廓、结构、上下文等特征。

借助超级像素的方法来降低特征的数量，合并像素达到降低干扰因素的效果。

采用 OpenCV 进行测量、计算，然后用规则尝试提取有用的特征数据，结果并不理想，可以看到，图上半部分已经被我用阈值过滤掉商品留下文本，但同时文本也有缺失，例如"买买买模式已开启"识别后只有"买模式已开启"被准确识别。同时，图下半部分效果更差，商品实体并没有被剔除掉。所以，阈值在进行特征提取的时候会遇到大量的问题，因此，还是要回到用机器学习的模型来进行识别，总结归纳 UI 元素的特征。

OpenCV 更加擅长测量和计算，因此，未来将采用模型识别加 OpenCV 测量计算的方式，对 UI 元素进行识别的同时，还能够测量出诸如：面积、边距、行高……等信息。

4.5 实际效果

可以看到，实际效果还是不错的，我们已经能够准确识别出各种 UI 控件。由于 UI 元素的尺寸和传统现实世界物体识别的尺寸有较大差异，规律也不尽相同，因此，在使用 Yolo V3 模型的时候，Anchors 的设置上需要重新进行聚类分析。

4.6 沉淀

利用在前端智能化和 Imgcook 项目中积累的经验和代码沉淀一套让前端同学可以快速上手 ML 的混合技术框架，涵盖从数据获取、数据处理、模型训练、模型服务化、数据反馈到工程化的方方面面，已经初步完成了在 Icon、Font 识别过程中积累的部分工程链路、数据结构化标准、部分标注数据，后续会以：文档+框架源码+工具服务+数据开源的方式对外提供。

5. 畅想未来

是否只能做页面重构？显然不是，就如文初所说，前端智能化会改变工作的方方面面。

这里举一个简单的例子，分析一下网页加载性能优化。以前 Yahoo 前端还是很牛的，除了家喻户晓的 YUI，网页优化的三十五条军规更是各大公司网页发布的门槛。其实，这里的网页加载性能优化并不复杂，主要从 HTTP 协议特点出发总结了降低文件大小、合并来减少请求数量、CDN 加速情况……等经验。

从图中可以看到，Google 从 Yahoo 网页优化规则上发展而来的 Page Speed 功能非常强大，基本覆盖了网页加载性能的方方面面。这里列举的优化方法共同构成了网页加载性能优化的思想，下面引入智能视角和学习视角重新审视。

智能视角的观察路径是：效用、思想、要素分解，这里的例子中效用是：降低网页加载时间。降低网页加载时间的思想是：提升传输速度、减少传输量。这三个思想对应的要素不同，下面分别进行分析。

5.1 提升传输速度

提升传输速度主要用减少连接数量的方法，减少连接数量可以提升网页加载性能源于 HTTP 协议的特点，HTTP 协议基于 TCP/IP 协议存在三次握手，建立连接的时间比较长，在 Google 推动下 HTTPS 的普及下，证书传输和加解密又会耗费很多时间，因此，减少连接数量可以降低这些时间消耗。但是，同时要理解单位连接传输速度比较慢，总体加载性能依旧会降低，这也是多线程下载优化加载性能的原理。因为加载内容可以预先确定，所以，针对加载内容特点设计连接数量可以优化性能。例如文件比较大，平均传输速度比较小，可以考虑分多个连接并发加载。

平均传输速度是一个粗糙的统计值，预先根据这个粗糙的统计值设计连接数量，势必在平均情况下表现尚可在波动情况下表现就差强人意了。之前在做印度的业务，印度因为基础建设比较差网络拥堵情况严重、信号不稳定等，网络经常出现波动，这时最优的方案应该是根据网络波动情况动态调整连接数量。动态调整可以一定程度解决这个问题，但是每次检测网速也有加载性能损耗，还可能因印度大量低端手机运算能力不足造成卡顿、崩溃等问题。

假设有一个简单的 AI 模型可以根据用户使用网络的习惯、网络情况和地理位置等信息，再结合不同长度文件和不同加载市场下加载性能的数据，推测用户加载网页时的网速情况，就可以由模型评估出一个最合适的连接数量管理策略。

5.2 减少传输量

降低网页加载时间另一个重要方法就是减少传输量。这个比较直观，传输的数据量小加载性能自然好，但是传输数量往往不是我们想减小就能减小的，需要分两面看：压缩和排序。对于必须要加载的内容，减小传输数据量的主要办法是压缩，文本 Gzip、图片 WebP 等方法直接压缩文件内容来减小传输量。对于可延迟加载的内容进行延迟，避免对必要内容加载产生线程或网络资源竞争。

如果上述传统优化传输量方法还不能满足你的需求，那么 DCGAN 模型可能是一个选择。DCGAN 模型可以通过神经网络预测图片缺失的部分，如果只传输部分数据剩下的由模型补全，将极大减少传输数据量。其实，这个思路也是传统编程思想里用时间换空间的思路，因为 DCGAN 模型预测需要运算时间的。

总结

从量和质两个方面看，人都存在巨大的局限性。

从量的角度看，任何人能够掌握的知识量因为其学习速度和寿命存在巨大瓶颈。从质的角度看，任何人对知识的理解质量因为其学习能力和学习环境存在巨大差异。训练字体识别模型的时候，大概 1400ms 的时间借助 CUDA 显卡加速可以学习 28 张图片，每张图片有 98x98x16 共计 448 维信息，整个网络有 110 万个特征，这种学习量和学习速度是人无法企及的。

从质的角度看，如果有高质量的样本数据，神经网络的学习能力拥有稳定的学习质量，不会像人一样受环境、情绪等因素影响。最重要的是机器插上电运行起来就可以 7x24 小时不间断的进行高质量学习，而人不仅无法保证学习质量的一致性，也不能像机器一样连轴转。

因此，智能化能突破人学习上的局限性。未来，在前端技术领域中，因为智能化加持，新手和大牛之间可能只差一个优质的机器学习模型和一些高质量学习样本。

QCon 全球软件开发大会（北京站）2019 已经圆满结束，QCon 上海 2019 即将起航，点击此处了解详情。