苑宗鹤：无极低代码UI可视化的AIGC落地与实践

无极低代码 UI可视化的 AIGC落地与实践苑宗鹤 腾讯高级前端开发工程师介绍无极低代码大家眼中的低代码可视化方式拖拽一些PC应用疑问：• 能做多复杂的系统？• 只用可视化拖拽够用吗？应用展示ERP进存销系统• 进货、库存和销售管理系统• 配套订单跟踪、采购流程设计、审批流程、复杂报表分析等应用展示开放平台/礼包配置• 一个开放平台，提供给用户管理、运营APP应用的渠道内容• 例如：活动、礼包、礼券等，并提供对应的数据看板，展示渠道活动的运营数据应用展示APP页卡运营• 一个APP、H5页面可视化编辑系统• 页面模板创建、数据源管理、页面可视化搭建、分层实验、数据展示等功能。是一个用无极低代码搭建出来的“无代码”项目应用展示门户站点 / 文档站点• 无极官方主页、官方文档页，也是用无极搭建• wujicode.cn大量业务通过无极产生自己的管理台目录一 、AI 与低代码 Copilot二 、AI 与低代码布局•实现平台级 copilot•自动纠错•AI 自动化测试•AI如何与编辑器交互•BI生成•任务拆分•AI 布局生成低代码平台中的编码场景：前端使用权限 API 进行 UI 控制低代码平台中的编码场景：后端后端返回时进行数据修剪在低代码平台中编码的痛点？•编码时需要反复查看平台的文档或者咨询客服•对于非开发来说，编写代码是有难度和理解成本的让 AI 来帮忙？目录AI 与低代码 Copilot•实现平台级 copilot•自动纠错•AI 自动化测试使用 github copilot 遇到的 badcase在某个未打开的文件中的函数定义Github copilot 给出的补全结果是填入 ctx前端 API前端上下文丰富的 API 和上下文各自维护 prompt 修改模块时成本高使用到的 APIw.emitterw.showModaldata.search_list.listDatadata.user_info.formDatastate.selected_listprompt2prompt3prompt1直接使用文档作为 prompt无极的低代码配置本身作为 DSL 存储用户配置无极 DSL私有协议不易于 AI 理解平台私有的 DSL => 标准化的协议 => typescript 类型无极 DSL类 typescript 类型对比使用文档 , 经过转换后的ts 类型更简洁直接喂文档, 信息冗余量大, 维护滞后转化后的 ts 类型 , 精简, 节省 token•TypeScript类型: 能保留完整的类型定义和注释，在不泄露数据前提下能保留更多对变量和方法的描述，而且大大降低 Prompt token 的消耗•使用无极DSL : 对 Prompt 结构影响小，从而减少 Prompt 改动对 AI 生成的影响目录AI 与低代码 Copilot•实现平台级 copilot•自动纠错•AI 自动化测试没这个变量啊ࠇ!!怎么提高 AI 输出的正确率呢?AI 出现了幻觉将代码转回 AST 进行校验纠错后开启第二轮会话成功率80% AST 修正成功率94% 提升了单轮问答的成功率目录AI 与低代码 Copilot•实现平台级 copilot•自动纠错•AI 自动化测试模型升级、或者平台API调整，不能对旧用例产生影响数据源模块前端 API 模块模型平台迭代时, 如何稳定输出 ?DSL 的生成包含了前端和各种接口逻辑, 使用前端 e2e能复用大部分现有逻辑DSL 从前端生成，测试环境复杂用户搭建的数据源和变量动态生成的 promptai测试模块使用无头浏览器运行测试用例ai测试模块输出对比对比输入和输出校验用例是否通过相同的逻辑，不同的代码AI 输出标准答案ai测试模块输出引入 AI 裁判实时监控每一次迭代平台级 copilot - 降低上手难度,提高开发效率智能化自动纠错- 防止 AI “抽风”AI 功能的自动化测试 - 在平台迭代时确保功能稳定小结目录二 、AI 与低代码布局•AI如何与编辑器交互•BI生成•任务拆分•AI 布局生成AI 直接生成布局，过程过于黑盒传统方案缺点：• 数据&接口授权需要用户亲自确认，不能 AI 代替执行• 单次生成流程仅能接受一次用户输入，不方便动态调整• AI生成后页面直接刷新，用户无法感知其中的执行步骤让 AI 直接操作用户界面，过程清晰可见AI生成内容 => AI 生成指令•指令逐个执行，用户可以了解过程•指令与指令之间可以进行用户交互，进行微调•操作原子化，减少模块迭代负担 JSBridge:操作编辑器的接口JSBridge操作用户界面遇到的问题以 AI 点击确认按钮为例：缺点• 从 dom 上选择元素后模拟点击，迭代后难以准确选中元素• 将按钮的点击事件制作成钩子，有大量未接入 AI 的组件等待改造优点• dom 模拟操作：触发直接，无需考虑具体调用了哪些方法• 从组件层面操作：组件功能单一，容易定位如何将两者的优点合二为一呢？操作用户界面遇到的问题以 AI 点击确认添加为例：方案一：从 dom 上下手优点：触发直接缺点：样式/结构一重构就选不到了，除非大量打点改造操作用户界面遇到的问题以 AI 点击确认添加为例：方案二：从组件api下手优点：组件功能单一，不会轻易变动缺点：将绑定的事件抽取成钩子，也有大量改造成本AI 模仿用户，操作整个编辑器以 Vue为例：• virtual dom：包含组件的全部属性，方法，以树的结构存储• 组件dom：可以从 virtual dom 上拿到，用于触发组件事件生成过程中二次调整AI 无法只从用户的需求中生成指令，我们需要传递更多信息• 基本的指令集合(JSBridge)• 组件的基础信息(属性项定义，事件，方法)• 当前的编辑数据(已配置的样式，属性，布局)让 AI 能“看见”• 编辑指令• 查询指令• 接口授权• ······目录二 、AI 与低代码布局•AI如何与编辑器交互•BI生成•任务拆分•AI 布局生成BI 生成：数据基于 DSL• 接入数据• 生成组件• 组件调整字段类型：FieldType字段信息：FieldSchema表信息：TableSchema无极表 DSL：目录二 、AI 与低代码布局•AI如何与编辑器交互•BI生成•任务拆分•AI 布局生成Token爆了！Token 相当于AI 的脑容量，对话过程中添加的信息会占用 Token 数量随着喂 AI 的信息越来越多，token 很快到达了上限对策：• 简化传递的信息• 只传递有用的信息简化：精简之后 AI 的理解变差了精简：任务很多，多多少少都用上了一些无极的编辑端可以拆分为多个模块• 导航• 物料• 画布• 组件配置将一个任务分配给多个模块依次执行任务：统计电影的年份我该把哪个数据绑定到图表上呢？引入 AI 管家，拆分任务，同步各模块间的数据顶层的 AI 即可以拆分任务，调用下层 AI也可以传递下层 AI 之间的结果任务和模块按照树状递归，纵向拓展当负责模块的 AI Token 吃紧时，就可以继续向下拆分目录二 、AI 与低代码布局•AI如何与编辑器交互•BI生成•任务拆分•AI 布局生成AI 布局生成小结•AI如何与编辑器交互•BI生成•任务拆分•