Формы c голосовым вводом в React с помощью Speechly

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

В этой статье мы узнаем о преимуществах голосовой формы, созданной с помощью Speechly. Мы также покажем вам, как реализовать голосовую помощь в вашем React-приложении с помощью Speechly. В этом руководстве предполагается, что у читателя есть:

Установлен Node.js и npm
Базовые знания JavaScript и React

Что такое Speechly?

Speechly - это инструмент, который упрощает создание пользовательских интерфейсов с поддержкой голоса для приложений на любой платформе. Вы можете использовать его для создания VR-среды, мобильных приложений и голосового поиска в электронной коммерции, на складах и в играх. Speechly позволяет пользователю вводить данные быстро и естественно.

Speechly быстро интегрируется, сокращая усилия по разработке и повышая точность.
Если кто-то использует голос для заполнения формы, вы можете смело отказаться от капчи.
Speechly полностью поддерживает веб-стандарты и работает с любыми веб-формами.
Поддерживает множество языков.
Поддерживает самые распространенные типы данных, такие как электронная почта, даты, номера телефонов, коды товаров и т.д.
Голосовая помощь повышает доступность вашего приложения или веб-сайта.

Speechly позволяет работать с React Voice Form Components. Это новая библиотека пользовательского интерфейса с мультимодальными виджетами браузера, которыми можно управлять с помощью речи, касания, указателя и клавиатуры. Она позволяет пользователям быстро создавать приложения с голосовыми пользовательскими интерфейсами, которые могут быть в 10 раз эффективнее, чем решения, использующие только сенсорное управление, помогая улучшить пользовательский опыт, конверсию и удержание. Мы будем использовать эту библиотеку в нашем коде.

Настройка среды разработки

Давайте настроим нашу разработку с помощью React. Для настройки проекта мы воспользуемся инструкциями из официальной документации create-react-app. Выполните следующие команды:

npx create-react-app speechly-voice-form-appcd speechly-voice-form-app

Установка и настройка Speechly

Теперь, когда мы настроили наше фронтенд-приложение, давайте установим Speechly, чтобы иметь возможность добавить голосовую помощь в наш проект, и настроим его.

Copynpm install @speechly/react-client @speechly/react-ui @speechly/react-voice-forms

В нашем приложении React перейдем к файлу index.js. Скопируйте и вставьте следующий код.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { SpeechProvider } from "<a href="http://twitter.com/speechly/react-client">@speechly/react-client</a>";
ReactDOM.render(
  <SpeechProvider appId="speechly-appID" language="en-US">
    <App />
  </SpeechProvider>,
  document.getElementById("root")
);

Здесь мы импортируем SpeechProvider из react-клиента Speechly. Мы обернули наше приложение контекстным провайдером.

Нам нужно получить идентификатор приложения, чтобы иметь возможность подключиться к Speechly. Давайте перейдем на приборную панель Speechly. Вам придется зарегистрировать учетную запись на GitHub или по электронной почте. После регистрации создайте новое приложение, введите название и язык приложения и установите для параметра Choose a template значение "empty", так как мы будем создавать приложение с нуля. После этого откроется окно настройки. Вы можете добавить несколько строк примеров, которые вы хотите, чтобы Speechly распознала.

Скопируйте App ID и язык и вставьте их в свой проект React.

Добавление намерений и сущностей

При настройке Speechly первое, что нам нужно сделать, это определить намерение и сущности. Из документации Speechly:

Намерение высказывания, которое указывает на то, чего хочет пользователь в целом. Намерения отражают различные функциональные возможности вашего голосового пользовательского интерфейса. Например, приложение для покупок может использовать различные намерения для поиска товаров, добавления товаров в корзину, удаления товаров из корзины и перехода к оформлению заказа.

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

Мы начнем с добавления сущностей.

Тип name Нажмите на опцию, выберите Person name, затем Add.
Тип street_address Нажмите на опцию, выберите Street address, затем Add.
Введите email_address Щелкните на опции, выберите Email, затем Add.
Тип phone_number Нажмите на опцию, выберите Phone, затем Add.
Тип dob Нажмите на опцию, выберите Date (past), затем Add.

Чтобы Speechly знал, какие значения заполнять в нашей форме, ему нужен способ адаптации к моделям распознавания речи. Мы приведем простой пример того, как пользователи могут выражать свои намерения и сущности. Скопируйте и вставьте это выражение в свою конфигурацию SAL.

