Ajax — 聊天机器人演示

<body><div class="wrap"><!-- 头部 Header 区域 --><div class="header"><h3>小思同学</h3><img src="img/person01.png" alt="icon" /></div><!-- 中间 聊天内容区域 --><div class="main"><ul class="talk_list" style="top: 0px;" id="talk_list"><!-- <li class="left_word"><img src="img/person01.png" /> <span>嗨，最近想我没有？</span></li> --><!-- <li class="right_word"><img src="img/person02.png" /> <span>你好哦</span></li> --></ul><div class="drag_bar" style="display: none;"><div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div></div></div><!-- 底部 消息编辑区域 --><div class="footer"><img src="img/person02.png" alt="icon" /><input type="text" placeholder="说的什么吧..." class="input_txt" id="ipt" /><input type="button" value="发 送" class="input_sub" id="btnSend" /></div></div><!-- 注意：只要为 audio 指定了新的 src 属性，而且指定了 autoplay，那么，语音就会自动播放 --><audio src="" id="voice" autoplay style="display: none;"></audio>//已下是滚动条函数添加<script type="text/javascript" src="js/scroll.js"></script><!-- <script src="./js/chat.js"></script> -->
</body>

//重置文件<link rel="stylesheet" href="css/reset.css" />
//文本主体文件<link rel="stylesheet" href="css/main.css" />body {font-family: 'Microsoft YaHei';
}
.wrap {position: fixed;width: 450px;left: 50%;margin-left: -225px;top: 20px;bottom: 20px;border: 1px solid #ebebeb;background-color: #fff;border-radius: 10px;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);overflow: hidden;
}
.header {height: 55px;background: linear-gradient(90deg, rgba(246, 60, 47, 0.6), rgba(128, 58, 242, 0.6));overflow: hidden;
}
.header h3 {color: #faf3fc;line-height: 55px;font-weight: normal;float: left;letter-spacing: 2px;margin-left: 25px;font-size: 18px;text-shadow: 0px 0px 5px #944846;
}
.header img {float: right;margin: 7px 25px 0 0;border-radius: 20px;box-shadow: 0 0 5px #f7f2fe;
}
.main {position: absolute;left: 0;right: 0;top: 55px;bottom: 55px;background-color: #f4f3f3;box-sizing: border-box;padding: 10px 0;overflow:hidden;
}
.talk_list{position: absolute;width:100%;left:0px;top:0px;
}
.talk_list li {overflow: hidden;margin: 20px 0px 30px;
}
.talk_list .left_word img {float: left;margin-left: 20px;
}
.talk_list .left_word span {float: left;background-color: #fe9697;padding: 10px 15px;max-width: 290px;border-radius: 12px;font-size: 16px;color: #fff;margin-left: 13px;position: relative;line-height: 24px;
}
.talk_list .left_word span:before {content: '';position: absolute;left: -8px;top: 3px;width: 13px;height: 12px;background: url('../img/corner01.png') no-repeat;
}
.talk_list .right_word img {float: right;margin-right: 20px;
}
.talk_list .right_word span {float: right;background-color: #fff;padding: 10px 15px;max-width: 290px;border-radius: 12px;font-size: 16px;color: #000;margin-right: 13px;position: relative;line-height: 24px;
}
.talk_list .right_word span:before {content: '';position: absolute;right: -8px;top: 3px;width: 13px;height: 12px;background: url('../img/corner02.png') no-repeat;
}
.drag_bar{position:absolute;right:0px;top:0px;background-color: #fff;height:100%;width:6px;box-sizing:border-box;border-bottom:1px solid #f4f3f3;
}
.drager{position:absolute;left:0px;top:0px;background-color: #cdcdcd;height:100px;width:6px;border-radius:3px;cursor: pointer;
}.footer{width:100%;height: 55px;left:0px;bottom:0px;background-color:#fff;position: absolute;
}.footer img{float: left;margin:8px 0 0 20px;
}.input_txt{float: left;width:270px;height:37px;border:0px;background-color: #f4f3f3;margin:9px 0 0 20px;border-radius:8px;padding:0px;outline:none;text-indent:15px;
}
.input_sub{float: left;width:70px;height:37px;border:0px;background-color: #fe9697;margin:9px 0 0 15px;border-radius:8px;padding:0px;outline:none;color:#fff;cursor: pointer;
}

以下引入文件请自行下载：<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript" src="js/jquery.mousewheel.js"></script>
//* http://jqueryui.com
//(http://brandon.aaron.sh)

