308 lines
12 KiB
Vue
308 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item>
|
|
<i class="el-icon-chat-line-square"></i> <span class="top_dao"> TMRGPT</span>
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="container" style="padding: 30px 20px;min-width: 800px;background: none;" v-loading="loading"
|
|
element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
|
|
element-loading-background="rgba(0, 0, 0, 0.8)">
|
|
<div class="anSwer" id="anSwer">
|
|
<div v-for="(item,index) in talkTable">
|
|
<div class="anPoint" v-if="item.role=='user'">
|
|
<!-- <b class="el-icon-question pushBtn" style="color: #006699;"></b> -->
|
|
<!-- <svg t="1681971463063" class="icon pushBtn" viewBox="0 0 1024 1024" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" p-id="7376" width="26" height="26">
|
|
<path
|
|
d="M525.146839 30.984258c273.474065 0 495.153548 221.316129 495.153548 494.327742 0 132.82271-52.587355 252.994065-137.909677 341.751742 26.590968 36.401548 79.706839 116.339613 98.304 144.284903a6.276129 6.276129 0 0 1-5.351226 9.777549 17354.157419 17354.157419 0 0 0-103.324903-1.45342h-355.096775l0.330323-0.330322C247.477677 1015.048258 29.927226 795.714065 29.927226 525.312 29.927226 252.20129 251.639742 30.951226 525.146839 30.951226z m-6.110968 692.95071c-20.48 0-37.16129 6.507355-51.100903 19.489032-13.939613 13.01471-20.48 29.729032-20.48 50.176 0 20.446968 6.540387 37.16129 20.48 50.176a72.340645 72.340645 0 0 0 51.067871 20.446968c20.48 0 37.16129-6.507355 51.100903-19.522065 13.939613-13.01471 21.371871-30.653935 21.371871-51.100903 0-20.446968-7.432258-37.16129-20.413936-50.176-13.939613-12.981677-31.611871-19.489032-52.025806-19.489032z m16.714323-536.080516c-68.773161 0-122.648774 19.522065-162.584775 58.533161-40.893935 39.044129-60.382968 92.919742-60.382967 161.659871h105.901419c0-39.011097 7.432258-69.698065 23.221677-91.036903 17.639226-26.029419 46.443355-38.086194 87.337291-38.086194 31.578839 0 56.683355 8.357161 74.32258 25.996387 16.714323 17.672258 25.996387 41.818839 25.996387 72.472774 0 23.221677-8.357161 45.518452-25.071483 65.96542l-11.164904 13.014709c-60.382968 53.842581-96.619355 92.88671-108.676129 117.958194-13.01471 25.104516-18.597161 55.758452-18.597161 91.069935v13.01471h106.859355v-13.01471c0-22.296774 4.624516-41.818839 13.939613-60.382967a143.987613 143.987613 0 0 1 37.16129-46.476387c44.593548-38.978065 71.514839-64.082581 79.872-73.364646 22.296774-29.729032 34.386581-67.848258 34.386581-114.291612 0-56.683355-18.597161-101.276903-55.758452-133.780646-37.128258-33.428645-86.379355-49.218065-146.762322-49.218064z"
|
|
fill="#006699" p-id="7377"></path>
|
|
</svg> -->
|
|
<svg t="1681972043358" class="icon pushBtn" viewBox="0 0 1024 1024" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" p-id="9732" width="26" height="26">
|
|
<path
|
|
d="M905.728 151.552c34.304 0 62.464 28.16 61.952 63.488v497.152c0.512 34.816-27.648 63.488-61.952 63.488h-99.84l-32.256 97.28-129.536-97.28h-291.84c-35.328 0-65.024-31.232-65.024-63.488V215.04c0-34.816 28.16-63.488 62.464-63.488h556.032z"
|
|
fill="#2196F3" p-id="9733"></path>
|
|
<path
|
|
d="M330.24 831.488c-51.712 0-97.28-44.544-97.28-95.744V313.856H103.936c-24.576 0-44.544 20.48-44.544 45.056v493.056c-0.512 25.088 19.968 45.056 44.544 45.056h71.168l13.824 65.024 97.28-65.024h212.992c25.6 0 46.592-22.016 46.592-45.056v-19.456l-194.048-0.512h-21.504z"
|
|
fill="#9FDAFF" p-id="9734"></path>
|
|
<path
|
|
d="M555.008 431.616c0 25.088 6.144 44.544 17.92 59.392s27.648 22.016 47.616 22.016c20.48 0 36.352-7.168 48.128-21.504 11.776-14.336 17.408-34.304 17.408-59.392 0-26.112-5.632-46.592-16.896-61.44s-27.136-22.016-47.104-22.016c-20.48 0-36.864 7.68-48.64 22.528-12.288 15.872-18.432 35.84-18.432 60.416z m203.776 192c-10.24 3.072-23.04 4.608-37.888 4.608-16.896 0-33.28-4.608-48.64-13.824-15.36-9.216-35.328-27.648-59.904-55.808-34.304-1.024-61.44-13.312-81.92-36.864s-30.72-52.736-30.72-87.04c0-39.424 11.264-70.656 33.792-94.72s52.736-35.84 90.624-35.84c34.816 0 62.976 11.264 84.992 34.816 22.016 23.04 32.768 53.248 32.768 91.136 0 29.696-6.656 55.296-19.968 76.288-13.312 21.504-32.256 36.352-57.344 44.544 10.752 11.264 20.992 19.456 30.72 25.088 10.24 5.12 23.04 8.192 38.4 8.192 9.216 0 17.92-1.536 25.088-4.096v43.52z"
|
|
fill="#FFFFFF" p-id="9735"></path>
|
|
</svg>
|
|
<p>{{item.content}}</p>
|
|
</div>
|
|
<div class="anKey" v-if="item.role=='assistant'">
|
|
<!-- <b class="el-icon-info pushBtn" style="color: #e2a714;"></b> -->
|
|
<svg t="1681971921971" class="icon pushBtn" viewBox="0 0 1151 1024" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" p-id="39578" width="26" height="26">
|
|
<path
|
|
d="M546.027756 0.001279c30.253149 0.12792 56.476808 21.362688 63.448464 51.423957a67.158152 67.158152 0 0 1-37.928366 77.647615c-6.523935 3.837609-15.478355 11.832627-15.478355 18.036761-1.535043 39.399449 0 44.516261 0 86.985797h300.35684c37.480645 0 46.882786 8.95442 46.882787 47.202587v432.178699c0 40.934493-8.95442 49.441192-50.528515 49.633072h-164.377572a46.754866 46.754866 0 0 0-9.849862 2.686326v60.762138h58.843333a31.212551 31.212551 0 0 1 26.54346 8.95442c7.035616 6.971656 10.425504 16.885478 9.210261 26.863261v123.059319a34.282638 34.282638 0 0 1-9.594022 28.142463 32.683634 32.683634 0 0 1-27.694743 9.466102H353.571681a32.044033 32.044033 0 0 1-27.630783-9.530062 33.579076 33.579076 0 0 1-8.95442-28.334344v-120.564873c0-28.078504 9.785902-37.160844 38.376087-38.056286h52.063558l4.349289-3.389888 0.447721-1.279203v-57.883931c-10.489464 0-20.275366-1.279203-29.869387-1.535043H229.74484c-30.95671 0-41.382214-10.681344-41.382213-41.446174V275.989304c0-32.299873 9.785902-41.638054 43.556858-41.638054h301.700003V141.73696c0-4.669091-9.146301-9.977783-14.838753-13.30371A67.158152 67.158152 0 0 1 482.195532 50.529794c7.291457-29.869388 33.706996-50.720395 63.832224-50.528515zM124.722282 370.778239v254.561376C55.837206 625.339615 0 568.415086 0 498.058927s55.837206-127.280688 124.722282-127.280688z m949.48835 62.553021a128.431971 128.431971 0 0 1 0 129.199493 122.995359 122.995359 0 0 1-111.290652 61.465699V371.865561c45.283783-1.918804 88.073119 21.682489 111.290652 61.465699z m-739.379274 20.467247c-12.024507 12.792029-18.484482 30.061268-17.84488 47.842188l-0.191881-1.790884c0 17.972801 7.035616 35.17808 19.699725 47.778228 12.600149 12.536188 29.613547 19.379924 47.202587 18.996163A67.477953 67.477953 0 0 0 449.064177 498.250807a68.437355 68.437355 0 0 0-43.109138-59.866695 66.13479 66.13479 0 0 0-71.123681 15.350435z m372.567844-22.06625l0.447721 1.343163a64.599746 64.599746 0 0 0-46.946746 18.420522c-12.600149 12.344308-19.827645 29.229786-20.211406 47.010706a68.309435 68.309435 0 0 0 65.431228 66.774391 67.158152 67.158152 0 0 0 66.646471-66.774391c0.383761-17.84488-6.396014-34.986199-18.740323-47.586348a63.384504 63.384504 0 0 0-46.626945-19.188043z"
|
|
fill="#e2a714" p-id="39579"></path>
|
|
</svg>
|
|
<p>
|
|
<font v-html="item.content" style="white-space: pre-wrap"></font>
|
|
<span class="typer-cursor" v-if="falseMark&&index==talkTable.length-1"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="queTion">
|
|
<el-input type="textarea" v-model="gptForm.question" placeholder="Please enter the question..."
|
|
autosize>
|
|
</el-input>
|
|
<!-- <el-input type="textarea" v-model="gptForm.question" placeholder="Please enter the question..." autosize
|
|
@keyup.enter.native="submitGpt()">
|
|
</el-input> -->
|
|
</div>
|
|
<div class="queSub">
|
|
<el-button type="primary" @click="submitGpt()" :disabled="falseMark">
|
|
Submit Question
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
baseUrl: this.Common.baseUrl,
|
|
mediaUrl: this.Common.mediaUrl,
|
|
user_id: localStorage.getItem('U_id'),
|
|
username: localStorage.getItem('U_name'),
|
|
loading: false,
|
|
talkTable: [],
|
|
gptForm: {
|
|
question: '',
|
|
},
|
|
falseMark: false,
|
|
replyIndex: 0,
|
|
replyEnd: 0,
|
|
replyContent: '',
|
|
};
|
|
},
|
|
created() {
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
// 获取数据
|
|
getData() {
|
|
|
|
},
|
|
|
|
// 提交问题
|
|
submitGpt() {
|
|
// if (this.falseMark) {
|
|
// return false
|
|
// }
|
|
|
|
if (this.gptForm.question == '') {
|
|
this.$message.error('Please fill in the question first!');
|
|
return false
|
|
}
|
|
|
|
this.replyContent = ''
|
|
this.falseMark = true
|
|
this.replyEnd = 0
|
|
let newMark = 0
|
|
|
|
this.talkTable.push({
|
|
role: 'user',
|
|
content: this.gptForm.question
|
|
}, {
|
|
role: 'assistant',
|
|
content: ''
|
|
})
|
|
|
|
var ele = document.getElementById("anSwer");
|
|
if (ele.scrollHeight > ele.clientHeight) {
|
|
setTimeout(function() {
|
|
ele.scrollTop = ele.scrollHeight;
|
|
}, 100);
|
|
}
|
|
|
|
let sendTable = JSON.parse(JSON.stringify(this.talkTable)).splice(0, this.talkTable.length - 1)
|
|
|
|
// 传递问题
|
|
this.$api
|
|
.post('api/Auto/GptCreateChat', {
|
|
message: sendTable
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
let ckeyData = res.data.ckey
|
|
|
|
// 循环答案
|
|
let timeLef = setInterval(() => {
|
|
this.$api
|
|
.post('api/Auto/AjaxForGpt', {
|
|
'ckey': ckeyData
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0 && res.data.msg) {
|
|
this.replyContent = res.data.msg
|
|
if (newMark == 0) {
|
|
this.effactReply()
|
|
}
|
|
newMark++
|
|
if (res.data.msg.indexOf("[{enddata}]") != -1) {
|
|
this.replyContent = this.replyContent.replace(
|
|
"[{enddata}]", "")
|
|
this.replyEnd = 1
|
|
clearInterval(timeLef);
|
|
}
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.log(err);
|
|
});
|
|
}, 1000);
|
|
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
|
|
// 打字机效果
|
|
effactReply() {
|
|
this.gptForm.question = ''
|
|
let typingInterval = setInterval(() => {
|
|
var ele = document.getElementById("anSwer");
|
|
if (ele.scrollHeight > ele.clientHeight) {
|
|
setTimeout(function() {
|
|
ele.scrollTop = ele.scrollHeight;
|
|
}, 500);
|
|
}
|
|
let replyText = this.replyContent;
|
|
if (this.replyIndex > replyText.length) {
|
|
if (this.replyEnd == 1) {
|
|
clearInterval(typingInterval);
|
|
this.replyIndex = 0;
|
|
this.falseMark = false
|
|
}
|
|
} else {
|
|
this.talkTable[this.talkTable.length - 1].content = this.talkTable[this.talkTable.length -
|
|
1]
|
|
.content + replyText.slice(this.replyIndex - 1, this.replyIndex);
|
|
this.replyIndex++;
|
|
}
|
|
}, 50);
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.anSwer {
|
|
/* height: 600px; */
|
|
position: absolute;
|
|
top: 85px;
|
|
bottom: 135px;
|
|
left: 20px;
|
|
right: 45px;
|
|
overflow-y: scroll;
|
|
padding: 0 20px 0 15px;
|
|
background: #fff;
|
|
}
|
|
|
|
.anSwer>div>div {
|
|
padding: 20px 0 20px 20px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.anPoint {
|
|
margin: 0 0 5px 0;
|
|
}
|
|
|
|
.anKey {
|
|
margin: 0 0 20px 0;
|
|
background-color: rgba(226, 167, 20, 0.2);
|
|
}
|
|
|
|
.pushBtn {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
font-size: 26px;
|
|
}
|
|
|
|
.anSwer>div>div>p {
|
|
display: inline-block;
|
|
padding: 0 0 0 20px;
|
|
width: 92%;
|
|
line-height: 24px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.queTion {
|
|
position: absolute;
|
|
bottom: 80px;
|
|
left: 20px;
|
|
right: 45px;
|
|
border: 2px solid rgba(0, 102, 153, 0.4);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/deep/.queTion .el-textarea__inner {
|
|
border-radius: 8px;
|
|
border: none !important;
|
|
}
|
|
|
|
.queSub {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
right: 45px;
|
|
margin: 20px 0 0 0;
|
|
}
|
|
|
|
|
|
|
|
.anSwer::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
|
|
.anSwer::-webkit-scrollbar-thumb {
|
|
border-radius: 100px;
|
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 102, 153, 0.2);
|
|
background: #006699;
|
|
}
|
|
|
|
|
|
.anSwer::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 102, 153, 0.2);
|
|
border-radius: 0;
|
|
background: rgba(0, 102, 153, 0.1);
|
|
|
|
}
|
|
|
|
@keyframes mydeamon {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.typer-cursor {
|
|
background-color: #e2a714;
|
|
animation: mydeamon 0.6s infinite;
|
|
-webkit-animation: mydeamon 0.6s infinite;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin: 0 0 0 3px;
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
</style>
|