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

RedDeveloper
16.05.2022 21:25
Формы c голосовым вводом в React с помощью Speechly

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

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

Что такое 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:

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

и

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

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

  1. Тип name Нажмите на опцию, выберите Person name, затем Add.
  2. Тип street_address Нажмите на опцию, выберите Street address, затем Add.
  3. Введите email_address Щелкните на опции, выберите Email, затем Add.
  4. Тип phone_number Нажмите на опцию, выберите Phone, затем Add.
  5. Тип 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 handleChange = (e, key) => setData({ ...data, [key]: e.target.value });
useEffect(() => {  

if(segment) {

if(segment.entities) {
segment.entities.forEach((entity) => {
console.log(entity.type, entity.value);
setData((data) => ({ ...data, [entity.type]: entity.value }));
});
}
if(segment.isFinal) {
if(segment.entities) {
segment.entities.forEach((entity) => {
console.log("✅", 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) => handleChange(e, "name")}
/>
        </div>
        <div className="Form_group">
          <label>Street address</label>
          <VoiceInput            
changeOnEntityType={data.street_address}
value={data.street_address}
onChange={(e) => handleChange(e, "street_address")}
/>
        </div>
        <div className="Form_group">
          <label>Email</label>
          <VoiceInput            
changeOnEntityType={data.email_address}
value={data.email_address}
onChange={(e) => handleChange(e, "email_address")}
/>
        </div>
        <div className="Form_group">
          <label>Phone number</label>
          <VoiceInput            
changeOnEntityType={data.phone_number}
value={data.phone_number}
onChange={(e) => handleChange(e, "phone_number")}
/>
        </div>
        <div className="Form_group">
          <label>Date of birth</label>
          <VoiceDatePicker            
changeOnEntityType={data.dob}
value={data.dob}
onChange={(e) => handleChange(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 handleChange = (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.log(entity.type, entity.value);
        setData((data) => ({ ...data, [entity.type]: entity.value }));
      });
    }    
if (segment.isFinal) {
if (segment.entities) {
segment.entities.forEach((entity) => {
console.log("✅", 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) => handleChange(e, "name")}
/>
      </div>
      <div className="Form_group">
        <label>Street address</label>
        <VoiceInput          
changeOnEntityType={data.street_address}
value={data.street_address}
onChange={(e) => handleChange(e, "street_address")}
/>
      </div>
      <div className="Form_group">
        <label>Email</label>
        <VoiceInput          
changeOnEntityType={data.email_address}
value={data.email_address}
onChange={(e) => handleChange(e, "email_address")} />
      </div>
      <div className="Form_group">
        <label>Phone number</label>
        <VoiceInput          
changeOnEntityType={data.phone_number}
value={data.phone_number}
onChange={(e) => handleChange(e, "phone_number")}
/>
      </div>
      <div className="Form_group">
        <label>Date of birth</label>
        <VoiceDatePicker          
changeOnEntityType={data.dob}
value={data.dob}
onChange={(e) => handleChange(e, "dob")}
/>
      </div>
    </div>
 </div>
);
export default App;

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

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

Заключение

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

Ресурсы

Github repo

Компоненты пользовательского интерфейса Speechly

Конфигурация Speechly

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML

15.07.2022 14:37

Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно является внешний метод. Это помогает сохранить код незагроможденным и организованным. Однако ситуация может диктовать использование двух других методов....

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

18.04.2022 13:17

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно использовать выбранный нами фреймворк, и он становится основным подходом к каждому новому продукту. Однако существует и другой подход к разработке. Вы...

Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React

13.04.2022 15:26

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

В чем разница между Promise и Observable?
В чем разница между Promise и Observable?

11.04.2022 20:00

Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.

Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса

08.04.2022 19:39

Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.

Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS

08.04.2022 16:00

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