[Docs] 开发介绍文档 #146
Comments
canisminor1990
added
the
📝 Documentation
架构设计根据 LobeChat 的实际组成部分来调整应用架构的章节。以下是一个可能的章节划分： 应用架构概览：在这个部分，提供一个整体的应用架构概览，包括前端、EdgeRuntime API、Agents 市场、插件市场以及独立插件的组成。你可以使用图表或者流程图来清晰地展示各个组件之间的关系。 前端架构：详细描述前端的架构设计，包括使用的技术栈、前端框架、UI组件库等。描述每个组件的职责以及它们如何协同工作。 EdgeRuntime API：解释 EdgeRuntime API 的角色和功能，以及它是如何与前端和其他部分进行交互的。 Agents 市场：详细描述 Agents 市场的设计和工作原理，以及它如何与其他部分进行交互。 插件市场：详细描述插件市场的设计和工作原理，以及它如何与其他部分进行交互。 独立插件：详细描述独立插件的设计和工作原理，以及它如何与其他部分进行交互。 数据流和交互：描述应用中的数据流以及不同模块之间的交互方式。你可以使用数据流图来清晰地展示数据在系统中的流动路径。 安全性和性能优化：解释你如何设计和实现应用的安全性策略，例如身份验证、权限管理等。同时，也可以描述你如何优化应用的性能，包括加载速度、响应时间等。 开发和部署流程：最后，解释开发流程，包括版本控制、测试、持续集成和持续部署。 每个部分都需要详细解释你的设计决策，以及这些决策如何影响应用的功能性、可靠性、效率和可维护性。 基于框架的草稿：https://sharegpt.com/c/Gdn3twl LobeChat 是一个基于 Next.js 框架构建的 AI 会话应用，旨在提供一个智能会话平台，使用户能够与 AI 进行自然语言交互。以下是 LobeChat 的架构设计介绍草稿： 应用架构概览LobeChat 的整体架构由前端、EdgeRuntime API、Agents 市场、插件市场和独立插件组成。这些组件相互协作，以提供完整的智能会话体验。 前端架构LobeChat 的前端采用 Next.js 框架，利用其强大的 SSR（服务器端渲染）能力和路由功能。前端使用了一系列技术栈，包括 antd 组件库和 lobe-ui AIGC 组件库、zustand 状态管理、swr 请求库、i18next 国际化库等。这些技术栈共同支持了 LobeChat 的功能和特性。 前端架构中的组件包括 app、components、config、const、features、helpers、hooks、layout、locales、migrations、prompts、services、store、styles、types 和 utils。每个组件都有特定的职责，并与其他组件协同工作，以实现不同的功能。 EdgeRuntime APIEdgeRuntime API 是 LobeChat 的核心组件之一，负责处理 AI 会话的核心逻辑。它提供了与 AI 引擎的交互接口，包括自然语言处理、意图识别和回复生成等。EdgeRuntime API 与前端进行通信，接收用户的输入并返回相应的回复。它还与 Agents 市场、插件市场和独立插件进行交互，以提供更丰富的功能和扩展性。 Agents 市场Agents 市场是 LobeChat 的一个重要组成部分，它提供了各种预训练的 AI Agent，用于处理特定的任务和领域。Agents 市场与 EdgeRuntime API 进行交互，将用户的输入传递给相应的 Agent 进行处理，并返回处理结果。Agents 市场还提供了管理和部署 Agent 的功能，使用户能够自定义和配置 Agent 的行为。 插件市场插件市场是 LobeChat 的另一个关键组件，它提供了各种插件，用于扩展 LobeChat 的功能和特性。插件可以是独立的功能模块，也可以与 Agents 市场的 Agent 进行集成。插件市场与 EdgeRuntime API 进行交互，将用户的输入传递给相应的插件进行处理，并返回处理结果。插件市场还提供了管理和部署插件的功能，使用户能够根据需求选择和配置插件。 独立插件独立插件是 LobeChat 的一个重要特性，它允许用户开发和部署自定义的插件。独立插件可以与 Agents 市场的 Agent 进行集成，也可以作为独立的功能模块存在。独立插件通过与 EdgeRuntime API 进行交互，接收用户的输入并返回相应的处理结果。用户可以根据自己的需求开发和配置独立插件，以扩展 LobeChat 的功能和特性。 数据流和交互LobeChat 中的数据流和交互是基于前端、EdgeRuntime API、Agents 市场、插件市场和独立插件之间的协作。用户在前端界面输入文本，前端将用户的输入发送给 EdgeRuntime API。EdgeRuntime API 根据输入内容进行自然语言处理和意图识别，并选择合适的 Agent 或插件进行处理。Agent 或插件将处理结果返回给 EdgeRuntime API，再由 EdgeRuntime API 返回给前端界面展示给用户。 安全性和性能优化LobeChat 的安全性策略包括身份验证和权限管理。用户需要进行身份验证后才能使用 LobeChat，同时根据用户的权限进行相应的操作限制。 为了优化性能，LobeChat 使用了 Next.js 的 SSR 功能，实现了快速的页面加载和响应时间。此外，还采用了一系列的性能优化措施，包括代码分割、缓存和资源压缩等。 开发和部署流程LobeChat 的开发流程包括版本控制、测试、持续集成和持续部署。开发团队使用版本控制系统进行代码管理，并进行单元测试和集成测试以确保代码质量。持续集成和持续部署流程确保了代码的快速交付和部署。 以上是 LobeChat 的架构设计介绍草稿，详细解释了各个组件的职责和协作方式，以及设计决策对应用功能和性能的影响。 |
资源与参考LobeChat 设计、开发过程使用或者参考到的资源或指南：
持续补充中 |
大模型 会话实现核心会话 API // src/app/api/openai/chat/handler.ts
export const runtime = 'edge';
export const POST = async (req: Request) => {
const payload = await req.json();
const { apiKey, endpoint } = getOpenAIAuthFromRequest(req);
const openai = createOpenai(apiKey, endpoint);
return createChatCompletion({ openai, payload });
};
会话结果： // src/app/api/openai/chat/createChatCompletion.ts
import { OpenAIStream, StreamingTextResponse } from 'ai';
export const createChatCompletion = async ({ payload, openai }: CreateChatCompletionOptions) => {
// ============ 1. preprocess messages ============ //
const { messages, ...params } = payload;
const formatMessages = messages.map((m) => ({
content: m.content,
name: m.name,
role: m.role,
}));
// ============ 2. send api ============ //
const response = await openai.chat.completions.create(
{
messages: formatMessages,
...params,
stream: true,
},
{ headers: { Accept: '*/*' } },
);
const stream = OpenAIStream(response);
return new StreamingTextResponse(stream);
};前端集成： // src/services/chatModel.ts
import { merge } from 'lodash-es';
import { pluginSelectors, usePluginStore } from '@/store/plugin';
import { initialLobeAgentConfig } from '@/store/session/initialState';
import type { ChatCompletionFunctions, OpenAIStreamPayload } from '@/types/openai';
import { createHeaderWithOpenAI } from './_header';
import { OPENAI_URLS } from './_url';
interface FetchChatModelOptions {
signal?: AbortSignal | undefined;
}
/**
* 专门用于对话的 fetch
*/
export const fetchChatModel = (
{ plugins: enabledPlugins, ...params }: Partial<OpenAIStreamPayload>,
options?: FetchChatModelOptions,
) => {
const payload = merge(
{
model: initialLobeAgentConfig.model,
stream: true,
...initialLobeAgentConfig.params,
},
params,
);
// ============ 1. 前置处理 functions ============ //
const filterFunctions: ChatCompletionFunctions[] = pluginSelectors.enabledSchema(enabledPlugins)(
usePluginStore.getState(),
);
const functions = filterFunctions.length === 0 ? undefined : filterFunctions;
return fetch(OPENAI_URLS.chat, {
body: JSON.stringify({ ...payload, functions }),
headers: createHeaderWithOpenAI({ 'Content-Type': 'application/json' }),
method: 'POST',
signal: options?.signal,
});
};使用流式获取结果的核心方法 // src/utils/fetch.ts
/**
* 使用流式方法获取数据
* @param fetchFn
* @param options
*/
export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchSSEOptions = {}) => {
const response = await fetchFn();
// 如果不 ok 说明有请求错误
if (!response.ok) {
const chatMessageError = await getMessageError(response);
options.onErrorHandle?.(chatMessageError);
return;
}
const returnRes = response.clone();
const data = response.body;
if (!data) return;
const reader = data.getReader();
const decoder = new TextDecoder();
let done = false;
while (!done) {
const { value, done: doneReading } = await reader.read();
done = doneReading;
const chunkValue = decoder.decode(value);
options.onMessageHandle?.(chunkValue);
}
return returnRes;
}; |
功能实现如何实现一个大的功能模块？
|
与 LobeChat 文档专家互动，共建书写开发文档
The text was updated successfully, but these errors were encountered: