昆明做网站找启搜网络,广州市品牌网站建设平台,个人博客主页,超详细wordpress#x1f942;(❁◡❁)您的点赞#x1f44d;➕评论#x1f4dd;➕收藏⭐是作者创作的最大动力#x1f91e; 前言 现如今生活中到处都是聊天机器人的身影#xff0c;聊天机器人不仅仅能减少人工的聊天压力#xff0c;而且十分的可爱有趣#xff0c;安卓系统的小AI#xf… (❁´◡❁)您的点赞➕评论➕收藏⭐是作者创作的最大动力 前言 现如今生活中到处都是聊天机器人的身影聊天机器人不仅仅能减少人工的聊天压力而且十分的可爱有趣安卓系统的小AI苹果系统的siri相信大家都感受到了这两个机器人的可爱、实用性然而聊天机器人背后实现的原理是什么呢这篇文章我将通过一个非常有趣的聊天机器人案例带大家了解聊天机器人背后的原理哦 文章の目录 前言什么是聊天机器人聊天机器人案例效果预览将用户输入的内容渲染到聊天窗口发起请求获取聊天信息将机器人聊天内容转换成语音实现自动播放语音使用回车键发送消息总结案例实现步骤 什么是聊天机器人 聊天机器人可用于实用的目的如客户服务或资讯获取。有些聊天机器人会搭载自然语言处理系统但大多简单的系统只会撷取输入的关键字再从数据库中找寻最合适的应答句。聊天机器人是虚拟助理如Google智能助理的一部分可以与许多组织的应用程序网站以及即时消息平台Facebook Messenger连接。非助理应用程序包括娱乐目的的聊天室研究和特定产品促销社交机器人。聊天机器人实际上就是一个可以模拟人类对话的计算机程序
聊天机器人案例效果预览 大家可以看到当我向输入框输入想你了聊天机器人自动回复了想我什么呀而且自动播报语音实现这些功能的步骤是先将输入框的文字渲染到聊天窗口中聊天机器人会根据输入框的内容返回数据我们再将返回的数据渲染到页面中转换成语音即可只要掌握了这个步骤相信小伙伴们都能轻松的写出一个智能聊天机器人案例
将用户输入的内容渲染到聊天窗口
代码示例如下
// 为发送按钮绑定点击事件处理函数
$(#btnSend).on(click, function () {var text $(#ipt).val().trim() // 获取用户输入的内容if (text.length 0) { // 判断用户输入的内容是否为空return $(#ipt).val()}// 将用户输入的内容显示到聊天窗口中$(#talk_list).append(li classright_wordimg srcimg/person02.png / spantext /span/li)resetui() // 重置滚动条的位置$(‘#ipt’).val() // 清空输入框的内容// TODO: 发起请求获取聊天消息
})发起请求获取聊天信息
代码示例如下
function getMsg(text) {$.ajax({method: GET,url: http://ajax.frontend.itheima.net:3006/api/robot,data: {spoken: text},success: function (res) {if (res.message success) {var msg res.data.info.text$(#talk_list).append(li classleft_wordimg srcimg/person01.png / span m
sg /span/li)resetui()// TODO: 发起请求将机器人的聊天消息转为语音格式}}})
}将机器人聊天内容转换成语音
代码示例如下
function getVoice(text) {$.ajax({method: GET,url: http://ajax.frontend.itheima.net:3006/api/synthesize,data: {text: text},success: function (res) {// 如果请求成功则 res.voiceUrl 是服务器返回的音频 URL 地址if (res.status 200) {$(#voice).attr(src, res.voiceUrl)}}})}实现自动播放语音
代码示例如下
!-- 音频播放语音内容 --
audio src idvoice autoplay styledisplay: none;/audio使用回车键发送消息
代码示例如下
// 让文本输入框响应回车事件后提交消息
$(#ipt).on(keyup, function (e) {// e.keyCode 可以获取到当前按键的编码if (e.keyCode 13) {// 调用按钮元素的 click 函数可以通过编程的形式触发按钮的点击事件$(#btnSend).click()}
})总结案例实现步骤 首先我们需要将页面的结构写出来然后我们需要将用户输入的内容渲染到聊天窗口然后我们再根据用户输入的内容发起Ajax请求向后台请求聊天数据获取请求到的数据后我们首先需要将文本转换成语音然后将文本渲染到聊天界面中最后我们需要通过给回车键绑定事件实现回车键发送消息的案例本案例一共只敲了行代码便实现了简单有趣的自动回复的聊天机器人案例希望大家能通过此案例有所收获哦
