给3D数字人互动项目装上精美的聊天组件,开始实现多模态聊天

职场   2024-11-22 18:14   北京  
今年剩下一个多月时间要做的第三件事情是把自己的3D互动项目真正的离线化,包括ASR、大模型、TTS、嘴形同步、声音克隆、语音实时监听等全部离线部署,再接入多模态的聊天功能,完成真正意义上的数字人闭环,时间大概是一个月时间。
今天早上先给自己的高配电脑装上了配套的CUDA环境,装了大概2个多小时,先把Fish-Audio的声音克隆跑通了。然后又给聊天的页面找了一个用shadcn制作的精美聊天组件hadcn-chatbot-kit。
这个组件的好处就是在几分钟内就可以构建出美观、可定制的AI聊天机器人,同时保持对组件的完全控制。
优势:
  • 🎨完全主题化:利用 shadcn/ui 的主题系统实现完全的视觉定制
  • 📦复制和粘贴组件:仅安装需要的组件
  • 🔧高度可定制:修改组件的任何方面以满足您的需求
  • 📱响应式设计:可无缝适配所有尺寸的设备
  • 🚀现代代码:采用最新的 Web 标准和最佳实践构建

功能:
  • 聊天预建的聊天组件,可选择使用可组合组件构建自定义聊天组件


  • 自动滚动消息区域新消息的智能滚动行为



  • 信息输入
    •    自动调整文本区域大小
    •    文件上传支持
    •    预览附加文件

    • Markdown渲染器:


  • 提示建议通过快速操作按钮帮助用户


  • 消息操作内置复制、评级响应和其他实用按钮

  • 加载状态优雅的加载指示器和转换


所需代码:

代码地址:
https://github.com/Blazity/shadcn-chatbot-kit
文档说明:

https://shadcn-chatbot-kit.vercel.app/docs/components/chat

体验地址:

https://shadcn-chatbot-kit.vercel.app/


当然,这只是众多shadcn的chat-bot组件中的一个,还有很多漂亮组件。比如下面这个:

https://github.com/jakobhoeg/shadcn-chat

https://shadcn-chat.vercel.app/

支持三种聊天UI

做一只爬的最久的乌龟,保持学习保持好奇,即使慢一点,遇到一点困难,只要最后能到达终点,又有什么关系呢。
毕竟人生没有白走的路,每一步都算数。

加入知识星球可添加作者微信随时沟通。


前端程序设计
专注前端最前沿技术,数据可视化,web3d。偶尔插播生活和艺术。
 最新文章