diff --git a/README.md b/README.md index aab9a4995b2329f4fe2db84ae2bf1a9b51b6d100..21e1d23e18df2ec7872f8a8e6b1bf23290f8d3bd 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,10 @@ - HBuilderX正式版 3.7.10+ - HBuilderX alpha版 3.8.0+ -### 文档已移至uni-ai-chat文档[https://uniapp.dcloud.net.cn/uniCloud/uni-ai-chat.html](https://uniapp.dcloud.net.cn/uniCloud/uni-ai-chat.html) \ No newline at end of file +### 文档已移至uni-ai-chat文档[https://uniapp.dcloud.net.cn/uniCloud/uni-ai-chat.html](https://uniapp.dcloud.net.cn/uniCloud/uni-ai-chat.html) + +### 在线体验 + +地址：[https://chat.dcloud.net.cn](https://chat.dcloud.net.cn/#/) + +注意：需要使用HBuilder账号登录，限制：5条消息/账号/天 \ No newline at end of file diff --git a/_README.md b/_README.md index 98c434650011729e8b9fed482b5320702cc0959d..5c19f58a7e52266667280ffd21d6862cd36fa7f8 100644 --- a/_README.md +++ b/_README.md @@ -1,6 +1,6 @@ ## 简介 -> 支持HBuilder版本，正式版 3.7.10+，alpha版 3.8.0+ +> 支持HBuilder版本，正式版 3.7.10+，Alpha版 3.8.0+ `uni-ai-chat`是基于[uni-ai](uni-ai.md)的聊天项目模板。它包含一个前端页面(路径：`/pages/chat/chat.vue`)和一个云对象(路径：`uniCloud/cloudfunctions/uni-ai-chat/index.obj.js`) @@ -9,7 +9,13 @@ **插件下载地址：[https://ext.dcloud.net.cn/plugin?name=uni-ai-chat](https://ext.dcloud.net.cn/plugin?name=uni-ai-chat)** 视频效果： - + + +### 示例项目 + +地址：[https://chat.dcloud.net.cn](https://chat.dcloud.net.cn/#/) + +注意：需要使用HBuilder账号登录，限制：5条消息/账号/天 ## 体验步骤 @@ -21,7 +27,7 @@ 6. 对项目根目录uniCloud点右键选择“云服务空间初始化向导”界面按提示部署项目 7. 在uni-app项目点右键，关联之前创建的服务空间。 8. 运行启动。 -9. 如果需要stream流式响应，需要在[dev.dcloud.net.cn](https://dev.dcloud.net.cn)的uni-push2中开通你的应用，然后把云函数上传到uniCloud服务空间，并且运行时在HBuilderX控制台选择`连接云端云函数` +9. 如果需要stream流式响应，需要在[dev.dcloud.net.cn](https://dev.dcloud.net.cn)的uni-push2中开通你的应用 ## 配置 @config 文件路径 `uniCloud/cloudfunctions/common/uni-config-center/uni-ai-chat/config.json` @@ -35,7 +41,7 @@ | earnedScore | object | - | 配置积分的获取策略 | |   |- ad | Number | 3 | 观看1次广告可获得的积分数量 | |   |- price | Number | 3 | 支付1元可获得的积分数量(暂未支持) | -| chatCompletionOptions | Object | - | 支持配置：`model`,`tokensToGenerate`（默认值：512）,`temperature`,`topP`
详情查看：[https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html#chat-completion](https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html#chat-completion)| +| chatCompletionOptions | Object | - | 支持配置：`model`,`deploymentId`,`tokensToGenerate`（默认值：512）,`temperature`,`topP`
详情查看：[https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html#chat-completion](https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html#chat-completion)| | llm | Object | - | 大语言模型配置，详情查看：[https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html#get-llm-manager](https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html#get-llm-manager) | 这里内置的内容安全是基于`uni-sec-check`插件，它是免费的，但有一些限制条件，请务必阅读该插件的文档：[https://uniapp.dcloud.net.cn/uniCloud/uni-sec-check.html](uni-sec-check.md)。 @@ -58,14 +64,12 @@ 流式响应的流程图 - + 流式响应的使用需客户端先通过 `new uniCloud.SSEChannel()` 创建 SSE 通道，并获得 `channel` 值（详情请参考：[https://uniapp.dcloud.net.cn/uniCloud/sse-channel.html#create-sse-channel](https://uniapp.dcloud.net.cn/uniCloud/sse-channel.html#create-sse-channel)）。在客户端向 uniCloud 云对象发起请求时，需要将该 `channel` 值作为参数一同携带；然后 uniCloud 云对象与 uni-ai 建立 流式响应[(stream)](https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html#chat-completion-stream) 通讯，云对象监听 uni-ai 返回的分片数据，在接收到数据后再通过 sse-channel ([反序列化消息通道](https://uniapp.dcloud.net.cn/uniCloud/sse-channel.html#cloud-deserialize-channel))向客户端推送消息。 ### 注意事项 @heed - 使用`sse-channel`需要先[开通uni-push](https://uniapp.dcloud.net.cn/unipush-v2.html#%E7%AC%AC%E4%B8%80%E6%AD%A5-%E5%BC%80%E9%80%9A) -- 目前uni-push2.0不支持本地调试（后续版本会支持），需要在HBuilderX控制台，更改`连接本地云函数`为`连接云端云函数`。 - ## 营运专题@ad v1.0.3起提供了商业化能力，与uni-ai对话消耗积分。 @@ -75,14 +79,14 @@ v1.0.3起提供了商业化能力，与uni-ai对话消耗积分。 **平台差异说明** -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序| +|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |√（3.4.8+）|x|√（3.4.8+）|x|x|x|x|x|x|x|x| ### 流程概述 1. 开通广告；在[uni-ad](https://uniad.dcloud.net.cn/)官网点击菜单`广告设置`在应用列表，找到你的应用点击`开通广告` 2. 创建激励视频广告位；在[应用列表](https://uniad.dcloud.net.cn/list/app)点击`应用详情`再点击`新建广告位`；如下图：广告类型选`激励视频广告`，配置服务器回调，选uni-ai-chat部署的uniCloud服务空间，回调云函数名称选：`reward-video-callback` - + **微信小程序端注意**： - 参考：[uniAD微信小程序广告开通指南](https://ask.dcloud.net.cn/article/39928)开通广告后会自动创建广告位 @@ -226,9 +230,6 @@ module.exports = async (obj) => { - **错误信息："Wx0e203209e27b1e66 插件未授权使用 添加插住(env: Windows,mp,1.06.2303060；1ib: 2.31.1)"** 请参考文档：[uniAD微信小程序广告开通指南](https://ask.dcloud.net.cn/article/39928) -- **错误信息："errMsg: "getPushClientId:fail uniPush is not enabled"** - 需要在[dev.dcloud.net.cn](https://dev.dcloud.net.cn)的uni-push2中开通你的应用，更多uni-push2的介绍 详情参考[https://uniapp.dcloud.net.cn/unipush-v2.html](https://uniapp.dcloud.net.cn/unipush-v2.html) - ## 其他 DCloud基于`uni-ai`提供了很多开源模板，除了本项目`uni-ai-chat`，还有： diff --git a/changelog.md b/changelog.md index 51117230678f1012ccf2cbc95bb671172178f9c2..6078a10571d037b74ead7304d773ceb3a1743444 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,5 @@ +## 1.2.4（2023-06-21） +- 更新 改用optimizedMessage模式，即：收到AI响应的事件，基于message事件降频得到，使用此事件可以避免非常频繁的往客户端发送请求，导致部分情况下客户端处理消息卡顿。注意：云端新增于2023年6月21日，HBuilderX本地调试将于下次发版支持。 ## 1.2.3（2023-06-19） - 更新 默认不启用（注释掉）广告组件`uni-ad-rewarded-video` ## 1.2.2（2023-06-16） diff --git a/package.json b/package.json index c07739ab073d5bedca35d1b768a04db8d9b30b0f..419b35e52e00643b67133df6ff57e64d8f866327 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "id": "uni-ai-chat", "name": "uni-ai-chat", - "version": "1.2.3", + "version": "1.2.4", "description": "基于uni-ai的聊天示例项目，支持流式、支持前文总结，云端一体", "main": "main.js", "scripts": { diff --git a/pages/chat/SliceMsgToLastMsg.js b/pages/chat/SliceMsgToLastMsg.js new file mode 100644 index 0000000000000000000000000000000000000000..c2f4f7606bbd959834501921fbe647103e092e9b --- /dev/null +++ b/pages/chat/SliceMsgToLastMsg.js @@ -0,0 +1,34 @@ +export default class SliceMsgToLastMsg { + constructor(arg) { + this.$ = arg + } + // 所有待插入的消息数据 + msgs = '' + // 是否正在分割消息数据 + sliceMsgIng = false + addMsg(msg) { + // console.log('msg', msg); + this.msgs += msg + if (this.sliceMsgIng === false) { + this.sliceMsg() + } + } + sliceMsg() { + this.sliceMsgIng = true + let msg = this.msgs.slice(0, 1) + // console.log('msg', msg); + // 更新最后一条消息的内容 + // console.log('this.$', this.$); + this.$.updateLastMsg(lastMsg => { + lastMsg.content += msg + }) + this.msgs = this.msgs.slice(1) + if (this.msgs.length) { + setTimeout(() => { + this.sliceMsg(this.msgs) + }, 30); + } else { + this.sliceMsgIng = false + } + } +} \ No newline at end of file diff --git a/pages/chat/chat.vue b/pages/chat/chat.vue index 4824f3cb439f7ddf9be0f10f36c2240c5afe5bbf..e7186d49f84b7d6ef5c0783b52041164d0b0899a 100644 --- a/pages/chat/chat.vue +++ b/pages/chat/chat.vue @@ -72,7 +72,9 @@ import config from '@/config.js'; // 导入uniCloud云对象task模块 - import uniCoTask from '@/common/unicloud-co-task.js'; + import uniCoTask from '@/common/unicloud-co-task.js'; + // 导入 将多个字消息文本，分割成单个字 分批插入到最末尾的消息中 的类 + import SliceMsgToLastMsg from './SliceMsgToLastMsg.js'; // 收集所有执行云对象的任务列表 let uniCoTaskList = [] // 定义终止并清空 云对象的任务列表中所有 任务的方法 @@ -565,10 +567,13 @@ // 流式响应和云对象的请求结束回调函数 let sseEnd,requestEnd; // 判断是否开启了流式响应模式 - if (this.enableStream) { + if (this.enableStream) { // 创建消息通道 sseChannel = new uniCloud.SSEChannel() - // console.log('sseChannel',sseChannel); + // console.log('sseChannel',sseChannel); + + // 将多个字的文本，分割成单个字 分批插入到最末尾的消息中 + let sliceMsgToLastMsg = new SliceMsgToLastMsg(this) // 监听message事件 sseChannel.on('message', (message) => { // console.log('on message', message); @@ -581,16 +586,17 @@ content: message, create_time: Date.now() }) - } else { - this.updateLastMsg(lastMsg => { - lastMsg.content += message - }) + } else { + sliceMsgToLastMsg.addMsg(message) + // this.updateLastMsg(lastMsg => { + // lastMsg.content += message + // }) } this.showLastMsg() // 让流式响应计数值递增 this.sseIndex++ - }) - + }) + // 监听end事件，如果云端执行end时传了message，会在客户端end事件内收到传递的消息 sseChannel.on('end', (e) => { console.log('sse 结束',e) diff --git a/uniCloud-aliyun/cloudfunctions/uni-ai-chat/index.obj.js b/uniCloud-aliyun/cloudfunctions/uni-ai-chat/index.obj.js index 6357ed84fe07af5125c07956cba88a090c0a3a1c..553c04dbc7592b8587b87b8bcc15c23d26969e37 100644 --- a/uniCloud-aliyun/cloudfunctions/uni-ai-chat/index.obj.js +++ b/uniCloud-aliyun/cloudfunctions/uni-ai-chat/index.obj.js @@ -320,7 +320,8 @@ module.exports = { ...chatCompletionOptions, messages, stream:stream && sseChannel !== false, - sseChannel + sseChannel, + streamEventForSSE:"optimizedMessage" }) }