$(function () {// 初始化右侧滚动条// 这个方法定义在scroll.js中resetui()// 为发送按钮绑定鼠标点击事件$('#btnSend').on('click', function () {var text = $('#ipt').val().trim()if (text.length <= 0) {return $('#ipt').val('')}// 如果用户输入了聊天内容，则将聊天内容追加到页面上显示$('#talk_list').append('<li class="right_word"><img src="img/person02.png" /> <span>' + text + '</span></li>')$('#ipt').val('')// 重置滚动条的位置resetui()// 发起请求，获取聊天内容getMsg(text)})// 获取聊天机器人发送回来的消息function getMsg(text) {$.ajax({method: 'GET',url: 'http://www.liulongbin.top:3006/api/robot',data: {spoken: text},success: function (res) {// console.log(res)if (res.message === 'success') {// 接收聊天消息var msg = res.data.info.text$('#talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>' + msg + '</span></li>')// 重置滚动条的位置resetui()// 调用 getVoice 函数，把文本转化为语音getVoice(msg)}}})}// 把文字转化为语音进行播放function getVoice(text) {$.ajax({method: 'GET',url: 'http://www.liulongbin.top:3006/api/synthesize',data: {text: text},success: function (res) {// console.log(res)if (res.status === 200) {// 播放语音$('#voice').attr('src', res.voiceUrl)}}})}// 为文本框绑定 keyup 事件$('#ipt').on('keyup', function (e) {// console.log(e.keyCode)if (e.keyCode === 13) {// console.log('用户弹起了回车键')$('#btnSend').click()}})
})

实现效果：

Ajax — 聊天机器人演示相关推荐

fcn从头开始_如何从头开始构建基本的聊天机器人
fcn从头开始 Be it a Whatsapp chat, Telegram group, Slack channel, or any product website, I'm sure you h ...
ajax练习——聊天机器人
一.效果演示二.代码 html <!DOCTYPE html> <html lang="zh-cn"><head><meta chars ...
ajax实现聊天机器人（语音助手）完整源码
实现思路:(1)点击发送按钮触发点击事件,进行非空判断,如果输入内容为空或空格,跳出弹窗"输入内容不能为空"(2)设置全局空数组用于存放用户和机器人的语言,为了进行区分,可在数组中 ...
聊天机器人（Ajax实现聊天机器人接口的调用）
文章目录前言一.UI布局二.用户内容渲染到聊天窗口三.获取聊天机器人消息 1.jquery中的ajax 2.调用机器人接口四.将机器人的聊天内容转化为语音播放五.使用回车发送消息总结 - ...
三分钟学会 H5 聊天机器人开发（附源码和在线演示）
[学习目标] 熟悉和掌握 HTML结构和CSS的相关知识学会使用HBuilder进行APP打包熟悉JavaScript的基本用法和jQuery的使用(提前预习) HBuilder 它是一个快速开发 ...
使用 ChatterBot 库制作一个聊天机器人
作者 | 周萝卜来源 | 萝卜大杂烩我们学习一些如何使用 ChatterBot 库在 Python 中创建聊天机器人,该库实现了各种机器学习算法来生成响应对话,还是挺不错的 1什么是聊天机器人聊 ...
400 多行代码！超详细 Rasa 中文聊天机器人开发指南 | 原力计划
作者 | 无名之辈FTER 责编 | 夕颜出品 | 程序人生(ID:coder_life) 本文翻译自Rasa官方文档,并融合了自己的理解和项目实战,同时对文档中涉及到的技术点进行了一定程度的扩展, ...
聊天机器人落地及进阶实战 | 公开课速记
嘉宾 | 邵浩编辑 | suiling 来源 | AI科技大本营在线公开课近年来,聊天机器人技术及产品得到了快速的发展.聊天机器人作为人工智能技术的杀手级应用,发展得如火如荼,各种智能硬件层出不穷 ...
【免费福利】零AI基础，如何搭建聊天机器人：技术架构剖析
作为人工智能领域最为重要的技术,自然语言处理的应用在工业界无处不在.从网页公开数据的分析和抽取.情感分析.机器翻译.智能客服.问答系统到聊天机器人,它的重要性不言而喻. 今天我们来探讨一下自然语言处理 ...

Ajax — 聊天机器人演示

Ajax — 聊天机器人演示相关推荐

最新文章

热门文章