专业测试工程师-打造最专业的测试人
机器学习技术在设计稿生成代码领域的实践和展望
机器学习技术在设计稿生成代码范畴的理论和瞻望
淘宝天猫业务产品很多，每年还会有很多大促活动，产品页面心智不同招致 UI 视觉多样、业务性质不同招致业务逻辑不同，大量的 UI 难以复用，需求投入大量的前端人力来开发，前端同窗的业务压力十分大。为理解决这种窘境，我们研发了自动生成代码平台 imgcook，协助提升前端研发效率。
在 imgcook 中我们逐渐引入了 CV、NLP 等 AI 技术来辅助辨认设计稿信息智能生成可读性和可维护性较高的代码，并在双 11 大促中自动生成了 79.34% 的前端代码，助力前端研发效率提升 68%。智能生成代码平台 imgcook.com 在 2019 年曾经正式对外开放，效劳于 25000+ 用户。
本次分享将为大家引见设计稿生成代码平台 imgcook 的中心思想以及AI技术在 imgcook 中的应用场景和落地理论。
分享的内容主要是我们用机器学习技术能够处理哪些设计稿生成代码的问题，以及怎样用机器学习技术来处理这些问题。希冀能站在前端的视角下，讲分明用机器学习处理代码生成问题的整个理论过程。
设计稿生成代码平台 imgcook 引见
imgcook 是一个设计稿智能生成代码平台，能够将 Sketch、PSD、Figma、图片等类型的设计稿一键生成可维护的前端代码，例如 React、Vue、小程序等。
imgcook 到目前为止曾经阅历了3个阶段，在 2019 年 1 月我们正式对外开放了 imgcook 1.0 版本，后来经过 1 年多的开展，也就是 2.0 阶段，逐渐引入了计算机视觉、机器学习技术来协助我们处理设计稿生成代码中遇到的一些的问题，产品链路也曾经根本完善。到了 3.0 阶段机器学习技术在 imgcook 中曾经落地应用于多个场景了。
那 imgcook 是怎样生成代码的呢？
我们能够从设计稿文件中提取到描绘这个设计稿文件的 JSON Schema，假如大家手上有 Sketch 文件的话，能够用 unzip 命令解压这个 Sketch 文件，就能看到这个JSON Schema。
拿到这个 JSON Schema 之后呢，我们能够运用设计稿协议、程序算法和模型算法来计算、剖析和辨认，将这个JSON Schema 转换成一个具有合理的嵌套规划构造和代码语义的 D2C JSON Schema。
假如大家用过 imgcook 的话，能够在 imgcook 编辑器中看到这个 D2C schema，然后我们再经过各种不同的DSL 转换函数将 D2C Schema 转换成不同类型前端代码，比方 React、Vue 等等
这是 imgcook 生成代码的一个大致流程，其中程序算法是指经过有限的规则计算来自动的辨认设计稿，例如我们能够依据每个图层的坐标、宽高等信息来计算出它是不是一个循环构造，能够依据字体的大小和字数来判别这个文本是个标题还是提示信息。
但是这种判别的规则是有限的，没方法去处理千千万万的设计稿中的问题，而经过机器学习模型来智能辨认可以处理一局部程序算法无法掩盖的问题，关于程序算法和模型算法目前都还不能处理的问题，我们也提供了人工标志设计稿图层的方式来处理。
机器学习技术在 D2C 范畴的应用场景
那用机器学习模型来辨认设计稿能处理哪些问题呢？在引见机器学习能处理哪些代码生成的问题之前，我们先理解下机器学习能做什么，它能处理哪些类型的问题。
机器学习处理的问题类型
我们今天赋享的主题是 AI 在 imgcook 中的应用理论，AI 就是人工智能的缩写，人工智能能够为机器提供顺应才能和推理才能，让机器替代人来考虑和工作，能够协助我们降低人力本钱。
而机器学习是完成人工智能的一种技术，能够给机器学习的算法输入大量的样本，算法学习到这些样本特征之后，能够去预测类似样本有什么特征。
机器学习的过程与人类学习的过程是很类似的，经过学习总结得到学问和经历，当有相似的任务时能够依据已有的经历做出决议或行动。
有一点区别是人类的大脑只需求十分少的一些材料就能够归结总结出适用性十分强的学问或者经历，例如我们只需见过几只猫或几只狗就能正确的分辨出猫和狗，但关于机器来说它需求大量的学习材料。
深度学习是机器学习的分支，深度学习与传统机器学习算法的主要不同在于对特征处置的方式。这里就不细讲了。在 imgcook 中用到的多数是深度学习算法，也有传统的机器学习算法，后面我们在讲的时分就统一叫机器学习算法了。
链接：pan.baidu.com/s/1DnMBu9oy… 提取码：pbxy --来自百度网盘超级会员V4的分享
