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

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