用WebSpeechAPI和Node.js创建一个简单的AI聊天机器人

新知榜官方账号

2023-09-19 00:27:02

用WebSpeechAPI和Node.js创建一个简单的AI聊天机器人

本文介绍如何用WebSpeechAPI和Node.js创建一个简单的AI聊天机器人，通过Socket.IO实现浏览器和服务器之间实时双向交流，使用API.AI进行自然语言处理，最终实现与AI进行交互的功能。

搭建Web应用框架

首先，我们要用Node.js搭建一个Web应用框架。创建你的应用目录，就像这样：

.├── index.js├── public│   ├── css│   │   └── style.css│   └── js│       └── script.js└── views    └── index.html

然后，执行下面的命令来初始化你的Node.js应用：

$ npm init -f

-f命令表示接受默认的配置（你也可以去掉，然后手动配置你的应用），这样会生成一个package.json文件，包含一些基本信息。现在，安装下面的依赖库：

$ npm install express socket.io apiai --save

--save命令将会在package.json中自动更新依赖。我们将要使用Express库，一个Node.js写的Web应用服务框架，可以在本地运行服务器。为了实现在浏览器和服务器之间实时双向交流，我们将会使用Socket.IO。同时，我们将会安装自然语音处理服务工具，API.AI用来构建一个AI聊天机器人。

集成前端代码

用SpeechRecognition接口接收语音WebSpeechAPI有一个主要的控制接口，叫SpeechRecognition，从麦克风接收用户的语音并加以识别。创建用户界面这个应用的UI很简单：一个打开语音识别的按钮。打开index.html，将前端的javascript文件（script.js）和Socket.IO包含进去。

<html lang="en">  <head>…</head>  <body>    …    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script>    <script src="js/script.js"></script>  </body></html>

然后，我们在body中添加一个按钮：

<button>Talk</button>

为了让我们的按钮看起来像demo中的那样，我们需要在源代码中引用style.css文件。

在script.js中，调用SpeechRecognition的实例，WebSpeechAPI的控制接口：

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;const recognition = new SpeechRecognition();

我们同时使用了有前缀和没有前缀的对象，因为Chrome目前支持API的前缀属性。同时，我们使用了ECMAScript6语法，因为ES6，const关键字和箭头函数以及SpeechAPI接口SpeechRecognition和SpeechSynthesis都在浏览器中支持。你可以随意地设置一些属性变量来自定义语音识别：

recognition.lang = 'en-US';recognition.interimResults = false;

然后，拿到按钮的DOM引用，监听点击事件来初始化语音识别：

document.querySelector('button').addEventListener('click', () => {  recognition.start();});

一旦开始语音识别，就能用result事件将刚刚说的话转成文本：

