林瑞虹-生成式 UI ：AI 交互新模式探索.pdf

1、生成式UI:AI交互新模式探索林瑞虹云软件体验技术团队（华为）/高级开发工程师目录010203生成式UI开启AI交互新模式生成式UI 原理与基于场景落地扩展协议对比与标准化争论开启AI交互新模式生成式UI改善文本对话体验，可视化直观清晰传统AI交互多为高密度长文本流，理解成本高。生成式UI能自动将文本转化为柱状图、饼图等可视化图表，大幅提升信息获取效率。信息降维将复杂数据转化为视觉语言直观高效一眼识别关键趋势与结论自动生成无需手动操作，AI 实时渲染MarkdownMarkdown效果效果使用生成式使用生成式UIUI优化多轮信息交互，贴合业务降低门槛在多轮对话中，用户需要反复输入指令来确认选项

2、，过程繁琐。生成式UI可以直接生成可视化的选择界面，用户通过点击即可完成操作，大大简化了交互流程，降低了用户的使用门槛，让AI交互更贴合实际业务场景文本交互繁琐指令输入可视化可视化UI一键点击操作千人千面实时渲染，告别“预制”轻松调整生成式UI打破传统“预制”限制，基于用户偏好实时渲染内容。无论是严谨的专业报告，还是活泼的演示文稿，只需简单指令即可一键切换文案、配色与布局，实现真正的个性化体验。严谨专业严谨专业活泼生动活泼生动OpenTiny GenUI SDK 多轮对话案例 Github：https:/ prompt:You are a helpful assistant.Please re

3、sponse in following format:xxx工具调用Chat Request:,tools:,parameters:type:object,properties:xxx,指定格式Chat Request（OpenAI）:,response_format:type:json_schema,json_schema:schema:xxx 相同点：可以使用 JSON Schema 描述结构化输出基于JSON的声明式UI低代码平台页面协议TinyEngine低代码引擎生成式UI componentName:Page,state:,children:componentName:”div,p

4、rops”:/,/渲染器+UI描述协议采用低代码协议，通过声明式UI的结构化输出和渲染，实现AI自主展示UI界面原理：流式增量渲染大模型输出特点：流式实现局部增量渲染通过fixJson闭合JSON componentName:Page,children:componentName:”Text,props”:“text”:”Hello,World!”,完整的JSON componentName:Page,children:componentName:Text,props”:“text:Hello,World!”,不完整的JSON渲染器 componentName:Page,children:co

5、mponentName:Text,props:“text”:”Hello,”渲染器全量渲染增量渲染通过diff-patch实现仅追加变更集，维持内存稳定前序当前TextText，TextTextTextText前序当前TextText，Text =当前 已有；已有=已有+;Text，Text已有=前序TextTextTextTextdiffpatch减少内存占用避免全量重绘复杂场景高性能原理：缓冲保护区无缓冲渲染场景缓冲保护区核心机制：从 Delta 变化集中获取当前最后一个变化中的值，如果该值匹配到了缓冲规则，则拦截从 Delta 变化集删除该变化不体现，仅推送其他非最后的更新；被删除的变化

6、需要等待下一轮更新，当全部更新完毕或者变化值不是最后一条变化值时，可以推送该更新。拦截异常信息 保障渲染稳定 降低系统开销componentName:img,props:src:http:/ componentName:Text,props:text:Hello World componentName:TinyButton信息展示型字符串枚举类型字符串资源地址表达式/函数声明type:JSFunction,value:function()console.log(foo)1234缓冲规则示例componentNamecomponentName=img props srctype=JSFuncti