作为阿里经济体前端委员会四大技术方向之一，前端智能化项目经历了 2019 双十一的阶段性考验，交出了不错的答卷，天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成。在此期间研发小组经历了许多困难与思考，本次《前端代码是怎样智能生成的》系列分享，将与大家分享前端智能化项目中技术与思考的点点滴滴。

概述

在前端智能化领域，特别是中后台智能方向上，表单表格的识别是非常重要的一环。因为表单表格的开发工作，占据了中后台前端开发工作量中的绝大部分，如果能够通过智能的手段，从设计稿图片秒级生成表单表格代码，那么将会是巨大的生产力提升。本文将会揭秘秒级生成表单表格代码的技术细节。

所在分层

表单/表格识别使用了组件识别、布局算法、物料属性识别等技术，在这些技术中，核心技术是物料属性识别，在整体分层中的物料识别层中，如图所示。

（D2C识别能力技术分层）

秒级生成表单/表格代码效果展示

只需要截图粘贴，并点击识别，就可以秒级生成表单、表格等通用前端组件协议，甚至连字段都翻译好了，还是小驼峰命名法哦！

表单识别效果图

表格识别效果图

表单/表格识别技术揭秘

表单识别的主要思路是：

1.通过目标检测技术检测出所有的组件类型及其坐标。
2.通过文字识别技术和自动翻译技术识别出所有文字及其坐标并翻译为英文。
3.通过代码转换器从上述组件信息和文字信息中提取表单/表格的布局、label、type、字段等各种属性。

目标检测+文字识别

目标检测使用的fasterrcnninceptionv2模型训练和预测的，具体细节参考本系列文章中的组件识别篇。文字识别使用的通用的文字识别技术，可以检测出文字内容和坐标，具体细节也不再赘述。

图中红框为目标检测信息，绿框为文字识别信息

代码转换器

本文将重点介绍，如何使用代码转换器提取表单 / 表格的各种属性。

绝对坐标转行列

首先，为了方便处理信息，我们先把目标检测信息和文字识别信息的绝对坐标转为行列，行列的具体数据结构是个二维数组，第一维是列，第二维是行。具体算法思路如下：

• 将所有识别出的带有绝对坐标的框垂直排序。
• 遍历垂直排序后的框，将同一行的框放到一个数组中并水平排序，作为一行。
• 将所有行按先后顺序放到一个数组中，最终生成行列二维数组。

计算表单 / 表格布局

通过上述行列信息，我们可以计算出表单 / 表格的布局信息了。

先看表单，表单项的布局是二维的，与上述组件识别的行列信息一致，所以直接将组件识别行列信息通过嵌套循环 map 为表单协议即可。而表格则是一维的，只要表头就可以确定表格的结构了，那么我们直接从文字识别行列信息中提取第一行作为表头即可。

计算表单 / 表格字段值

计算完了布局，我们来算具体的字段值及其类型。

先看表单，表单字段的值就是 label 翻译为英文，并转为小驼峰。那么如何提取label 呢？根据常识我们知道表单项的 label 要么在左边，要么在上边，所以我们的算法就是：先提取左边的 label，没有的话，就提取上面的 label。

再看表格，表格字段就是表头，我们从文字识别行列信息中提取第一行即可拿到表头的所有值。为了保险起见，可以 doublecheck 一下，第一行是不是表头，比如通过长度来过滤，长度小于3的行就过滤掉了。

计算表单 / 表格的字段类型

由于表单项有 input、select、redio 等类型，表格有纯文本、链接等类型，所以我们还需要计算这些字段类型。

先看表单，表单字段类型从目标检测信息中拿，因为目标检测的任务之一就是为了提取表单项的类型。

再看表格，表格字段类型同样也是从目标检测信息中拿，不过由于表格每一列的类型都是相同的，所以我们只需要提取每一列的第一个类型即可。

计算表单 / 表格其他属性信息

上述信息基本上已经可以帮我们节约大量工作量了，但是如果还想提取更多的属性信息，可以使用如下办法：

• 递归识别：比如，识别出一个 input 之后，将其剪裁出来，递归到另一个模型中识别，比如可以识别是否是 disabled，是否必选等等。
• 继续提取其他位置的文字信息：比如表单项中间的可能是 placeholder 或者defaultValue。

未来展望

逍遥子在今年的云栖大会说过，大数据和算力是数字经济时代的石油和发动机。当前在前端行业，组件化已经初具规模，海量的组件可以作为大数据，同时，业界算力也在不断提升，人工智能技术有很大可能性会改变前端开发的格局，让我们拭目以待。