作者:家电家居生活产品研发部-前端研发组
下面这段话是来自 ChatGPT 对 AIGC 的定义:
AIGC(人工智能生成内容)指的是利用人工智能技术生成文本、图像、音频和视频等类型的内容。它通过机器学习模型,特别是深度学习模型,分析大量数据,学习语言或视觉模式,从而生成新的原创的内容。
一、我们为什么要做这样的一件事情?
2022年11月30日,OpenAI 团队发布全新ChatGPT模型,通过简洁的聊天交互界面,实现涵盖诸多领域的内容输出,帮助用户回答问题、撰写文本、翻译语言、编写代码等多种任务。
ChatGPT 的发布,给 AI 行业带来重大变革,发布之后搜索热度持续上升。
AIGC搜索热度-数据来自Google Trends
能力的跃升,带来了新产品新模式的发现机遇,作为一线业务研发,我们要做些什么才能够承接随着技术革新而带来的业务需求激增呢?
根据过往研发经验,快速交付大量同类型应用的场景,要有分层抽象的、类型丰富的组件沉淀,以支持多系统、多场景复用,同时结合 LowCode/NoCode 平台,通过搭建的方式快速产出应用。
同时,我们调研了业界已经初具规模的6类 AIGC 组件库,分析了各类组件库的共性和差异,也梳理了京东内部平台能力,在京东零售前端通道的支持下,启动了基于内源共建的开放式跨端 AI 组件解决方案项目。项目命名为:AIGCDesign 。
在接下来的章节,将为您详细介绍该解决方案的设计开发理念,以及对未来的建设思考。
二、前期调研:当前 AIGC 行业内前端 AI 组件库的进展
在项目开启之初,调研了行业内开源的高 Star 组件和应用,分别从可拓展性、组件覆盖度、端支持、框架支持等多方面进行了评测,具体如下表:
对于以上内容对比分析,我们提取了一些关键能力项:
•轻量、快速开发、开箱即用
•TailWind、React、Vue、Native
•会话组件、多模态录入
•响应式
根据以上关键项,结合京东内部多种多样的业务形式,以及支持灵活支持定制的需求,组件库要具备 Native、Web、MP、PC 等多端能力,支持 React、Vue、Android、iOS 等多种技术框架。
结合以上,我们共识了方案的核心定位和目标:
三、AIGCDesign 的技术实现
根据核心目标,确认技术选型、技术架构和技术实现细节。
3.1 整体技术架构
组件库借助 Taro 的跨端能力,输出MP、H5的组件,通过 Web 端的响应式方案,同时支持 H5 和 PC 端的内容输出,也支持单 React 应用。
内部集成AI接口请求能力(京东言犀),开发者只需引用容器组件,进行简单的配置,即可「开箱即用」的输出AI应用,若当前组件的功能不能满足部分业务形态,组件库也提供了大量自定义接口,开发者可进行高定制化开发,灵活对接私域大模型服务。
整体架构分为三层:
•核心层:提供AI平台对接相关功能,包括各类基础模块和API,在容器中或组件中引用,也可在项目中独立使用。
•容器层:支持多端多框架的应用容器,内部对接大模型平台,提供基础AI会话交互,开放会话区域的高度自定义能力。
•组件层:集合基础组件、业务组件和自定义组件,以供容器层渲染使用,通过组件映射的方式在容器组件中渲染。
原生实现方面,我们采用基于 JDHybrid 的混合架构:
1)对经常变更的业务组件/模块通过 H5 接入;
2)对不经常变更的容器组件、基础组件通过原生开发;
3)业务侧 Taro 组件,可以快速复用到 Native 项目中。
核心实现就拆分成了如下 3 部分:
1)原生基础组件:包含弹层、语音交互、Toast 提示、自定义头部、底部输入框、工具箱等等组件。
2)原生容器组件:负责整体事件、UI、接口请求等等配置,是 AIGC 组件的核心模块。
3)JDHybrid 扩展协议和 AIGC JSSDK:负责 H5 和原生容器组件交互和消息通信。
3.2 应用生命周期
容器组件提供应用生命周期方法,开发者可在每一个流程节点进行事件监听并获取最新应用状态,同时结合生命周期函数和容器属性,可进行定制化逻辑开发,灵活支持各类业务形态,生命周期主要特性有:
•容器组件提供全流程生命周期事件,调用方可随时获取应用最新上下文和数据
•默认提供京东言犀平台对接模块,使用基础配置即可解锁完整的AI会话交互基础流程
•通过容器组件属性配置,灵活添加自定义流程控制:模型检索、会话渲染、生命周期等
主要支持以下生命周期 Hooks:
•beforeLaunch:容器组件加载前执行
•onLaunch:容器组件加载完成后执行
•onSubmit:用户点击发送按钮后,请求大模型前执行
•onLLMResult:大模型数据返回后执行,用于在组件外部获取返回数据
•onChatUpdate:组件更新完成后执行,代表本次会话更新完成
3.3 用户交互和数据流转流程
交互界面和数据流转流程如下图:
3.4 最小化配置和自定义配置方案
组件库内置AI聊天全流程的交互,通过少量入参可实现基础功能的产出,也可以结合生命周期事件和相关属性进行定制化配置。
调用方引入容器组件,配置言犀平台 apiKey 和大模型平台路径,即可输出聊天记录界面:
import AiContainer from "@aigcui/container";
...
<AiContainer
// 言犀平台apiKey
apiKey='xxx'
// 大模型接口的路径
aiPath='/ChatRhino/api/v1/chat/completions'
/>
...
结合生命周期事件和相关属性配置,可自定义以下功能:
•大模型请求:调用方可自行进行大模型接口请求,并将会话数据注入容器,容器根据注入的数据进行会话区域渲染
•会话区域渲染:会话区域可完全交由调用方自定义渲染
•会话输入区域扩展图标:会话输入区域扩展图标支持自定义配置,支持展开收起功能
•快捷操作区域:输入框上方支持快捷操作区域的自定义渲染
•会话卡片头尾区域:会话卡片头部和底部支持自定义渲染
3.5 Web平台多框架支持方案
为实现多开发框架的支持,除了借助 Taro 跨端解决方案外,组件库还提供了 UMD 产物,可通过加载 JS 文件的方式,将组件渲染至指定 DOM 节点,同时结合 AutoBots 平台能力,进行AI应用输出。
UMD 组件基于 React 开发框架开发,若项目内已经全局挂载 React 环境,可引用纯组件代码包使用,若全局无 React 环境,则可引用组件库全包进行渲染,全包集成 React 框架代码,内部处理 React 应用和组件初始化流程,接入方可直接在项目内引用组件渲染方法输出应用。
全包引用方式代码示例:
<!-- 加载组件库 UMD 文件 -->
<script src="https://storage.jd.com/taro/aigc-ui/1.0.6/aigcjdfe-autobots-full.umd.js"></script>
<!-- 调用render方法渲染对应组件,输出至 ID 为 app 的元素内 -->
window['autobots-full'].renderAiChatBubble({
width: 500,
height: 500,
chatInfo: {
agentId: 'xxx',
token: 'xxxxxx',
}
}, 'app')
四、业务接入案例
基于以上共建形式,目前已有多端案例接入:
五、AIGCDesign 长期努力的方向和价值
组件库目前已经支持MP、Web、Hybrid、Android 的AI会话基础能力,通过自定义配置可支持大部分 AI 聊天交互场景,最新版本为 1.0.6 版本,提供MP端 8 个会话组件和 Web 端 14 个业务组件。Autobots 组件除 NPM 包引入外,还支持 UMD 方式接入,实现技术栈无关的全量适配能力。
在接下来的时间里,我们将在以下 2 个方面加大对 AIGCDesign 的投入:
1、根据架构设计,持续完善核心能力
•平台能力建设:支持高度灵活的配置化能力,提供便捷的组件产出和搭建能力。
•多端多框架能力建设:提供 NPM/UMD 等多种形式产物,输出多端容器和组件,实现技术栈无关的接入能力。
•底层能力扩充:逐步融合 OCR、ASR/TTS、Agent、知识库等多种底层能力。
2、 2B端/2C端多业务形态支持,多场景交互形式拓展
•场景化能力扩展:支持 B/C 端通用的场景化AI交互能力和组件,极低成本快速接入。
•通用能力支持:结合 AI 能力,拓展非对话框场景交互能力。提供高度可配置化交互组件,支持数据源配置和交互定制化,配合投放平台,满足营销、办公等各类场景。
相信在京东零售前端通道内源共建小组的努力、内外部贡献者的协同建设以及京东丰富业务场景的加持下,AIGCDesign 一定能够交付更多优秀的能力和组件,为研发提效和业务赋能带来更大、更多的价值。
附、流式处理技术点扩展
1、流式数据接收和处理
1.1 在与 AI 对话的过程中比较常用的方式是通过请求支持流式数据的 API 来获取数据,这样用户可以更快的看到相应数据和输入过程。
1.2 在前端通过fetch实现流式接口数据请求,依赖于 ReadableStream 接口。通过逐块读取数据并进行处理,可以实现对流式数据的高效处理。同时,使用 AbortController 可以实现请求的中止,提供更灵活地控制。
async function fetchStream(url, params) {
const { onmessage, onclose, ...otherParams } = params;
const response = await fetch(url, otherParams);
const reader = response.body.getReader();
const decoder = new TextDecoder();
let result = '';
while (true) {
const { done, value } = await reader.read();
if (done) {
onclose?.();
break;
};
result = decoder.decode(value, { stream: true });
// 处理接收到的数据块
onmessage?.(result);
}
console.log('Stream complete');
}
const controller = new AbortController();
const signal = controller.signal;
fetchStream('https://example.com/stream-endpoint', {
signal,
onmessage: (text) => { console.log(text); }
onclose: () => { console.log('Stream abort'); }
});
// 如果需要提前结束输入,通过调用以下中止请求和修改输入结束状态实现
controller.abort();
流式处理数据的方式有2种:
•正常按照流式的方式处理
触发 onmessage 的时候把拼装好的数据传入 handleData 方法实时调用
•按非流式的方式处理
当流式接口返回 已完成标识后,把拼装好的数据,一次行调用 handleData
2、流式 Markdown 渲染
当前已实现 AIGC Web 端组件库流式 Markdown 渲染,通过 react-markdown 组件包裹输入内容,配合 rehype-highlight 等工具实现 markdown 方式输入内容,通过 components 属性,可自定义 markdown 标签渲染
const BubbleMarkdown: React.FC<{ children?: string }> = ({ children }) => {
return (
<div className="chat-result-bubble-text chat-result-bubble-markdown">
<Markdown
rehypePlugins={[
[
RehypeHighlight,
{
detect: false,
ignoreMissing: true,
},
],
]}
components={{
// pre: PreCode,
a: (aProps) => {
const href = aProps?.href || "";
const isInternal = /^/#/i.test(href);
const target = isInternal ? "_self" : aProps?.target ?? "_blank";
return <a {...aProps} target={target} />;
},
}}
>
{children}
</Markdown>
</div>
);
};
对话框支持以下几种接口返回和渲染方式,接口流式和非流式返回都支持打字机和全量渲染效果:
输入方式\效果 | 模拟打字机效果渲染 | 一次全量渲染 |
---|---|---|
接口流式返回 | | |
接口非流式返回 | | |
流式数据处理方式会持续渲染对话框,需要对以下几点交互进行单独地优化处理:
1)对话渲染过程中不要引起父组件重新渲染
2)建议使用模拟输入效果,平缓的控制输入节奏
3)对话看内容超出屏幕外的情况,需要向上滚动页面,这种情况需要通过节流控制滚动节奏,避免页面闪动
4)对话输入过程中要禁止用户输入行为,如需继续对话,可点击中止后再进行用户输入行为
useEffect(() => {
if (!isEnd) {
// 如果服务端返回数据结束,且当前展示文本等于服务端返回文本,则停止输入
setEntering(!(responseEnded && content === text));
// 如果是模拟输入,且当前展示文本不等于服务端返回文本,则继续输入
if (
simulate &&
content &&
content !== text &&
// 以下逻辑解决流式数据接入且为模拟输入时,文本长度重复触发文本更新问题
text.length === len.current
) {
const { time, char } = getInputTimeAndChar(
content,
simulateSpeed,
inputTimeAndCharMap,
);
const randomLen = getRandomInt(char?.[0] || 2, char?.[1] || 6);
len.current +=
len.current + randomLen > content.length
? content.length - len.current
: randomLen;
timeout.current = setTimeout(
() => {
setText(content?.slice(0, len.current) || "");
},
getRandomInt(time?.[0] || 60, time?.[1] || 200),
);
}
// 非模拟输入,直接展示服务端返回文本
if (!simulate) {
setText(content || "");
}
}
}, [ responseEnded, text, content, simulate, isEnd, simulateSpeed, inputTimeAndCharMap, ]);