From 96d615d79984636782ce962584d3331495db89f9 Mon Sep 17 00:00:00 2001 From: DCloud__JSON Date: Mon, 24 Apr 2023 21:31:39 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8Dpc=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.vue | 33 ++++- manifest.json | 4 +- pages.json | 2 +- pages/chat/chat.vue | 320 ++++++++++++++++++++++++++++++++++---------- redme.md | 22 +-- static/remove.png | Bin 0 -> 2667 bytes 6 files changed, 299 insertions(+), 82 deletions(-) create mode 100644 static/remove.png diff --git a/App.vue b/App.vue index df129b4..3bc9b2f 100644 --- a/App.vue +++ b/App.vue @@ -1,7 +1,24 @@ - diff --git a/manifest.json b/manifest.json index f2ba392..2825a84 100644 --- a/manifest.json +++ b/manifest.json @@ -68,10 +68,10 @@ "uniStatistics" : { "enable" : false }, - "vueVersion" : "2", + "vueVersion" : "3", "h5" : { "unipush" : { - "enable" : true + "enable" : false } } } diff --git a/pages.json b/pages.json index 7e36c75..795418b 100644 --- a/pages.json +++ b/pages.json @@ -4,7 +4,7 @@ "path" : "pages/chat/chat", "style" : { - "navigationBarTitleText": "uni-ai", + "navigationBarTitleText": "uni-ai-chat", "enablePullDownRefresh": false } } diff --git a/pages/chat/chat.vue b/pages/chat/chat.vue index 205e9e9..b7dc784 100644 --- a/pages/chat/chat.vue +++ b/pages/chat/chat.vue @@ -1,19 +1,19 @@ @@ -52,7 +74,8 @@ msgList: [], content: "", sseIndex: 0, - stream:false + stream:false, + isWidescreen:false } }, computed: { @@ -113,7 +136,7 @@ //按下了shift ctrl alt windows键 adjunctKeydown = true; } - if (e.keyCode == 13 && adjunctKeydown) { + if (e.keyCode == 13 && !adjunctKeydown) { this.beforeSendMsg(); } }; @@ -124,13 +147,59 @@ } }; } - // #endif + // #endif + + // 添加惰性函数，检查是否开通push + this.changeStream.check = async ()=>{ + uni.getPushClientId({ + fail:()=> { + this.stream = false + uni.showModal({ + content: '你暂未开通uni-push。不支持此功能', + showCancel: false, + confirmText:"查看详情", + complete() { + let url = "https://uniapp.dcloud.net.cn/uniCloud/uni-ai-chat.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" + // #ifndef H5 + uni.setClipboardData({ + data:url, + showToast:false, + success() { + uni.showToast({ + title: '已复制文档链接，请到浏览器粘贴浏览', + icon: 'none', + duration:5000 + }); + } + }) + // #endif + // #ifdef H5 + window.open(url) + // #endif + + } + }); + console.log('你暂未开通uni-push。不支持此功能。详情：https://uniapp.dcloud.net.cn/uniCloud/uni-ai-chat.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9'); + }, + success:()=>{ + this.changeStream.check = ()=>{} + } + }) + } + + uni.createMediaQueryObserver(this).observe({ + minWidth: 650, + }, matches => { + this.isWidescreen = matches; + }) }, methods: { // updateLastMsg(){ // }, changeStream(e){ + this.changeStream.check() + // console.log('e',e.detail.value); this.stream = e.detail.value }, @@ -302,6 +371,25 @@ } }); + }, + toStreamMD(){ + let url = "https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html#chat-completion-stream" + // #ifndef H5 + uni.setClipboardData({ + data:url, + showToast:false, + success() { + uni.showToast({ + title: '已复制文档链接，请到浏览器粘贴浏览', + icon: 'none', + duration:5000 + }); + } + }) + // #endif + // #ifdef H5 + window.open(url) + // #endif } } } @@ -312,13 +400,10 @@ view, textarea, button, - .page, - /* #ifdef H5 */ - .page * - /* #endif */ + .page { display: flex; - box-sizing: border-box; + box-sizing: border-box; } /* #endif */ @@ -329,38 +414,34 @@ .page, .container { background-color: #efefef; - width: 750rpx; - flex: 1; + flex: 1; + /* #ifdef H5 */ height: calc(100vh - 44px); /* #endif */ - /* #ifndef H5 */ - height: 100vh; - /* #endif */ flex-direction: column; - align-items: center; - } + align-items: center; + justify-content: center; + } /* #ifndef APP-NVUE */ .container { - background-color: #FAFAFA; - } - .container, - .container * { - max-width: 550px; + background-color: #FAFAFA; } /* #endif */ .foot-box { width: 750rpx; display: flex; - justify-content: space-around; - align-items: self-start; + flex-direction: column; padding: 10px 0px; background-color: #FFF; + } + .foot-box-content{ + justify-content: space-around; } - .textarea-box { + .textarea-box { padding: 8px 10px; background-color: #f9f9f9; border-radius: 5px; @@ -368,11 +449,11 @@ .textarea-box .textarea { max-height: 100px; - width: 460rpx; font-size: 14px; /* #ifndef APP-NVUE */ overflow: auto; - /* #endif */ + /* #endif */ + width: 450rpx; } /* #ifndef APP-NVUE */ @@ -388,7 +469,6 @@ .trash, .send { - /* border: 1px solid #000; */ width: 50px; height: 30px; justify-content: center; @@ -397,12 +477,11 @@ } .trash { - width: 30rpx; - margin-left: 20rpx; + width: 30rpx; + margin-left: 10rpx; } .send { - background-color: #2eaf4d; color: #FFF; border-radius: 4px; display: flex; @@ -463,7 +542,9 @@ } .content { - max-width: 500rpx; + /* #ifndef APP-NVUE */ + max-width: 550rpx; + /* #endif */ background-color: #FFF; border-radius: 5px; padding: 12px 10px; @@ -507,33 +588,134 @@ justify-content: center; } - .set-stream{ - position: fixed; - left: 0px; - top: 0; + #set-stream{ z-index: 999; padding:0 5px; justify-content: center; align-items: center; + position: fixed; + bottom: 50px; + right: 0; + } + #set-stream .title{ + font-size: 12px; + position: relative; + left: 10rpx; } + #set-stream switch{ + transform: scale(0.5); + } + /* #ifdef H5 */ - @media screen and (min-width:600px){ - .textarea-box{ - flex:1 + @media screen and (min-width:650px){ + .foot-box{ + border-top: solid 1px #dde0e2; + } + .page{ + width: 100vw; + flex-direction: row; + } + .page * { + max-width: 950px; + } + + .container, { + box-shadow: 0 0 5px #e0e1e7; + margin-top: 44px; + border-radius: 10px; + overflow: hidden; + } + + .container .header{ + height: 44px; + line-height: 44px; + border-bottom: 1px solid #F0F0F0; + width: 100vw; + justify-content: center; + font-weight: 500; + } + + .content { + background-color: #f9f9f9; + } + + .foot-box, + .foot-box-content, + .msg-list, + .msg-item, + // .create_time, + .noData, + .textarea-box, + .textarea, + textarea-box { + width: 100% !important; } - .trash, - .send-btn-box{ - flex-shrink: 0; - width: 100px; + + .create_time-box { + margin-top: 15px; justify-content: center; - padding: 0; - margin: 0; } - .trash{ - width: 60px; + .create_time{ + display: flex; + } + + .textarea-box, + .textarea, + textarea, + textarea-box { + height: 120px; + } + + .container, + .foot-box, + .textarea-box { + background-color: #FFF; + } + + .foot-box-content{ + flex-direction: column; + justify-content: center; + align-items: flex-end; + padding-bottom: 0; + } + + .menu { + padding:0 10px; + } + .menu-item{ + height:20px; + justify-content: center; + align-items: center; + align-content: center; + display: flex; + margin-right: 10px; + cursor: pointer; + } + .trash { + opacity: 0.8; + } + .trash image{ + height: 15px; + } + + .set-stream .title { + font-size: 12px; + } + .set-stream switch { + transform: scale(0.6); + position: relative; + left: -5px; + } + + .textarea-box,.textarea-box *{ + // border: 1px solid #000; } - .textarea-box .textarea { - width: 100%; + + .send-btn-box .send-btn-tip{ + color: #919396; + margin-right: 8px; + font-size: 12px; + line-height: 28px; } } /* #endif */ diff --git a/redme.md b/redme.md index 518fd1c..dd3a08f 100644 --- a/redme.md +++ b/redme.md @@ -1,4 +1,7 @@ + ## 简介 +> 仅支持3.8.0及以上版本的HBuilderX + uni-ai-chat是基于[uni-ai](https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html)的云端一体AI项目模板 视频效果： @@ -6,6 +9,16 @@ uni-ai-chat是基于[uni-ai](https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html) 包含一个前端页面(路径：`/pages/chat/chat.vue`)和一个云对象(路径：`uniCloud/cloudfunctions/uni-ai-chat/index.obj.js`) +## 响应流程图 + + +- 普通响应的流程较为简单，全流程基于 HTTP 网络请求。其缺陷是，当访问 AI 聊天接口时，如果生成的回复内容过大，响应时间会很长，导致前端用户需要等待很长时间才能收到结果。详情请参考：[stream的优势](https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html#chat-completion-stream)。 + +- 流式响应的使用需客户端先通过 `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控制台，更改`连接本地云函数`为`连接云端云函数`。 ## 体验步骤 @@ -14,11 +27,4 @@ uni-ai-chat是基于[uni-ai](https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html) 3. 打开`uni-ai-chat`插件下载地址：[https://ext.dcloud.net.cn/plugin?name=uni-ai-chat](https://ext.dcloud.net.cn/plugin?name=uni-ai-chat) 4. 点击`使用HBuilderX导入示例项目` 5. 对项目根目录uniCloud点右键选择“云服务空间初始化向导”界面按提示部署项目 -6. 在uni-app项目点右键，关联之前创建的服务空间。 - -## 注意事项 - -uni-ai-chat支持[流式响应](https://uniapp.dcloud.net.cn/uniCloud/uni-ai.html#%E6%B5%81%E5%BC%8F%E5%93%8D%E5%BA%94-chat-completion-stream) -模式，该模式会接收uni-ai的流式响应的数据，通过sse-channel[（云函数（云对象）请求中的中间状态通知通道）](https://uniapp.dcloud.net.cn/uniCloud/sse-channel.html)向客户端推送消息， -而使用`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控制台，更改`连接本地云函数`为`连接云端云函数`。 +6. 在uni-app项目点右键，关联之前创建的服务空间。 \ No newline at end of file diff --git a/static/remove.png b/static/remove.png new file mode 100644 index 0000000000000000000000000000000000000000..b770a82410adf038ba6922b490865a13c80d7bec GIT binary patch literal 2667 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 literal 0 HcmV?d00001 -- GitLab