COSCO AI SDK for PC - AI Digital Human Assistant
npm install cosco-ai-sdk上海重工数字人模块-pc端数字人对话sdk是一个基于JavaScript的SDK，技术栈采用Vue 3 + Vite + Ant Design Vue 3.x 构建的。采用全量打包的方式进行打包，提供给第三方模块调用，实现数字人对话功能。
该SDK提供了一个悬浮在页面上的数字人助手，用户可以点击与之进行对话交互。
- 悬浮式数字人助手头像，可拖拽移动
- 可自定义大小的对话抽屉
- 支持拖拽调整对话框宽度
- 对话内容展示（支持Markdown格式，包括代码高亮和复制功能）
- 消息发送功能
- 自动滚动到最新消息
- 响应式设计
- TTS语音合成播放
- SSE流式数据传输
- 录音功能
- 文件上传功能
- Agent标签选择功能
bash
npm install
`或者使用yarn:
bash
yarn install
`使用说明
$3
bash
npm run dev
`$3
bash
npm run build
`$3
bash
npm run preview
`$3
#### 方式一：通过npm安装，import导入
1. 安装SDK:
bash
npm install cosco-ai-sdk
`2. 在Vue组件中导入并使用SDK:
javascript
import AiSDK from 'cosco-ai-sdk';// 在适当的生命周期钩子或方法中初始化
AiSDK.init('body', {
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',
extra: {
workNum: '' // 工号（agent权限参数）
}
});
`#### 方式二：通过script标签引入
1. 在HTML文件中引入SDK:
html
`$3
| 属性 | 类型 | 默认值 | 描述 |
|------|------|-------------------------------------------|----------------------------------------------------|
| 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 | {workNum: ''} | 额外的参数，可用于扩展功能，例如传递用户工号等 |
注意：所有涉及位置和尺寸的数值配置（如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配置文件
开发指南
$3
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标签组件
$3
1. useDraggable.js - 实现悬浮头像拖拽功能
2. useResizableDrawer.js - 实现抽屉宽度调整功能
3. useRecorderCore.js - 录音核心功能
4. useSSE.js - 服务端事件推送功能
5. useTtsWebsocket.js - TTS语音合成WebSocket连接
6. pcmPlayer.js - PCM音频播放器
$3
src/sdk/index.js 是SDK的入口文件，提供初始化方法:
javascript
AiSDK.init(mountSelector, options)
`构建说明
项目支持两种构建模式：
1. UMD模式 - 用于直接在浏览器中通过script标签引入
2. ES模式 - 用于ES6模块导入方式
构建命令：
bash
构建UMD和ES两种格式
npm run build仅构建ES格式
npm run build:es仅构建UMD格式
npm run build:umd
``请查看 CHANGELOG.md 文件了解版本更新信息。