如何使用Artyom.js在ReactJS中创建自己的语音助手 _ReactJS

本文概述

要求
1.安装Artyom.js
2.创建语音命令加载程序类
3.创建你的基本助手

甚至在你的智能手机中都装有AI, 每次你对iPhone的Siri, 亚马逊的Alexa或Google Now提出一些愚蠢的问题时, AI都将存在。它在你的卫星导航系统中, 并且可能在某些即时翻译应用中。这些AI算法可以识别你的语音, 提供搜索结果, 并帮助你对电子邮件进行分类, 并根据你的需求推荐一些东西。
好吧, 也许我们还无法教你如何从头开始创建AI, 但是我们可以向你展示如何借助ReactJS中的Artyom.js库, 仅使用预定义的语音命令来创建有限的语音助手。项目。
要求无论用于测试应用程序的本地服务器是什么(例如webpack), 它都需要实现安全协议(https), 否则, 每次Artyom重新启动自身以连续模式运行时, 都需要允许使用麦克风。
此外, 请记住, Artyom.js仅可在Google Chrome中使用, 因为这是唯一支持上述API的浏览器。如果你想添加语音命令(显然, 如果没有任何麦克风, 则可以模拟命令), 显然也需要麦克风。
1.安装Artyom.jsArtyom.js是对SpeechSynthesis和webkitSpeechRecognition API的有用包装。此外, 它还可以让你轻松地将语音命令添加到你的网站, 以便你可以使用预定义的语音命令构建自己的Google即时, Siri或Cortana。
要安装此库, 请使用终端切换到项目目录, 并通过NPM执行以下命令来安装它：

npm install artyom.js

该库是用TypeScript编写的, 但已转换为JavaScript构建, 可从任何JS框架(如ReactJS)中使用。有关此库的更多信息, 请访问Github上的官方存储库或此处的文档。
2.创建语音命令加载程序类使用Artyom.js时, 语音命令非常易于实现。命令是具有至少两个属性(即索引和操作)的文字对象, 其中索引是具有字符串的简单数组, 如果用户的口头文字与其中任何一个匹配, 则字符串将触发命令(操作)。
首先创建一个新文件ArtyomCommands.js, 然后在此处将要添加的所有命令添加到Artyom。我们将用于在Artyom实例中注入命令的结构如下：

// ArtyomCommands.jsexport default class ArtyomCommandsManager {// The ArtyomCommandsManager class expects as argument in the constructor// an already declared instance of Artyom.jsconstructor (ArtyomInstance){this._artyom = ArtyomInstance; }// Execute the loadCommands method to inject the methods to the instance of ArtyomloadCommands(){let Artyom = this._artyom; // Here you can load all the commands that you want to Artyomreturn Artyom.addCommands([{indexes: ["Hello", "Hi"], action: () => {Artyom.say("Hello, how are you?"); }}, {indexes: [/How are you/, /Regular expressions supported/], smart: true, action: () => {Artyom.say("I'm fine, thanks for asking !"); }}, {indexes: ["Generate reports of * of this year"], smart: true, action: (i, month) => {let year = new Date().getFullYear(); Artyom.say(`Generating reports of ${month} ${year} `); Artyom.say("Ready ! What were you expecting? write some code you lazy bear !"); }}, ]); }}

