小青苔基地为在线客服系统接入chatGPT（四）：chatGPT接口vue网页版，可以联系上下文语境，可以实现自己的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:数据) 这是我们输入的内容，后面接上返回的内容，效果如图所示
具体详细代码：
<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>
1.本站默认解压密码为：xiaoqingtai.com
2.本站所有内容均由互联网收集整理，仅供大家参考、学习，禁止商用。
3.本站所有内容版权归原著所有，如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注
小青苔基地 » 为在线客服系统接入chatGPT（四）：chatGPT接口vue网页版，可以联系上下文语境，可以实现自己的chatGPT，附代码
2.本站所有内容均由互联网收集整理，仅供大家参考、学习，禁止商用。
3.本站所有内容版权归原著所有，如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注
小青苔基地 » 为在线客服系统接入chatGPT（四）：chatGPT接口vue网页版，可以联系上下文语境，可以实现自己的chatGPT，附代码
