為在線客服系統接入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=https://www.cnblogs.com/taoshihan/archive/2023/02/07/"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=https://www.cnblogs.com/taoshihan/archive/2023/02/07/"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，附代碼

下一篇：vue3 中好用的插件