recognition.addEventListener('result', (e) => {  let last = e.results.length - 1;  let text = e.results[last][0].transcript;  console.log('Confidence: ' + e.results[0][0].confidence);  // We will use the Socket.IO here later…});

这将返回SpeechRecognitionResultList对象，你可以在这个对象的数组中得到文本结果。同时，你可以看到上面代码中返回的confidence转录。

实时交互

现在，是时候使用Socket.IO来向服务端发送文本了。用Socket.IO实时交互你可能会好奇为什么我们不用简单的HTTP或者AJAX来代替。你可以通过POST方法向服务端发送数据，但是，通过Socket.IO，我们使用WebSocket发送数据，因为socket是双向交流的最佳解决方案，尤其是当我们从服务端向浏览器推送事件时。通过持续的socket连接，我们不用重新加载浏览器或者频繁地持续发送AJAX请求。

在script.js中实例化http://Socket.IO：

const socket = io();

然后插入你监听SpeechRecognition的result事件代码：

socket.emit('chat message', text);

现在重新回到Node.js代码，接收这条文本，然后使用AI响应用户。

使用API.AI

许多平台和服务都能够让你在应用中用语音-文本自然语言处理来集成AI系统，包括IBM的Watson，微软的LUIS和脸书的Wit.ai。为了快速构建对话界面，我们将使用API.AI，因为它提供了免费的开发者账户，让我们可以使它的Web接口和Node.js库快速地建立一个小型对话系统。

设置API.AI

创建一个账户后，你就创建了一个“代理”。参考文档指南的第一步。接着，点击左边菜单的“SmallTalk”，然后开启启用服务选项。用API.AI界面自定义你的small-talk代理。点击菜单中你的代理名字旁边的齿轮图标，回到“基本设置”页面，拿到API密钥。你将会在Node.jsSDK中使用“客户端访问令牌”。

使用API.AI

我们将使用Node.jsSDK来将我们的Node.js应用连接到API.AI。回到index.js，用你的访问令牌初始化API.AI：

const apiai = require('apiai')(APIAI_TOKEN);

如果你只想在本地运行，你可以在这里硬编码你的API密钥。这里有几种方式来设置环境变量，但我通常使用.env文件来声明变量。在GitHub中的源码中，我用.gitignore隐藏了我的证书文件。但是你可以参考.env-test文件看看它是如何设置的。

现在我们要用服务端的Socket.IO来接收浏览器的数据。一旦建立连接收到消息，使用API.AI的接口来响应用户：

io.on('connection', function(socket) {  socket.on('chat message', (text) => {    // Get a reply from API.AI    let apiaiReq = apiai.textRequest(text, {      sessionId: APIAI_SESSION_ID    });    apiaiReq.on('response', (response) => {      let aiText = response.result.fulfillment.speech;      socket.emit('bot reply', aiText); // Send the result back to the browser!    });    apiaiReq.on('error', (error) => {      console.log(error);    });    apiaiReq.end();  });});

当 API.AI 返回结果后，用 Socket.IO 的socket.emit()方法发送到客户端。

让AI发出声音

回到script.js，用WebSpeechAPI的SpeechSynthesis控制器接口创建一个合成声音的函数。这个函数接收一个字符串参数，让浏览器读出文本：

function synthVoice(text) {  const synth = window.speechSynthesis;  const utterance = new SpeechSynthesisUtterance();  utterance.text = text;  synth.speak(utterance);}

上面的代码首先创建了一个window.speechSynthesis这个API接入点，你可能会注意到这次是没有前缀属性的，这个API比SpeechRecognition更广泛地被支持，所有的浏览器都弃用了SpeechSysthesis的前缀。接着创建了一个SpeechSynthesisUtterance()，然后设置要被合成声音的文本。你可以设置其他的属性，比如voice，来选择浏览器和操作系统支持的声音类型。最终调用SpeechSynthesis.speak()来发出声音。

现在再次用Socket.IO来获得服务端响应，一旦消息收到了，就调用上面的函数。

socket.on('bot reply', function(replyText) {  synthVoice(replyText);});

让我们来试试我们的AI机器人吧！

本页网址：https://www.xinzhibang.net/article_detail-12295.html

寻求报道，请

关键词

WebSpeechAPI Node.js AI 聊天机器人 Socket.IO API.AI

分享至微信：

相关工具

魔撰写作

魔音工坊团队推出的AI智能写作工具

Compose AI

免费的Chrome浏览器自动化写作扩展

Texta

AI博客和文章一键生成

Jenni

AI研究文章和博客写作辅助工具

万彩AI

全能型AI内容和文案创作助手

奇妙文

出门问问推出的AI写作助理

三个国外专业免费的调色网站

三个国外专业免费的调色网站无论制作视频、编辑图片，合适的色彩会让你的作品增加视觉冲击力，所以专业的调色技术价值非凡，一部电影或一部好的视频、图片海报，专业调色耗费少则上万，多则上百万，只是大家对专业调色这个行业知之甚少，今天网玩君就为大家分享三个国外专业免费的调色网站，记得收藏好，以后编辑视频、图片

分类标签调色网站免费

04-18 16:42

电影制作中的纹理技术

纹理在电影制作中的重要性纹理是指将详细的表面特征应用于3D模型或视觉效果元素，使其看起来更逼真。纹理对于创建视觉上引人入胜且可信的电影场景至关重要，尤其是涉及CGI、动画或特效的场景。纹理还支持叙事和讲故事，可以通过纹理设置年龄大小等属性，为故事奠定基础。纹理技术的发展历程自胶片问世以来，电影制作人

分类标签纹理电影制作CGI视觉效果微缩模型UV映射

04-18 16:42

UnrealSynth虚幻合成数据生成器-NSDT

UnrealSynth虚幻合成数据生成器-NSDTUnrealSynth基于UE5虚幻引擎开发，可用于生成合成数据集，包括图像和标注数据。可用于各种行业细分场景中目标识别任务的实施效率提高。UnrealSynth合成数据工具包内容UnrealSynth基于UE5虚幻引擎开发，目前支持YOLO系列模型

分类标签 UnrealSynth虚幻引擎数据合成YOLO模型深度学习训练数据

04-18 16:42

人工智能与音乐：谷歌的Project Magenta

谷歌的Project Magenta利用人工智能技术生成音乐和其他艺术形式，如素描、视频和笑话。该项目的目标是为人们创造新的交流方式。本文介绍了该项目的背景、发展历程和应用。在上世纪90年代中期，谷歌研究院的Douglas Eck就开始了他的人生目标：融合人工智能与音乐。二十年后，他与一支谷歌研究团

分类标签人工智能音乐谷歌

04-18 16:42

如何做好SEO优化？

如何做好SEO优化？想要做好SEO优化，得从站内优化和站外优化两个方面入手。一、站内优化1.关键词定位和分析关键词整理是SEO优化中的核心工作，一旦定下来就不建议再次去更改。站长始终要记住关键词一定要和行业、产品、领域息息相关，同时还可以参考竞争对手所做的关键词，可以利用站长工具、5118、爱站网、

分类标签 SEO优化关键词定位网站架构布局

12-11 08:19

万兴科技：营收实现稳健增长，拥抱AIGC新机遇

万兴科技：营收实现稳健增长，拥抱AIGC新机遇国元证券股份有限公司耿军军近期对万兴科技进行研究并发布了研究报告《2022年年度报告点评：营收实现稳健增长，拥抱AIGC新机遇》，本报告对万兴科技给出买入评级，当前股价为75.24元。万兴科技(300624)事件：公司于2023年4月7日收盘后发布《20

分类标签万兴科技营收增长AIGC

12-11 02:11

AI分身市场潜力巨大，万兴科技、京东等已率先布局

“AI孙燕姿”和“CarynAI”引爆市场最近，“AI孙燕姿”和“CarynAI”以以假乱真的程度引爆市场，都是通过采集本人的语音、文字、图像等素材，并通过开源的生成式训练模型进行训练而成。其中，“CarynAI”成功地借助AI技术，打造了自己的AI分身，通过付费的方式，跟AI版的自己进行交往，预计

分类标签 AI孙燕姿CarynAIAI分身AIGC技术虚拟主播数字人

12-11 02:10

万兴科技推出名师必备讲演神器“万兴智演”

万兴科技推出名师必备讲演神器“万兴智演”9月8日，万兴科技面向泛知识领域，推出名师必备讲演神器“万兴智演”。该款AI演示新品集成强大的AIGC能力、精美的行业课程模板以及动画特效素材，大大简化课件制作过程。同时，产品内置强大的录制、直播功能，通过真人实拍与演示内容相结合的形式，实现人景融合的实时演示

分类标签万兴科技万兴智演AI演示

12-11 02:09

万兴科技创始人吴太兵在2023互联网岳麓峰会上的主题演讲

万兴科技创始人吴太兵在2023互联网岳麓峰会上的主题演讲2023互联网岳麓峰会论坛上，万兴科技创始人、董事长兼总裁吴太兵进行主题演讲。红网时刻新闻记者郭雅倩甘红长沙报道十届、十年，岳麓峰会从2014年的“湖湘汇”到如今云集万人的盛会，积攒了巨大的关注度和影响力。6月19日，2023互联网岳麓峰会在长

分类标签万兴科技吴太兵岳麓峰会

12-11 02:05

樟宜机场：通过科技改变旅客体验

樟宜机场：通过科技改变旅客体验樟宜机场在智能手机上移动的小红点代表了在机场上空飞行的飞机，通过传感器的追踪获取了相关飞行轨迹。机场通过人工智能、面部识别和数据分析等技术的应用，不断提高机场运营效率，保持创新，致力于成为一个旅客体验更佳、充满活力的目的地。人工智能优化机场运营效率樟宜机场在2017年共

分类标签樟宜机场科技旅客体验

12-10 22:16