- A+
所属分类：Web前端
如果想实现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:数据) 这是我们输入的内容，后面接上返回的内容，效果如图所示
具体详细代码：
<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>
