【第3378期】AIGCDesign 开放式跨端 AI 组件解决方案

前言

京东零售技术团队启动了名为 AIGCDesign 的开放式跨端 AI 组件解决方案项目，旨在通过内源共建，提供支持多端多框架的 AI 组件库，以应对 AI 技术革新带来的业务需求激增，并介绍了该解决方案的设计开发理念和未来建设思考。今日前端早读课文章由 @家电家居生活产品研发部 - 前端研发组分享。

正文从这开始～～

下面这段话是来自 ChatGPT 对 AIGC 的定义：

AIGC（人工智能生成内容）指的是利用人工智能技术生成文本、图像、音频和视频等类型的内容。它通过机器学习模型，特别是深度学习模型，分析大量数据，学习语言或视觉模式，从而生成新的原创的内容。

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

2022 年 11 月 30 日，OpenAI 团队发布全新 ChatGPT 模型，通过简洁的聊天交互界面，实现涵盖诸多领域的内容输出，帮助用户回答问题、撰写文本、翻译语言、编写代码等多种任务。

【第3369期】Gemini：谷歌AI模型的革新之路

ChatGPT 的发布，给 AI 行业带来重大变革，发布之后搜索热度持续上升。

AIGC 搜索热度 - 数据来自 Google Trends

能力的跃升，带来了新产品新模式的发现机遇，作为一线业务研发，我们要做些什么才能够承接随着技术革新而带来的业务需求激增呢？

根据过往研发经验，快速交付大量同类型应用的场景，要有分层抽象的、类型丰富的组件沉淀，以支持多系统、多场景复用，同时结合 LowCode/NoCode 平台，通过搭建的方式快速产出应用。

同时，我们调研了业界已经初具规模的 6 类 AIGC 组件库，分析了各类组件库的共性和差异，也梳理了京东内部平台能力，在京东零售前端通道的支持下，启动了基于内源共建的开放式跨端 AI 组件解决方案项目。项目命名为：AIGCDesign 。

在接下来的章节，将为您详细介绍该解决方案的设计开发理念，以及对未来的建设思考。

【第3148期】前端DevOps平台的探索及设计理念

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

在项目开启之初，调研了行业内开源的高 Star 组件和应用，分别从可拓展性、组件覆盖度、端支持、框架支持等多方面进行了评测，具体如下表：

对于以上内容对比分析，我们提取了一些关键能力项：

轻量、快速开发、开箱即用
TailWind、React、Vue、Native
会话组件、多模态录入
响应式

根据以上关键项，结合京东内部多种多样的业务形式，以及支持灵活支持定制的需求，组件库要具备 Native、Web、MP、PC 等多端能力，支持 React、Vue、Android、iOS 等多种技术框架。

【第3371期】Cookie的secure属性引起循环登录问题分析及解决方案

结合以上，我们共识了方案的核心定位和目标：

三、AIGCDesign 的技术实现

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

3.1 整体技术架构

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

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

整体架构分为三层：

核心层：提供 AI 平台对接相关功能，包括各类基础模块和 API，在容器中或组件中引用，也可在项目中独立使用。
容器层：支持多端多框架的应用容器，内部对接大模型平台，提供基础 AI 会话交互，开放会话区域的高度自定义能力。
组件层：集合基础组件、业务组件和自定义组件，以供容器层渲染使用，通过组件映射的方式在容器组件中渲染。

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

对经常变更的业务组件 / 模块通过 H5 接入；
对不经常变更的容器组件、基础组件通过原生开发；
业务侧 Taro 组件，可以快速复用到 Native 项目中。

核心实现就拆分成了如下 3 部分：

原生基础组件：包含弹层、语音交互、Toast 提示、自定义头部、底部输入框、工具箱等等组件。
原生容器组件：负责整体事件、UI、接口请求等等配置，是 AIGC 组件的核心模块。
JDHybrid 扩展协议和 AIGC JSSDK：负责 H5 和原生容器组件交互和消息通信。

3.2 应用生命周期

容器组件提供应用生命周期方法，开发者可在每一个流程节点进行事件监听并获取最新应用状态，同时结合生命周期函数和容器属性，可进行定制化逻辑开发，灵活支持各类业务形态，生命周期主要特性有：

容器组件提供全流程生命周期事件，调用方可随时获取应用最新上下文和数据
默认提供京东言犀平台对接模块，使用基础配置即可解锁完整的 AI 会话交互基础流程
通过容器组件属性配置，灵活添加自定义流程控制：模型检索、会话渲染、生命周期等

主要支持以下生命周期 Hooks：

beforeLaunch：容器组件加载前执行
onLaunch：容器组件加载完成后执行
onSubmit：用户点击发送按钮后，请求大模型前执行
onLLMResult：大模型数据返回后执行，用于在组件外部获取返回数据
onChatUpdate：组件更新完成后执行，代表本次会话更新完成

3.3 用户交互和数据流转流程

交互界面和数据流转流程如下图：

3.4 最小化配置和自定义配置方案

组件库内置 AI 聊天全流程的交互，通过少量入参可实现基础功能的产出，也可以结合生命周期事件和相关属性进行定制化配置。

【第2813期】网易严选APP端上H5容器化建设

调用方引入容器组件，配置言犀平台 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 应用和组件初始化流程，接入方可直接在项目内引用组件渲染方法输出应用。

全包引用方式代码示例：

 
 <script src="https://storage.jd.com/taro/aigc-ui/1.0.6/aigcjdfe-autobots-full.umd.js">script>

 
 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 的投入：

根据架构设计，持续完善核心能力

平台能力建设：支持高度灵活的配置化能力，提供便捷的组件产出和搭建能力。
多端多框架能力建设：提供 NPM/UMD 等多种形式产物，输出多端容器和组件，实现技术栈无关的接入能力。
底层能力扩充：逐步融合 OCR、ASR/TTS、Agent、知识库等多种底层能力。

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>
   );
 };

对话框支持以下几种接口返回和渲染方式，接口流式和非流式返回都支持打字机和全量渲染效果：

流式数据处理方式会持续渲染对话框，需要对以下几点交互进行单独地优化处理：

对话渲染过程中不要引起父组件重新渲染
建议使用模拟输入效果，平缓的控制输入节奏
对话看内容超出屏幕外的情况，需要向上滚动页面，这种情况需要通过节流控制滚动节奏，避免页面闪动
对话输入过程中要禁止用户输入行为，如需继续对话，可点击中止后再进行用户输入行为

 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,
   ]);

关于本文
作者：@家电家居生活产品研发部 - 前端研发组
原文：https://juejin.cn/post/7409329136554557479

这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下。