ChatGpt-2 对话单页功能实现vue3+elementplus


接口可参照CHATGPT.NET自行实现
import { RouterLink, RouterView } from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
import { MoreFilled ,CircleCheck} from "@element-plus/icons-vue";
import { ref,shallowReactive,shallowRef } from "vue";
import { chat } from "./api/chat";
import { ElMessage } from 'element-plus'
const textarea =ref("");
const buttonText =ref("Send");
const sendDisabled =shallowRef(false);
const sendChat = (data) => {
let prompt = textarea.value;
if(prompt!=''){
textarea.value='';
ElMessage({
message: '已发送请等待.',
type: 'success',
})
sendDisabled.value = true;
activities.splice(0,0,
{
content: "Robot: 正在努力思考。。。,受网络影响可能会需要一会",
timestamp: new Date(),
userType:'1',
size: "large",
type: "primary",
icon: MoreFilled
}, {
content: `You: ${prompt}`,
timestamp: new Date(),
userType:'2',
size: "large",
color: "#0bbd87",
icon: CircleCheck,
}
);
console.log('数组', activities);
chat({q:prompt}).then(res=>{
if(res.status){
textarea.value = '';
let content = res.response.replace(/\\n/g, '
');
console.log(res.response);
activities[0] = {
content: content,
timestamp: new Date(),
size: "large",
type: "primary",
icon: CircleCheck,
};
}else{
ElMessage.error(`Oops, error ${res.response}.`)
}
sendDisabled.value = false;
}).catch(res=>{
sendDisabled.value = false;
activities[0] = {
content: '回答已超时,可以尝试更详细的对话',
timestamp: new Date(),
size: "large",
type: "primary",
icon: CircleCheck,
};
})
}
}
let activities = shallowReactive([
{
content: "Robot: 你可以开始跟我对话了",
timestamp: new Date(),
size: "large",
userType:'1',
type: "primary",
icon: CircleCheck,
},
]);
>
class="mainH" > ChatGpt在线体验
>
> v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="activity.type" :color="activity.color" :size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp" > 输入对话 v-model="textarea" :rows="4" type="textarea" placeholder="Please input" /> type="primary" :disabled="sendDisabled" @click="sendChat" >Send >
>
header {
line-height: 1.5;
max-height: 100vh;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
nav {
width: 100%;
font-size: 12px;
text-align: center;
margin-top: 2rem;
}
nav a.router-link-exact-active {
color: var(--color-text);
}
nav a.router-link-exact-active:hover {
background-color: transparent;
}
nav a {
display: inline-block;
padding: 0 1rem;
border-left: 1px solid var(--color-border);
}
nav a:first-of-type {
border: 0;
}
/* @media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
nav {
text-align: left;
margin-left: -1rem;
font-size: 1rem;
padding: 1rem 0;
margin-top: 1rem;
}
} */
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
