oa-system/src/components/GPT/GPTindex.vue

<template>
    <div class="gpt-box">
        <div class="dialogue-all dialogueone" style="overflow-y: auto;">
            <div v-for="(item,index) in dialogueArr" :key="index" class="dialogue-box">
                <div class="user-dialogue">{{ item.userdialogue }}</div>
                <!-- <div class="gpt-dialogue">{{ item.GPTdialogue }}</div> -->
                <vue-typed-js
                class="gpt-dialogue"
                :strings="item.GPTdialogue"
                :showCursor="true"
                :cursorChar="'_'"
                :startDelay="300"
                :typeSpeed="50"
                >
                    <span class="typing"></span>
                </vue-typed-js>
            </div>
        </div>
        <div class="dialogue-all" >
            <el-input
            type="textarea"
            placeholder="请输入内容"
            @keyup.enter.native="ChatGptCompletions()"
            :autosize="{ minRows: 2, maxRows: 4}"
            v-model="textarea">
            </el-input>
            <el-button @click="ChatGptCompletions()" type="primary" icon="el-icon-search">搜索</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            typingTexts: [
                "翻译机器翻译是另一个GPT的应用领域，它可以将一种语言的文本转换为另一种语言的文本。使用GPT进行机器翻译的一个好处是可以在源语言和目标语言之间进行平滑的转换，从而提高翻译的质量。3、问答系统GPT可以用于构建问答系统，其基本原理是通过学习训练数据中的问题和答案，将问题转换为特定领域的答案。当输入一个问题时，GPT可以预测出最有可能的答案，从而提高问答系统的质量。4、语音识别GPT也可以用于语音识别，其原理与文本生成类似。使用GPT进行语音识别的一个好处是可以进行语音到文本的转化，从而将语音转化为可观看的文本内容。"
            ],
            textarea: '',
            dialogueArr:[
               
            ]
        }   
    },
    methods:{
        ChatGptCompletions(){
            console.log(typeof this.textarea)
            var url = "/api/SmallFun/ChatGptCompletions"
            var that = this;
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    prompt:that.textarea
                }
            }).then(function (res) {
                console.log(res);
                if (res.data.code == 200) {
                    that.dialogueArr.push({userdialogue:that.textarea,GPTdialogue:[res.data.data]})
                }
                that.textarea="";
                console.log(that.dialogueArr)
            })
        },
    },
    mounted(){
        document.querySelector(".dialogue-all").style.height = window.innerHeight-210 + "px";
    }
}
</script>
<style>
    .dialogue-all{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
        position: relative;
    }
    .user-dialogue{
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        padding: 5px 15px;
        background-color: #F7F7F9;
        font-size: inherit;
        color: #606266;
        margin-bottom: 20px;
    }
    .gpt-dialogue{
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        padding: 5px 15px;
        font-size: inherit;
        color: #FFF;
        margin-bottom: 20px;
        background-color: #002A76;
    }
    .dialogue-all:nth-child(1){
        margin-bottom: 16px;
    }
    .dialogue-all:nth-child(2){
        display: flex;
        justify-content: space-between;
        align-items: end;
    }
    .dialogue-all .el-textarea{
        width: 94%;
    }
    .dialogue-all .el-button{
        height: 54px;
    }

    /*滚动条样式*/
    .dialogueone::-webkit-scrollbar {
        width: 4px;    
        /*height: 4px;*/
    }
    .dialogueone::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }
    .dialogueone::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);

    }
    .dialogueone .typed-element{
        display: inline-block;
        text-align: justify;
    }
</style>