搭建一个AI对话机器人——前端ChatUI使用纪录

这篇具有很好参考价值的文章主要介绍了搭建一个AI对话机器人——前端ChatUI使用纪录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近在使用 OpenAI 的 gpt api 搞着玩玩,然后就遇上了前端对话交互实现的需求场景,如何快速实现 CUI(Chat User Interface)成了问题。最后选择了来自阿里达摩院的ChatUI,本人便用于整理其使用经验。

介绍

服务于对话领域的设计和开发体系,助力智能对话机器人的搭建。——ChatUI

聊天应用程序的用户界面(UI)是用户与应用程序交互的关键部分。ChatUI 是一种聊天应用程序的用户界面设计,它为用户提供了一种简单、易于使用的界面。

在本人的使用情况来看,ChatUI 是一整套机器人对话界面的前端解决方案,遵循前端组件化和容器标准化的设计思想,包含丰富使用的对话组件。

官方文档:https://chatui.io/docs/quick-start

chatUI 适用于 React 项目,支持 PC/移动端样式响应式。效果如:

搭建一个AI对话机器人——前端ChatUI使用纪录

使用

在通过 Nodejs 包管理工具npm i @chatui/core安装完依赖后,只需在使用场景下引入对应模块即可。

<Chat/>组件

整个 ChatUI 的核心其实就是<Chat/>容器组件,然而在目前官方文档并没有对此组件的使用展开具体描述及案例说明,以致于需要经常查看其 ts 声明文件或 demo。个人的使用经验整理如下:

消息 hookuseMessages(initialState)

这是使用中关键且必不可少的 API,充当着控制器的角色,相关消息展示、修改等操作都是都过此 hook。文档上没有找到对应说明,从 ts 声明文件中可以大致了解其使用方法:

export default function useMessages(initialState?: MessageWithoutId[]): {
  // 用于展示的信息列表
  messages: Messages;

  // 添加信息(在之前)
  prependMsgs: (msgs: Messages) => void;

  // 添加信息(在之后)
  appendMsg: (msg: MessageWithoutId) => void;

  // 根据id更新某一条信息
  updateMsg: (id: MessageId, msg: MessageWithoutId) => void;

  // 根据id删除某一条信息
  deleteMsg: (id: MessageId) => void;

  // 重置
  resetList: (list?: any) => void;
  setTyping: (typing: boolean) => void;
};
初始语句initialState
  • 格式:MessageWithoutId[],其中``:
    interface MessageWithoutId {
      /**
       * 消息类型
       */
      type: string;
      /**
       * 消息内容
       */
      content?: any;
      /**
       * 消息创建时间
       */
      createdAt?: number;
      /**
       * 消息发送者信息
       */
      user?: User;
      /**
       * 消息位置
       */
      position?: 'left' | 'right' | 'center' | 'pop';
      /**
       * 是否显示时间
       */
      hasTime?: boolean;
      /**
       * 状态
       */
      status?: IMessageStatus;
      /**
       * 消息内容渲染函数
       */
      renderMessageContent?: (message: MessageProps) => React.ReactNode;
    }
    

如:

import React from 'react';
import Chat, { useMessages, RichText, Bubble } from '@chatui/core';
import '@chatui/core/dist/index.css';

export default function ChatFrame() {
  const { messages } = useMessages([
    {
      type: 'text',
      content: { text: '你好,我是智能助理小X~' },
    },
  ]);

  return (
    <Chat
      messages={messages}
      renderMessageContent={msg => {
        const { content } = msg;
        return (
          <Bubble>
            <RichText content={content.text} />
          </Bubble>
        );
      }}
      onSend={(type: string, val: string) => console.log(type, val)}
    />
  );
}

效果如:

搭建一个AI对话机器人——前端ChatUI使用纪录

也可以设置user属性增加头像:

export interface User {
  avatar?: string;
  name?: string;
  url?: string;
  [k: string]: any;
}

如:

const { messages, appendMsg } = useMessages([
  {
    type: 'text',
    content: { text: '你好,我是智能助理小X~' },
    user: {
      name: '小X',
      avatar: 'https://avatars.githubusercontent.com/u/16474680?v=4',
    },
  },
]);

效果如:
搭建一个AI对话机器人——前端ChatUI使用纪录

当然初始信息可以为多条、也可以为组件(设置type属性)

<Chat/>使用配置

如下图,官网对于<Chat/>容器的属性介绍非常简单,像navbar这些属性都不清楚具体配置项及示例

