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


Posted in Javascript onJuly 16, 2020

本文实例为大家分享了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机器人的API

第三方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">
  <h2>AI 智能机器人</h2>
 </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.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
Ajax实现局部刷新的方法实例
Mar 31 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 #Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 #Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 #Javascript
详解js中的几种常用设计模式
Jul 16 #Javascript
JS寄快递地址智能解析的实现代码
Jul 16 #Javascript
详解js中的原型,原型对象,原型链
Jul 16 #Javascript
详解Webpack4多页应用打包方案
Jul 16 #Javascript
You might like
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
python实现按行切分文本文件的方法
2016/04/18 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python用模块pytz来转换时区
2016/08/19 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
Python测试线程应用程序过程解析
2019/12/31 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
如何提高MySql的安全性
2014/06/19 面试题
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
三方协议书范本
2014/04/22 职场文书
商场周年庆活动方案
2014/08/19 职场文书
主要领导对照检查材料
2014/08/26 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
Java的Object类的九种方法
2022/04/13 Java/Android