溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是如何實現vue+AI智能機器人回復功能，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
操作步驟
前端代碼是參考github上的一個開源項目，里面包括AI機器人回復和聊天室兩個模塊，這里只抽取出來一個AI機器人回復的前端，有興趣的話，可以點擊查看
因為第三方API的請求是外網的，存在跨域問題，所以要配置代理，配置如下：
文件：vue.config.js
const vueConfig = {
//上面還有項目的其他配置
devServer: {
port: 8000,
proxy: {
'/ai': {
target: 'http://openapi.tuling123.com/',
changeOrigin: true,
pathRewrite: {'^/ai': ''}
}
}
},
}
module.exports = vueConfig配完代理后，創建請求實例：
文件： request.js
// 創建AI機器人回復請求axios實例
const aiService = axios.create({
//VUE_APP_AI_BASE_URL=/ai
//baseURL: process.env.VUE_APP_AI_BASE_URL,
baseURL: '/ai',
timeout: 10000
})
……
export {
aiService as aiAxios
}第三方AI機器人有很多，筆者嘗試過阿里和圖靈兩個，調用方式都差不多，但是阿里的有點小貴，所以這里以圖靈的為示例：
aiAxios.post('/openapi/api/v2', {
reqType: '0',
perception: {
inputText: {
text: this.inputContent
}
},
userInfo: {
//圖靈上注冊后自己的機器人apikey
apiKey: '****',
//登錄用戶用賬戶ID
userId: '123456'
}
}).then(res => {
let text= res.data.results[0].values.text;
this.msgs.push({
date: moment().format('YYYY-MM-DD HH:mm:ss'),
from: '智能機器人',
content: text,
self: false,
avatarUrl: aiHeadImg
})
this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight
}).catch(err => {
this.$message.info(err);
})整體示例代碼
<template lang="html">
<transition name="slide-right">
<div class="chatting">
<!-- 聊天界面頭部 -->
<div class="chatting-header">
<div class="chatting-back">
<i class="icon-back"></i>
</div>
<div class="chatting-title">
<h3>AI 智能機器人</h3>
</div>
<div class="chatting-menu">
<i class="icon-menu"></i>
</div>
</div>
<!-- 聊天內容區域 -->
<div ref="chattingContent" id="chattingContent" class="chatting-content">
<div v-for="item of msgs">
<!--用戶輸入內容-->
<div v-if="item.self" class="chatting-item self clearfix">
<div class="msg-date">
{{ item.date }}
</div>
<div class="msg-from">
<span class="msg-author">{{ item.from}}</span>
<img :src="item.avatarUrl" alt="">
</div>
<div class="msg-content">{{ item.content }}</div>
</div>
<!--AI回復內容-->
<div v-else class="chatting-item other clearfix">
<div class="msg-date">
{{ item.date }}
</div>
<div class="msg-from">
<img :src="item.avatarUrl" alt="">
<span class="msg-author">{{ item.from }}</span>
</div>
<div class="msg-content">{{ item.content }}</div>
</div>
</div>
</div>
<!-- 輸入區域 -->
<div class="chatting-input">
<input @keyup.enter="send" v-model.trim="inputContent" placeholder="與智能機器人聊些啥">
<button @click="send">發送</button>
</div>
</div>
</transition>
</template>
<script>
import {aiAxios} from '../../../utils/request'
import moment from 'moment'
//下面兩張頭像自己從網上隨便找兩張
import aiHeadImg from '../../../assets/web/pub/images/head-ai.svg'
import clientHeadImg from '../../../assets/web/pub/images/pltx.png'
export default {
name: 'chatting',
data() {
return {
msgs: localStorage.msgs_ai && JSON.parse(localStorage.msgs_ai) || [],
inputContent: '',
oContent: {}
}
},
watch: {
msgs(val) {
localStorage.msgs_ai = JSON.stringify(val);
}
},
mounted() {
this.oContent = document.getElementById('chattingContent');
setTimeout(() => {
this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight
}, 0)
},
methods: {
//發送消息
send() {
this.oContent.scrollTop = this.oContent.scrollHeight;
if (this.inputContent === '') {
return;
}
this.msgs.push({
date: moment().format('YYYY-MM-DD HH:mm:ss'),
from: this.userInfo.personname || '匿名',
content: this.inputContent,
self: true,
avatarUrl: clientHeadImg
});
setTimeout(() => {
this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight
}, 0)
this.getClientRobotReply()
this.inputContent = '';
},
//圖靈AI機器人回復
getClientRobotReply() {
aiAxios.post('/openapi/api/v2', {
reqType: '0',
perception: {
inputText: {
text: this.inputContent
}
},
userInfo: {
//圖靈上注冊后自己的機器人apikey
apiKey: '****',
//登錄用戶用賬戶ID
userId: '123456'
}
}).then(res => {
let text= res.data.results[0].values.text;
this.msgs.push({
date: moment().format('YYYY-MM-DD HH:mm:ss'),
from: '智能機器人',
content: text,
self: false,
avatarUrl: aiHeadImg
})
this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight
}).catch(err => {
this.$message.info(err);
})
}
}
}
</script>
<style lang="less" scoped>
.chatting {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.chatting-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
width: 100%;
background-color: #2196f3;
color: white;
padding-left: 10px;
padding-right: 15px;
.chatting-back {
width: 30px;
height: 30px;
i.icon-back {
/*background: url('../../common/icons/icon-group2.svg') no-repeat;*/
background-size: contain;
}
}
.chatting-title {
i.icon-group {
vertical-align: top;
width: 30px;
height: 30px;
//background: url('./images/icon-group.svg') no-repeat;
background-size: contain;
margin-right: 3px;
}
}
.chatting-menu {
width: 30px;
height: 30px;
i.icon-menu {
/*background: url('../../common/icons/icon-index.svg') no-repeat;*/
background-size: contain;
}
}
}
.chatting-content {
flex: 1;
width: 100%;
background-color: rgba(0, 0, 0, .1);
overflow: auto;
.chatting-item {
padding: 10px;
width: 100%;
.msg-date {
text-align: center;
color: gray;
font-size: 80%;
}
.msg-from {
display: flex;
align-items: center;
span.loc {
color: gray;
font-size: 60%;
margin-right: 5px;
}
.msg-author {
font-size: 1.2rem;
}
img {
width: 30px;
height: 30px;
border-radius: 15px;
}
}
.msg-content {
margin-top: 5px;
background-color: white;
width: 200px;
padding: 6px 10px;
border-radius: 10px;
}
}
.chatting-item + .chatting-item {
margin-top: 10px;
}
.self {
.msg-from {
display: flex;
justify-content: flex-end;
align-items: center;
img {
margin-left: 10px;
}
}
.msg-content {
float: right;
word-wrap: break-word;
word-break: break-all;
margin-right: 10px;
}
}
.other {
.msg-from {
display: flex;
justify-content: flex-start;
align-items: center;
img {
margin-right: 10px;
}
}
.msg-content {
float: left;
margin-left: 10px;
word-wrap: break-word;
word-break: break-all;
}
}
.online {
width: 200px;
// max-width: 100%;
margin: 3px auto;
border-radius: 4px;
text-align: center;
background-color: #FFFDE7;
}
}
.chatting-input {
display: flex;
height: 40px;
width: 100%;
input {
flex: 1;
padding-left: 10px;
// padding-top: 10px;
height: 100%;
font-size: 1.3rem;
}
button {
width: 60px;
height: 100%;
background-color: #2196f3;
color: white;
font-size: 1.2rem;
}
}
}
</style>看完這篇關于如何實現vue+AI智能機器人回復功能的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
