我们在前文提到，AICode才是低代码的终局，本篇文章，我们将视角转移至低代码与智能化相结合，看一下目前在互联网公司中AICode的落地情况。
我们在前文谈到过，AICode（或AutoCode）是未来的发展方向，这其中包含了多个细分方向，“Imgcook”（www.imgcook.com/）是人工智能与D2C（Design to Code）、低代码干预相结合的产物，“鹿班”（www.aliyun.com/product/lub…）基于人工智能算法与海量设计素材数据来实现图片的自动化批量生成。
Imgcook与D2C
在阿里电商业务中，前台产品形态各种各样，据不完全统计，各类低代码搭建的模块年新增量在 1w 以上，年页面增量 100w 以上，为解放这期间大量相似模块/页面对于前端工程师的依赖，2017 年从当时的淘宝前端团队诞生出通过设计稿直接生成可维护的前端代码工具达芬奇（ imgcook），后来逐步优化，为了减少对设计稿的约束规范，逐步引入 CV、NLP 解决图层识别问题和语义化问题，后来在 2019 年 1 月正式对外开放 imgcook。此后不断迭代，从此前的资料显示，从平台上记录的模块开发耗费时间降低约 40% 左右，同时结合内外用户调研加权平均之后，整体前端研发提效约 40% 左右。
Imgcook是基于设计稿或PRD（产品规格说明书） 直接生成代码（D2C），但由于存在识别准确率的问题，所以也融合了 Lowcode 的可视化能力来进行干预，可视化修改成本比较低，同时修改后的结果可以用于模型的自迭代。但由于一些复杂的业务逻辑，有些可视化强制搭建出来比写代码的成本还要高，所以这也是Imgcook采用 Lowcode的原因而非强制Nocode的原因，融合了 Procode 的优势，将生成的可维护代码可以进行二次迭代，最终可以应用到不同复杂度场景的业务中。
Imgcook 的 目前对外的核心功能是 从设计稿 通过 CV/NLP 等深度学习、传统机器学习、专家规则系统、算法工程 等综合手段直接生成代码，具体步骤体现在：导入设计稿、可视化干预、查看生成的源代码、将源代码应用在实际工程之中。
架构方面，基于算法工程框架和产品，基于视觉稿 CV 分析 和 NLP 分析，多维度识别要生成代码的要素，识别后可视化呈现出来，如果识别出错就进行可视化干预，并可视化补充额外逻辑，然后应用集成到各自的工程链路（VSCode 插件、WebIDE插件、imgcook-cli）中。生成的代码支持自定义，最常用的是 DSL（React/vue/小程序 DSL…）和 Plugin（不同的团队有不同的目录规范等）自定义。同时整个技术体系我们最关注的的是技术方面的度量指标，如代码真实可用率、模型准确度和提效数据等，总体如下图：
Imgook总体结构
从智能识别表达方面，从上到下，先将设计稿中输入，进行图层信息处理，各层概括如下：
图层处理层：主要将设计稿或者图像中图层进行分离处理，并结合上一层的识别结果，整理好图层元信息。
物料识别层：主要通过图像识别能力识别图像中的物料（模块识别、原子模块识别、基础组件识别、业务组件识别）。
图层再加工层：对图层处理层的图层数据做进一步的规范化处理。 布局算法层：转换二维中的绝对定位图层布局为相对定位和 Flex 布局。
语义化层：通过图层的多维特征对图层在生成代码端做语义化表达。
字段绑定层：对图层里的静态数据结合数据接口做接口动态数据字段绑定映射。
业务逻辑层：对已配置的业务逻辑通过业务逻辑识别和表达器来生成业务逻辑代码协议。
可视化编排：输出经过各层智能化处理好的代码协议，用可视化引擎所见所得呈现处理，可以进行可视化干预和补充。
出码引擎层：经过人工干预后的更准确的协议内部，经过表达能力（协议转代码的引擎）输出各种 DSL 代码。
工程链路层： 通过 VS Code 插件、WebIDE 插件， 输出各个工程项目环境中。
鹿班平台
接下来谈一下阿里鹿班，鹿班（luban.aliyun.com）孵化自解决电商大促大量图片制作的降本增效需求，现在是阿里云上的智能设计平台，包括智能生成、创作助手、智能排版、设计拓展等功能模块，可以帮助企业快速、批量、自动化的进行图片设计。
鹿班对于图像理解，借鉴了 Photoshop中图层的概念。在Photoshop中，一张图包含了若干图层，某个图层中包含背景、另一个图层里有一些内容修饰、商品主图等等。鹿班也是如此，认为图是由基本元素组成的，每一个元素（或者像素集合）又可以有多个维度的描述，包括空间的（位置坐标 x、y、z，其中 z 指深度空间维度）、视觉的、内容的描述等。鹿班的“元素”体系是一个两层的树状结构，第一层把元素分成若干个大类，比如主体、文案、修饰、标识、背景等，第二层再对大类做细分，比如主体就可以分为商品、物体或者模特等。文案分为主题文案、辅助文案、行动利益点等，修饰也有区域修饰、点状、线条、碎片修饰等等不一而足。除了分类外，每个元素也有「语义层」对其进行更详尽的描述，例如一个「商品主体」的色系、风格、适合场景等是什么。
鹿班定义为一个可控的视觉内容生成系统，这里的“可控”指的是用户通过输入需求来描述对结果的视觉预期、对生成过程进行控制。换句话说，希望这个生成过程是一个可解释的过程，而非一个黑盒。
用户的需求可能会以多种形式出现，可以用自然语言描述、可以给一张之前的图做示例、也可以画一个草图把想要的元素简单排列，包括一些上下文信息，例如设计是否用于某个特定的活动、有特定的主题之类的。基于这些输入，对这部分「数据」进行规范化与结构化，变成系统可以理解的“信息”标签，进行后续的处理，综合来讲，包括以下步骤：
第一步，让机器理解设计的构成：通过人工数据标注，对设计的原始文件中的图层做分类，对元素做标注。设计专家团队也会提炼设计手法和风格。通过数据的方式告诉机器这些元素为什么可以放在一起，把专家的经验和知识通过数据输入，这部分核心是深度序列学习的算法模型；
第二步，建立元素中心：当机器学习到设计框架后，需要大量的生产资料。通过建立元素库，通过机器做图像特征提取，然后分类，再通过人工控制图像质量以及版权问题，包括购买有版权的图库；
第三步，生成的系统：原理类似Alpha Go 下围棋。在设计框架上构建起虚拟画布，类似棋盘，生成的系统把元素中心的元素往棋盘的格子中摆放，这里采用了“强化学习”。在强化学习的过程中，机器参考原始样本，通过不断尝试，得到一些反馈，然后从中学习到什么样的设计是更优化的；
第四步，评估的系统：通过抓取大量设计的成品，从“美学”和“商业”两个方面进行评估。美学上的评估由人工来完成，这方面主要依赖专业众包公司，商业上的评估就是看投放出去的点击率浏览量等等。
综合以上，Imgcook与鹿班是阿里在AICode方向有代表性的探索，如今，在阿里经济体前端委员会的四大技术方向中，前端智能化是其中重要的方向之一，借助阿里巴巴众多的业务场景以及巨量的素材数据，相信未来会在AICode方向做更多的探索。
感谢阅读，下一篇我们看一下其他大厂的低代码建设情况。
欢迎访问免费、通用的无代码开发平台Mybricks ，体验图形化编程的乐趣
