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

1. 无极低代码 UI可视化的 AIGC落地与实践苑宗鹤腾讯高级前端开发工程师

2.

3. 介绍无极低代码大家眼中的低代码可视化方式拖拽一些PC应用疑问： • 能做多复杂的系统？ • 只用可视化拖拽够用吗？

4. 应用展示 ERP进存销系统 • 进货、库存和销售管理系统 • 配套订单跟踪、采购流程设计、审批流程、复杂报表分析等

5. 应用展示开放平台/礼包配置 • 一个开放平台，提供给用户管理、运营APP应用的渠道内容 • 例如：活动、礼包、礼券等，并提供对应的数据看板，展示渠道活动的运营数据

6. 应用展示 APP页卡运营 • 一个APP、H5页面可视化编辑系统 • 页面模板创建、数据源管理、页面可视化搭建、分层实验、数据展示等功能。是一个用无极低代码搭建出来的“无代码”项目

7. 应用展示门户站点 / 文档站点 • 无极官方主页、官方文档页，也是用无极搭建 • wujicode.cn

8. 大量业务通过无极产生自己的管理台

9. 目录一、AI 与低代码 Copilot • • • 实现平台级 copilot 自动纠错 AI 自动化测试 • • • • AI如何与编辑器交互 BI生成任务拆分 AI 布局生成二、AI 与低代码布局

10. 低代码平台中的编码场景：前端使用权限 API 进行 UI 控制

11. 低代码平台中的编码场景：后端后端返回时进行数据修剪

12. 在低代码平台中编码的痛点？ •编码时需要反复查看平台的文档或者咨询客服 •对于非开发来说，编写代码是有难度和理解成本的让 AI 来帮忙？

13. 目录 AI 与低代码 Copilot • • • 实现平台级 copilot 自动纠错 AI 自动化测试

14. 使用 github copilot 遇到的 badcase 在某个未打开的文件中的函数定义 Github co pilot 给出的补全结果是填入 ctx

15. 丰富的 API 和上下文前端 API 前端上下文

16. 各自维护 prompt 修改模块时成本高使用到的 API prompt1 w.emitter w.showModal prompt2 data.search_list.listData data.user_info.formData state.selected_list prompt3 直接使用文档作为 prompt

17. 无极的低代码配置本身作为 DSL 存储用户配置无极 DSL

18. 私有协议不易于 AI 理解平台私有的 DSL => 标准化的协议 => typescript 类型无极 DSL 类 typescript 类型

19. 对比使用文档 , 经过转换后的ts 类型更简洁直接喂文档, 信息冗余量大, 维护滞后转化后的 ts 类型 , 精简, 节省 token

20.

21. •TypeScript类型: 能保留完整的类型定义和注释，在不泄露数据前提下能保留更多对变量和方法的描述，而且大大降低 Prompt token 的消耗 •使用无极DSL : 对 Prompt 结构影响小，从而减少 Prompt 改动对 AI 生成的影响

22. 目录 AI 与低代码 Copilot • • • 实现平台级 copilot 自动纠错 AI 自动化测试

23. AI 出现了幻觉没这个变量啊�!! 怎么提高 AI 输出的正确率呢?

24. 将代码转回 AST 进行校验

25. 纠错后开启第二轮会话

26. 提升了单轮问答的成功率成功率80% AST 修正成功率94%

27. 目录 AI 与低代码 Copilot • • • 实现平台级 copilot 自动纠错 AI 自动化测试

28. 平台迭代时, 如何稳定输出 ? 模型升级、或者平台API调整，不能对旧用例产生影响模型数据源模块前端 API 模块

29. DSL 从前端生成，测试环境复杂用户搭建的数据源和变量 DSL 的生成包含了前端和各种接口逻辑, 使用前端 e2e能复用大部分现有逻辑动态生成的 prompt

30. 使用无头浏览器运行测试用例 ai测试模块

31. 对比输入和输出校验用例是否通过对比 ai测试模块输出

32. 相同的逻辑，不同的代码 AI 输出标准答案

33. 引入 AI 裁判 ai测试模块输出

34. 实时监控每一次迭代