搭建一个AI对话机器人——前端ChatUI使用纪录

使用及配置时可以通过找到其声明文件来确定使用。还是以navbar为例,ts 声明如下:

    /**
     * 导航栏配置
     */
    navbar?: NavbarProps | undefined;

继续定位,可以大致猜测其作用

export declare type NavbarProps = {
  // 标题文案
  title: string;

  // 可设置className
  className?: string;

  // 标题logo
  logo?: string;

  // 标题栏左侧内容
  leftContent?: IconButtonProps;

  // 标题栏右侧内容
  rightContent?: IconButtonProps[];
};

再继续定位,如IconButtonProps

export interface IconButtonProps extends ButtonProps {
  img?: string;
}

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  className?: string;
  label?: string;
  color?: 'primary';
  variant?: 'text' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  block?: boolean;
  icon?: string;
  loading?: boolean;
  disabled?: boolean;
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}

以此基本能确定navbar配置项为:

interface TempNavbarProps {
  // 标题文案
  title: string;

  // 可设置className
  className?: string;

  // 标题logo
  logo?: string;

  // 标题栏左侧内容
  leftContent?: {
    // 图片/logo
    img?: string;
    className?: string;

    // 左侧标签文案
    label?: string;
    color?: 'primary';
    variant?: 'text' | 'outline';
    size?: 'sm' | 'md' | 'lg';
    block?: boolean;

    // 图标,通过 SVG Symbol 实现的矢量图形
    icon?: string;
    loading?: boolean;
    disabled?: boolean;
    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  };

  // 标题栏右侧内容
  rightContent?: Array<{
    // 图片/logo
    img?: string;
    className?: string;

    // 左侧标签文案
    label?: string;
    color?: 'primary';
    variant?: 'text' | 'outline';
    size?: 'sm' | 'md' | 'lg';
    block?: boolean;

    // 图标,通过 SVG Symbol 实现的矢量图形
    icon?: string;
    loading?: boolean;
    disabled?: boolean;
    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  }>;
}

组件

相比<Chat/>容器,其他组件的使用简单了很多。组件引入都在@chatui/core中,以使用频率最高的<Bubble>组件为例:

<Bubble>气泡

引入组件:

import { Bubble } from '@chatui/core';

大部分的对话信息都会在<Bubble>中呈现,其属性type可以是字符串text、也可以是图片img。当然用得更多的形式是用<Bubble>包裹要展示的组件,如包裹卡片:

<Bubble>
  <Card size="xl">
    <CardTitle>Show some text</CardTitle>
    <CardActions>
      <Button color="primary">了解更多</Button>
      <Button color="primary">使用</Button>
    </CardActions>
  </Card>
</Bubble>

效果如:
搭建一个AI对话机器人——前端ChatUI使用纪录


综合评估

能力

从本人个人使用来看还没有遇到能力不满足的情况,并且如果是计划做一套企业级对话系统的话可以尝试使用ChatUI pro

搭建一个AI对话机器人——前端ChatUI使用纪录

具体不做介绍

体积

从产物来看,chatUI 一共224kb的产物大小(css37k, js187k),整体来看也不算重

兼容性

支持响应式,从 css 来看无明显的兼容问题,应该能适配大部分设备。具体兼容情况待后续补充。

社区情况

搭建一个AI对话机器人——前端ChatUI使用纪录

项目看着也因近期 ChatGPT 热度有所上升。不过结合issue等情况整体感觉文档及社区维护这块有提升的空间~

综合来看,ChatUI 是一种简单、易于使用的聊天应用程序 UI 设计。它的特点在于其简单、直观的设计,以及对多种消息类型的支持,问题在于当前的文档不够完善。文章来源地址https://www.toymoban.com/news/detail-466070.html


相关链接
  • https://chatui.io/components/chat

