微客导航 » 文章资讯 » vue+AI智能机器人回复功能实现

vue+AI智能机器人回复功能实现

2023-07-20 17:51:05 212

本文实例为大家分享了vue+AI智能机器人回复的具体代码，供大家参考，具体内容如下

操作步骤

引入前端代码

前端代码是参考github上的一个开源项目，里面包括AI机器人回复和聊天室两个模块，这里只抽取出来一个AI机器人回复的前端，有兴趣的话，可以点击查看

封装好代理与请求

因为第三方API的请求是外网的，存在跨域问题，所以要配置代理，配置如下：

文件：vue.config.js

constvueConfig={
//上面还有项目的其他配置

devServer:{
port:8000,
proxy:{
'/ai':{
target:'http://openapi.tuling123.com/',
changeOrigin:true,
pathRewrite:{'^/ai':''}
}
}
},
}
module.exports=vueConfig

配完代理后，创建请求实例：

文件：request.js

//创建AI机器人回复请求axios实例
constaiService=axios.create({
//VUE_APP_AI_BASE_URL=/ai
//baseURL:process.env.VUE_APP_AI_BASE_URL,
baseURL:'/ai',
timeout:10000
})

……

export{
aiServiceasaiAxios
}

调用第三方AI机器人的API

第三方AI机器人有很多，笔者尝试过阿里和图灵两个，调用方式都差不多，但是阿里的有点小贵，所以这里以图灵的为示例：

aiAxios.post('/openapi/api/v2',{
reqType:'0',
perception:{
inputText:{
text:this.inputContent
}
},
userInfo:{
//图灵上注册后自己的机器人apikey
apiKey:'****',
//登录用户用账户ID
userId:'123456'
}
}).then(res=>{
lettext=res.data.results[0].values.text;
this.msgs.push({
date:moment().format('YYYY-MM-DDHH:mm:ss'),
from:'智能机器人',
content:text,
self:false,
avatarUrl:aiHeadImg
})
this.$refs.chattingContent.scrollTop=this.$refs.chattingContent.scrollHeight
}).catch(err=>{
this.$message.info(err);
})

整体示例代码

AI智能机器人

发送 .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:6px10px; 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:3pxauto; 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; } } }

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue+AI智能机器人回复功能实现

AI智能机器人

热门推荐

随机推荐