Pro-Chat: 一款面向未來的開源智能聊天組件
hi, 大家好, 我是徐小夕, 最近在 github 上看到一款非常有意思的開源項(xiàng)目, 定位是開箱即用的大模型對話前端解決方案, 我們使用它可以輕松構(gòu)建聊天組件, 并且可以一鍵集成主流 AI 大模型, 比如 通義千問, ChatGpt 等. (讓前端再也不用從零寫聊天組件了~)
我會(huì)在文末貼上這款 開源聊天組件 的文檔地址和 github 地址.
組件demo演示
功能亮點(diǎn)
我根據(jù)自己的使用和實(shí)踐, 總結(jié)一下這款開源聊天組件的亮點(diǎn):
- 簡單易用, 設(shè)計(jì)語言統(tǒng)一
它是基于 antd 組件庫進(jìn)行的二次封裝, 所以我們可以輕松的在 antd 項(xiàng)目中使用, 保持 UI 視覺的統(tǒng)一.
使用啊安裝方式如下:
# @ant-design/pro-editor 基于 antd 和 antd-style，需要在項(xiàng)目中安裝
$ npm install antd antd-style -S
$ npm install @ant-design/pro-chat -S
使用:
import { ProChat } from '@ant-design/pro-chat';
import { useTheme } from 'antd-style';
export default () => {
const theme = useTheme();
return (
<div style={{ background: theme.colorBgLayout }}>
<ProChat
helloMessage={
'歡迎使用 ProChat ，我是你的專屬機(jī)器人，這是我們的 Github：[ProChat](https://github.com/ant-design/pro-chat)'
}
request={async (messages) => {
const mockedData: string = `這是一段模擬的對話數(shù)據(jù)。本次會(huì)話傳入了${messages.length}條消息`;
return new Response(mockedData);
}}
/>
</div>
);
};
是不是使用非常簡單~
- 大模型對話能力集成
它內(nèi)置了對話模型常用的：數(shù)據(jù)編輯、重新發(fā)送、刪除對話等這些默認(rèn)的基本操作.
- 對AI模型友好的數(shù)據(jù)結(jié)構(gòu)
const dataArray = [
`data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "蘋"}, "index": 0, "finish_reason": null}]}`,
`data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "果"}, "index": 0, "finish_reason": null}]}`,
`data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "公司"}, "index": 0, "finish_reason": null}]}`,
`data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "是"}, "index": 0, "finish_reason": null}]}`,
`data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "一"}, "index": 0, "finish_reason": null}]}`,
`data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "家"}, "index": 0, "finish_reason": null}]}`,
`data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "科技"}, "index": 0, "finish_reason": null}]}`,
`data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "公司"}, "index": 0, "finish_reason": "complete"}]}`,
];
參照 ChatGPT、GLM、通義千問等市面上主流的大模型入?yún)⒊鰠?，減少前端開發(fā)者對這些入?yún)⒑统鰠⒌奶幚?
- 支持豐富的聊天場景, 并且可以根據(jù)業(yè)務(wù)靈活擴(kuò)展
- 組件化 & 完善的ts類型定義
我們可以通過組件暴露的屬性輕松自定義, 并且代碼質(zhì)量和代碼規(guī)范非常優(yōu)質(zhì).
集成ChatGPT的簡單案例
- 安裝依賴
npm install ai --save
npm install openai --save
# or use yarn 、bun、pnpm any else
bun add ai
bun add openai
- 業(yè)務(wù)代碼
import OpenAI from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';
export const POST = async (request: Request) => {
const { messages = [] }: Partial<{ messages: Array<any> }> = await request.json();
const openai = new OpenAI({
apiKey: 'OpenAI Key',
baseURL: 'base url',
});
const response = await openai.chat.completions.create({
model: 'gpt-3.5-turbo',
messages: [...messages],
stream: true,
});
const stream = OpenAIStream(response);
return new StreamingTextResponse(stream);
};
- 設(shè)計(jì)界面
"use client";
import { ProChat } from "@ant-design/pro-chat";
import { useTheme } from "antd-style";
export default function Home() {
const theme = useTheme();
return (
<div
style={{
backgroundColor: theme.colorBgLayout,
}}
>
<ProChat
style={{
height: "100vh",
width: "100vw",
}}
request={async (messages: Array<any>) => {
const response = await fetch("/api/openai", {
method: "POST",
body: JSON.stringify({ messages: messages }),
});
return response;
}}
/>
</div>
);
}
是不是很簡單, 3步就能幫你搭建一個(gè)AI聊天應(yīng)用, 大家感興趣的可以嘗試使用一下.
github 地址: https://github.com/ant-design/pro-chat
文檔地址: https://pro-chat.antdigital.dev/
?? 謝謝支持以 上 便 是 本 次 分 享 的 全 部 內(nèi) 容 ， 希 望 對 你 有 所 幫 助 ^ _ ^
喜 歡 的 話 別 忘 了 分 享 、 點(diǎn) 贊 、 收 藏 三 連 哦 ~ 。
Dooring可視化搭建平臺數(shù)據(jù)源設(shè)計(jì)剖析
基于Koa + React + TS從零開發(fā)全棧文檔編輯器(進(jìn)階實(shí)戰(zhàn)
點(diǎn)個(gè)在看你最好看
評論
圖片
表情