devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp开发小程序实现AI聊天打字机功能_uniapp实现ai对话

作者：2023面试高手 | 2024-06-10 11:23:20

赞

踩

uniapp实现ai对话

uni-app官网

 一、创建uni-app

我用的是vue-cli命令行创建uniapp项目。

踩坑1：执行命令报错了

npm ERR! Darwin 20.6.0
npm ERR! argv "/Users/zhuzhu/.nvm/versions/node/v6.2.0/bin/node" "/Users/zhuzhu/.nvm/versions/node/v6.2.0/bin/npm" "install"
npm ERR! node v6.2.0
npm ERR! npm  v3.8.9

npm ERR! This request requires auth credentials. Run `npm login` and repeat the request.
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/zhuzhu/Downloads/uni-preset-vue-vite/npm-debug.log

解决：直接访问官网的gitee，下载模板，然后npm install，之后在npm run XX运行你想要的程序就好啦。

二、开发聊天功能

实现思路

之前开发的是网页版的，现在要改成小程序，接口是算法已经写好的，直接拿来了。前端这块实现最重要的是success回调里的代码，接口返回的是流式（如图一），然后前端通过截取最后一次对话内容，通过startTyping方法实现打字机效果

图一

上代码（样式和方法可直接copy用）

  1. <template>
  2.     <view class="main-dislogue">
  3.         <view class="header-suspension">
  4.             <view class="record-btn">悬浮</view>
  5.         </view>
  6.         <view class="content" ref="QAContent">
  7.           <scroll-view id="scrollpage" :scroll-top="scrollTop" :scroll-y="true">
  8.                  <view v-for="item in dest" :key="item.id" id="msglistview">
  9.                   <view class="ask" v-if="item.flag != 1">
  10.                       <view class="ask-text">
  11.                           <view class="ask-desc" style="word-break: break-all;">
  12.                             {{ item.content }}
  13.                           </view>
  14.                       </view>
  15.                       <text class="ask-bulge"></text>
  16.                       <view class="ask-avatar">
  17.                           <image class="ask-sex" v-if="sex == 1" src="/static/boy.png" fit="contain"></image>
  18.                           <image class="ask-sex" v-if="sex == 2" src="/static/girl.png" fit="contain"></image>
  19.                       </view>
  20.                   </view>
  21.                   <view class="answer">
  22.                       <view class="answer-avatar">
  23.                           <image class="answer-ai" src="/static/ai.png" fit="contain"></image>
  24.                       </view>
  25.                       <text class="answer-bulge"></text>
  26.                       <view class="answer-text">
  27.                           <view class="answer-desc" ref="copyAiContent">{{item.ai_content}}</view>
  28.                       </view>
  29.                   </view>
  30.               </view>
  31.             </scroll-view>
  32.         </view>
  33.         <view class="bottom">
  34.             <input :cursorSpacing="20" class="bottom-input" name="name" placeholder="请输入" v-model="value"/>
  35.             <button class="bottom-button" type="primary" :disabled="isSend" @click="handleSend">发送</button>
  36.         </view>
  37.     </view>
  38. </template>
  1. <style>
  2. .main-dislogue {
  3.   height: calc(100vh - 70px);
  4.   background: #f5f5f5;
  5.   display: flex;
  6.   flex-direction: column;
  7. }
  8.  
  9. /* 头部悬浮 */
  10. .header-suspension {
  11.   width: 100rpx;
  12.   height: 300rpx;
  13.   /* pointer-events: none; */
  14.   z-index: 100;
  15.   position: fixed;
  16.   right: 10rpx;
  17.   bottom: 300rpx;
  18. }
  19. .head-image {
  20.   width: 74rpx;
  21.   height: 74rpx;
  22.   z-index: 99;
  23.   background: #d4d4d4;
  24.   border-radius: 50%;
  25.   padding: 6rpx;
  26.   box-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.5);
  27. }
  28. .record-btn {
  29.   width: 74rpx;
  30.   height: 74rpx;
  31.   background: #FFFFFF;
  32.   border-radius: 50%;
  33.   font-size: 26rpx;
  34.   text-align: center;
  35.   padding: 6rpx;
  36.   box-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.5);
  37.   color: #4A90E2;
  38.   margin-top: 29rpx;
  39. }
  40.  
  41. /* 内容 */
  42. .content {
  43.     padding: 12rpx;
  44.     padding-bottom: 100px;
  45.     background: #f5f5f5;
  46. }
  47. /* #scrollpage {
  49. } */
  50.  
  51. /* 问 */
  52. .ask {
  53.     display: flex;
  54.     justify-content: flex-end;
  55.     width: 100%;
  56.     margin-top: 6rpx;
  57. }
  58. .ask-avatar {
  59.     width: 120rpx;
  60.     margin-top: 20rpx;
  61. }
  62. .ask-sex {
  63.     width: 100rpx;
  64.     height: 100rpx;
  65. }
  66. .ask-bulge {
  67.     position: relative;
  68.     top: 41rpx;
  69.     right: 23rpx;
  70.     display: block;
  71.     width: 0;
  72.     height: 0;
  73.     border: 15rpx solid #38a579;
  74.     transform: rotate(45deg);
  75. }
  76. .ask-text {
  77.     z-index: 1;
  78. }
  79. .ask-desc {
  80.     background: #38a579;
  81.     border-radius: 13rpx;
  82.     padding: 15rpx;
  83.     line-height: 58rpx;
  84.     margin-top: 27rpx;
  85.     white-space: pre-line;
  86.     word-break: break-all;
  87.     color: #fff;
  88.     margin-left: 124rpx;
  89. }
  90.  
  91. /* 答 */
  92. .answer {
  93.     display: flex;
  94.     justify-content: flex-start;
  95.     margin-top: 6rpx;
  96. }
  97. .answer-avatar {
  98.     width: 120rpx;
  99.     margin-top: 20rpx;
  100. }
  101. .answer-ai {
  102.   width: 100rpx;
  103.   height: 100rpx;
  104. }
  105. .answer-bulge {
  106.     position: relative;
  107.     top: 41rpx;
  108.     left: 23rpx;
  109.     display: block;
  110.     width: 0;
  111.     height: 0;
  112.     border: 15rpx solid #ffffff;
  113.     transform: rotate(45deg);
  114. }
  115. .answer-text {
  116.     z-index: 1;
  117. }
  118. .answer-desc {
  119.     margin-right: 88rpx;
  120.     border-radius: 13rpx;
  121.     line-height: 58rpx;
  122.     background: #fff;
  123.     margin-top: 27rpx;
  124.     tab-size: 12rpx;
  125.     padding: 15rpx;
  126.     white-space: pre-wrap;
  127.     box-shadow: 0rpx 5rpx 47rpx 0rpx #97979773;
  128. }
  129.  
  130. /* 尾部 */
  131. .bottom {
  132.     border-top: 2rpx solid #CCCCCC;
  133.     background: #f5f5f5;
  134.     display: flex;
  135.     padding: 10rpx;
  136.     padding-bottom: 50rpx;
  137.  
  138.  
  139.     position: fixed;
  140.     bottom: 0;
  141.     z-index: 99;
  142.     width: 100%;
  143. }
  144. .bottom-input {
  145.     flex: 1;
  146.     font-size: 35rpx;
  147.     border-radius: 10rpx;
  148.     background: #FFFFFF;
  149.     padding: 17rpx;
  150.  
  151. }
  152. .bottom-button {
  153.   width: 190rpx;
  154.   height: 80rpx;
  155.   font-size: 14px;
  156.   line-height: 80rpx;
  157.   margin-left: 20rpx;
  158.   background: #4A90E2 !important;
  159. }
  160. </style>
  1. <script>
  2. import Api from "@/utils/api.js";
  3. import base from '@/utils/base.js';
  4. const BASE_URL = base.baseUrl;
  5. const recorderManager = uni.getRecorderManager()
  6.  
  7. export default {
  8.     data() {
  9.         return {
  10.             sex: "",
  11.             birthDate: "",
  12.             generateRecordsFlag: false,
  13.             dest: [],
  14.             dialogue_code: "",
  15.             value: "",
  16.             isSend: false,
  17.             scrollTop: 0,
  18.             currentText: "",
  19.             isSpeaking: false
  20.         }
  21.     },
  22.     onLoad(option) {
  23.         this.sex = option.sex;
  24.         this.birthDate = option.birthDate;
  25.         this.dialogue_code = option.dialogue_code;
  26.     },
  27.     onReady() {
  28.         let _this = this;
  29.         uni.getStorage({
  30.             key: 'gpt_h5_dialogue',
  31.             success: function (res) {
  32.                 let list = res.data || "";
  33.                 if (list.length) {
  34.                     this.dest = JSON.parse(list);
  35.                     if (this.dest.length >= 2) {
  36.                         this.generateRecordsFlag = true;
  37.                     }
  38.                 } else {
  39.                     setTimeout(() => {
  40.                         _this.handleSend();
  41.  
  42.                     }, 500)
  43.                 }
  44.             }
  45.         });
  46.     },
  47.     methods: {
  48.         // 年龄转换
  49.         ageCalculation(date) {
  50.             var today = new Date();
  51.  
  52.             // 获取出生日期
  53.             var birthDate = new Date(date); // 假设出生日期为1990年1月1日
  54.  
  55.             // 计算年龄
  56.             var age = today.getFullYear() - birthDate.getFullYear();
  57.             var m = today.getMonth(), d = today.getDate();
  58.             if (m < birthDate.getMonth()) {
  59.                 age--;
  60.             } else if (m === birthDate.getMonth() && d < birthDate.getDate()) {
  61.                 age--;
  62.             }
  63.             return age;
  64.         },
  65.         // 发送聊天
  66.         async handleSend() {
  67.             this.preEventSource && this.preEventSource?.close();
  68.  
  69.             if (this.dest.length != 0 && !this.value) {
  70.                 return;
  71.             }
  72.  
  73.             let _this = this;
  74.             let { prompt, model } = await Api.getPromptList({ type: 1 });
  75.             let sex = this.sex == 1 ? "男" : "女";
  76.             let age = this.ageCalculation(this.birthDate);
  77.             prompt = prompt.replace('{age}', `${age}岁`).replace('{sex}', `${sex}性`);
  78.             let obj = {
  79.                 ai_content: "...",
  80.                 chat_model: model,
  81.                 content: prompt,
  82.                 create_time: "2024-01-05T06:55:29.000Z",
  83.                 dialogue_code: this.dialogue_code,
  84.                 id: 450,
  85.                 req_time: "2024-01-05T06:55:30.000Z",
  86.                 res_time: null,
  87.                 tags: null,
  88.                 user_code: "00468",
  89.                 flag: 1
  90.             };
  91.             const diaObj = {
  92.                 content: this.value,
  93.                 ai_content: "...",
  94.                 chat_model: model,
  95.                 create_time: new Date(),
  96.                 dialogue_code: this.dialogue_code,
  97.                 id: Date.now(),
  98.                 tags: null,
  99.                 user_code: "00468",
  100.                 loading: false,
  101.                 flag: 2
  102.             };
  103.             if (this.dest.length == 0) {
  104.                 // 第一次
  105.                 this.dest.push(obj);
  106.             } else {
  107.                 this.dest.push(diaObj);
  108.             }
  109.             let params = {
  110.                 "dialogue_code": this.dialogue_code,
  111.                 "content": this.value || this.dest[0].content,
  112.                 "chat_model": model
  113.             }
  114.  
  115.             this.isSend = true;
  116.             _this.scrollToBottom();
  117.  
  118.             let ai_content = "", startFlag = false;
  119.             this.value = ""; // 置空输入框
  120.             // 从这往上可以忽略，这是我业务逻辑，不必关注。重点是uni.request success回调内容
  121.  
  122.             uni.request({
  123.                 url: `${BASE_URL}/hmgpt/dialogue`,
  124.                 data: params,
  125.                 method: "POST",
  126.                 headers: {
  127.                     "Content-Type": 'application/json',
  128.                 },
  129.                 success: (res) => {
  130.                     let str = JSON.stringify(res.data);
  131.  
  132.                     // 将字符串按"data: ["分割，然后取最后一个部分  
  133.                     const lastDataSection = str.split("data: [").pop();
  134.  
  135.                     // 截取最后一个JSON对象的部分  
  136.                     const lastJsonString = lastDataSection.split("]")[0].replace(/\\/g, '');
  137.  
  138.                     // 解析JSON字符串  
  139.                     const lastJsonObject = JSON.parse(lastJsonString);
  140.  
  141.                     // 获取ai_content的值  
  142.                     const lastAiContent = lastJsonObject.ai_content;
  143.  
  144.                     console.log(lastAiContent, 'lastAiContent');
  145.  
  146.                     ai_content = lastAiContent;
  147.  
  148.                     if (lastAiContent == "") {
  149.                         // 返回空，则默认提示
  150.                         ai_content = "目前公司GPU服务器有限，会因为调试需要临时中断出现服务不可用，请稍后重试。";
  151.                     }
  152.                     _this.dest[_this.dest.length - 1].ai_content = "";
  153.  
  154.                     if (!startFlag) {
  155.                         startFlag = true
  156.                         startTyping();
  157.                     }
  158.                 }
  159.             });
  160.  
  161.  
  162.             function startTyping() {
  163.                 let currentIndex = 0;
  164.                 const typingSpeed = 100; // 打字速度，单位：毫秒
  165.  
  166.                 const timer = setInterval(() => {
  167.                     _this.dest[_this.dest.length - 1].ai_content += ai_content[currentIndex];
  168.                     currentIndex++;
  169.                     _this.scrollToBottom();
  170.  
  171.                     if (currentIndex >= ai_content.length) {
  172.                         clearInterval(timer);
  173.                         _this.isSend = false;
  174.                     }
  175.                 }, typingSpeed);
  176.  
  177.  
  178.                 uni.setStorage({
  179.                     key: 'gpt_h5_dialogue',
  180.                     data: JSON.stringify(_this.dest),
  181.                     success: function () { }
  182.                 });
  183.             }
  184.         },
  185.         // 滚动至聊天底部
  186.         scrollToBottom() {
  187.             this.$nextTick(() => {
  188.                 const query = uni.createSelectorQuery();
  189.                 query.select('#scrollpage').boundingClientRect();
  190.                 query.exec(res => {
  191.                     this.scrollTop = res[0].height;
  192.                     uni.pageScrollTo({
  193.                         scrollTop: res[0].height + 170, // 将滚动位置设置为顶部
  194.                         duration: 300 // 滚动到顶部的动画时长，单位为毫秒
  195.                     });
  196.                 })
  197.             })
  198.         }
  199.     },
  200. }
  201. </script>

效果图

打字机效果可以自行试试哈，整体页面大概是这个样子

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/698540
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号