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

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