Как создать свой собственный голосовой помощник в ReactJS, используя Artyom.js

ИИ присутствует даже на вашем смартфоне, он присутствует там каждый раз, когда вы задаете какой-нибудь глупый вопрос на свой iPhone, Siri, Amazon, Alexa или Google Now. Это в вашей системе спутниковой навигации и может быть в некоторых приложениях мгновенного перевода. Эти AI-алгоритмы распознают вашу речь, предоставляют результаты поиска и помогают сортировать ваши электронные письма и рекомендовать некоторые вещи в соответствии с вашими желаниями.

Ну, может быть, мы пока не можем научить вас, как создавать ИИ с земли, однако мы можем показать вам, как создавать ограниченных голосовых помощников, используя только предопределенные голосовые команды, с помощью библиотеки Artyom.js в вашем ReactJS. проект.

Требования

Независимо от того, какой локальный сервер вы используете для тестирования своего приложения, например, веб-пакет, он должен реализовывать безопасный протокол (HTTPS), в противном случае вам нужно будет разрешать использование микрофона каждый раз, когда Артём перезапускается, чтобы работать в непрерывном режиме.

Кроме того, помните, что Artyom.js работает только в Google Chrome, так как это единственный браузер, который поддерживает указанные API. Очевидно, вам тоже понадобится микрофон, если вы хотите добавить голосовые команды (Вы можете имитировать команды, если у вас нет микрофона).

1. Установите Artyom.js

Artyom.js — полезная оболочка для API-интерфейса speechSynthesis и webkitSpeechRecognition. Кроме того, он также позволяет легко добавлять голосовые команды на ваш веб-сайт, чтобы вы могли создавать свои собственные Google Now, Siri или Cortana с предопределенными голосовыми командами.

Чтобы установить эту библиотеку, перейдите в каталог вашего проекта с терминалом и установите его через NPM выполняя следующую команду:

npm install artyom.js

Библиотека написана на языке TypeScript, но она перенесена в сборку JavaScript, которую можно использовать из любой среды JS, например ReactJS. Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь.

2. Создайте класс загрузчика голосовых команд

При работе с Artyom.js голосовые команды очень легко реализовать. Команда — это буквальный объект, имеющий как минимум 2 свойства, а именно indexes а также actionгде indexes — это простой массив со строками, который будет запускать команду (действие), если произнесенный пользователем текст соответствует любому из них.

Начните с создания нового файла, а именно ArtyomCommands.jsЗдесь вы добавите все команды, которые хотите добавить в Артём. Структура, которую мы будем использовать для внедрения команд в экземпляр Artyom, будет следующей:

// ArtyomCommands.js
export default class ArtyomCommandsManager {
// The ArtyomCommandsManager class expects as argument in the constructor
// an already declared instance of Artyom.js
constructor (ArtyomInstance){
this._artyom = ArtyomInstance;
}
// Execute the loadCommands method to inject the methods to the instance of Artyom
loadCommands(){
let Artyom = this._artyom;
// Here you can load all the commands that you want to Artyom
return 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 !");
}
},
]);
}
}

Вспомогательный класс ArtyomCommandsManager ожидает экземпляр Артема в качестве аргумента в конструкторе. Исполнение loadCommands метод класса, вставит туда объявленные команды в данном экземпляре Artyom. Обратите внимание, что это просто масштабируемый подход, так как вы можете динамически добавлять команды в artyom, где вы хотите.

Важный

Горячая перезагрузка не очень полезна, когда вы работаете с файлом команд, поэтому вам придется перезагружать страницу вручную каждый раз, когда вы вносите изменения в этот файл. В противном случае начальные команды (которые могут отсутствовать) все равно будут загружены, а новые могут не быть успешно запущены.

3. Создание вашего основного помощника

Теперь, когда у нас есть несколько команд, которые нужно добавить в Artyom, мы можем приступить к его инициализации. Используя преимущества State в React, мы собираемся создать 3 простых свойства, которые будут обрабатывать состояние кнопок и действий в нашем очень простом приложении React. 2 Булевы флаги, которые будут замечать, когда artyom уже распознает команды и спукинг, и текстовую переменную, в которой хранится текст текстовой области, где Artyom может набирать и произносить некоторый текст.

В контексте следующего класса Artyom должен быть доступен всему классу, поэтому мы объявили константу с именем Jarvis, которая хранит экземпляр Artyom. Наша разметка тоже очень простая, есть две простые кнопки, которые запускают и останавливают распознавание команд. Действия этих кнопок привязаны к методам startAssistant и stopAssistand класса, который выполнит некоторый код для запуска Artyom. Поскольку методы требуют, чтобы контекст this обновлял состояние, вам необходимо связать его в методе конструктора вашего основного класса, где вы также будете вводить команды вместе с предыдущим созданным классом. Сделав это, остальная часть кода довольно проста и легко читается, если вы знаете React:

import React from 'react';
// Import the Artyom library
import Artyom from 'artyom.js';
// Import the previously created class to handle the commands from another file
import ArtyomCommandsManager from './ArtyomCommands.js';
// Create a "globally" accesible instance of Artyom
const Jarvis = new Artyom();
export default class App extends React.Component {
constructor (props, context){
super(props, context);
// Add `this` context to the handler functions
this.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 state
this.state = {
artyomActive: false,
textareaValue: "",
artyomIsReading: false
};
// Load some commands to Artyom using the commands manager
let 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 console
console.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 Artyom
Jarvis.say( _this.state.textareaValue, {
onEnd() {
_this.setState({
artyomIsReading: false
});
}
});
}
handleTextareaChange(event) {
this.setState({
textareaValue: event.target.value
});
}
render() {
return (
Welcome to Jarvis Assistant

In this very basic assistant, you can say hello and ask for some reports e.g `Generate report of April of this year`

{/* Voice commands action buttons */} {/* Speech synthesis Area */}

I can read some text for you if you want:

{/* Read the text inside the textarea with artyom */} ) } }

Слишком много для «помощника» не так ли? Он не реализует много команд, однако это зависит от вас и того, чего вы хотите достичь с помощью этой библиотеки. Обратите внимание, что из Artyom.js мы использовали только методы Artyom.say и Artyom.initialize и другие методы, доступные для этой библиотеки, например, для перенаправления распознанного текста пользователем, для создания собственного приложения для диктовки и т. Д. забыть посетите хранилище библиотеки для получения дополнительных советов и функций.

Ссылка на основную публикацию
Adblock
detector