脚本宝典收集整理的这篇文章主要介绍了

教你用 Web Speech API 和 Node.js 来创建一个简单的 AI 聊天机器人

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <blockquote> <p>简评:使用语音命令在今天变得非常普遍,许多手机用户使用像 Siri 和 Cortana 这样的语音助手,我们的卧室也被亚马逊的 Echo 和<br />Google Home 这样的设备“入侵”了。这些系统都离不开语音识别软件,现在,我们的浏览器也友好支持了 Web Speech<br /><a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>,可以让用户在 Web 应用中集成语音功能。</p> </blockquote> <p>这篇文章将介绍如何使用 <a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a> 来在浏览器中创建人工智能语音聊天界面。这个应用会识别用户的声音,并且用一个合成的声音来回答用户。因为 Web Speech <a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a> 还处在试验阶段,这个应用只在<a href="http://caniuse.com/#search=speech" rel="nofollow noreferrer" target="_blank">支持的浏览器</a>上可用。这篇文章使用的语音识别和语音合成功能,目前仅在基于 Chromium 的浏览器上支持,包括 Chrome 25+ 和 Opera 27+,目前 Firefox,Edge 和 Safari 仅支持语音合成。</p> <p><span class="img-wrap"><img data-src="/img/bVUjbS?w=600&amp;h=171" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><a href="https://vimeo.com/215612852" rel="nofollow noreferrer" target="_blank">Chrome 上运行的 demo 视频链接</a>,接下来我们就来完成这个 demo !</p> <p>要完成这个 Web 应用,我们需要完成下面三个主要的步骤:</p> <ol> <li> <p>使用 Web Speech API 的 SpeechRecognition 接口来识别用户的声音;</p> </li> <li> <p>将用户的消息作为文本字符串发送到商业的自然语言处理 API;</p> </li> <li> <p>一旦 <a href="http://api.ai/" rel="nofollow noreferrer" target="_blank">API.AI</a> 返回了响应文本,使用 SpeechSynthesis 接口来合成语音。</p> </li> </ol> <p><span class="img-wrap"><img data-src="/img/bVUjcL?w=600&amp;h=275" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>这篇文章<a href="https://github.com/girliemac/web-speech-ai" rel="nofollow noreferrer" target="_blank">使用的完整源代码</a>在 GitHub 上。(先帮妹子赞一个)</p> <p><strong>开始你的 Node.js 应用</strong></p> <p>首先,我们要用 Node.js 搭建一个 Web 应用框架。创建你的应用目录,就像这样:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=". ├── index.js ├── public │ ├── css │ │ └── style.css │ └── js │ └── script.js └── views └── index.html " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>. ├── <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex</span><span class="hljs-selector-class">.js</span> ├── <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/public" title="浏览关于“public”的文章" target="_blank" class="tag_link">public</a></span> │ ├── <span class="hljs-selector-tag">css</span> │ │ └── <span class="hljs-selector-tag">style</span><span class="hljs-selector-class">.css</span> │ └── <span class="hljs-selector-tag">js</span> │ └── <span class="hljs-selector-tag">script</span><span class="hljs-selector-class">.js</span> └── <span class="hljs-selector-tag">views</span> └── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.html</span> </code></pre> <p>然后,执行下面的命令来初始化你的 Node.js 应用:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ npm init -f " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs shell"><code><span class="hljs-meta">$</span><span class="bash"> npm init -f</span> </code></pre> <p><strong>-f</strong> 命令表示接受默认的配置(你也可以去掉,然后手动配置你的应用),这样会生成一个 <a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json 文件,包含一些基本信息。</p> <p>现在,安装下面的依赖库:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ npm install express socket.io apiai --save " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>$ npm <span class="hljs-keyword">inst<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a></span> express socket.io apiai <span class="hljs-comment">--save</span> </code></pre> <p><strong>--save</strong> 命令将会在 <a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json 中自动更新依赖。</p> <p>我们将要使用 <a href="https://expressjs.com/" rel="nofollow noreferrer" target="_blank">Express</a> 库,一个 Node.js 写的 Web 应用服务框架,可以在本地运行服务器。为了实现在浏览器和服务器之间实时双向交流,我们将会使用 <a href="https://socket.io/" rel="nofollow noreferrer" target="_blank">Socket.IO</a>。同时,我们将会安装自然语音处理服务工具,API.AI用来构建一个 AI 聊天机器人。</p> <p><a href="https://socket.io/" rel="nofollow noreferrer" target="_blank">Socket.IO</a> 是一个在 Node.js 中轻松使用 WebSocket 的库。通过在客户端和服务端建立 socket 连接,只要 Web Speech API(语音消息)或者 <a href="http://api.ai/" rel="nofollow noreferrer" target="_blank">API.AI</a> API (AI 消息)返回了文本数据,我们的聊天信息就能在浏览器和服务器之间往返。</p> <p>现在,让我们创建 <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.js 文件,并实例化 Express 以及监听服务器:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const express = require('express'); const app = express(); app.use(express.static(__dirname + '/views')); // html app.use(express.static(__dirname + '/public')); // js, css, images const server = app.listen(5000); app.get('/', (req, res) => {<br /> res.sendFile('index.html');<br /> });<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> express = <span class="hljs-keyword">require</span>(<span class="hljs-string">'express'</span>); <span class="hljs-keyword">const</span> app = express(); app.<span class="hljs-keyword">use</span>(express.<span class="hljs-keyword"><a href="http://www.js-code.com/tag/static" title="浏览关于“static”的文章" target="_blank" class="tag_link">static</a></span>(__dir<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a> + <span class="hljs-string">'/views'</span>)); <span class="hljs-comment">// html</span> app.<span class="hljs-keyword">use</span>(express.<span class="hljs-keyword">static</span>(__dirname + <span class="hljs-string">'/public'</span>)); <span class="hljs-comment">// js, css, <a href="http://www.js-code.com/tag/images" title="浏览关于“images”的文章" target="_blank" class="tag_link">images</a></span> <span class="hljs-keyword">const</span> server = app.listen(<span class="hljs-number">5000</span>); app.get(<span class="hljs-string">'/'</span>, (req, res) =&gt; { res.sendFile(<span class="hljs-string">'index.html'</span>); }); </code></pre> <p>下一步,我们将使用 Web Speech API 集成前端代码。</p> <p><strong>用 SpeechRecognition 接口接收语音</strong></p> <p>Web Speech API 有一个主要的控制接口,叫 <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition" rel="nofollow noreferrer" target="_blank">SpeechRecognition</a>,从麦克风接收用户的语音并加以识别。</p> <p><strong>创建用户界面</strong></p> <p>这个应用的 UI 很简单:一个打开语音识别的按钮。打开 <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.html,将前端的 JavaScript 文件(script.js)和 <a href="https://socket.io/" rel="nofollow noreferrer" target="_blank">Socket.IO</a> 包含进去。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<html lang=&quot;en&quot;><br /> <head>…</head><br /> <body><br /> …<br /> <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js&quot;></script><br /> <script src=&quot;js/script.js&quot;></script><br /> </body><br /> </html><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>…<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> … <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/script.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> </code></pre> <p>然后,我们在 body 中添加一个按钮:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<button>Talk</button><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a></span>&gt;</span>Talk<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> </code></pre> <p>为了让我们的按钮看起来像 demo 中的那样,我们需要在<a href="https://github.com/girliemac/web-speech-ai" rel="nofollow noreferrer" target="_blank">源代码</a>中引用 style.css 文件。</p> <p><strong>用 JavaScript 捕捉声音</strong></p> <p>在 script.js 中,调用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition" rel="nofollow noreferrer" target="_blank">SpeechRecognition</a> 的实例,Web Speech API 的控制接口:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">const</span> SpeechRecognition = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a></span>.SpeechRecognition || <span class="hljs-built_in">win<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>w</span>.webkitSpeechRecognition; <span class="hljs-keyword">const</span> recognition = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> SpeechRecognition(); </code></pre> <p>我们同时使用了有前缀和没有前缀的对象,因为 Chrome 目前支持 API 的前缀属性。</p> <p>同时,我们使用了 <a href="http://www.js-code.com/tag/ecmascript" title="ECMAScript" target="_blank">ECMAScript</a>6 语法,因为 ES6,<a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> 关键字和<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a>以及 Speech API 接口 SpeechRecognition 和 SpeechSynthesis 都在浏览器中支持。</p> <p>你可以随意地设置一些<a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition" rel="nofollow noreferrer" target="_blank">属性</a>变量来自定义语音识别:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="recognition.lang = 'en-US'; recognition.interimResults = false; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>recognition.lang = <span class="hljs-symbol">'en</span>-<span class="hljs-type">US</span>'; recognition.<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a>erimResults = <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span>; </code></pre> <p>然后,拿到按钮的 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 引用,监听点击事件来初始化语音识别:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="document.querySelector('button').addEventListener('click', () => {<br /> recognition.start();<br /> });<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code><span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.querySelector(<span class="hljs-string">'button'</span>).addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { recognition.start(); }); </code></pre> <p>一旦开始语音识别,就能用 result 事件将刚刚说的话转成文本:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="recognition.addEventListener('result', (e) => {<br /> let last = e.results.length - 1;<br /> let text = e.results[last][0].transcript;</p> <p> console.log('Confidence: ' + e.results[0][0].confidence);</p> <p> // We will use the Socket.IO here later…<br /> });<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs markdown"><code>recognition.addEventListener('result', (e) =&gt; { <a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a> last = e.results.<a href="http://www.js-code.com/tag/length" title="浏览关于“length”的文章" target="_blank" class="tag_link">length</a> - 1; let <a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a> = e.results[<span class="hljs-string">last</span>][<span class="hljs-symbol">0</span>].transcript; console.log('Confidence: ' + e.results[<span class="hljs-string">0</span>][<span class="hljs-symbol">0</span>].confidence); // We will use the Socket.IO here later… }); </code></pre> <p>这将返回 SpeechRecognitionResultList 对象,你可以在这个对象的<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>中得到文本结果。同时,你可以看到上面代码中返回的 confidence 转录。</p> <p>现在,是时候使用 <a href="https://socket.io/" rel="nofollow noreferrer" target="_blank">Socket.IO</a> 来向服务端发送文本了。</p> <p><strong>用 <a href="https://socket.io/" rel="nofollow noreferrer" target="_blank">Socket.IO</a> 实时交互</strong></p> <p>你可能会好奇为什么我们不用简单的 HTTP 或者 <a href="http://www.js-code.com/tag/ajax" title="AJAX" target="_blank">AJAX</a> 来代替。你可以通过 POST 方法向服务端发送数据,但是,通过 <a href="https://socket.io/" rel="nofollow noreferrer" target="_blank">Socket.IO</a>,我们使用 WebSocket 发送数据,因为 socket 是双向交流的最佳解决方案,尤其是当我们从服务端向浏览器推送事件时。通过持续的 socket 连接,我们不用重新加载浏览器或者频繁地持续发送 <a href="http://www.js-code.com/tag/ajax" title="AJAX" target="_blank">AJAX</a> 请求。</p> <p><span class="img-wrap"><img data-src="/img/bVUje7?w=600&amp;h=332" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>在 script.js 中实例化 <a href="http://Socket.IO" rel="nofollow noreferrer" target="_blank">http://Socket.IO</a>:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const socket = io(); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-keyword">const</span> socket = io(); </code></pre> <p>然后插入你监听 SpeechRecognition 的 result 事件代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="socket.emit('chat message', text); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>socket.emit(<span class="hljs-symbol">'chat</span> message', text); </code></pre> <p>现在重新回到 Node.js 代码,接收这条文本,然后使用 AI 响应用户。</p> <p><strong>从 AI 中得到答复</strong></p> <p>许多平台和服务都能够让你在应用中用语音-文本自然语言处理来集成 AI 系统,包括 IBM 的 <a href="https://www.ibm.com/watson/" rel="nofollow noreferrer" target="_blank">Watson</a>,微软的 <a href="https://www.luis.ai/" rel="nofollow noreferrer" target="_blank">LUIS</a> 和 脸书的 <a href="https://wit.ai/" rel="nofollow noreferrer" target="_blank">Wit.ai</a>。为了快速构建对话界面,我们将使用 API.AI,因为它提供了免费的开发者账户,让我们可以使它的 Web 接口和 Node.js 库快速地建立一个小型对话系统。</p> <p><strong>设置 <a href="http://api.ai/" rel="nofollow noreferrer" target="_blank">API.AI</a></strong></p> <p>创建一个账户后,你就创建了一个“代理”。参考<a href="https://docs.api.ai/docs/get-started" rel="nofollow noreferrer" target="_blank">文档指南</a>的第一步。</p> <p>接着,点击左边菜单的 “Sm<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a> Talk”,然后开启启用服务选项。</p> <p><span class="img-wrap"><img data-src="/img/bVUjf3?w=600&amp;h=416" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>用 <a href="http://api.ai/" rel="nofollow noreferrer" target="_blank">API.AI</a> 界面自定义你的 sm<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a>-talk 代理。</p> <p>点击菜单中你的代理名字旁边的齿轮图标,回到 “基本设置” 页面,拿到 API 密钥。你将会在 Node.js SDK 中使用“客户端访问令牌”。</p> <p><strong>使用 <a href="http://api.ai/" rel="nofollow noreferrer" target="_blank">API.AI</a></strong></p> <p>我们将使用 Node.js SDK 来将我们的 Node.js 应用连接到 API.AI。回到 index.js,用你的访问令牌初始化 <a href="http://api.ai/" rel="nofollow noreferrer" target="_blank">API.AI</a>:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const apiai = require('apiai')(APIAI_TOKEN); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code>const apiai = require('apiai')(<span class="hljs-name">APIAI_TOKEN</span>)<span class="hljs-comment">;</span> </code></pre> <p>如果你只想在本地运行,你可以在这里硬编码你的 API 密钥。这里有几种方式来设置环境变量,但我通常使用 .env 文件来声明变量。在 GitHub 中的源码中,我用 .gitignore 隐藏了我的证书文件。但是你可以参考 <a href="https://github.com/girliemac/web-speech-ai/blob/master/.env_test" rel="nofollow noreferrer" target="_blank">.env-test</a> 文件看看它是如何设置的。</p> <p>现在我们要用服务端的 <a href="https://socket.io/" rel="nofollow noreferrer" target="_blank">Socket.IO</a> 来接收浏览器的数据。</p> <p>一旦建立连接收到消息,使用 API.AI 的接口来响应用户:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="io.on('connection', function(socket) { socket.on('chat message', (text) => {</p> <p> // Get a reply from API.AI</p> <p> let apiaiReq = apiai.textRequest(text, {<br /> sessionId: APIAI_SESSION_ID<br /> });</p> <p> apiaiReq.on('response', (response) => {<br /> let aiText = response.result.fulfillment.speech;<br /> socket.emit('bot reply', aiText); // Send the result back to the browser!<br /> });</p> <p> apiaiReq.on('error', (error) => {<br /> console.log(error);<br /> });</p> <p> apiaiReq.end();</p> <p> });<br /> });<br /> 当 API.AI 返回结果后,用 Socket.IO 的 socket.emit() 方法发送到客户端。<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>io.on(<span class="hljs-string">'connection'</span>, <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>(<span class="hljs-params">socket</span>) </span>{ socket.on(<span class="hljs-string">'chat message'</span>, <span class="hljs-function">(<span class="hljs-params">text</span>) =&gt;</span> { <span class="hljs-comment">// Get a reply from API.AI</span> <span class="hljs-keyword">let</span> apiaiReq = apiai.textRequest(text, { sessionId: APIAI_SESSION_ID }); apiaiReq.on(<span class="hljs-string">'response'</span>, <span class="hljs-function">(<span class="hljs-params">response</span>) =&gt;</span> { <span class="hljs-keyword">let</span> aiText = response.result.fulfillment.speech; socket.emit(<span class="hljs-string">'bot reply'</span>, aiText); <span class="hljs-comment">// Send the result back to the browser!</span> }); apiaiReq.on(<span class="hljs-string">'error'</span>, <span class="hljs-function">(<span class="hljs-params">error</span>) =&gt;</span> { <span class="hljs-built_in">console</span>.log(error); }); apiaiReq.end(); }); }); 当 API.AI 返回结果后,用 Socket.IO 的 socket.emit() 方法发送到客户端。 </code></pre> <p><strong>用 SpeechSynthesis 接口让 AI 发出声音</strong></p> <p>回到 script.js,用 Web Speech API 的 SpeechSynthesis 控制器接口创建一个合成声音的函数。这个函数接收一个字符串参数,让浏览器读出文本:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function synthVoice(text) { const synth = window.speechSynthesis; const utterance = new SpeechSynthesisUtterance(); utterance.text = text; synth.speak(utterance); } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">synthVoice</span>(<span class="hljs-params">text</span>) </span>{ <span class="hljs-keyword">const</span> synth = <span class="hljs-built_in">window</span>.speechSynthesis; <span class="hljs-keyword">const</span> utterance = <span class="hljs-keyword">new</span> SpeechSynthesisUtterance(); utterance.text = text; synth.speak(utterance); } </code></pre> <p>上面的代码首先创建了一个 <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance" rel="nofollow noreferrer" target="_blank">window.speechSynthesis</a> 这个 API 接入点,你可能会注意到这次是没有前缀属性的,这个 API 比 SpeechRecognition 更广泛地被支持,所有的浏览器都弃用了 SpeechSysthesis 的前缀。</p> <p>接着创建了一个 SpeechSynthesisUtterance() ,然后设置要被合成声音的文本。你可以设置其他的<a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance" rel="nofollow noreferrer" target="_blank">属性</a>,比如 voice,来选择浏览器和操作系统支持的声音类型。最终调用 SpeechSynthesis.speak() 来发出声音。</p> <p>现在再次用 <a href="https://socket.io/" rel="nofollow noreferrer" target="_blank">Socket.IO</a> 来获得服务端响应,一旦消息收到了,就调用上面的函数。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="socket.on('bot reply', function(replyText) { synthVoice(replyText); }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code>socket.on(<span class="hljs-string">'bot reply'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(replyText)</span> </span>{ synthVoice(replyText); }); </code></pre> <p>让我们来试试我们的 AI 机器人吧!</p> <p><span class="img-wrap"><img data-src="/img/bVUjkf?w=600&amp;h=413" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>参考文章:</p> <ul> <li> <p>“<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API" rel="nofollow noreferrer" target="_blank">Web Speech API</a>,” Mozilla Developer Network</p> </li> <li> <p>“<a href="https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html" rel="nofollow noreferrer" target="_blank">Web Speech API Specification</a>,” W3C</p> </li> <li> <p>“<a href="https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/multimedia/web-speech-api" rel="nofollow noreferrer" target="_blank">Web Speech API: Speech Synthesis</a>” (Microsoft Edge <a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cumentation) Microsoft</p> </li> <li> <p><a href="https://nodejs.org/en/docs/guides/" rel="nofollow noreferrer" target="_blank">Guide</a>, Node.js</p> </li> <li> <p><a href="https://docs.npmjs.com/" rel="nofollow noreferrer" target="_blank">Documentation</a>, npm</p> </li> <li> <p>“<a href="https://expressjs.com/en/starter/hello-world.html" rel="nofollow noreferrer" target="_blank">Hello world example</a>,” Express</p> </li> <li> <p>“<a href="https://socket.io/get-started/" rel="nofollow noreferrer" target="_blank">Get Started</a>,” Socket.IO</p> </li> </ul> <p>还可以试试不同的自然语言处理工具:</p> <ul> <li> <p><a href="https://api.ai/" rel="nofollow noreferrer" target="_blank">API.AI</a>, Google</p> </li> <li> <p><a href="https://wit.ai/" rel="nofollow noreferrer" target="_blank">Wit.ai</a>, Facebook</p> </li> <li> <p><a href="https://www.luis.ai/" rel="nofollow noreferrer" target="_blank">LUIS</a>, Microsoft</p> </li> <li> <p><a href="https://www.ibm.com/watson/" rel="nofollow noreferrer" target="_blank">Watson</a>, IBM</p> </li> <li> <p><a href="https://aws.amazon.com/cn/lex/" rel="nofollow noreferrer" target="_blank">Lex</a>, Amazon</p> </li> </ul> <blockquote> <p>原文链接:<a href="https://www.smashingmagazine.com/2017/08/ai-chatbot-web-speech-api-node-js/" rel="nofollow noreferrer" target="_blank">Building A Simple AI Chatbot With Web Speech API And Node.js</a></p> </blockquote> <p></code></p>

总结

以上是脚本宝典为你收集整理的

教你用 Web Speech API 和 Node.js 来创建一个简单的 AI 聊天机器人

全部内容,希望文章能够帮你解决

教你用 Web Speech API 和 Node.js 来创建一个简单的 AI 聊天机器人

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过