一、我们为什么要做这样的一件事情？

二、前期调研：当前 AIGC 行业内前端 AI 组件库的进展

三、AIGCDesign 的技术实现

根据核心目标，确认技术选型、技术架构和技术实现细节。

3.1 整体技术架构

组件库借助 Taro 的跨端能力，输出MP、H5的组件，通过 Web 端的响应式方案，同时支持 H5 和 PC 端的内容输出，也支持单 React 应用。

内部集成AI接口请求能力（京东言犀），开发者只需引用容器组件，进行简单的配置，即可「开箱即用」的输出AI应用，若当前组件的功能不能满足部分业务形态，组件库也提供了大量自定义接口，开发者可进行高定制化开发，灵活对接私域大模型服务。

整体架构分为三层：

•核心层：提供AI平台对接相关功能，包括各类基础模块和API，在容器中或组件中引用，也可在项目中独立使用。

•容器层：支持多端多框架的应用容器，内部对接大模型平台，提供基础AI会话交互，开放会话区域的高度自定义能力。

•组件层：集合基础组件、业务组件和自定义组件，以供容器层渲染使用，通过组件映射的方式在容器组件中渲染。

原生实现方面，我们采用基于 JDHybrid 的混合架构：

1）对经常变更的业务组件/模块通过 H5 接入；

2）对不经常变更的容器组件、基础组件通过原生开发；

3）业务侧 Taro 组件，可以快速复用到 Native 项目中。

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// 言犀平台apiKeyapiKey='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"><MarkdownrehypePlugins={[[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,]);

扫一扫，加入技术交流群