前端代码是怎样智能生成的.pdf

关注imgcook官网 扫码加入imgcook 钉钉答疑群 体验一键智能生成代码 关注imgcook掘金专栏 关注imgcook知乎专栏 imgcook 设计稿智能生成代码 为你带来前端智能化前沿资讯 关注 Alibaba F2E 访问开发者社区 了解阿里巴巴前端新动态 扫码领取更多免费电子书序言篇 4智能插件篇 20图像分离篇 30组件识别篇 51表单表格专项识别篇 59业务模块识别篇 65布局算法篇 78语义化篇 91字段绑定篇 102业务逻辑智能生成篇 118目录序言篇作为今年阿里经济体前端委员会的四大技术方向之一，前端智能化方向一被提及，就不免有人好奇：前端结合 AI 能做些什么，怎么做，未来会不会对前端产生很大的冲击等等。本篇文章将围绕这些问题，以设计稿自动生成代码场景为例，从背景分析、竞品分析、问题拆解、技术方案等几个角度切入，细述相关思考及过程实践。背景分析业界机器学习之势如火如荼，AI 是未来的共识频频出现在各大媒体上。李开复老师也在AI未来指出，将近 50的人类工作将在 15 年内被人工智能所取代，尤其是简单的、重复性的工作。并且，白领比蓝领的工作更容易被取代；因为蓝领的工作可能还需要机器人和软硬件相关技术都突破才能被取代，而白领工作一般只需要软件技术突破就可以被取代。那我们前端这个“白领”工作会不会被取代，什么时候能被取代多少？回看 2010 年，软件几乎吞噬了所有行业，带来近几年软件行业的繁荣；而到了 2019 年，软件开发行业本身却又在被 AI 所吞噬。你看：DBA 领域出现了Question-to-SQL，针对某个领域只要问问题就可以生成 SQL 语句；基于机器学习的源码分析工具 TabNine 可以辅助代码生成；设计师行业也出了 P5Banner 智能设计师“鹿班”，测试领域的智能化结合也精彩纷呈。那前端领域呢？那就不得不提一序言篇序言篇基于上述竞品分析，我们能够得到以下几点启发：1.深度学习目前在图片方面的目标检测能力适合较大颗粒度的可复用的物料识别（模块识别、基础组件识别、业务组件识别）。2.完整的直接由图片生成代码的端到端模型复杂度高，生成的代码可用度不高，要达到所生成代码工业级可用，需要更细的分层拆解和多级子网络模型协同，短期可通过设计稿生成代码来做 D2C 体系建设。3.当模型的识别能力无法达到预期准确度时，可以借助设计稿人工的打底规则协议；一方面人工规则协议可以帮助用户强干预得到想要的结果，另一方面这些人工规则协议其实也是高质量的样本标注，可以当成训练样本优化模型识别准确度。问题分解设计稿生成代码的目标是让 AI 助力前端这个职能角色提效升级，杜绝简单重复性工作内容。那我们先来分析下，“常规”前端尤其是面向 C 端业务的同学，一般的工作流程日常工作内容大致如下：“常规”前端一般的开发工作量，主要集中在视图代码、逻辑代码和数据联调（甚至是数据接口开发，研发 Serveless 产品化时可期）这几大块，接下来，我们逐块拆解分析。视图代码视图代码研发，一般是根据视觉稿编写 HTML 和 CSS 代码。如何提效，当面序言篇序言篇 合理布局嵌套：包括绝对定位转相对定位、冗余节点删除、合理分组、循环判断等方面；元素自适应：元素本身扩展性、元素间对齐关系、元素最大宽高容错性；语义化：Classname 的多级语义化；样式 CSS 表达：背景色、圆角、线条等能用 CV 等方式分析提取样式，尽可能用 CSS 表达样式代替使用图片；将这些问题拆解后，分门别类专项解决，解决起来看似没完没了，但好在目前发现的大类问题基本解决。很多人质疑道，这部分的能力的实现看起来和智能化一点关系都没有，顶多算个布局算法相关的专家规则系统。没错，现阶段这部分比较适合规则系统，对用户而言布局算法需要接近 100%的可用度，另外这里涉及的大部分是无数属性值组合问题，当前用规则更可控。如果非要使用模型，那这个可被定义为多分类问题。同时，任何深度学习模型的应用都是需要先有清晰的问题定义过程，把问题规则定义清楚本就是必备过程。但在规则解决起来麻烦的情况下，可以使用模型来辅助解决。比如合理分组（如下图）和循环项的判断，实践中我们发现，在各种情况下还是误判不断，算法规则难以枚举，这里需要跨元素间的上下文语义识别，这也是接下来正在用模型解决的重点问题。(合理分组示意)序言篇序言篇关于业务逻辑代码，首先想到的是对历史源代码的函数块利用 LSTM（Long-Short-TermMemory,长短期记忆网络）和 NLP 等进行上下文分析，能得到代码函数块的语义，VSCode 智能代码提醒和 TabNine 都是类似的思路。另外，在分析问题中（如下图）我们还发现，智能化在业务逻辑领域还可以协助识别逻辑点在视图出现的位置（时机），并根据视图猜测出的逻辑语义。综上，我们总结一下智能化现阶段的可助力点：由历史源代码分析猜测高频出现的函数块（逻辑块）的语义，实际得到的就是组件库或者基础函数块的语义，可在代码编辑时做代码块推荐等能力。由视觉稿猜测部分可复用的逻辑点，如这里的字段绑定逻辑，可根据这里文本语义 NLP 猜测所属字段，部分图片元素根据有限范围内的图片分类，猜测所属对应的图片字段（如下图示例中的，氛围修饰图片还是 Logo 图片）；同时还可以识别可复用的业务逻辑组件，比如这里的领取优惠券逻辑。所以，现阶段在业务逻辑生成中，可以解决的问题比较有限，尤其是新的业务逻辑点以新的逻辑编排出现时，这些参考依据都在 PD 的 PRD 或脑海中。所以针对业务逻辑的生成方案，现阶段的策略主要如下：字段绑定：智能识别设计稿中的文本和图片语义分类，特别是文字部分。可复用的业务逻辑点：根据视图智能识别，并由视图驱动自由组装，含小而美的逻辑点（一行表达式、或一般不足以封装成组件的数行代码）、基础组件、业序言篇序言篇能识别不准，就可视化人工干预补充纠正，一方面是为了可视化低成本干预生成高可用代码，另一方面这些干预后的数据就是标注样本，反哺提升智能识别的准确率。表达能力：主要做数据输出以及对工程部分接入 通过 DSL 适配将标准的结构化描述做 Schema2Code 通过 IDE 插件能力做工程接入 算法工程：为了更好的支撑 D2C 需要的智能化能力，将高频能力服务化，主要包含数据生成处理、模型服务部分 样本生成：主要处理各渠道来源样本数据并生成样本 模型服务：主要提供模型 API 封装服务以及数据回流（前端智能化 D2C 能力概要分层）在整个方案里，我们用同一套数据协议规范（D2CSchema）来连接各层的能力，确保其中的识别能够映射到具体对应的字段上，在表达阶段也能正确地通过出码引擎等方案生成代码。智能识别技术分层在整个 D2C 项目中，最核心的是上述识别能力部分的机器智能识别部分，这层的具体再分解如下，后续系列文章会围绕这些细分的分层展开内部实现原理。序言篇序言篇技术痛点当然，这其中的识别不全面、识别准确度不高一直是 D2C 老生常谈的话题，也是我们的核心技术痛点。我们尝试从这几个角度来分析引起这个问题的因素：1.识别问题定义不准确：问题定义不准确是影响模型识别不准的首要因素，很多人认为样本和模型是主要因素，但在这之前，可能一开始的对问题的定义就出现了问题，我们需要判断我们的识别诉求模型是否合适做，如果合适那该怎么定义清楚这里面的规则等。2.高质量的数据集样本缺乏：我们在识别层的各个机器智能识别能力需要依赖不同的样本，那我们的样本能覆盖多少前端开发场景，各个场景的样本数据质量怎么样，数据标准是否统一，特征工程处理是否统一，样本是否存在二义性，互通性如何，这是我们当下所面临的问题。3.模型召回低、存在误判：我们往往会在样本里堆积许多不同场景下不同种类的样本作为训练，期望通过一个模型来解决所有的识别问题，但这却往往会让模型的部分分类召回率低，对于一些有二义性的分类也会存在误判。问题定义深度学习里的计算机视觉类模型目前比较适合解决的是分类问题和目标检测问题，我们判断一个识别问题是否该使用深度模型的前提是我们自己是否能够判断和理解，这类问题是否有二义性等，如果人也无法准确地判断，那么这个识别问题可能就不太合适。假如判断适合用深度学习的分类来做，那就需要继续定义清楚所有的分类，这些分类之间需要严谨、有排他性、可完整枚举。比如在做图片的语义化这个命题的时候，一般图片的 ClassName 通用常规命名有哪些，举个例子，其分析过程如下：序言篇序言篇（数据样本工程体系）模型针对模型的召回和误判问题，我们尝试收敛场景来提高准确度。往往不同场景下的样本会存在一些特征上的相似点或者影响部分分类局部关键特征点，导致产生误判、召回低，我们期望能够通过收敛场景来做模式化的识别，提高模型准确度。我们把场景收敛到如下三个场景：无线 C 端营销频道场景、小程序场景以及 PC 中后台场景。这里面几个场景的设计模式都有自己的特色，针对各个场景来设计垂直的识别模型可以高效地提高单一场景的识别准确度。（D2C 场景）序言篇 规则策略 机器学习 深度模型。举个例子比如需要识别设计稿里的一个循环体：初期，我们可以在设计稿里手动约定循环体的协议来达成 根据图层的上下文信息可做一些规则的判断，来判断是否是循环体 利用机器学习的图层特征，可尝试做规则策略的更上游的策略优化 生成循环体的一些正负样本来通过深度模型进行学习其中手动约定的设计稿协议解析优先级最高，这样也能确保后续的流程不受阻塞和错误识别的干扰。业务落地2019 双十一落地在今年的双十一场景中，我们的 D2C 覆盖了天猫淘宝会场的新增模块，包括主会场、行业会场、营销玩法会场、榜单会场等，包含了视图代码和部分逻辑代码的自动生成，在可统计范围内，D2C 代码生成占据了 79.34%。目前代码的人工改动的主要原因有：全新业务逻辑、动画、字段绑定猜测错误（字段标准化情况不佳）、循环猜测错误、样式自适应修改等，这些问题也都是接下来需要逐步完善的。18序言篇（D2C 代码生成用户更改情况）整体落地情况我们对外的产品 imgcook，截止 2019.11.09 日，相关的使用数据情况如下：模块数 12681 个，周新增 540 个左右；用户数 4315 个，周新增 150 个左右；自定义 DSL：总数 109 个；目前可提供的服务能力如下：设计稿全链路还原：通过 Sketch、PhotoShop 插件一键导出设计稿图层，生成自定义的 DSL 代码。图像链路还原：支持用户自定义上传图片、文件或填写图片链接，直接还原生成自定义的 DSL 代码。后续规划 继续降低设计稿要求，争取设计稿 0 协议，其中分组、循环的智能识别准确度提升，减少视觉稿协议的人工干预成本。组件识别准确度提升，目前只有 72%的准确度，业务应用可用率低。序言篇19 页面级和项目级还原能力可用率提升，依赖页面分割能力的准确度提升。小程序、中后台等领域的页面级还原能力提升，含复杂表单、表格、图表的整体还原能力。静态图片生成代码链路可用度提升，真正可用于生产环境。算法工程产品完善，样本生成渠道更多元，样本集更丰富。D2C 能力开源。未来我们希望能通过前端智能化 D2C 项目，让前端智能化技术方案普惠化，沉淀更具竞争力的样本和模型，提供准确度更高、可用度更高的代码智能生成服务；切实提高前端研发效率，减少简单的重复性工作，不加班少加班，一起专注更有挑战性的工作内容！智能插件篇作为阿里经济体前端委员会四大技术方向之一，前端智能化项目经历了 2019 双十一的阶段性考验，交出了不错的答卷，天猫淘宝双十一会场新增模块 79.34%的线上代码由前端智能化项目自动生成。在此期间研发小组经历了许多困难与思考，本次前端代码是怎样智能生成的系列分享，将与大家分享前端智能化项目中技术与思考的点点滴滴。概述在一个常见的开发周期中往往遵循着产品需求到交互稿到设计稿再到前端开发的过程。所以在 Design2Code（简称 D2C）项目过程中，设计师负责来设计产品视觉效果和产出视觉设计稿，而前端开发工程师以设计稿为输入进行开发。所以同样地，在前端智能化的过程中，我们需要一种能自动解析设计稿信息的能力来替代传统的人工分析和抠图等繁琐的工作。同时，随着近几年主流设计工具（Sketch、PS、XD 等）的三方插件开发能力逐渐成熟，借助官方提供的 API 能够比较好得还原一些基本的结构化信息和样式信息，从而完成对设计稿原始信息的提取。在此篇文章中，我们将以前端智能化的落地产品 imgcook 的 Sketch 插件为例子，详细介绍我们是如何通过插件对设计稿做处理，最终导出以绝对布局为基础的元素信息，供下游布局算法使用。所在分层如图所示，链路中的第一层为物料识别层，设计稿将作为这一层的输入。这一层主要是用来识别页面和模块中包含的物料的，比如对基础组件，业务组件和基础控件的识别，从而辅助进行页面分割并对下游输入关于某一元素的相关信息。随后，设计稿的原始信息(文件)将会进入到图像处理层，这一层主要是通过这篇文章所介绍智能插件篇智能插件篇技术选型如图所示，在对接原始设计稿和获取原始设计稿信息的过程中，我们主要是使用了 Sketch 官方提供的 JSAPI 进行开发，对于一些官方没有包装 JS 接口的功能，我们借助于 CocoaScript 对原始 Objective-C 接口进行调用。同时，我们使用了Webview 技术可以使用前端技术栈来渲染插件界面。我们采用 SkpmSketch 的插件管理工具的脚手架能力和插件发布能力。(插件技术选型示意图)智能插件篇智能插件篇息。下面我们挑取这个过程中两个值得注意的难点进行分别讲解。蒙层处理在 Sketch 里蒙层的作用是相当于一个底板，所有在结构上位于其之上的图层如果区域超出了蒙层，这部分超出的区域就会被截断。对于蒙层的处理主要有以下几个不同于正常图层的点：由于在 HTML 和 CSS 领域并没有直接对应的概念，蒙层并不能直接导出相关CSS 属性或者 HTML 属性 Mask 图层不但会影响自己本身的处理，也会影响其他图层的视觉，所以遇到Mask 需要多图层一起处理 由于 Mask 的形状可能是不规则形状，所以需要考虑如何判断合理的区域进行截断针对以上难点和精准还原视觉的目的，我们开发了一套算法计算 Mask 和其影响的所有图层的区域计算和形状计算，针对区域规则且形状规则的做 CSS 属性上的常规截取处理，对于无法使用 CSS 属性表示的情况对 Sketch 视觉可见的区域进行截图处理。其中，我们会进行无用图层检测，如果一个图层在它的 Mask 区域之外，则此图层将被视为无用图层被删除，同时，如果一个图层完全在它的 Mask 区域内，则此图层不会被 Mask 影响，按照原有逻辑处理。智能文字位置校准相对于其他诸如 Shape 和 Image 图层的处理，文字图层会更复杂一点，原因主要有：对于 Shape 和 Image 的每一个图层，我们往往也只需要对应导出一个节点，这个节点包括位置和样式等属性，但是对于文字图层，如果包含多样式，比如颜色，字号，行高等不同，则需要将一个文字图层拆分为多个节点导出智能插件篇智能插件篇个组下是否有若干个应该被合并的图层，然后自动在导出的过程中合并，以便后续链路可以处理结构。无用图层检测在设计稿中，设计师有时会添加一些对最终布局和视觉没有影响的图层，为了结构的合理性和精简性，我们需要对这部分图层进行筛除。如下的情况下图层会被处理：如果有两个 Image 图层视觉是一样的但是引用的 url 不同，则统一到相同的 url 如果图层没有 backgroundImage,backgroundColor 和 borderWidth 属性，则图层没有视觉效果，直接过滤掉 如果有无某图层没有对图像矩阵产生影响，则过滤掉此图层 如果图层被非透明图层覆盖，则过滤掉此图层 如果有透明区域小于某个阈值的图片，则过滤掉此图层插件测试和度量单元测试体系由于 Sketch 插件是 imgcook 智能生成代码体系的上游，在每一次代码更改和发布之前，需要对插件做严格的测试以确保功能可用，所以我们使用 Skpm-Test，一个 Skpm 体系下的类 Jest 测试框架建立了单元测试体系，覆盖率达到 95%左右。绝对定位布局查看如之前讲到的，Sketch 插件导出的信息是包含每个子节点的绝对定位的位置和相关的 CSS 属性，每个节点的属性和类型和 HTML 一一映射，所以我们可以将导出JSON 直接转化为 HTML+CSS 查看导出效果，使用者可以直接通过 https:/ 粘贴导出的 JSON 查看效果。智能插件篇智能插件篇 exportPosition:导出图层此元素的位置 similarity:导出图层和原始设计稿相似度 width:原始宽度 height:原始高度可以看出，我们通过计算机视觉已经分析出了每个图层的原始位置和还原后的位置，同时度量了每个图层的相似度，综合的度量分数应该综合考虑以下三个指标：总图层数量 还原图层相似度 还原图层的位置从这三个指标出发，我们设计如下公式计算还原度:Pc=+1(1)()21nxyi=n1ixyii其中 P 表示 restore 分数，n 表示图层的总数量，ci表示第 i 个还原图层和第 i个原始图层的相似度，xi表示第 i 个还原图层和原始图层 x 方向位移差，x 表示总宽度，yi表示第 i 个还原图层和原始图层 y 方向位移差，y 表示总高度。使用此公式，如果全部图层都完全没有被还原(相似度为 0，x 位移为宽度，y 位移为高度)，则 P=0，如果全部图层都完美还原(相似度为 1，x 位移为 0，y 位移为 0)，则 P=1，所以我们可以较为精准的度量视觉还原程度。未来展望去规范继续升级目前我们出了一些设计协议要求设计师按照一定的规范来制作设计稿，以便可以达到更好的还原效果；对设计稿的约束曾经高达 20+条，我们通过智能图层加工层去掉了大部分规范，目前主要剩下 3 条约规范束，接下来，我们将进一步通过智能化的手段逐步的去掉这些对设计师和前端的约束，达到 0 约束还原。智能插件篇29还原能力升级我们将在未来的 Sketch 版本中继续提高 Sketch 插件的视觉还原度，目前阶段根据度量体系 Sketch 还原的能力平均在 95%左右，我们将在之后的版本中继续提高这个能力。还原效率升级目前由于在插件中设计到大量的极速过程，导致导出速度有的时候不尽理想，我们也对这个问题进行了一定的调研，发现目前插件的确是在处理多图层，尤其是包含多张图片上传的场景速度比较慢，未来我们也会对还原速度进行一次大幅度的升级。在科技飞速发展的今天，前端智能化的浪潮已经到来，未来一些简单的、重复性、规律性强的开发一定会逐渐地被机器取代，在这样的过程中，机器对设计稿的理解也一定会更上一个台阶。我们也会保证插件在未来达到更高的智能化水平，从而准确地理解设计师的意图从而更好的为前端服务！图像分离篇作为阿里经济体前端委员会四大技术方向之一，前端智能化项目经历了 2019 双十一的阶段性考验，交出了不错的答卷，天猫淘宝双十一会场新增模块 79.34%的线上代码由前端智能化项目自动生成。在此期间研发小组经历了许多困难与思考，本次前端代码是怎样智能生成的系列分享，将与大家分享前端智能化项目中技术与思考的点点滴滴。概述一直以来，如何从“视觉稿”精确的还原出对应的 UI 侧代码一直是端侧开发同学工作里消耗比较大的部分，一方面这部分的工作比较确定缺少技术深度，另一方面视觉设计师也需要投入大量的走查时间，有大量无谓的沟通和消耗。很多人会比较好奇，为什么我们尝试使用图片做为输入源，一方面基于 Sketch或者 Photoshop 等插件相对容易拿到确定性的信息，图片在某些方面容易丢失一些特征；另外基于图片的分析其实挑战更大。我们做这个选择有以下原因：1.首先图片作为最终的产出物，更直观和确定性，另外这个链路里对上游不会有约束性。2.视觉稿跟开发代码不一样的地方在于布局的不同，比如 listview，grdview这类布局类别在设计稿中是不存在的3.基于图片的应用场景会更普适，类似场景。例如自动化测试能力的支持，基于竞品直接截图来套用我们自己的数据源找体感，这类场景是其他的方案做不到的。4.设计稿有图层堆叠的问题，从图片出发可以更好地合并图层。图像分离篇图像分离篇版面分析版面分析主要处理 UI 图像的前景提取和背景分析，通过前后景分离算法，将 UI视觉稿剪裁为 GUI 元素:1.背景分析：通过机器视觉算法，分析背景颜色，背景渐变方向，以及背景的连通区域。2.前景分析：通过深度学习算法，对 GUI 碎片进行整理，合并，识别。背景分析背景分析的关键在于找到背景的连通区域和闭合区间，具体的步骤如下：第一步：判断背景区块，通过 sobel，Lapacian，canny 等边缘检测的方法计算出梯度变化方向，从而得到纯色背景和渐变色背景区域。基于拉普拉斯算子的背景区域提取离散拉普拉斯算子的模板如下：此外，我们通过统计背景运动趋势的方式来判定它是否存在渐变色背景。如果存在，我们将通过第二步进行精细化处理。第二步：基于漫水填充算法，选取漫水的种子节点，滤除渐变色背景区域噪声。1deffill_color_diffuse_water_from_img(task_out_dir,image,x,y,thres_23漫水填充：会改变图像45#获取图片的高和宽6h,w=image.shape:278#创建一个 h+2,w+2 的遮罩层，9#这里需要注意，OpenCV 的默认规定，10#遮罩层的 shape 必须是 h+2，w+2 并且必须是单通道 8 位，具体原因我也不是很清楚。11mask=np.zeros(h+2,w+2,np.uint8)1213#这里执行漫水填充，参数代表：14#copyImg：要填充的图片图像分离篇图像分离篇 第三步：通过版面切割，提取 GUI 元素。（背景分析后提取的内容模块）这个时候我们已经成功将图片分层并提取了模块，后续细节可以在前景分析和复杂背景提取中获得。前景分析前景分析的关键在于组件完整性切割与识别。我们通过连通域分析，防止组件碎片化，再通过机器学习识别组件类型，再通过组件类型进行碎片化合并，反复执行上述动作，直到无特征属性碎片。我们通过瀑布流中提取一个完整 item 为例：（标红部分是处理难点）图像分离篇图像分离篇（传统图像处理算法流程）算法流程中 1-3可以归为边缘检测部分。受各种因素影响，图像会出现降质，需要对其进行增强来提高边缘检测的效果。使用全图单一的直方图进行均衡化显然不是最好的选择，因为截取的瀑布流图像不同区域对比度可能差别很大，增强后的图像可能会产生伪影。在单一直方图均衡化的基础上，学者基于分块处理的思想提出了自适应的直方图均衡化算法(AHE)，但是AHE 在增强边缘的同时有时候也会将噪声放大。后来学者在 AHE 的基础上提出了CLAHE，利用一个对比度阈值来去除噪声的干扰，如下图所示直方图，CLAHE 不是将直方图中超过阈值的部分丢弃，而是将其均匀分布于其他 bin 中。（直方图均衡）Canny 算子是一种经典的边缘检测算子，它能得到精确的边缘位置。Canny 检测的一般步骤为：1)用高斯滤波进行降噪 2)用一阶偏导的有限差分计算梯度的幅值和方向 3)对梯度幅值进行非极大值抑制 4)用双阈值检测和连接边缘。实验过程中，需要多次尝试选择较好的双阈值参数。检测出来的边缘在某些局部地方会断开，可以采用特定形状和尺寸的结构元素对图像分离篇图像分离篇闲鱼页面瀑布流卡片轮廓近似于矩形，在四个角由弧形曲线连接。对于提取的候选轮廓使用 Douglas-Peucker 算法进行矩形逼近，保留形状接近矩形的外轮廓。Douglas-Peucker 算法通过将一组点表示的曲线或多边形拟合成另一组更少的点，使得两组点之间的距离满足特定的精度。之后输出第二步候选轮廓。通过对第二步候选轮廓所处位置对应的第一步候选轮廓进行水平和垂直方向投影，去除毛刺影响，输出矩形轮廓。轮廓提取的结果如下图所示，其中 c)中轮廓包含面积设置的阈值为 10000，d)中 Douglas-Peucker 算法设置的精度为 0.01*轮廓长度。本文所有提取的轮廓均包含输入框。（不同方法识别结果）我们再介绍下机器学习如何处理：传统算法中提出采用传统图像处理方法提取轮廓特征，这样会带来一个问题：当图像不清晰或者有遮挡的情况下无法提取出轮廓，即召回率不是很高。基于卷积神经网络的目标检测算法能通过输入大量样本数据，学习到更具有代表性和区别性的特征。目前目标检测算法主要分成两个派系：以 R-CNN 家族为代表的两阶段流和以 YOLO、SSD 为代表的一阶段流。一阶段流直接对预测的目标进行分类和回归，优点是速度快，缺点是 mAP 整体上没有两阶段流高。两阶段流在对预测的目标进行分类和回归前需要先生成候选的目标区域，这样训练时更容易收图像分离篇图像分离篇（目标检测网络基本结构示意）使用 FasterR-CNN 进行瀑布流卡片的识别，得到下图的结果。（目标检测结果）传统算法与机器学习的融合描述的传统图像方法能够获得高定位精度的卡片位置，但受卡片本身模式的影响，召回率不高)中右边卡片没有检测到。基于目标检测的深度学习方法具有较高的图像分离篇图像分离篇召回率(Recall)=TP/(TP+FN):反映了被模型正确预测的正例占总的正样本比重定位精度(IOU)=两个框的交集大小/两个框的并集大小（不同方式得到的检测结果）上图分别显示了不同方法识别的卡片,d)相对于 b)的优势是提高了召回率，d)相对于 c)的优势是提高了定位精度。图一图二图三显示了一些其他实例图像的识别，每行图像是一类实例图，第一列是原始图像，第二列是传统图像处理识别的卡片，第三列是深度学习识别的卡片，第四列是融合的卡片。图一图二能够准确识别卡片轮廓：图像分离篇图像分离篇不同方法结果前景算法小结通过对闲鱼页面瀑布流卡片识别过程中的描述，我们简单介绍了前景处理的探索，通过机器视觉算法和机器学习算法协同完成前景元素的提取和识别。结束语本篇我们通过对前景提取和背景分析的介绍，提出了一种通过传统图像处理和深度学习相融合的方法，来得到高精确率、高召回率和高定位精度的识别结果。但方法本身还存在一些瑕疵，比如融合过程对组件元素进行修正时也会受到图像样式的干扰，后续这部分可以进一步进行优化。复杂背景内容提取复杂背景内容提取指的是从复杂的背景中提取出特定的内容，例如在图片中提取特定的文字，在图片中提取特定的叠加图层等等。这是一个业界难题，基于传统的图像处理的方法存在准确率和召回率的问题，没法解决语义的问题。而主流的机器学习的方法，例如目标检测无法获取像素级别的位置信息，而语义分割的方法则只能提取像素而无法获取半透明叠加前的像素信息。本文考虑到这些痛点，本文采用了目标检测网络来实现内容召回，GAN 网络实现复杂背景中特定前景内容的提取和复原。复杂背景的处理流程分为如下几个步骤：图像分离篇图像分离篇（简单背景位置修正公式）复杂背景：背景是复杂背景时，左图是原图，右图是提取的文字区块：（原图和文字区域）此时提取出的框不是完全正确，那么此时根据梯度等机器视觉算法已经不能对位置做正确的修正了。本文提出了基于 GAN 网络的方式来解决复杂背景内容提取问题，网络的主要结构如下图所示：图像分离篇图像分离篇网络训练流程图：（srGAN 网络训练流程）针对业务场景对 GAN 网络做的改进：1.由于我们不是超分辨率场景，因此不用 pixelShuffler 模块做上采样。2.由于场景比较复杂，可以引入 denseNet 和加深网络来提高准确率。3.内容损失函数对于压制误判的噪点效果不理想，因此加大了误判的惩罚，具体如下图所示：预测获取的结果图 I:图像分离篇图像分离篇（不同算法的识别结果）业务场景落地本篇我们提出的方法已经应用在如下场景：1.imgcook 图片链路中应用，对于通用场景的准确率能达到 73%，特定的卡片场景能达到 92%以上。2.淘宝自动化测试图像内容理解，例如应用在 99 大促和双 11 模块识别中。整体的准确率和召回率都能达到 97%以上。未来展望未来我们打算从图片链路出发，做到如下几点：1.丰富和完善布局信息，能够精确地识别 listview，gridview，waterfull 等布局信息。2.进一步提高通用场景的准确率和召回率。针对小目标，我们后续会引入特征金字塔（fpn），Cascade 等一系列技术来提高我们的准确率和召回率。3.增加适配的特定场景。现有的场景只覆盖了闲鱼和部分淘宝的页面适配，我们希望后续能够支持更多的页面，进一步提高图像的泛化能力。4.引入图片样本制造机，降低特定场景的接入门槛。组件识别篇作为阿里经济体前端委员会四大技术方向之一，前端智能化项目经历了 2019 双十一的阶段性考验，交出了不错的答卷，天猫淘宝双十一会场新增模块 79.34%的线上代码由前端智能化项目自动生成。在此期间研发小组经历了许多困难与思考，本次前端代码是怎样智能生成的系列分享，将与大家分享前端智能化项目中技术与思考的点点滴滴。背景介绍我们在做一些 Deisgn2Code 的时候，一种比较直接的方式是借助设计师使用的设计工具的开发插件来帮我们提取设计稿里的元数据，我们可以快速提取设计稿里的图像、文本、Shape 等原生元素，从而组装生成一个页面。但目前我们的开发体系里还有许多基础组件是不在设计工具体系里，比如表单、表格、开关等组件，虽然像Sketch 这类工具提供了灵活的方式能让设计师设计出相应的 UI 类型，但是同样的UI 所对应 Sketch 里的 DSL 描述并不是我们所期望的。此时，我们往往需要借助其他途径来获取相对准确的描述，通过深度学习不断学习所需要识别的组件是一个比较好的方式。（Sketch 中的设计图层描述）52组件识别篇所在分层本文讲述前端智能化 D2C 里技术分层中的基础组件识别能力层，主要识别图像中可能存在预先定义的一些基础组件，从而辅助下游技术体系中对已识别的图层进行表达优化，比如优化图层嵌套结构从而产出合规的组件树，优化图层语义化的结果等。（D2C 技术能力分层）整体方案参照以往的算法工程方案，我们的整体方案涉及到样本获取、样本评估、模型训练、模型评估以及模型预测一整条流程链路。组件识别篇组件识别篇（基础组件识别样本）在样本生成后，你可能需要对自己的样本集进行一个评估，评估过程中可以适当引入数据校验和类目统计等相关的工程，来评估整体的样本质量：检测标注数据是否存在错误：参考标注区域结合背景色计算方差等方式 统计所有 UI 类型的数据分布情况，每个分类的数量以及数据是否均衡等模型选型在目前众多的目标检测模型中，根据一份最近的 PASCALVOC 数据集的目标检测模型报告，我们选择了一种排名第一的 YOLOOne-Stage 算法作为我们基础组件模型的迁移学习，来快速进行试验。组件识别篇组件识别篇我们在做 Web 里的基础组件的目标检测时，期望卷积网络在相应的单元格中能够学习到其中每一类组件的特征，从而能够识别并区分出不同组件之间的差异，因此在对组件样本的选取上，要保障组件之间的特性差异，避免卷积网络丢失这部分的学习。模型评估在目标检测模型的评估中，我们选择使用均值平均精度 mAP 来进行衡量模型的准确率（基于 COCO 的算法）。可以选择部分测试集数据的模型预测结果，对结果数据跟数据的真实值（GroundTruth）进行比较，从而计算出每个分类的 AP。组件识别篇组件识别篇成 416*416 的尺寸做训练学习，为了在模型预测的时候结合训练数据得到更好的效果，我们可以在预测阶段的前置过程中也可将输入的图像做一定尺寸的适配，经测试适配后的图像预测后的 IoU 比未经适配的图像预测后的 IoU 高出很多（测试集显示有10%+的提升）。图像尺寸适配后，我们训练完的模型会对输入的图像直接做预测，此时会得到一个大致的类别区域框，但往往我们需要一个围绕 UI 组件的更加精确的框，此时我们可以借助 OpenCV 的能力结合图像本身做一个梯度裁边 Refine 以达到一个更精确的效果，如下图是边框 Refine 前后的对比。（模型预测结果优化）总结目前前端智能小组里的基础组件包含 20+种类，后续将继续在样本精细化的分类以及基础组件的属性测量表达上做进一步的投入研发，并将模型的数据样本管理规范化，统一做输出。未来用户可以根据我们面向外部开源的样本集对部分基础组件识别后做特定的表达处理。表单表格专项识别篇作为阿里经济体前端委员会四大技术方向之一，前端智能化项目经历了 2019 双十一的阶段性考验，交出了不错的答卷，天猫淘宝双十一会场新增模块 79.34%的线上代码由前端智能化项目自动生成。在此期间研发小组经历了许多困难与思考，本次前端代码是怎样智能生成的系列分享，将与大家分享前端智能化项目中技术与思考的点点滴滴。概述在前端智能化领域，特别是中后台智能方向上，表单表格的识别是非常重要的一环。因为表单表格的开发工作，占据了中后台前端开发工作量中的绝大部分，如果能够通过智能的手段，从设计稿图片秒级生成表单表格代码，那么将会是巨大的生产力提升。本文将会揭秘秒级生成表单表格代码的技术细节。所在分层表单/表格识别使用了组件识别、布局算法、物料属性识别等技术，在这些技术中，核心技术是物料属性识别，在整体分层中的物料识别层中，如图所示。60表单表格专项识别篇（D2C 识别能力技术分层）秒级生成表单/表格代码效果展示只需要截图粘贴，并点击识别，就可以秒级生成表单、表格等通用前端组件协议，甚至连字段都翻译好了，还是小驼峰命名法哦！表单表格专项识别篇表单表格专项识别篇表单/表格识别技术揭秘表单识别的主要思路是：1.通过目标检测技术检测出所有的组件类型及其坐标。2.通过文字识别技术和自动翻译技术识别出所有文字及其坐标并翻译为英文。3.通过代码转换器从上述组件信息和文字信息中提取表单/表格的布局、label、type、字段等各种属性。目标检测+文字识别目标检测使用的 fasterrcnninceptionv2 模型训练和预测的，具体细节参考本系列文章中的组件识别篇。文字识别使用的通用的文字识别技术，可以检测出文字内容和坐标，具体细节也不再赘述。图中红框为目标检测信息，绿框为文字识别信息代码转换器本文将重点介绍，如何使用代码转换器提取表单/表格的各种属性。绝对坐标转行列首先，为了方便处理信息，我们先把目标检测信息和文字识别信息的绝对坐标转为行列，行列的具体数据结构是个二维数组，第一维是列，第二维是行。具体算法思路如下：表单表格专项识别篇表单表格专项识别篇计算表单/表格其他属性信息上述信息基本上已经可以帮我们节约大量工作量了，但是如果还想提取更多的属性信息，可以使用如下办法：递归识别：比如，识别出一个 input 之后，将其剪裁出来，递归到另一个模型中识别，比如可以识别是否是 disabled，是否必选等等。继续提取其他位置的文字信息：比如表单项中间的可能是 placeholder 或者defaultValue。未来展望逍遥子在今年的云栖大会说过，大数据和算力是数字经济时代的石油和发动机。当前在前端行业，组件化已经初具规模，海量的组件可以作为大数据，同时，业界算力也在不断提升，人工智能技术有很大可能性会改变前端开发的格局，让我们拭目以待。业务模块识别篇作为阿里经济体前端委员会四大技术方向之一，前端智能化项目经历了 2019 双十一的阶段性考验，交出了不错的答卷，天猫淘宝双十一会场新增模块 79.34%的线上代码由前端智能化项目自动生成。在此期间研发小组经历了许多困难与思考，本次前端代码是怎样智能生成的系列分享，将与大家分享前端智能化项目中技术与思考的点点滴滴。概述无线大促页面的前端代码中，存在大量的业务模块或业务组件（下文统称业务模块），即具有一定业务功能的代码单位。获取页面中业务模块的信息之后，可以用于复用代码、绑定业务字段等后续功能。因此从视觉稿识别出业务模块，在前端智能化领域中成为用途广泛的功能环节。与面向中后台的基础组件识别和表单识别功能不同，业务模