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

无极低代码UI可视化大家眼中的低代码可视化方式拖拽一些PC应用开放平台/礼包配置APP页卡运营应用展示门户站点/文档站点W无极文档使用文档案例教程开放接口合首页组件使用指南产品介绍产品介绍平台简介名词介绍名词介绍适用场景Al给低代码开发提效更新日志无极无极掌握无极应用设计工具LowCode内嵌无极掌握无极应用设计工具LowCode内嵌无极系统附录应用层大量业务通过无极产生自己的管理台直播管理系统企业管理系统腾讯应用开放平台活动平台企业外部门户项目管理系统C端可视化运营系统C端可视化运营系统应用市场自动纠错实现平台级copilot自动纠错使用权限API进行UI控制属性样式行为删除删除后端返回时进行数据修剪调试参数②cookie_plugin运行接口代码插件I代码插件后置插件逻辑代码②2*@param{context}context5async(context,WApi)=>{12345678901234567{"payload":"{\"id\":1296697,\"title\":\"人猿星球\",\"poster\":\"/view/photo/s_ratio_poster/public/p9151410\"original_title\":\"PlanetoftheApes\",\"year\":\"1968\",\"is_tv\":0,\"_ctime\":\"2021-11-26T03:29:54.000Z\",\"_mtime\":\"2024-05-24T08:21:03.000Z\",\"url\":null,\"tags\":null,\"enable\":0,\"desc\":null,\"_id\":1296697}"{"poster":"https://img9.doubanio.s_ratio_poster/public/p915141074.web"original_title":"PlanetoftheApes",_____让AI来帮忙?AI与低代码opilot使用githubcopilot遇到的badcaseexportexportconstrefresh0rganization=async(groupId)=>{try{consttype='xyGroupDB';}Githubcopilot给出的补全结果是填入ctx正在编辑的文件正在编辑的文件丰富的API和上下文▼前端API▼前端API(w)…全局LessCode实例…当前页面片实例Str.模式："editor"9当前页面信息：{..}O projectInfopagelnfopageList$apprendereremitterpermission模板通用组件▼数据(data)123页码：1123每页数目：20123总数：37074方法$methodsURL参数($query)Str.id:"123"Qpagesort十各自维护prompt修改模块时成本高使用到的APIw.emitterprompt1无极内置的事件注册和触发器，提供on,once,emit,off四个方法，用法与EventEmitter一致。同时可以通过w.emitter.EventName变量获取无极内置的事件名。▶无极内置的事件名●统计页面跳转-页面创建-页面数据源就绪的耗时letletstartTime;letcreatedTime;无极的低代码配置本身作为DSL存储1234234模板通用组件数据源"xySources":["id":"printTemplate,"title":"printTemplate""methods":[…▼数据(data)E▼数据(data)E十9printTemplate(printTemplate)列表▼页面变量(state)十,,无极DSLAIcode私有协议不易于AI理解1234{"id":"printTemplate","title":"printTemplate"],,123,789constdata:{printTemplate:{listData:any[];conststate:{}无极DSLtypescript类型AIcode当前的运行环境无极内置的常用工具方法，详见四前端API/工具方法无极内置的事件注册和触发器，提供on,once,emit,off四个方法，用法与EventEmitter一致。同时可以通过w.emitter.EventName变量获取无极内置的事件▶无极内置的事件名·统计页面跳转-页面创建-页面数据源就绪的耗时letcreatedTime;PTopPTop184//前端API187renderer:Vue;//当前页面片实例d191Vuser:{//当前用户194chnName:string;//中文名195deptName:string;//部门名197avatar:string;//头像图地址198editorRole:string;//编辑侧身份199isAdmin:boolean201roles:Array<{/205pageId:string;//权限项关联的页面ID206role:string;//权限项关联的角色名207AIAIAIAI能保留完整的类型定义和注释，在不泄露数据前提下能保留更多对变量和方法的描述，而且大大降低Prompttoken的消耗模板通用组件数据源页面输入字段名或ID▼数据▼数据(data)C十9movie(电影)列表000old_movie:[….]length:0◎传给页面片的参数(props)十全局实例/全局LessCode实例($app2data(){3return{4//param:,按Tab触发AI生成代码//自定义变量AI与低代码opilot//获取用户名和密码//获取用户名和密码 //获取用户名和密码//获取用户名和密码 constpassword=W.user.staffId;AssumingstaffIdisusedas${password}`);前端API(w)Str.用户ID:"zongheAAAA@wuji"Str.英文名："zongheAAAA@wuji"Str.中文名：""Str.部门名：""useruserldname将代码转回AST进行校验diffdifftypescript类型纠错后开启第二轮会话diff提升了单轮问答的成功率diff成功率80%diffASTAST修正无极DSL成功率94%W.AI与低代码opilot平台迭代时，如何稳定输出//拉取电影列表并弹窗打印出来//拉取电影列表数据constmovieList=awaitdata.movie.$methods.list();//获取电影列表数据constmovies=movieList.listData;constformattedMovies=movies.map(movie=>`ID:${movie.id}\n名字：${movis//弹窗打印电影列表数据(`电影列表：\n\n${formattedMovies}`);//错误提示w.message.error('拉取电影列表失败);数据(data)数据源管理三9movie(电影)列表E目▼页面变量(state)使用前端e2e能复用大部分现有逻辑movie?:{//movie(电影listData:Array<{//列表数据title:string;//名字desc:string;//简介poster:string;//图片original_title:string;//原名year:string;//年份is_tv:boolean;//电视url:string;//地址tags:"1"|"2"|"3"丨"4"|"5"丨"6"|"7"enable:boolean;//生效_ctime:number;//创建时间_mtime:number;//最近更新时间oldmovie:Array<any>;使用无头浏览器运行测试用例预设页面对比输入和输出校验用例是否通过对比预设页面引入AI裁判测试用例YouwillbegiventwocodesThesearethemetricsthatyouneedtoconsiderwhenreviewingthecode:1.Theto-be-reviewedcodemustachieveatleastth3.Ifrulenumberoneissatisfied,theto-be-r4.KeepinmindthatthetopprioritYouneedtobesupercarefulwhenreviewingthecode,becausethecodewillbeusedinaproductionenvironment.If用户输入预设页面InfoQ极客传媒通过率：95.59%×[数据源前置插件-DB数据表-list]在local_db项目的config表新增一条数据，内容是请求的body[数据源前置插件-DB数据表-list]筛选请求第3页的20条数据[数据源前置插件-DB数据表-list]把headers.referer中的查询参数解析为对象[数据源后置插件-DB数据表-list]把请求的返回数据设置为{code:200,data:[{id:1,name:"test"}]}[数据源后置插件-DB数据表-list]请求响应体code=500时终止[数据源后置插件-HTTP请求]删除请求结果中的competed字段[数据源前置插件-DB数据表-list]设置请求的筛选：creator字段类似于wuji的数据 [数据源后置插件-DB数据表-list]在请求返回头的"res-user"添加当前用户id2024-06-1116:50:58平台级copilot-降低上手难度，提高开发效率智能化自动纠错一防止AI“抽风”AI功能的自动化测试一在平台迭代时确保功能稳定目录AI与低代码布用户输入AI计算新的布局直接更新页面布局·数据&接口授权需要用户亲自确认，不能AI代替执行·单次生成流程仅能接受一次用户输入，不方便动态调整·Al生成后页面直接刷新，用户无法感知其中的执行步骤让AI直接操作用户界面过程清晰可见旧的页面Al生成内容=>AI生成指令旧的页面用户输入AI生成操作步骤授权数据源·指令逐个执行，用户可以了解过程用户输入AI生成操作步骤授权数据源添加组件添加组件·操作原子化，减少模块迭代负担调整样式配置行为新的页面JSBridge:操作编辑器的接口调整样式新的页面操作用户界面遇到的问题将按钮的点击事件制作成钩子，有大量未接入AI的组件等待改造从dom将按钮的点击事件制作成钩子，有大量未接入AI的组件等待改造从组件层面操作：组件功能单一，容易定位从组件层面操作：组件功能单一，容易定位操作用户界面遇到的问题输入字段名或输入字段名或IDQ▼数据(data)9movie(电影)表单十方案一：从dom上下手优点：触发直接除非大量打点改造数据(data)9movie(电影)品aiv.ucd-datatitleV<divdata-type="object"guide-el='data-path-data'ds-data-pataTreeNodeisRootisExpandable"style="width:264px;">flex▶<divdraggable="false"titleclass="ucd-compSource">…</di▶<divclass="ucd-dataTreeNode-actionIconButton">…</div>(V<divclass="ucd-dataTreeNode-actionIconButton">flex操作用户界面遇到的问题优点：组件功能单一，不会轻易变动缺点：将绑定的事件抽取成钩子，也有大量改造成本输入字段名或IDQ▼数据(data)datadatakey:'openSourceAdd',title:'添加数据源',this.addSourceFromCollection·组件dom:可以从virtualdom上拿到，用于触发组件事件AI数据(data)AI点击按钮输入文本搜索属性找到对应的组件组件属性track原生事件入极客传媒生成过程中二次调整组件的基础信息(属性项定义，事件，方法)基本的指令集合(JSBridge)组件的基础信息(属性项定义，事件，方法)把颜色从#f8f8f8调整为#fcfcfc。U“切换横纵坐标”UU“切换横纵坐标”“生成柱状图”帮我把卡片的背景调亮一点AlAlAlgetCompInfo卡片的背景已经是以CSS样式的形式设置的，我们只需要把背景色的深浅调亮一点。在本次操作中，我将getCompInfo用户ChatGptW无极目录AI与低代码布Ftestvaidemo(/aidemo)V页面信息LessCode主页面十模板通用组件数据源页面输入字段名或ID十立刻添加高级设置扩展插件上传素材请放置组件搜索配置项(全局搜索)▶预览Q无极Al助手BetaC日X你好，请描述你的你好，请描述你的BI需求，目前我支持饼图、柱状图、折线图展示你的数据。(PS:请放心授权数据表，我只理解数据表的结构，不读取数据。)需求描述的例子：·基于这几个表提出3个统计需求并展示●展示客户的男女比例·展示指定客户名称(比如“李四”)的订单时间分布情况*授权数据库无极2.0新手村V*授权数据表歌手表×C导入配置▼页面变量(state)十十立刻添加+声日新的$Auiarv布局结构O撤销操作BI生成v①0O撤销操作J3unIEA!-zu,11J3uvsuIlyDECIMALS=21,FILE=22,//FileaddressOWNER=23,//Ownerofthedata,auserIDMODIFIER=24,//Lastmodifierofthedata,auserIDCODE_BLOCK=25,4: