g-ai-robot3 0.1.79 → 0.1.81

package/README.md

@@ -1,4 +1,4 @@
-# g-ai-robot3
+# g-ai-robot3数字人组件文档
 
 ## 简介
 ```
@@ -13,174 +13,106 @@ npm install g-ai-robot3 --save
 ### 使用
 ``` javascript
 import gAiRobot from "g-ai-robot";
-import "g-ai-robot3/dist/g-ai-robot3.css"
+import "g-ai-robot3/dist/g-ai-robot3.css";
 
-<g-ai-robot
-  :robotCss="{ zIndex: 9999, left: '10px', bottom: '300px' }"
-  placement="top-end"
+<g-ai-robot :cozeInfo="{bot_id:'7429224296222097443'}"  :apiPrefix="'/api21215'"
+  :canvasWidth="180" :canvasHeight="180" :videoStyle="{width:'180px',visibility:'hidden'}" :digitalStyle="{width:'180px',height:'180px'}"
 >
 </g-ai-robot>
-//添加到引用组件的代码中(不在组件中引入)
-const video = ref(null);
-const canvas = ref(null);
-const ctx = ref(null);
-const canvas_tmp = ref(null);
-const ctx_tmp = ref(null);
-
-const init = () => {
-    ctx.value = canvas.value.getContext('2d');
-
-    // 创建的canvas宽高最好与显示图片的canvas、video宽高一致
-    canvas_tmp.value = document.createElement('canvas');
-    canvas_tmp.value.setAttribute('width', 300);
-    canvas_tmp.value.setAttribute('height', 300);
-    ctx_tmp.value = canvas_tmp.value.getContext('2d');
-
-    video.value.addEventListener('play', computeFrame);
-}
-
-const numToPoint = (num, width) => {
-    let col = num % width;
-    let row = Math.floor(num / width);
-    row = col === 0 ? row : row + 1;
-    col = col === 0 ? width : col;
-    return [row, col];
-}
-
-const pointToNum = (point, width) => {
-    let [row, col] = point;
-    return (row - 1) * width + col
-}
-
-const getAroundPoint = (point, width, height, area) => {
-    let [row, col] = point;
-    let allAround = [];
-    if (row > height || col > width || row < 0 || col < 0) return allAround;
-    for (let i = 0; i < area; i++) {
-        let pRow = row - 1 + i;
-        for (let j = 0; j < area; j++) {
-            let pCol = col - 1 + j;
-            if (i === area % 2 && j === area % 2) continue;
-            allAround.push([pRow, pCol]);
-        }
-    }
-    return allAround.filter(([iRow, iCol]) => {
-        return (iRow > 0 && iCol > 0) && (iRow <= height && iCol <= width);
-    })
-}
-
-const computeFrame = () => {
-    if (video.value) {
-        if (video.value.paused || video.value.ended) return;
-    }
-    // 如果视频比例和canvas比例不正确可能会出现显示形变， 调整除的值进行比例调整
-    ctx_tmp.value.drawImage(video.value, 0, 0, video.value.clientWidth / 1, video.value.clientHeight / 1);
-
-    // 获取到绘制的canvas的所有像素rgba值组成的数组
-    let frame = ctx_tmp.value.getImageData(0, 0, video.value.clientWidth, video.value.clientHeight);
 
-    //----- emergence ----------
-    const height = frame.height;
-    const width = frame.width;
-    const pointLens = frame.data.length / 4;
-
-
-    for (let i = 0; i < pointLens; i++) {
-        let r = frame.data[i * 4];
-        let g = frame.data[i * 4 + 1];
-        let b = frame.data[i * 4 + 2];
-        if (r < 100 && g > 190 && b < 200) {
-            frame.data[i * 4 + 3] = 0;
-        }
+## 必填参数 (Required Parameters)
+
+
+| 参数               | 说明                  | 类型         | 示例值                                  | 注意事项                                                                 |
+|--------------------|-----------------------|--------------|-----------------------------------------|--------------------------------------------------------------------------|
+| `cozeInfo`        | 智能体配置            | object       | `{bot_id:'7429224296222097443'}`       | 必须替换为实际的bot_id                                                  |
+| `apiPrefix`       | API基础路径           | string       | `'/api21215'`                          | 可在项目中配置代理，默认值`'/api21215'`  
+| `canvasWidth`      | 画布宽度              | number       | `180`                                  | 必须与`videoStyle`和`digitalStyle`的宽度保持一致                         |
+| `canvasHeight`     | 画布高度              | number       | `180`                                  | 必须与`videoStyle`和`digitalStyle`的高度保持一致                         |
+| `videoStyle`       | 视频样式              | CSSProperties | `{width:'180px',visibility:'hidden'}`  | width必须与`canvasWidth`保持一致                                         |
+| `digitalStyle`     | 数字人样式            | CSSProperties | `{width:'180px',height:'180px'}`       | width/height必须与`canvasWidth`/`canvasHeight`保持一致  
+
+### 配置示例
+| :canvasWidth="180" :canvasHeight="180" :videoStyle="{width:'180px',visibility:'hidden'}" :digitalStyle="{width:'180px',height:'180px'}"  |
+
+## 基础配置参数
+
+| 参数                | 说明                                   | 类型       | 默认值                                  |
+|---------------------|---------------------------------------|------------|-----------------------------------------|
+| `isDebug`           | 是否开启调试模式(打印语音输出)           | boolean    | `false`                                 |
+| `dialogBoxTheme`    | 对话框主题                             | string     | `"light"`                               |
+| `showMsgBubble`     | 是否显示消息气泡                       | boolean    | `true`                                  |
+| `isExhibitionPro`   | 是否为数字展厅项目                     | boolean    | `false`                                 |
+| `isShowDialogIcon`  | 是否显示对话框图标                     | boolean    | `false`                                 |
+| `stream`            | 是否启用流式传输                       | string     | `"True"`                                |
+| `title`             | 对话框标题                             | string     | `"GR水利大模型"`                        |
+| `greet`             | 欢迎语                                 | string     | `"您好,我是GR水利大模型智能小助手..."`  |
+| `welcomeMessage`    | 欢迎消息                               | string     | `"您好,我是GR水利大模型智能小助手..."`  |
+| `waitTxt`           | 等待提示文本                           | string     | `"贵仁科技AI正在生成回答"`              |
+| `systemName`        | 系统标识                               | string     | `"g-ai-robot3"`                         |
+| `placementBottom`   | 对话框底部距离                         | number     | `100`                                   |
+| `placementLeft`     | 对话框左侧距离                         | number     | `450`                                   |
+| `useAudio`          | 是否启用音频功能                       | boolean    | `true`                                  |
+| `space`             | 监听间隔(ms) 已废弃                    | number     | `3000`                                  |
+| `mode`              | 交互模式，默认video，其他已废弃         | string     | `"video"`                               |
+
+### API 配置
+
+| 参数                      | 说明                           | 类型       | 默认值                                  |
+|---------------------------|--------------------------------|------------|-----------------------------------------|
+| `apiPrefix`               | API基础路径，自定义跨域         | string     | `'/api21215'` |
+| `createConversationUrl`   | 创建会话接口                   | string     | `${apiPrefix}/chatGlm/createConversation` |
+| `wakeupAudio`             | 音频打标接口                   | string     | `${apiPrefix}/asr/saveWakeUpAudio`       |
+| `interrupt`               | 中断请求接口                   | string     | `${apiPrefix}/chatGlm/cancelChat`        |
+| `qaServer`                | 问答服务接口                   | string     | `${apiPrefix}/chatGlm/searchTextNew`     |
+| `audioWs`                 | 语音WebSocket服务             | string     | `wss://model.keepsoft.net:39002/funasrWs` |
+| `voiceprintWs`            | 声纹识别WebSocket服务         | string     | `wss://model.keepsoft.net:39002/speakerWs` |
+| `instructWs`              | 指令WebSocket服务(已废弃)             | string     | `wss://model.keepsoft.net:39002/commandWs` |
+
+### 数字人配置
+
+| 参数                   | 说明                     | 类型         | 默认值                     |
+|------------------------|--------------------------|--------------|----------------------------|
+| `videoStyle`           | 视频样式                 | CSSProperties | `{ width: "180px", visibility: "hidden" }` |
+| `digitalStyle`         | 数字人样式               | CSSProperties | `{ width: "180px", height: "180px" }` |
+| `bubbleStyle`          | 气泡样式                 | CSSProperties | `{ width: "30%", height: "30%" }` |
+| `canvasWidth`          | 画布宽度                 | number       | `300`                      |
+| `canvasHeight`         | 画布高度                 | number       | `300`                      |
+| `canvasCartoonWidth`   | 卡通形象宽度             | number       | `200`                      |
+| `canvasCartoonHeight`  | 卡通形象高度             | number       | `320`                      |
+| `offer`                | 数字人形象接口           | string       | `${apiPrefix}/metahuman/offer` |
+| `humanaudio`           | 数字人音频接口           | string       | `${apiPrefix}/metahuman/humanaudio` |
+| `stop_audio`           | 停止音频接口             | string       | `${apiPrefix}/metahuman/stop_audio` |
+| `textDriven`           | 文本驱动接口             | string       | `${apiPrefix}/intelligentVoice/tts` |
+
+### 消息气泡配置
+
+| 参数               | 说明                     | 类型    | 默认值  |
+|--------------------|--------------------------|---------|---------|
+| `showMsgNumber`    | 显示消息数量             | number  | `5`     |
+| `bubbleTheme`      | 气泡主题                 | string  | `"dark"`|
+| `useCustomDialog`  | 是否使用自定义对话框      | boolean | `false` |
+| `BubbleWidth`      | 气泡宽度                 | number  | `220`   |
+| `BubbleBottom`     | 气泡底部距离             | number  | `85`    |
+
+## 事件处理
+
+### 关键词触发事件，工作流处理
+
+```typescript
+eventFun: [
+  {
+    keywords: ["打开灌区"],  // 触发关键词
+    trigger: "after",       // 触发时机: before/after/together
+    fun: (a: any) => {      // 回调函数
+      console.log("打开灌区");
     }
-
-    const tempData = [...frame.data]
-    for (let i = 0; i < pointLens; i++) {
-        if (frame.data[i * 4 + 3] === 0) continue
-        const currentPoint = numToPoint(i + 1, width);
-        const arroundPoint = getAroundPoint(currentPoint, width, height, 3);
-        let opNum = 0;
-        let rSum = 0;
-        let gSum = 0;
-        let bSum = 0;
-        arroundPoint.forEach((position) => {
-            const index = pointToNum(position, width);
-            rSum = rSum + tempData[(index - 1) * 4];
-            gSum = gSum + tempData[(index - 1) * 4 + 1];
-            bSum = bSum + tempData[(index - 1) * 4 + 2];
-            if (tempData[(index - 1) * 4 + 3] !== 255) opNum++;
-        })
-        let alpha = (255 / arroundPoint.length) * (arroundPoint.length - opNum);
-        if (alpha !== 255) {
-            // debugger
-            frame.data[i * 4] = parseInt(rSum / arroundPoint.length);
-            frame.data[i * 4 + 1] = parseInt(gSum / arroundPoint.length);
-            frame.data[i * 4 + 2] = parseInt(bSum / arroundPoint.length);
-            frame.data[i * 4 + 3] = parseInt(alpha);
-        }
+  },
+  {
+    keywords: ["打开技术舱"],
+    trigger: "after",
+    fun: (a: any) => {
+      console.log("打开技术舱");
     }
-
-    //------------------------
-    ctx.value.putImageData(frame, 0, 0);
-    setTimeout(computeFrame, 0);
-}
-
-onMounted(() => {
-    init();
-})
-```
-
-
-# props
-| 参数      | 说明              | 类型       | 可选值   |  默认值  |  
-|---------- |-------------------|------------|---------|---------|
-| isDebug | 开启debug打印 | Boolean  | - |  - |
-| title | 问答标题 | String  | - |  - |
-| greet | 问答问候语 | String  | - |  - |
-| waitTxt | 问答等候语 | String  | - |  - |
-| systemName | 系统编码 | String  | - |  - |
-| robotCss | 机器人在视口中的位置 | object  | - |  left: "10px", bottom: "10px" |
-| placement  | 问答弹窗位置    |String | left/right/top/bottom/top-start/top-end/bottom-start/bottom-end | top-end |
-| useAudio  | 语音功能   |Boolean | true/false | true |
-| space  | 监听时间间隔   |Number | - | 3000 |
-| mode  | 交互模式   |String | text/audio | text |
-| openInstruct  | 是否开启指令控制   |Boolean | true/false | true |
-| qaServer  | 问答服务地址 |String | - | - |
-| audioServer | 语音服务地址 |String | - | - |
-| cozeInfo | 扣字大模型参数 |Object | - | - |
-| wsServer | 语音监听地址 |String | - | - |
-| instructWs | 指令监听地址 |String | - | - |
-| eventFun | 触发事件 |Array | - | - |
-| searchTextCallback | 扣子大模型事件流回调函数 |Function | - | - |
-
-
-
-# cozeInfo
-| 参数      | 说明              | 类型       | 可选值   |  默认值  |  
-|---------- |-------------------|------------|---------|---------|
-| iss |  | String  | - |  - |
-| kid |  | String  | - |  - |
-| private_key |  | String  | - |  - |
-| bot_id |  | String  | - |  - |
-
-
-# eventFun
-| 参数      | 说明              | 类型       | 可选值   |  默认值  |  
-|---------- |-------------------|------------|---------|---------|
-| keywords | 触发关键字 | Array  | - |  - |
-| trigger | 回调触发时机 | String  | after/together |  - |
-| fun | 触发的回调函数 | Function  | - |  - |
-
-
-# 方法
-| 参数       | 说明             | 参数          | 
-|---------- |------------------ |--------------|
-| searchText | 问答接口          |接收一个参数:{searchText} 问题的字符串 |
-| startMonitorAudio | 开启语音监听 | - |
-| uploadWavFile | 语音转文字接口  |接收一个参数(formData类型):{modelName,audio} modelName:语音模型(tiny/base/small/medium/large), audio:语音文件流 |
-
-# Slot
-| 参数       | 说明          |  
-|---------- |--------------|
-| reference | 触发问答弹窗显示的HTML元素 |
-
+  }
+]

package/dist/components/digitalHuman.vue.d.ts

@@ -14,6 +14,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         width: string;
         height: string;
     };
+    bubbleStyle: () => {
+        width: string;
+        height: string;
+    };
     canvasWidth: number;
     canvasHeight: number;
     canvasCartoonWidth: number;
@@ -44,6 +48,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         width: string;
         height: string;
     };
+    bubbleStyle: () => {
+        width: string;
+        height: string;
+    };
     canvasWidth: number;
     canvasHeight: number;
     canvasCartoonWidth: number;
@@ -60,6 +68,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isExhibitionPro: boolean;
     videoStyle: import("vue").CSSProperties;
     digitalStyle: import("vue").CSSProperties;
+    bubbleStyle: import("vue").CSSProperties;
     offer: string;
     human: string;
     humanaudio: string;