35. 小结平台级 copilot - 降低上手难度,提高开发效率智能化自动纠错 - 防止 AI “抽风” AI 功能的自动化测试 - 在平台迭代时确保功能稳定

36. 目录二、AI 与低代码布局 • • • • AI如何与编辑器交互 BI生成任务拆分 AI 布局生成

37. AI 直接生成布局，过程过于黑盒传统方案缺点： • 数据&接口授权需要用户亲自确认，不能 AI 代替执行 • 单次生成流程仅能接受一次用户输入，不方便动态调整 • AI生成后页面直接刷新，用户无法感知其中的执行步骤

38. 让 AI 直接操作用户界面，过程清晰可见 AI生成内容 => AI 生成指令 • 指令逐个执行，用户可以了解过程 • 指令与指令之间可以进行用户交互，进行微调 • 操作原子化，减少模块迭代负担

39. JSBridge:操作编辑器的接口 JSBridge

40. 操作用户界面遇到的问题以 AI 点击确认按钮为例：缺点 • 从 dom 上选择元素后模拟点击，迭代后难以准确选中元素 • 将按钮的点击事件制作成钩子，有大量未接入 AI 的组件等待改造优点 • dom 模拟操作：触发直接，无需考虑具体调用了哪些方法 • 从组件层面操作：组件功能单一，容易定位如何将两者的优点合二为一呢？

41. 操作用户界面遇到的问题以 AI 点击确认添加为例：方案一：从 dom 上下手优点：触发直接缺点：样式/结构一重构就选不到了，除非大量打点改造

42. 操作用户界面遇到的问题以 AI 点击确认添加为例：方案二：从组件api下手优点：组件功能单一，不会轻易变动缺点：将绑定的事件抽取成钩子，也有大量改造成本

43. AI 模仿用户，操作整个编辑器以 Vue为例： • virtual dom：包含组件的全部属性，方法，以树的结构存储 • 组件dom：可以从 virtual dom 上拿到，用于触发组件事件

44. 生成过程中二次调整 AI 无法只从用户的需求中生成指令，我们需要传递更多信息 • 基本的指令集合(JSBridge) • 组件的基础信息(属性项定义，事件，方法) • 当前的编辑数据(已配置的样式，属性，布局)

45. 让 AI 能“看见” • • • • 编辑指令查询指令接口授权 ······

46. 目录二、AI 与低代码布局 • • • • AI如何与编辑器交互 BI生成任务拆分 AI 布局生成

47.

48. BI 生成：数据基于 DSL • 接入数据 • 生成组件 • 组件调整无极表 DSL：字段类型：FieldType 字段信息：FieldSchema 表信息：TableSchema

49. 目录二、AI 与低代码布局 • • • • AI如何与编辑器交互 BI生成任务拆分 AI 布局生成

50. Token爆了！ Token 相当于AI 的脑容量，对话过程中添加的信息会占用 Token 数量随着喂 AI 的信息越来越多，token 很快到达了上限对策： • 简化传递的信息 • 只传递有用的信息简化：精简之后 AI 的理解变差了精简：任务很多，多多少少都用上了一些

51. 无极的编辑端可以拆分为多个模块 • • • • 导航物料画布组件配置

52. 将一个任务分配给多个模块依次执行任务：统计电影的年份我该把哪个数据绑定到图表上呢？

53. 引入 AI 管家，拆分任务，同步各模块间的数据顶层的 AI 即可以拆分任务，调用下层 AI 也可以传递下层 AI 之间的结果

54. 任务和模块按照树状递归，纵向拓展当负责模块的 AI Token 吃紧时，就可以继续向下拆分

55. 目录二、AI 与低代码布局 • • • • AI如何与编辑器交互 BI生成任务拆分 AI 布局生成

56. AI 布局生成

57. 小结 • • • • AI如何与编辑器交互 BI生成任务拆分 AI 布局生成

58. ONE MORE THING

59. 探索AI的各种可能

60. 探索AI的各种可能

61.

62. wujicode.cn 专业，全生命周期企业级低代码解决方案！体验无极商务合作技术交流