上海重工数字人模块-pc端数字人对话sdk

介绍

上海重工数字人模块-pc端数字人对话sdk是一个基于JavaScript的SDK，技术栈采用Vue 3 + Vite + Ant Design Vue 3.x 构建的。采用全量打包的方式进行打包，提供给第三方模块调用，实现数字人对话功能。

该SDK提供了一个悬浮在页面上的数字人助手，用户可以点击与之进行对话交互。

软件架构

技术栈

• Vue 3.x
• Vite
• Ant Design Vue 3.x
• JavaScript

兼容性

• 支持现代浏览器（Chrome, Firefox, Safari, Edge等）
• 不再支持IE浏览器（由于使用了现代Web技术）

功能特性

• 悬浮式数字人助手头像，可拖拽移动
• 可自定义大小的对话抽屉
• 支持拖拽调整对话框宽度
• 对话内容展示（支持Markdown格式，包括代码高亮和复制功能）
• 消息发送功能
• 自动滚动到最新消息
• 响应式设计
• TTS语音合成播放
• SSE流式数据传输
• 录音功能

安装教程

开发环境要求

• Node.js >= 16.0.0
• npm 或 yarn

安装依赖

npm install

或者使用yarn:

yarn install

使用说明

开发模式

npm run dev

构建生产版本

npm run build

预览构建结果

npm run preview

在项目中使用SDK

方式一：通过npm安装，import导入

1. 安装SDK:

npm install cosco-ai-sdk

2. 在Vue组件中导入并使用SDK:

import AiSDK from 'cosco-ai-sdk';

// 在适当的生命周期钩子或方法中初始化
AiSDK.init('#ai-sdk-container', {
  title: '小远AI智能助手',
  welcome: '很高兴遇到你！我是你的AI小帮手，需要帮助吗？',
  size: [50, 50],
  position: {right: 20, bottom: 20},
  placeholder: '给小远发消息，我来为您解答',
  menus: ['send'],
  drawerWidth: 1000,
  baseUrl: 'http://192.168.4.40:8082',
  astWsUrl: 'ws://192.168.4.40:8082/ws/aicontrol/ast',
  ttsWsUrl: 'ws://192.168.4.40:8082/ws/bilingual/tts'
});

方式二：通过script标签引入

1. 在HTML文件中引入SDK:

<div id="ai-sdk-container"></div>
<script src="dist/umd/ai-sdk.umd.js"></script>
<script>
  AiSDK.init('#ai-sdk-container', {
    title: '小远AI智能助手',
    welcome: '很高兴遇到你！我是你的AI小帮手，需要帮助吗？',
    size: [50, 50],
    position: {right: 20, bottom: 20},
    placeholder: '给小远发消息，我来为您解答',
    menus: ['voice'],
    drawerWidth: 1000,
    baseUrl: 'http://192.168.4.40:8082',
    astWsUrl: 'ws://192.168.4.40:8082/ws/aicontrol/ast',
    ttsWsUrl: 'ws://192.168.4.40:8082/ws/bilingual/tts'
  });
</script>

配置选项

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | title | String | '小远AI智能助手' | 数字人助手标题 | | welcome | String | '很高兴遇到你！我是你的AI小帮手，需要帮助吗？' | 欢迎语 | | size | Array | [50, 50] | 悬浮头像尺寸 [宽度, 高度] | | position | Object | {right: 20, bottom: 20} | 悬浮头像位置，支持top、left、right、bottom属性，数值类型会自动添加px单位 | | placeholder | String | '给小远发消息，我来为您解答' | 输入框占位符 | | menus | Array | ['voice'] | 功能菜单项，可选值：'voice'(语音) | | drawerWidth | Number/String | 1000 | 对话框默认宽度，支持数字(px)、百分比字符串和像素字符串。当设置为百分比时，会根据窗口宽度动态计算 | | radius | Number/String | 12 | 悬浮头像圆角大小，支持数字或字符串。数字会自动添加px单位，字符串可以指定单位 | | avatarUrl | String | 默认头像 | 数字人助手头像URL，支持本地和远程图片 | | baseUrl | String | 'http://192.168.4.40:8082' | 后端服务地址 | | astWsUrl | String | 'ws://192.168.4.40:8082/ws/aicontrol/ast' | 语音识别转写ws地址 | | ttsWsUrl | String | 'ws://192.168.4.40:8082/ws/bilingual/tts' | 语音合成ws地址 | | extra | Object | {} | 额外的参数，可用于扩展功能，例如传递用户ID等 |

注意：所有涉及位置和尺寸的数值配置（如position、size、radius、drawerWidth）都会自动添加px单位，无需手动添加。

项目结构

.
├── src
│   ├── api               # API接口
│   ├── assets            # 静态资源
│   ├── components        # 组件目录
│   │   ├── agent-tag     # Agent标签组件
│   │   ├── chat          # 聊天项组件
│   │   ├── chat-input    # 聊天输入组件
│   │   ├── markdown      # Markdown渲染组件（支持代码高亮和复制）
│   │   ├── welcome       # 欢迎页面组件
│   │   └── drawer.vue    # 主抽屉组件
│   ├── iconfont          # 图标字体
│   ├── sdk               # SDK入口文件
│   ├── style             # 全局样式
│   └── utils             # 工具函数
├── dist                  # 构建输出目录
├── public                # 静态公共资源
└── vite.config.js        # Vite配置文件

开发指南

主要组件

1. drawer.vue - 主要的抽屉组件，包含整个数字人对话界面
2. chat-item.vue - 单个聊天项组件
3. chat-input.vue - 聊天输入组件
4. welcome.vue - 欢迎界面组件
5. markdown/index.vue - Markdown渲染组件（支持代码高亮和一键复制）
6. agent-tag/index.vue - Agent标签组件

工具函数

1. useDraggable.js - 实现悬浮头像拖拽功能
2. useResizableDrawer.js - 实现抽屉宽度调整功能
3. useRecorderCore.js - 录音核心功能
4. useSSE.js - 服务端事件推送功能
5. useTtsWebsocket.js - TTS语音合成WebSocket连接 6pcmPlayer.js - PCM音频播放器

核心SDK

src/sdk/index.js 是SDK的入口文件，提供初始化方法:

AiSDK.init(mountSelector, options)

构建说明

项目支持两种构建模式：

1. UMD模式 - 用于直接在浏览器中通过script标签引入
2. ES模式 - 用于ES6模块导入方式

构建命令：

# 构建UMD和ES两种格式
npm run build

# 仅构建ES格式
npm run build:es

# 仅构建UMD格式
npm run build:umd

更新日志

请查看 CHANGELOG.md 文件了解版本更新信息。

许可证

MIT