Pro-Chat：一款面向未來的開源智能聊天組件

作者：徐小夕 2024-01-17 08:08:48

最近在 Github? 上看到一款非常有意思的開源項目, 定位是開箱即用的大模型對話前端解決方案, 我們使用它可以輕松構建聊天組件, 并且可以一鍵集成主流 AI? 大模型, 比如通義千問?, ChatGpt 等。 (讓前端再也不用從零寫聊天組件了~)

hi, 大家好, 我是徐小夕, 最近在 Github 上看到一款非常有意思的開源項目, 定位是開箱即用的大模型對話前端解決方案, 我們使用它可以輕松構建聊天組件, 并且可以一鍵集成主流 AI 大模型, 比如通義千問, ChatGpt 等。(讓前端再也不用從零寫聊天組件了~)

組件Demo演示

功能亮點

我根據自己的使用和實踐, 總結一下這款開源聊天組件的亮點:

簡單易用, 設計語言統一

它是基于 antd 組件庫進行的二次封裝, 所以我們可以輕松的在 antd 項目中使用, 保持 UI 視覺的統一。

使用啊安裝方式如下：

# @ant-design/pro-editor 基于 antd 和 antd-style，需要在項目中安裝
$ 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 ，我是你的專屬機器人，這是我們的 Github：[ProChat](https://github.com/ant-design/pro-chat)'
        }
        request={async (messages) => {
          const mockedData: string = `這是一段模擬的對話數據。本次會話傳入了${messages.length}條消息`;
          return new Response(mockedData);
        }}
      />
    </div>
  );
};

是不是使用非常簡單~

大模型對話能力集成

它內置了對話模型常用的：數據編輯、重新發送、刪除對話等這些默認的基本操作。

對AI模型友好的數據結構

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、通義千問等市面上主流的大模型入參出參，減少前端開發者對這些入參和出參的處理。

支持豐富的聊天場景, 并且可以根據業務靈活擴展

組件化 & 完善的ts類型定義

圖片

我們可以通過組件暴露的屬性輕松自定義, 并且代碼質量和代碼規范非常優質。

集成ChatGPT的簡單案例

安裝依賴

npm install ai --save
npm install openai --save

# or use yarn 、bun、pnpm any else
bun add ai
bun add openai

業務代碼

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

設計界面

"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步就能幫你搭建一個AI聊天應用, 大家感興趣的可以嘗試使用一下。

Github 地址：https://github.com/ant-design/pro-chat

文檔地址：https://pro-chat.antdigital.dev/

責任編輯：武曉燕來源：趣談前端

github?開源項目

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

Pro-Chat：一款面向未來的開源智能聊天組件

組件Demo演示

功能亮點

集成ChatGPT的簡單案例