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

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