g-ai-robot3 0.1.93 → 0.1.95
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +223 -99
- package/dist/g-ai-robot3.es.js +38891 -38888
- package/dist/g-ai-robot3.umd.js +368 -368
- package/dist/index.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,115 +1,239 @@
|
|
|
1
|
-
# g-ai-robot3数字人组件文档
|
|
1
|
+
# g-ai-robot3 数字人组件文档
|
|
2
2
|
|
|
3
3
|
## 简介
|
|
4
|
+
|
|
5
|
+
封装了 QA 问答与语音问答能力，基于 Vue 3，可在业务中快速集成数字人对话体验。
|
|
6
|
+
|
|
7
|
+
## 特性
|
|
8
|
+
|
|
9
|
+
- 支持文本问答与语音实时交互
|
|
10
|
+
- 可配置对话框主题、气泡、数字人画布与样式
|
|
11
|
+
- 内置工作流关键词触发
|
|
12
|
+
- 统一 API 前缀便于本地代理
|
|
13
|
+
|
|
14
|
+
## 安装
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install g-ai-robot3 --save
|
|
4
18
|
```
|
|
5
|
-
封装了QA问答和语音问答功能(vue3版本)
|
|
6
|
-
```
|
|
7
19
|
|
|
8
|
-
|
|
20
|
+
## 快速开始
|
|
21
|
+
|
|
22
|
+
在页面中使用组件（最小必填配置）：
|
|
23
|
+
|
|
24
|
+
```vue
|
|
25
|
+
<script setup lang="ts">
|
|
26
|
+
import GAiRobot3 from "g-ai-robot3";
|
|
27
|
+
import "g-ai-robot3/dist/index.css";
|
|
28
|
+
</script>
|
|
29
|
+
<template>
|
|
30
|
+
<GAiRobot3
|
|
31
|
+
:cozeInfo="{ bot_id: '7429224296222097443' }"
|
|
32
|
+
:apiPrefix="'/api21215'"
|
|
33
|
+
>
|
|
34
|
+
</GAiRobot3>
|
|
35
|
+
</template>
|
|
9
36
|
```
|
|
10
|
-
|
|
37
|
+
|
|
38
|
+
## 高级示例：工作流与业务联动（富阳智能体使用示例）
|
|
39
|
+
|
|
40
|
+
```vue
|
|
41
|
+
<script setup lang="ts">
|
|
42
|
+
import GAiRobot3 from "g-ai-robot3";
|
|
43
|
+
import "g-ai-robot3/dist/index.css";
|
|
44
|
+
import { ref, computed } from "vue";
|
|
45
|
+
|
|
46
|
+
const props = withDefaults(defineProps<{ eventFun: any[] }>(), {
|
|
47
|
+
eventFun: () => [],
|
|
48
|
+
});
|
|
49
|
+
const gAiRobot3Ref = ref<InstanceType<typeof GAiRobot3>>();
|
|
50
|
+
|
|
51
|
+
const aiEventFun = computed(() => {
|
|
52
|
+
return Object.assign(
|
|
53
|
+
[
|
|
54
|
+
// 自定义工作流事件，场景1
|
|
55
|
+
{
|
|
56
|
+
keywords: ["scene1_fuyangWeather"], // keywords的值是所配置的工作流名称
|
|
57
|
+
trigger: "before", // 固定值
|
|
58
|
+
fun: (params: any) => {
|
|
59
|
+
console.log("AI->富阳天气及山洪风险情况", params); // params是工作流的输出
|
|
60
|
+
// 在此触发你的业务逻辑，如切场景、更新看板等
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
// 自定义工作流事件，场景2
|
|
64
|
+
{
|
|
65
|
+
keywords: ["scene2"],
|
|
66
|
+
trigger: "before",
|
|
67
|
+
fun: () => {
|
|
68
|
+
// 触发文档弹窗或其它路由跳转
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
],
|
|
72
|
+
props.eventFun
|
|
73
|
+
);
|
|
74
|
+
});
|
|
75
|
+
</script>
|
|
76
|
+
|
|
77
|
+
<template>
|
|
78
|
+
<GAiRobot3
|
|
79
|
+
ref="gAiRobot3Ref"
|
|
80
|
+
:isDebug="true"
|
|
81
|
+
:cozeInfo="{ bot_id: '7429224296222097443' }"
|
|
82
|
+
:apiPrefix="'/api21215'"
|
|
83
|
+
:eventFun="aiEventFun"
|
|
84
|
+
:canvasWidth="180"
|
|
85
|
+
:canvasHeight="180"
|
|
86
|
+
:videoStyle="{ width: '180px', visibility: 'hidden' }"
|
|
87
|
+
:digitalStyle="{ width: '180px', height: '180px' }"
|
|
88
|
+
:canvasStyle="{ width: '180px', height: '180px' }"
|
|
89
|
+
>
|
|
90
|
+
</GAiRobot3>
|
|
91
|
+
<!-- :isDebug 是否开启调试模式（打印语音输出、工作流返回值），默认值为false -->
|
|
92
|
+
<!-- :cozeInfo 智能体id，必填 -->
|
|
93
|
+
<!-- :apiPrefix API基础路径，可通过本地代理或环境变量覆盖，默认值为/api21215 -->
|
|
94
|
+
<!-- :canvasWidth 画布宽度，默认值为180 -->
|
|
95
|
+
<!-- :canvasHeight 画布高度，默认值为180 -->
|
|
96
|
+
<!-- :videoStyle 视频样式，默认值为{ width: '180px', visibility: 'hidden' } -->
|
|
97
|
+
<!-- :digitalStyle 数字人样式，默认值为{ width: '180px', height: '180px' } -->
|
|
98
|
+
<!-- :canvasStyle 画布样式，默认值为{ width: '180px', height: '180px' } -->
|
|
99
|
+
</template>
|
|
11
100
|
```
|
|
12
101
|
|
|
13
|
-
|
|
14
|
-
``` javascript
|
|
15
|
-
import gAiRobot from "g-ai-robot";
|
|
16
|
-
import "g-ai-robot3/dist/g-ai-robot3.css";
|
|
102
|
+
## 前端代理与跨域示例（Vite）
|
|
17
103
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
104
|
+
```ts
|
|
105
|
+
// vite.config.ts
|
|
106
|
+
export default defineConfig({
|
|
107
|
+
server: {
|
|
108
|
+
proxy: {
|
|
109
|
+
"/api21215": {
|
|
110
|
+
target: "http://your-backend-host", // 默认https://model.keepsoft.net:39002
|
|
111
|
+
changeOrigin: true,
|
|
112
|
+
rewrite: (path) => path.replace(/^\/api21215/, ""),
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
});
|
|
22
117
|
```
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
|
28
|
-
| `
|
|
29
|
-
| `
|
|
30
|
-
| `
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
| `
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
| `
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
45
|
-
| `
|
|
46
|
-
| `
|
|
47
|
-
| `
|
|
48
|
-
| `
|
|
49
|
-
| `
|
|
50
|
-
| `
|
|
51
|
-
| `
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
118
|
+
|
|
119
|
+
## 必填参数（Required）
|
|
120
|
+
|
|
121
|
+
| 参数 | 说明 | 类型 | 默认值 | 注意事项 |
|
|
122
|
+
| ----------- | ------------ | ------ | ------------------- | --------------------------------------- |
|
|
123
|
+
| `cozeInfo` | 智能体配置 | object | `{ bot_id: '...' }` | `bot_id`必须替换为实际的智能体 id |
|
|
124
|
+
| `apiPrefix` | API 基础路径 | string | `-` | 必须配置为你的代理前缀（如`/api21215`） |
|
|
125
|
+
| `apiPrefix` | API 基础路径 | string | `'/api21215'` | 可通过本地代理或环境变量覆盖 |
|
|
126
|
+
|
|
127
|
+
说明：其他参数均有默认值，按需覆盖即可（建议保持数字人宽高与样式一致以避免拉伸）。
|
|
128
|
+
| `canvasHeight` | 画布高度 | number | `180` | 必须与 `videoStyle`、`digitalStyle.height` 一致 |
|
|
129
|
+
| `videoStyle` | 视频样式 | CSSProperties | `{ width: '180px', visibility: 'hidden' }` | `width` 与 `canvasWidth` 一致 |
|
|
130
|
+
| `digitalStyle` | 数字人样式 | CSSProperties | `{ width: '180px', height: '180px' }` | 与 `canvasWidth`/`canvasHeight` 保持一致 |
|
|
131
|
+
| `canvasStyle` | 画布样式 | CSSProperties | `{ width: '180px', height: '180px' }` | 与 `canvasWidth`/`canvasHeight` 保持一致 |
|
|
132
|
+
|
|
133
|
+
## 基础配置
|
|
134
|
+
|
|
135
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
136
|
+
| ------------------ | ------------------------------------ | ------- | -------------------------------------- |
|
|
137
|
+
| `isDebug` | 是否开启调试模式（打印语音输出） | boolean | `false` |
|
|
138
|
+
| `dialogBoxTheme` | 对话框主题 | string | `'light'` |
|
|
139
|
+
| `suspensionStyle` | 对话框高度 | string | `'33vh'` |
|
|
140
|
+
| `showMsgBubble` | 是否显示消息气泡 | boolean | `true` |
|
|
141
|
+
| `isExhibitionPro` | 是否为数字展厅项目 | boolean | `false` |
|
|
142
|
+
| `isShowDialogIcon` | 是否显示对话框图标 | boolean | `false` |
|
|
143
|
+
| `stream` | 是否启用流式传输（已废弃） | string | `'True'` |
|
|
144
|
+
| `title` | 对话框标题 | string | `'GR水利大模型'` |
|
|
145
|
+
| `greet` | 欢迎语（文本对话框） | string | `'您好,我是GR水利大模型智能小助手...'` |
|
|
146
|
+
| `welcomeMessage` | 欢迎消息（气泡对话框） | string | `'您好,我是GR水利大模型智能小助手...'` |
|
|
147
|
+
| `waitTxt` | 等待提示文本 | string | `'贵仁科技AI正在生成回答'` |
|
|
148
|
+
| `systemName` | 系统标识 | string | `'g-ai-robot3'` |
|
|
149
|
+
| `placementBottom` | 对话框底部距离 | number | `100` |
|
|
150
|
+
| `placementLeft` | 对话框左侧距离 | number | `450` |
|
|
151
|
+
| `useAudio` | 是否启用音频功能 | boolean | `true` |
|
|
152
|
+
| `space` | 监听间隔（ms）已废弃 | number | `3000` |
|
|
153
|
+
| `mode` | 交互模式（默认 `video`，其他已废弃） | string | `'video'` |
|
|
154
|
+
|
|
155
|
+
## API 配置
|
|
156
|
+
|
|
157
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
158
|
+
| ----------------------- | ----------------------------- | ------ | ------------------------------------------ |
|
|
159
|
+
| `apiPrefix` | API 基础路径（可自定义跨域） | string | `'/api21215'` |
|
|
160
|
+
| `createConversationUrl` | 创建会话接口 | string | `${apiPrefix}/chatGlm/createConversation` |
|
|
161
|
+
| `wakeupAudio` | 音频打标接口 | string | `${apiPrefix}/asr/saveWakeUpAudio` |
|
|
162
|
+
| `interrupt` | 中断请求接口 | string | `${apiPrefix}/chatGlm/cancelChat` |
|
|
163
|
+
| `qaServer` | 问答服务接口 | string | `${apiPrefix}/chatGlm/searchTextNew` |
|
|
164
|
+
| `audioWs` | 语音 WebSocket 服务 | string | `wss://model.keepsoft.net:39002/funasrWs` |
|
|
165
|
+
| `voiceprintWs` | 声纹识别 WebSocket 服务 | string | `wss://model.keepsoft.net:39002/speakerWs` |
|
|
166
|
+
| `instructWs` | 指令 WebSocket 服务（已废弃） | string | `wss://model.keepsoft.net:39002/commandWs` |
|
|
167
|
+
|
|
168
|
+
## 数字人配置
|
|
169
|
+
|
|
170
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
171
|
+
| --------------------- | -------------- | ------------- | ------------------------------------------ |
|
|
172
|
+
| `videoStyle` | 视频样式 | CSSProperties | `{ width: '180px', visibility: 'hidden' }` |
|
|
173
|
+
| `digitalStyle` | 数字人样式 | CSSProperties | `{ width: '180px', height: '180px' }` |
|
|
174
|
+
| `bubbleStyle` | 气泡样式 | CSSProperties | `{ width: '30%', height: '30%' }` |
|
|
175
|
+
| `canvasWidth` | 画布宽度 | number | `180` |
|
|
176
|
+
| `canvasHeight` | 画布高度 | number | `180` |
|
|
177
|
+
| `canvasCartoonWidth` | 卡通形象宽度 | number | `200` |
|
|
178
|
+
| `canvasCartoonHeight` | 卡通形象高度 | number | `320` |
|
|
179
|
+
| `offer` | 数字人形象接口 | string | `${apiPrefix}/metahuman/offer` |
|
|
180
|
+
| `humanaudio` | 数字人音频接口 | string | `${apiPrefix}/metahuman/humanaudio` |
|
|
181
|
+
| `stop_audio` | 停止音频接口 | string | `${apiPrefix}/metahuman/stop_audio` |
|
|
182
|
+
| `textDriven` | 文本驱动接口 | string | `${apiPrefix}/intelligentVoice/tts` |
|
|
183
|
+
|
|
184
|
+
## 消息气泡配置
|
|
185
|
+
|
|
186
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
187
|
+
| ----------------- | -------------------- | ------------- | ----------------------------------- |
|
|
188
|
+
| `showMsgNumber` | 显示消息数量 | number | `5` |
|
|
189
|
+
| `bubbleTheme` | 气泡主题 | string | `'dark'` |
|
|
190
|
+
| `useCustomDialog` | 是否使用自定义对话框 | boolean | `false` |
|
|
191
|
+
| `BubbleWidth` | 气泡容器样式 | CSSProperties | `{ width: '220px', bottom: '85%' }` |
|
|
192
|
+
| `BubbleWidth` | 气泡宽度 | number | `220` |
|
|
193
|
+
| `BubbleBottom` | 气泡底部距离 | number | `85` |
|
|
194
|
+
|
|
195
|
+
- 组件会将后端返回的关联问题（如 `questions` 列表）整合为可点击项，点击后自动填充并发送。
|
|
196
|
+
|
|
197
|
+
用途：引导用户进行更深入或相关的追问，提升对话效率。
|
|
198
|
+
|
|
199
|
+
## 关键词触发事件（工作流）
|
|
200
|
+
|
|
201
|
+
```ts
|
|
99
202
|
eventFun: [
|
|
100
203
|
{
|
|
101
|
-
keywords: ["打开灌区"],
|
|
102
|
-
trigger: "after",
|
|
103
|
-
fun: (a: any) => {
|
|
104
|
-
console.log("打开灌区");
|
|
105
|
-
}
|
|
204
|
+
keywords: ["打开灌区"], // 触发关键词，关键词为工作流名称
|
|
205
|
+
trigger: "after", // 触发时机，after 表示在 AI 回答后触发
|
|
206
|
+
fun: (a: any) => {
|
|
207
|
+
console.log("打开灌区"，a); // a为工作流设置的返回内容
|
|
208
|
+
},
|
|
106
209
|
},
|
|
107
210
|
{
|
|
108
211
|
keywords: ["打开技术舱"],
|
|
109
212
|
trigger: "after",
|
|
110
213
|
fun: (a: any) => {
|
|
111
|
-
console.log("打开技术舱");
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
]
|
|
115
|
-
```
|
|
214
|
+
console.log("打开技术舱"，a);
|
|
215
|
+
},
|
|
216
|
+
},
|
|
217
|
+
];
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
## 常见问题
|
|
221
|
+
|
|
222
|
+
- 画布或视频尺寸不一致：请确保 `canvasWidth/canvasHeight` 与 `videoStyle/digitalStyle/canvasStyle` 一致。
|
|
223
|
+
- 音频或 WS 连接失败：检查 `audioWs/voiceprintWs` 地址可达性。
|
|
224
|
+
|
|
225
|
+
## 语音唤醒词与结束/暂停
|
|
226
|
+
|
|
227
|
+
- 支持的唤醒词（对应五位数字人）：
|
|
228
|
+
- 小贵小贵
|
|
229
|
+
- 小慧小慧
|
|
230
|
+
- 小智小智
|
|
231
|
+
- 小 G 同学
|
|
232
|
+
- 小 R 同学
|
|
233
|
+
- 使用方式：在空闲状态直接说出唤醒词，系统会回复“我在，请问有什么可以帮您。”并进入对话。
|
|
234
|
+
- 结束词：再见、拜拜、小贵拜拜、小贵再见（任意其一即可识别，结束对话，需重新唤醒）
|
|
235
|
+
- 暂停词：暂停、停止、小贵暂停、小贵停止（任意其一即可识别，暂停说话，继续监听，无需重新唤醒）
|
|
236
|
+
|
|
237
|
+
## 许可证
|
|
238
|
+
|
|
239
|
+
本项目遵循仓库中的 `LICENSE` 许可。
|