大家好,我是 AI Elements Vue 和 vue3-vant-mobile 的作者。
在 AI Elements Vue 发布后这段时间里,我们在做一个新的事情:ElevenLabs UI Vue,一个专为 AI 音频与语音智能体打造的开源组件库。他是 elevenlabs/ui移植版本,不是克隆,是完全的 Vue3 + 组合式 API 重写。同样基于 shadcn-vue 构建,旨在帮助您更快地构建多模态智能体体验。
• 涵盖聊天界面、语音转写、音乐处理等 22 个核心组件与示例
• 支持全方位自定义配置
• 采用 MIT 开源许可协议
探索地址:
- 网站地址:elevenlabs-ui-vue.com
- 仓库地址:github.com/vuepont/ele…
话不多说,我们来看看有哪些组件。
组件
实时音频频率可视化工具,专为语音助手和音频界面设计,具备基于状态变化的动画效果。
一个带有自动滚动和底部粘附行为的滚动对话容器,适用于聊天界面。
一个完整的语音对话界面,包含麦克风控制、文本输入和实时波形可视化功能,专为智能体设计。
基于麦克风输入的实时画布音频波形可视化工具,支持自定义渲染模式。
- 5、Matrix
一款复古点阵显示组件,采用圆形单元格和平滑动画效果。非常适合复古显示屏、指示器和音频可视化应用。
- 6、Message
可组合的消息组件,具备头像、内容变体,以及针对用户和助手消息的自动样式设置。
麦克风输入选择器,附带设备管理功能。
- 8、Orb
一个具有音频反应性、自定义颜色和代理状态可视化的 3D 动画球体,使用 Three.js 构建。
- 9、Response
使用 vue-stream-markdown 实现 AI 响应逐字平滑动画的流式 Markdown 渲染器。
- 10、Scrub Bar
用于在时间轴上拖拽浏览的组件,通常用于音频或视频播放。
使用 Motion 实现带有渐变微光效果和视口触发动画的动效文本。
- 12、Speech Input
一款紧凑的语音转文本输入组件,采用 ElevenLabs Scribe 实现实时转录。
一个用于显示音频转录的组件,支持逐字高亮并与音频播放同步。
- 14、Voice Button
带有录音状态、实时波形可视化和自动反馈转换的交互式按钮。
- 15、Voice Picker
带音频预览、球体可视化效果和 ElevenLabs 语音集成的可搜索语音选择器。
- 16、Waveform
基于 Canvas 的音频波形可视化组件,支持录音、播放进度条拖动和麦克风输入功能。
- 17、Audio Player
一款可自定义的音频播放器,具备进度控制和播放管理功能,适用于音乐、播客及语音内容。
接下来,让我们再看看 Blocks。
Blocks
最后,欢迎大家来试用 ElevenLabs UI Vue,并提出建议和反馈。
如果大家喜欢,请给个 star、点赞、收藏 支持一下,谢谢 😀🙏。
- 网站地址:elevenlabs-ui-vue.com
- 仓库地址:github.com/vuepont/ele…