Pro-Chat:一款面向未来的开源智能聊天组件

趣谈前端 2024-01-18 16:31:32编程技术
18

hi, 大家好, 我是徐小夕, 最近在 Github 上看到一款非常有意思的开源项目, 定位是开箱即用的大模型对话前端解决方案, 我们使用它可以轻松构建聊天组件, 并且可以一键集成主流 AI 大模型, 比如 通义千问, ChatGpt 等。(让前端再也不用从零写聊天组件了~)

Pro-Chat.png

组件Demo演示

Pro-Chat2.gif

Pro-Chat3.png

功能亮点

我根据自己的使用和实践, 总结一下这款开源聊天组件的亮点:

  • 简单易用, 设计语言统一

Pro-Chat4.png

它是基于 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>
  );
};

是不是使用非常简单~

  • 大模型对话能力集成

Pro-Chat5.png

它内置了对话模型常用的:数据编辑、重新发送、删除对话等这些默认的基本操作。

  • 对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、通义千问等市面上主流的大模型入参出参,减少前端开发者对这些入参和出参的处理。

  • 支持丰富的聊天场景, 并且可以根据业务灵活扩展

Pro-Chat6.png

  • 组件化 & 完善的ts类型定义

Pro-Chat7.png

Pro-Chat8.png图片

我们可以通过组件暴露的属性轻松自定义, 并且代码质量和代码规范非常优质。

集成ChatGPT的简单案例

  1. 安装依赖

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

# or use yarn 、bun、pnpm any else
bun add ai
bun add openai
  1. 业务代码

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);
};
  1. 设计界面

"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/

开源
THE END
tom
不图事事圆满 但图事事甘心。

相关推荐

经典音乐播放器 Winamp 源代码开源引发争议,新许可协议限制严格
近日,经典的 Windows 平台第三方音乐播放器 Winamp 正式在 GitHub 上公开了其 Windows 端的源代码。这一举措本应受到开发者和用户的热烈欢迎,但由于其严格的 Winamp Collab...
2024-09-26 新闻资讯
121

知名Web服务器软件 Nginx 迁移至 GitHub,推动开源发展迈向新台阶
近日,知名Web服务器软件 NGINX 宣布其官方开源开发存储库已从 Mercurial 迁移至 GitHub,今后,NGINX 将在 GitHub 上以接受拉取请求(Pull Requests)的形式开始接受贡献。同时...
2024-09-11 新闻资讯
132

FastAdmin:一款开源免费的极速后台开发框架
FastAdmin 是基于 PHP 语言,结合 ThinkPHP 和 Bootstrap 两大主流技术构建而成的后台开发框架。ThinkPHP 是一款优秀的 PHP 开发框架,具有简洁、高效、易扩展等特点,为 Fas...
2024-09-06 编程技术
139

Tailor:一款开源免费的AI智能视频剪辑工具
Tailor(中文简称:泰勒)是一款开源免费的AI智能视频剪辑工具,具有 Apache - 2.0 许可证。它主要包括视频剪辑、视频生成和视频优化三大类视频处理方向,共 10 种方法。Tailor...
2024-09-01 电脑知识
225

阿里巴巴开源Qwen2-VL:革新多模态AI,超越GPT-4o的性能
阿里巴巴集团近日宣布开源其最新研发的视觉多模态模型——Qwen2-VL,Qwen2-VL模型在多项性能测试中超越了包括OpenAI的GPT-4o和Anthropic的Claude3.5-Sonnet在内的多个著名闭源...
2024-08-30 新闻资讯
118

Awesome-Digital-Human:基于Dify的开源AI数字人技术框架
Awesome-Digital-Human 是一个基于现代技术和AI服务的开源数字人技术框架,旨在帮助开发者快速搭建具备高度定制化和扩展性的数字人平台。该项目不仅适合初学者,也适合经验丰...
2024-08-27 编程技术
145