随着AIGC技术的快速发展，天猫新品创新（TMIC）业务积极拥抱这一浪潮，推出了画布引擎以赋能商家在新品设计环节中的创作需求。画布引擎是一个基于Canvas的UI框架，通过整合前端渲染能力和AIGC算法模型接口，为用户提供了一套操作画布元素的底层能力。
画布引擎的设计兼顾了专业性和易用性，界面简洁友好，适合普通用户快速上手。其技术实现基于Konva库，通过定义画布协议实现了对画布状态的抽象描述，并支持撤销、重做、另存为等功能。此外，画布引擎还提供了开放组件和SDK，便于不同业务快速接入或定制化开发。目前，画布引擎已在TMIC和产业AI平台上成功应用，并将持续引入新功能以满足更多业务需求。
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
自2022年以来，随着DALL-E 2、Midjourney、Stable Diffusion等项目的公开发布，极大地降低了普通人使用AIGC生成图片的技术门槛。面对这波AI浪潮，各个团队都开始积极拥抱AIGC，其中也包括天猫新品创新业务。天猫新品创新中心（Tmall Innovation Center，简称TMIC）依托阿里大数据、AI算法、生态共建，全方面赋能企业商品研发创新，在新品全生命周期内（市场洞察->新品设计->新品测试->新品上市），提供一站式解决方案。由于新品设计环节对创作的潜在需求和AIGC的能力不谋而合，TMIC主动开始探索利用AIGC赋能商家的业务场景。
在开始探索AIGC落地的阶段，业务同学和技术同学从各自的专业角度出发，相对独立地建设了多个场景。这些场景某种程度上依赖一些同质化的底层能力，因此引起了重复工作。为了避免后续出现类似问题并提高研发效率、缩短业务落地周期，我们收集了已经实现的场景下的功能，发现它们都依赖前端提供的画布能力以及算法提供的AI能力。于是我们将这些共性的底层能力进行了抽象，最终沉淀为了现在的画布引擎。
画布引擎是一个帮助用户轻松使用AIGC能力的UI框架。它以Canvas画布为核心，提供了一套操作画布元素的底层能力，通过调用特定的AIGC算法模型接口，最终将画布内容转化成符合期望的商品图和模特图。画布引擎目前已实现了多种AIGC工具以及纯前端画布功能，并且赋能了TMIC、产业AI平台上的多个业务场景。
如何实现画布引擎
在产品设计阶段，我们调研了两类最常见的画布引擎。一类以stable-diffusion-webui（下图1）为代表，它们具备完善的AIGC调节项，但是界面复杂，对于普通用户来说不够友好；另一类以美图秀秀（下图2）为代表，在提供精美界面的同时隐藏了高级参数选项，降低了用户的使用门槛。
|
|
| 图1 | 图2 |
由于我们的业务面向商家用户，因此在思考画布引擎的定位时，我们在专业和简洁之间选择了后者。最终，我们实现的画布引擎的界面如下图。它的大部分功能参考了美图秀秀，包括文件管理、智能画面调节、智能画笔消除、添加滤镜、添加文字、添加边框、智能背景、添加素材、智能水印等。
文件管理主要支持从本地上传图片并替换画布背景图以及下载画布背景图到本地（下图1）。另外画布引擎还提供了多种模板图方便用户快速套用（下图2）。
|
|
图1 | 图2 |
智能画面调节支持图像裁剪、延展、清晰度调节、局部换色。图像裁剪（下图1）允许用户自由设置裁剪区域并去除区域外的内容；延展功能（下图2）支持按比例延展图片，并通过AIGC能力补充延展后的空白区域；清晰度调节（下图3）将图片高清化或压缩成用户选择的清晰度；局部换色（下图4）通过AIGC能力将图片目标区域替换为特定的颜色。
|
|
| 图1 | 图2 |
|
|
| 图3 | 图4 |
|
|
| 图1 | 图2 |
|
|
| 图1 | 图2 |
|
|
图1 | 图2 |
画布组件有多种使用场景。纵向，它可以用于实现官方画布引擎和业务自定义画布引擎；横向，它可以作为一个纯前端组件提供给其他业务嵌入到自己的项目中，例如产业AI平台的数据标注场景就借助画布中的矩形原子组件实现了通过框选商品图元素进行数据标注的功能。
围绕着画布组件，我们进一步建设了画布引擎能力。主要实现了1. 和画布交互的用户界面和2. 调用AIGC模型能力并将生成结果反映到画布上。
首先，同样有一套用于描述画布引擎状态的协议。它描述了一个完整的画布引擎结构，包含顶部栏、底部栏、工具栏等功能模块。具体示例可参见附录。另外，由于画布是画布引擎重要组成部分，因此我们将画布协议也整合到了画布引擎协议里面。基于画布引擎协议，用户可以定制画布引擎的具体展示，例如隐藏/显示顶部栏或底部栏，以及工具栏中包含哪些工具和这些工具按钮的排布等。
其次，我们实现了一个工具箱，包含一系列AIGC/前端画布工具。关于每个工具的功能介绍可以参考上面的产品说明章节。我们为每个工具都实现了一个工具面板，上面展示了工具的使用步骤以及各项参数调节按钮，例如智能擦除工具面板上有滑块可以对橡皮擦尺寸进行调节，并实时地更新画布引擎协议里的相应数值，最终反映在涂抹在画布中的线条的粗细上。
进一步的，我们可以在这些工具能力之上实现一个GUI。但是在此之前，我们额外设计了一个视图模型层，它主要负责协议状态的维护以及暴露状态和事件到下游的GUI层。这些暴露出来的状态数据以及状态管理API既可以用于实现官方GUI，也便于其他业务实现自定义的GUI，上图展示了实现自定义GUI的代码示例。GUI的建设重点是工具面板。工具面板承载了两个功能：1. 调节工具的内部参数，以及对于依赖AIGC模型的工具而言，还需要 2. 透出模型调用按钮，并将模型生成结果更新到画布协议中以驱动画布重绘。
最后，和画布组件一样，我们也实现了画布引擎的开放能力。我们将官方画布引擎变成了一个组件，这意味着它同样可以被内嵌到外部项目代码中，并通过画布引擎协议实现双向数据绑定。另外，我们也提供了实现画布引擎所需的SDK和协议规范，供开发实现定制化的画布引擎规范，下图展示了我们的业务的定制化GUI界面。
质量保障
画布引擎的开放能力依托于质量体系来保障自身的稳定性，因此我们对这方面格外重视。除了通过不断重构来持续优化代码结构以降低潜在的日常迭代带来的故障风险外，我们还在单元测试方面做了大量工作。
目前画布引擎的单测覆盖率在85%以上，如下图所示。我们针对画布引擎的实际应用情况，设置了包括画布引擎组件测试和画布组件测试在内的5个测试场景，编写了35条测试用例，涵盖了初始化流程、画布原子组件实现、画布元素形变&拖拽保护、画布引擎工具实现、GUI交互、撤销重做功能等在内的核心逻辑。随着测试体系的持续建设和画布引擎功能的不断丰富，我们的用例数和覆盖率预计会得到进一步提升。
|
|
| 图1 | 图2 |
|
|
| 图1 | 图2 |
对于定制要求不高且想快速使用画布引擎能力的场景，我们提供了官方画布引擎组件供开发人员嵌入到项目代码中。并通过修改协议内容有限度地控制画布引擎的表现，例如工具栏的工具透出和排布。下图展示了一个通过仅仅配置画笔和橡皮工具实现的简单画图画布引擎。
另外，画布组件也可以独立使用在一些不需要AIGC或画布引擎能力的简单场景中。下图展示了一个在画布上框选商品主体的数据标注页面。
首先，在功能丰富度方面，画布引擎仍有进一步提升的空间。随着AIGC技术的飞速发展，我们将持续引入新的功能，以更好地支持业务需求。这些新功能将涵盖但不限于风格转换、局部修复以及场景合成等领域。
其次，目前官方画布引擎在生成模特图和商品图方面表现出色，但在处理其他题材图片时可能稍显不足。为此，我们计划在未来版本中加入自定义后端接口的支持，使开发者能够接入自己训练的模型服务，从而拓展画布引擎的应用范围和灵活性。这一改进不仅能够满足更多用户的具体需求，还将显著增强画布引擎的整体性能与适用性。
{"theme": "dark","backend": "bizB","content": {"canvas": {"maxSize": 512,"width": 512,"height": 512,"scale": 1.2,"backgroundImage": {"src": "backgroundImageUrl"},"objList": []},"toolBox": {"list": [{"type": "fileEntry","title": "文件","children": [{"type": "file","title": "文件"},{"type": "template","title": "模板"}]},{"type": "adjust","title": "调整","children": [{"type": "cutImage"},{"type": "expandImage"},{"type": "clarity"},{"type": "localChangeColor"}]},{"type": "brush","title": "画笔","children": [{"type": "magicEraser"}]},{"type": "filter","title": "滤镜"},{"type": "text","title": "文字"},{"type": "frame","title": "边框"},{"type": "bgAdjust","title": "背景","children": [{"type": "background"}]},{"type": "material","title": "素材"},{"type": "waterMark","title": "水印","children": [{"type": "patternLocalPrint","logoUrl": "logoUrl"},{"type": "patternFullPrint","patternImageUrl": "patternImageUrl"}]}]}}}
团队介绍