【如何使用Artyom.js在ReactJS中创建自己的语音助手】辅助类ArtyomCommandsManager期望Artyom的实例作为构造函数中的参数。该类的loadCommands方法的执行将在Artyom的给定实例中注入已声明的命令。请注意, 这只是一种可扩展的方法, 因为你可以将命令动态地添加到artyom中的任何位置。
重要使用命令文件时, 热重装并不是很有用, 因此每次更改此文件时, 都将被迫手动重装页面。否则, 仍将加载初始命令(可能为空), 而新命令可能不会成功触发。
3.创建你的基本助手现在我们在Artyom中添加了一些命令, 我??们现在可以对其进行初始化。利用状态在React中的优势, 我们将创建3个简单的属性, 这些属性将在非常简单的React应用程序中处理按钮和动作的状态。 2个布尔标记, 将在artyom已经识别命令和发声时通知你, 还有一个text变量, 用于存储textarea的文本, Artyom可以在其中键入和说出一些文本。
在以下类的上下文中, 需要将Artyom暴露给整个类, 因此我们声明了一个名为Jarvis的常量, 用于存储Artyom的实例。我们的标记也非常简单, 有2个简单的按钮可以启动和停止命令识别。此按钮的操作绑定到该类的startAssistant和stopAssistand方法, 该方法将执行一些代码以启动Artyom。由于方法需要此上下文来更新状态, 因此你需要将其绑定到主类的构造方法中, 在该方法中, 你还将使用先前创建的类来注入命令。做到这一点后, 只要你知道React, 其余的代码就非常简单明了并且易于阅读：

import React from 'react'; // Import the Artyom libraryimport Artyom from 'artyom.js'; // Import the previously created class to handle the commands from another fileimport ArtyomCommandsManager from './ArtyomCommands.js'; // Create a "globally" accesible instance of Artyomconst Jarvis = new Artyom(); export default class App extends React.Component {constructor (props, context){super(props, context); // Add `this` context to the handler functionsthis.startAssistant = this.startAssistant.bind(this); this.stopAssistant = this.stopAssistant.bind(this); this.speakText = this.speakText.bind(this); this.handleTextareaChange = this.handleTextareaChange.bind(this); // Prepare simple statethis.state = {artyomActive: false, textareaValue: "", artyomIsReading: false}; // Load some commands to Artyom using the commands managerlet CommandsManager = new ArtyomCommandsManager(Jarvis); CommandsManager.loadCommands(); }startAssistant() {let _this = this; console.log("Artyom succesfully started !"); Jarvis.initialize({lang: "en-GB", debug: true, continuous: true, soundex: true, listen: true}).then(() => {// Display loaded commands in the consoleconsole.log(Jarvis.getAvailableCommands()); Jarvis.say("Hello there, how are you?"); _this.setState({artyomActive: true}); }).catch((err) => {console.error("Oopsy daisy, this shouldn't happen !", err); }); }stopAssistant() {let _this = this; Jarvis.fatality().then(() => {console.log("Jarvis has been succesfully stopped"); _this.setState({artyomActive: false}); }).catch((err) => {console.error("Oopsy daisy, this shouldn't happen neither!", err); _this.setState({artyomActive: false}); }); }speakText() {let _this = this; _this.setState({artyomIsReading: true}); // Speak text with ArtyomJarvis.say( _this.state.textareaValue, {onEnd() {_this.setState({artyomIsReading: false}); }}); }handleTextareaChange(event) {this.setState({textareaValue: event.target.value}); }render() {return (< div> < h1> Welcome to Jarvis Assistant< /h1> < p> In this very basic assistant, you can say hello and ask for some reports e.g `Generate report of April of this year`< /p> {/* Voice commands action buttons */}< input type="button" value="http://www.srcmini.com/Start Artyom" disabled={this.state.artyomActive} onClick={this.startAssistant}/> < input type="button" value="http://www.srcmini.com/Stop Artyom" disabled={!this.state.artyomActive} onClick={this.stopAssistant}/> {/* Speech synthesis Area */}< p> I can read some text for you if you want:< /p> < textarea rows="5" onChange={this.handleTextareaChange} value=http://www.srcmini.com/{this.state.textareaValue}/> < br/> {/* Read the text inside the textarea with artyom */}< input type="button" value="http://www.srcmini.com/Read Text" disabled={this.state.artyomIsReading} onClick={this.speakText}/> < /div> )}}

对于” 助理” 来说不是太多吗？它并没有实现很多命令, 但是这取决于你以及你希望通过该库实现的功能。请注意, 对于Artyom.js, 我们仅使用了Artyom.say和Artyom.initialize方法, 并且该库还有其他可用方法, 例如, 由用户重定向识别的文本, 创建自己的听写应用程序等, 因此请不要别忘了访问图书馆的资料库以获取更多提示和功能。
编码愉快！