phrases = [
      *fill [{[my | the]} name {is} | i'm | i am] $SPEECHLY.PERSON_NAME(имя)
      *fill [{[my | the]} address {is} | i live at] $SPEECHLY.STREET_ADDRESS(street_address)
      *fill {[my | the]} email {is} $SPEECHLY.EMAIL_ADDRESS(email_address)
      *fill {[my | the]} phone {number} {is} $SPEECHLY.PHONE_NUMBER(phone_number)
      *fill [{[my | the]} [birthday | date of birth] {is} | i was born on {the}] $SPEECHLY.DATE(dob)
    ]

$phrases {{and} $phrases}

Добавьте заполнение к своим намерениям, а затем разверните.

После развертывания вы можете перейти к предварительному просмотру и протестировать свои сущности.

Создание формы в React

Теперь, когда мы настроили наше фронтенд-приложение, давайте перейдем к нашему файлу App.js в папке src и начнем писать код! Мы создадим простую контактную форму, в которой пользователи смогут заполнять форму голосом. Мы можем легко создать нашу форму с помощью react-voice forms. Скопируйте и вставьте следующий код. Я буду разбивать его по частям, чтобы увидеть, что делает код.

// App.js
import React, { useEffect, useState } from "react";

import { useSpeechContext } from "@speechly/react-client";

import { PushToTalkButton,  BigTranscript,  IntroPopup } from "@speechly/react-ui";

import "./App.css";

import { VoiceInput, VoiceDatePicker } from "@speechly/react-voice-forms";

import "@speechly/react-voice-forms/css/theme/mui.css";

function App() {  

const { segment } = useSpeechContext();

const [data, setData] = useState({    
name: ",    
street_address: "",    
email_address: "",    
phone_number: "",    
dob: "",  
});

const handleChangeEventEvent = (e, key) => setData({ ...data, [key]: e.target.value });

useEffect(() => {  

if (segment) {      

    if (segment.entities) {        
        segment.entities.forEach((entity) => {  
            console.info(entity.type, entity.value);          
            setData((data) => ({ ...data, [entity.type]: entity.value }));
        });      
}      
if (segment.isFinal) {        
    if (segment.entities) {          
        segment.entities.forEach((entity) => {            
        console.info("✅", entity.type, entity.value);
        setData((data) => ({ ...data, [entity.type]: entity.value }));

});

, [segment]);

  return (<div className="App">

      <BigTranscript placement="top" />

      <PushToTalkButton placement="bottom" captureKey=" " powerOn="auto" />

      <IntroPopup />

      <div className="Form">

        <h1>Contact form</h1>

        <div className="Form_group">

          <label>Name</label>

          <VoiceInput            
    changeOnEntityType = {data.name}            
    value = {data.name}            
    onChange = {(e) => handleChangeEventEvent(e, "name")}     
/>

        </div>

        <div className="Form_group">

          <label>Street address</label>

          <VoiceInput            
changeOnEntityType = {data.street_address}            
value = {data.street_address}            
onChange = {(e) => handleChangeEventEvent(e, "street_address")}          
/>

        </div>

        <div className="Form_group">

          <label>Email</label>

          <VoiceInput            
changeOnEntityType = {data.email_address}            
value = {data.email_address}            
onChange = {(e) => handleChangeEventEvent(e, "email_address")}          
/>

        </div>

        <div className="Form_group">

          <label>Phone number</label>

          <VoiceInput            
changeOnEntityType = {data.phone_number}            
value = {data.phone_number}            
onChange = {(e) => handleChangeEventEvent(e, "phone_number")}          
/>

        </div>

        <div className="Form_group">

          <label>Date of birth</label>

          <VoiceDatePicker            
changeOnEntityType = {data.dob}            
value = {data.dob}            
onChange = {(e) => handleChangeEventEvent(e, "dob")}          
/>

        </div>

      </div>

    </div>

);

}

export default App;

Чтобы обрабатывать речь, нам понадобится несколько зависимостей в нашей форме.

import React, { useEffect, useState } from "react";

import { useSpeechContext } from "@speechly/react-client";

import { PushToTalkButton, BigTranscript, IntroPopup } from "@speechly/react-ui";

import "./App.css";

import { VoiceInput, VoiceDatePicker } from "@speechly/react-voice-forms";

import "@speechly/react-voice-forms/css/theme/capsule.css";

Здесь мы импортируем провайдера контекста в ваше приложение из Speechly React client и готовые UI компоненты из speechly React-UI

Push-To-Talk Button используется для запуска и остановки прослушивания речи.
Большой транскрипт показывает возвращенный транскрипт
Intro Popup отображает настраиваемый вводный текст, который кратко объясняет голосовые функции, для которых необходимы разрешения микрофона. В нем также отображаются инструкции по восстановлению для распространенных проблем, связанных с голосом.

Далее мы импортировали компоненты VoiceInput и VoiceDatePicker из голосовых форм Speechly React. Таблица стилей, которую мы импортируем, поможет нам с оформлением.

Обработка речевого ввода

const { segment } = useSpeechContext();

const [data, setData] = useState({ 
name: "",  
street_address: "",  
email_address: "",  
phone_number: "",  
dob: ""
});

const handleChangeEventEvent = (e, key) => setData({ ...data, [key]: e.target.value });

Мы деструктурировали useSpeechContext, который мы импортировали из клиента Speechly React, чтобы получить сегмент голоса. Мы импортируем useState из React и инициализируем наши сущности пустыми строками в качестве начального состояния. Наконец, handlechange отслеживает тип события на нашей форме.

useEffect(() => {  
if (segment) {    
if (segment.entities) {      
segment.entities.forEach((entity) => {        
console.info(entity.type, entity.value);

        setData((data) => ({ ...data, [entity.type]: entity.value }));

});

    }    
if (segment.isFinal) {      
if (segment.entities) {        
    segment.entities.forEach((entity) => {          
    console.info("✅", entity.type, entity.value);

    setData((data) => ({ ...data, [entity.type]: entity.value }));

});

, [segment]);

Мы использовали useEffect для получения изменений на сегменте. Затем мы определяем, что каждый раз, когда Speechly API возвращает указанную нами сущность, ее значение будет обновляться в указанном поле.

Speechly API - это платформа потоковой передачи данных в реальном времени. Под капотом, когда пользователь говорит, звук передается на бэкэнд. Как только Speechly API распознает слова, намерения или сущности, он немедленно вызовет функцию обратного вызова обратно на фронтенд, чтобы предоставить ему информацию.

return

 (  <div className="App">

    <BigTranscript placement="top" />

    <PushToTalkButton placement="bottom" captureKey=" " powerOn="auto" />

    <IntroPopup />

    <div className="Form">

      <h1>Contact form</h1>

      <div className="Form_group">

        <label>Name</label>

        <VoiceInput          
changeOnEntityType = {data.name}          
value = {data.name}          
onChange = {(e) => handleChangeEventEvent(e, "name")}       
/>

      </div>

      <div className="Form_group">

        <label>Street address</label>

        <VoiceInput          
changeOnEntityType = {data.street_address}          
value = {data.street_address}          
onChange = {(e) => handleChangeEventEvent(e, "street_address")}        
/>

      </div>

      <div className="Form_group">

        <label>Email</label>

        <VoiceInput          
changeOnEntityType = {data.email_address}          
value = {data.email_address}          
onChange = {(e) => handleChangeEventEvent(e, "email_address")}        />

      </div>

      <div className="Form_group">

        <label>Phone number</label>

        <VoiceInput          
changeOnEntityType = {data.phone_number}          
value = {data.phone_number}          
onChange = {(e) => handleChangeEventEvent(e, "phone_number")}        
/>

      </div>

      <div className="Form_group">

        <label>Date of birth</label>

        <VoiceDatePicker          
changeOnEntityType = {data.dob}          
value = {data.dob}         
onChange = {(e) => handleChangeEventEvent(e, "dob")}      
 />

      </div>

    </div>

 </div>

);

export default App;

Мы используем импортированные голосовые компоненты для создания нашей формы. Затем передаем некоторые свойства, которые помогают нашим компонентам работать. Вот как выглядит наша форма:

Теперь, когда мы закончили создание и настройку нашей формы с помощью Speechly и React, можно приступить к тестированию нашего приложения. Откройте консоль браузера, чтобы увидеть результаты работы речевого сегмента. Нажмите на кнопку и введите данные, говоря!

Заключение

В этой статье мы узнали, как интегрировать Speechly в наше приложение React. Мы также знаем о преимуществах интеграции голосовой помощи с помощью Speechly в наше приложение или сайт. Надеюсь, эта статья даст вам представление о том, как интегрировать Speechly в ваши сайты и приложения.