【第2175期】我在阿里云做前端智能化（Dumbo）- 介绍

前言

《我在阿里云做智能化》系列文章来了，本期介绍篇。今日前端早读课文章由阿里云@行仁投稿分享。

正文从这开始~~

近些年来【前端智能化】这个话题在前端圈中很火热，同时也存在一些争议

路人A：前端智能化领域比较鸡肋，应用范围有限.....路人B：智能化能力提高开发效率.....路人C：挑战与机会, 未来趋势....

当时也暗暗思考发问，什么是前端智能化呢？人工智能可以自动实现页面，能替代多少前端人员开发工作呢? 持着好奇的态度，对前端智能化能提供的价值有些憧憬。前几年pix2code、Screenshot-to-code这些大火的项目，虽然最后都渐渐淡出大家视线，这些东西终不过是实验室Demo级别的东西，但却给了大家思想的启发。如何结合业务场景的技术落地成为一个突破点。通过进一步技术了解与思考，从阿里集团「imgcook」C端智能化的成功实践中学习经验，在中后台领域上，结合阿里云自身业务场景，前端智能化能降低开发成本，研发提效，从而带来技术与业务价值。

在业务背景和契机下，去年11月起，我们开始打造Dumbo智能研发平台。此平台致力于利用智能化技术，研发提效，进一步提高我们面向云控制台及中后台的产品交付能力。本篇文章先简单介绍一下Dumbo平台的缘起、思考策略、现有平台能力、不足与未来规划。后续系列文章详细介绍我们在云控制台场景下，如何实现前端智能化。

背景

相信大家一定会问这个问题——我们为什么要做前端智能化Dumbo? 在怎样的业务、技术背景下考虑投入部分人力打造这样一个平台呢。首先在业务方面：

1.业务增长：由于部门整合、业务扩张，新增了近一倍的云控制台、中后台管控等B端业务，研发人员如何内部消化，快速支撑起业务？

2.业务特性：我们的业务主要以2B端、中后台为主, 重管控crud、UI编排较统一、研发逻辑相似等等，云控制台产品还有国际化等特性。

3.业务能力: 在业务支撑时, 通过深入了解业务需求，参与产品前端开发，同时也探索如何利用我们的业务产品提供的云服务能力，来赋能我们的技术，同时反哺业务。

Dumbo就是一个使用AI云服务能力，通过用户上传自身业务的图像训练和部署业务所需的定制化AI模型，来提供小飞象智能基座能力。

在技术方面，根据我们团队支撑的业务类型，主要分为两套技术解决方案。

从某种程度上来说其实这两种都可以粗略算做中后台。研发模式基于组件化、场景化、模块化等方案。通过这类研发方案来说，1. 技术成本降低，组件化开发、最佳实践积累等等 2. 视觉沟通成本减少，通过组件化、场景化的设计，统一的视觉标准规范，降低了沟通成本, 从而提高了开发效率。

但这种方式的研发方案的提效也趋于了极致，开发过程中也存在一些组件编排、代码重复率很高、大量低成本，无关核心业务逻辑开发的工作，因此，我们思考如何在现有研发方案上，进一步提效。

思考策略

相信大家在开发过程中，也会常常思考以下问题：

俗话说的好， 欲先善其事必先利其器，想要解决这些问题，提高研发效率，就必须先弄清楚研发成本都有哪些？

首先，可以把研发成本粗略的分为以下几类：

其次，站在巨人的肩膀上看问题。我们也调研了一些现有的中后台提效的方案，主要包括不限于：基于可视化搭建平台、基于可视化物料源码开发站、基于AI能力的效能提升平台等, 是如何降低上述研发成本。再结合我们自身业务场景、现有研发方案、开发模式、学习成本等综合因素考虑，我们决定打造一个基于智能化面向阿里云控制台、中后台源码开发平台。

解法：

技术上，我们借力业务产品-智能视觉，提供模型训练、部署、预测等服务能力， 基于XConsole控制台视觉标准等建设训练样本集，自训练视觉模型，实现AI智能识别。

同时，我们思考将AI 与前端业务深入结合，通过AI能力提供的丰富预测/推荐信息，结合研发逻辑积累，打造更加人性化、智能化的前端代码。当然，并不是机器能生成100%的代码，代替前端开发，出发点是让机器能自动化智能化，帮助我们减少开发工作量，为前端人员减负，替我们完成可抽象、可复用、UI编排、国际化等低成本、较为繁琐的工作，最后产出一份可以二次开发的可维护的高质量的源码Procode。

平台能力

产品架构图

技术实现层识别能力

目前我们支持XConsole云控制台列表、表单、用量场景页面的识别。我们支持的识别种类及对应组件如下：

demo-识别智能生成

通过组件识别、文字识别、图像分析等一系列过程后，我们可以从一张图片得到一个一维数组的数据，根据UI节点、文字节点等位置信息进行关系分析，布局分析，语义化分析等，再通过插件化的方式转换成不同类库代码。目前我们已支持Fusion、Antd、Wind、Visage等类库。

预处理

预处理是为了提高代码生成准确率的一个交互环节。用户可以通过简单的校验类型操作，对整页分隔识别不准确的物体进行调整包括新增标注、删除标注、修改标注类型、调整标注位置信息等。具体交互与流程如下图所示：