为在线客服系统接入chatGPT(四):chatGPT接口vue网页版,可以联系上下文语境,可以实现自己的chatGPT,附代码

  • 为在线客服系统接入chatGPT(四):chatGPT接口vue网页版,可以联系上下文语境,可以实现自己的chatGPT,附代码已关闭评论
  • 52 次浏览
  • A+
所属分类:Web前端
摘要

如果想实现chatGPT的网页版,调用接口就可以了,但是如果需要联系上下文语境,就需要在传递的数据的时候进行下拼接

如果想实现chatGPT的网页版,调用接口就可以了,但是如果需要联系上下文语境,就需要在传递的数据的时候进行下拼接

传参的时候对所有的对话数据进行拼接,拼成下面这样

{"prompt":"(You:在吗n)这里在哦,有什么可以帮助你的吗?(You:你这个系统多少钱n)抱歉,您想知道什么?这里是客服中心,不提供价格咨询服务哦。(You:在哪咨询价格n)可以您联系我们的销售团队,他们会给您提供更多的产品价格咨询服务。(You:联系方式发一下n)您可以通过电话或网络咨询,我们的客服热线是000-888-888,网站是Http://www.example.com 。(You:错的n)很抱歉由于我们尽力提供精确和准确的信息,但如果有错误出现了,非常抱歉。请您及时联系我们,我们会尽快纠正这个错误,感谢您的反馈。(You:你是机器人吗n)(You:你是机器人吗n)","max_tokens":2048,"model":"text-davinci-003"}

 

(You:数据) 这是我们输入的内容,后面接上返回的内容,效果如图所示

为在线客服系统接入chatGPT(四):chatGPT接口vue网页版,可以联系上下文语境,可以实现自己的chatGPT,附代码

 

 

 

 

具体详细代码:

<template>     <div class="chatAppBody">         <div class="chatTitle">chatGPT</div>         <div class="chatBox">             <div v-for="row in msgList">                 <div v-if="row.isme!=true">                     <div class="chatNotice">{{row.time}}</div>                     <div class="chatRow">                         <el-avatar class="chatAvatar" :size="30" :src="row.avator"></el-avatar>                         <div class="chatMsgContent">                             <div class="chatUsername">{{row.name}}</div>                             <div class="chatContent" v-html="row.content"></div>                         </div>                     </div>                 </div>                 <div v-if="row.isme==true">                     <div class="chatNotice" v-if="row.show_time==true">{{row.time}}</div>                     <div class="chatRow chatRowMe">                         <div class="chatContent" v-html="row.content"></div>                     </div>                 </div>             </div>         </div>         <div class="chatBottom">             <div class="chatAreaBox">                 <div class="chatArea">                     <textarea class="chatAreaInput" v-model="originMessage"  @keyup.ctrl.enter.exact="chatToUser($event)" @keyup.enter.exact="chatToUser($event,'enter')" ></textarea>                     <div @click="chatToUser($event)" class="chatSendBtn iconfont icon-fasong"></div>                 </div>             </div>              <div class="chatCopyright">                 <i class="el-icon-chat-dot-round"></i> Powered by 唯一客服             </div>         </div>                  <audio id="chatMessageAudio" style="display: none;" :src="require('@/assets/alert2.ogg')"></audio>     </div> </template>  <script>     import tools from '../tools/functions.js'     import storage from '../tools/localStorage.js'     import xss from 'xss'     export default {       name: 'ChatApp',         data() {           return {               window:window,               secret:"自己的密钥",               message:"",               originMessage:"",               msgList:[],               sendDisable:false,           }         },         methods: {            //发送给客户             chatToUser:function(e) {                 let _this=this;                 if(this.sendDisable) return;                 //用户点击了ctrl+enter触发                 if(e && e.ctrlKey && e.keyCode==13) {                      this.originMessage += 'n';                     return;                 }                 if(this.originMessage=="") return;                 _this.message+=`(You:${this.originMessage})`;                 let sendMessage = {                     "prompt":_this.message,                     "max_tokens":2048,                     "model":"text-davinci-003",                 };                 let showMessage={                     isme:true,                     content:this.originMessage,                     show_time:false,                 }                 this.msgList.push(showMessage);                 this.scrollBottom();                 let headers={                     headers:{                          'Authorization': `Bearer ${this.secret}`,                         },                 }                 this.sendDisable=true;                 this.$axios.post('https://api.openai.com/v1/completions',sendMessage,headers).then(function (response) {                     _this.sendDisable=false;                     if(!response.data.choices){                         _this.$message({                           message: response.data.error.message,                           type: 'error'                         });                         return ;                     }                     _this.originMessage="";                     let retMessage=response.data.choices[0].text;                     retMessage=tools.trim(retMessage,"n");                     _this.message+=retMessage;                     let showMessage={                         isme:false,                         avator:"https://goflychat.oss-cn-hangzhou.aliyuncs.com/static/upload/avator/2022June/32a988a3c2f8700119fa1f5da1b6a4bd.png",                         content:retMessage.replaceAll("n","<br>"),                         time:tools.shortTime(tools.getNowDate())                     }                     _this.msgList.push(showMessage);                     _this.alertSound();                     _this.scrollBottom();                 }).catch(function (error) {                     _this.sendDisable=false;                     _this.$message({                       message: error.response.data.error.message,                       type: 'error'                     });                     return ;                 });             },             //滚动到底部             scrollBottom:function(){                 var _this=this;                 this.$nextTick(function(){                     var container = _this.$el.querySelector(".chatBox");                     container.scrollTop = 999999999;                 });             },             //提醒声音             alertSound(){                 tools.alertSound("chatMessageAudio","");             }         },         mounted: function () {         }     } </script>  <style lang="scss">     .chatAppBody{         display: flex;         flex-direction: column;         height: 100vh;         background-color: #f1f5f8;     }     .chatTitle{         background: #fff;         padding: 5px 0px;         text-align: center;         font-size: 14px;     }     .chatBox{         flex: 1;         padding: 0px 5px;         padding-bottom: 15px;         overflow: auto;     }     .chatBottom{         display: flex;         flex-direction: column;     }     .chatRow{         display: flex;         align-items: flex-end;         margin: 5px 0px;     }     .chatAvatar{         margin-right: 5px;         flex-shrink: 0;     }     .chatUsername {         font-size: 12px;         white-space: nowrap;         color: #999;         margin-bottom: 2px;     }     .chatContent{         border-radius: 10px 10px 10px 0px;         padding: 10px;         background-color: rgb(255,255,255);         box-shadow: 0 5px 30px rgb(50 50 93 / 8%), 0 1px 3px rgb(0 0 0 / 5%);         font-size: 14px;         word-break: break-all;         line-height: 21px;         display: inline-block;     }          .chatRowMe{         justify-content: flex-end;     }     .chatRowMe .chatContent{         border-radius: 10px 10px 0px 10px;     }     .chatNotice{         text-align: center;         color: #bbb;         margin: 8px 0;         font-size: 12px;     }     .chatAreaBox{         margin: 0px 10px;         margin-bottom: 10px;         box-shadow: 0 5px 30px rgb(50 50 93 / 8%), 0 1px 3px rgb(0 0 0 / 5%);         border-radius: 10px;     }     .chatArea{         display: flex;         padding: 3px 5px;         align-items: center;         background: #fff;         border-radius: 10px;     }     .chatArea .iconfont{         color: #383838;         font-size: 18px;         margin: 0px 6px;         cursor: pointer;     }     .chatArea .iconfont:hover{         color: #409eff;     }     .chatAreaInput{         border-radius: 10px;         border: 0;         flex: 1;         outline: none;         resize: none;         box-sizing: border-box;         color: #505050;         min-height: 50px;         font-size: 16px;     }     .chatCopyright{         color: #999a9b;         font-size: 12px;         text-align: center;         margin-bottom: 10px;         filter: grayscale(1);         opacity: .9;         font-family: Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Tahoma,Arial,sans-serif;     }          .chatContent a{         color: #07a9fe;         text-decoration: none;     }          .alink{         display: inline-block;         word-break: break-all;         color: #07a9fe;         font-size: 12px;         cursor: pointer;     }          </style>

为在线客服系统接入chatGPT(四):chatGPT接口vue网页版,可以联系上下文语境,可以实现自己的chatGPT,附代码