到了这里,关于搭建一个AI对话机器人——前端ChatUI使用纪录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 保姆级指导0基础如何快速搭建“对话机器人”类ChatGPT

    参考了CDSN上的文章,但发现不work, 不是这里有问题,就是那里有问题,查阅了大量的资料,做了无数次试验,终于整理出来了一个完整的教程,保可用,保真~~~~~如果各位遇到什么问题,也可以私信我 我把每个环节遇到的坑,都填平了,如果按我的操作,免去了大家查各种

    2024年04月13日
    浏览(33)
  • 为AI造“楚门世界” 人类围观对话机器人社交、谈恋爱

    不满足于跟ChatGPT聊天,技术狂人开始为对话机器人创造“楚门的世界”,从上帝视角围观AI如何“吃饭”、社交、谈恋爱...... 最近,一位神秘人创建了一个AI社交网站Chirper,人类不能参与,只能围观上万名AI在这里的聊天和互动,这些健谈的AI包含政客、经济学家、哲学家,

    2024年02月02日
    浏览(49)
  • 基于chatgpt-on-wechat的微信个人对话机器人搭建

    现在gpt很火,git中大佬们都创建了很多高星项目,我这里选用了chatgpt-on-wechat(项目地址:https://github.com/zhayujie/chatgpt-on-wechat),这个项目在扩展时也很舒服,大家可以去拉下来看看,学习源码才能方便后续的扩展 国内服务:前置条件需要走代理(这个不方便说,项目中也有对应的方案,大家

    2024年02月13日
    浏览(42)
  • 好用的ai网站白昼降临gtp4对话midjourney绘图机器人写小说

    白昼降临使用地址:ai人工智能白昼降临 AI对话有很多不同的功能,以下是一些常见的功能: 智能对话:AI对话可以进行自然语言交互,回答用户的问题,解决用户的疑惑。它可以提供相关的信息、指导和建议。 语言翻译:AI对话可以进行语言翻译,将一种语言翻译成另一种

    2024年02月20日
    浏览(45)
  • 搭建一个 MidJourney-微信群机器人

    知数云 MJ 微信群机器人,调用 Midjourney Imagine API 进行画图。 市面上价值XXXX的 MidJourney 微信群机器人,且用且珍惜。 需求 :mytimerun。 wechaty_puppet_service_token = “环境变量” zhishuyun_chatgpt_35_token = “GPT API 接口的 token” zhishuyun_midjourney_token = “MJ API 接口的 token” 执行代码前先设

    2024年02月16日
    浏览(46)
  • AI聊天机器人,一个就够了:文心一言、讯飞星火、通义千问AI聊天机器人深度对比(一)

    本次为第一部分的测评,综合结论: 讯飞星火 文心一言 = 通义千问 。 文本生成能力:文心一言 = 讯飞星火 通义千问,讯飞星火表现亮眼,文心一言作为国内AI聊天机器人的先发者,在创意写作方面略不尽如人意。 代码能力:文心一言 = 讯飞星火 = 通义千问。对于不是很复

    2024年02月02日
    浏览(55)
  • AI聊天机器人,一个就够了:文心一言、讯飞星火、通义千问AI聊天机器人深度对比(二)

    本次为第二部分的测评,第一部分的测评请点击这里。综合结论: :通义千问 讯飞星火 文心一言 。 逻辑推理能力:讯飞星火 = 通义千问 文心一言。对于基本的逻辑推理问题,三个AI聊天机器人都能通过测试。但对于稍高难度的逻辑推理问题,讯飞星火和通义千问的表现亮

    2024年02月01日
    浏览(65)
  • ai聊天问答知识库机器人源码,基于gpt实现的本地知识库问答实现,聊天对话效果,发送回复以及流式输出...

    现在基于gpt做自己项目的问答机器人,效果非常的好。可以把自己的文档上传上去,让机器人根据文档来进行回答。 想要实现智能AI问答功能,现在大部分都是基于向量数据库的形式。 整体的流程就是:上传文档===openai向量接口 ==== 存入向量数据库 访客咨询:  咨询问题

    2024年02月10日
    浏览(49)
  • 【AI项目实战】某语言模型-stable diffusion-vits-cqhttp 实现能对话能语音能绘画的Q群机器人

    好久没写文章了,终于想起来我有个博客账号系列。。 项目已开源在github上。 文章已滤敏,一切涉及语言模型名字的内容都以某语言模型代替 提示:AI绘画部分建议6G显存以上。 用于接收群友消息,并回复消息。 基于这种对话式的语言模型,可以对用户的聊天进行响应。

    2024年02月10日
    浏览(45)
  • 十分钟快速部署一个自己的AI聊天机器人

    个人名片: 🐼 作者简介:一名大二在校生,喜欢编程🎋 🐻‍❄️ 个人主页🥇: 落798. 🐼 个人WeChat:见文末 🕊️ 系列专栏:🖼️ 零基础学Java——小白入门必备 重识C语言——复习回顾 计算机网络体系———深度详讲 微信小程序开发——实战开发 🐓 每日一句:🍭

    2024年02月14日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包