Голосовые технологии повсюду: Siri, Алиса, Alexa, финансовые помощники в приложениях банков, например, Альф. Они есть в колонках, телефонах, даже в автомобилях. Но что насчёт браузеров? Когда я начала заниматься разработкой голосового помощника для личного кабинета банка в браузере, то заметила, что не могу вспомнить никаких голосовых интерфейсов в них. Кроме Web Speech API ничего больше и нет — «готовые» нативные возможности в браузере отсутствуют как класс. Поэтому так получается, что создавать пользовательский опыт взаимодействия голосом с браузерами приходится альтернативными способами.
Привет! Меня зовут Ольга Болотова. Я работаю в Альфа-Банке JavaScript-разработчицей, где работаю над голосовым помощником Альфом, и я немного расскажу о голосовых помощниках в браузере.
Об авторе:
Ольга Болотова
JavaScript-разработчица в Альфа-Банке, работает над голосовым помощником Альфом.
Сначала о том, что нам вообще нужно от голосовых помощников в браузере.
Какие функции нам нужны?
Нам нужно, чтобы клиент банка мог в браузере получить все те функции, что и в приложении: узнать о комиссии при переводе, перевести деньги на школьную карту ребенку, оплатить мобильную связь или узнать информацию по кредитам.
Чтобы наш голосовой помощник мог это делать, нам понадобятся две функции:
Speech-to-Text — распознавание речи.
Text-to-Speech — синтез, речевое воспроизведение текста.
Функции работают в связке: сначала пользователь что-то наговаривает, речь распознаётся, переводится в текст, а потом пользователь слышит текстовый ответ, который был синтезирован в речь. Это общий алгоритм, он не зависит от инструментов.
Но единственная нативная технология, которую мы обсудим — это Web Speech API, потому что мы говорим о браузерах, а Web Speech API позволяет взаимодействовать с голосовыми интерфейсами в веб-приложениях. Состоит из двух частей:
SpeechRecognition — асинхронное распознавание речи.
SpeechSynthesis — текст в речь.
Это те же функции, о которых мы только что говорили.
Что у нас для этого есть?
У нас есть рекомендации по веб-доступности от W3C. Если мы будем пользоваться этими рекомендациями, то наши сервисы будут доступнее, но голосового помощника мы не получим.
В браузере, кроме Web Speech API ничего и нет. Да, у него есть некоторые возможности. Например, профессоры из университетов Словении и Черногории разработали прототип платформы с голосовым управлением для колясок людей с ограниченными возможностями. Платформа управляет движением кресла-коляски через интерфейс в веб-браузере как раз с помощью Web Speech API в облаке.
У Web Speech API есть возможности, которые нам нужны, но все портит поддержка — инструмент хорошо работает в Chrome на десктопах и сносно в мобильной версии. В других браузер хорошей поддержкой не отличается.
Если генерация речи ещё работает в основных браузерах, то вот поддержка распознавания речи крайне ограничена. Да и в документации отмечено, что технология экспериментальная, а значит сырая, и использовать её как есть — не лучшая идея.
Почему? Например, потому, что SpeechRecognition API внедрили в Chrome 25 версии, и с того момента ничего не менялось. Для протокола: сейчас версия Chrome — 100+. В прошлом году Safari частично внедрила эту технологию, а в Chrome, где она лучше всего поддерживается всё равно нужно использовать префиксы.
Для SpeechRecognition:
const SpeechRecognition = window.SpeechRecognition | |
window.webkitSpeechRecognition;
Для SpeechGrammarList:
const SpeechGrammarList = window.SpeechGrammarList | |
window.webkitSpeechGrammarList;
Для SpeechRecognitionEvent:
const SpeechRecognitionEventt = window.SpeechRecognitionEvent | |
window.webkitSpeechRecognitionEvent;
Это всё интерфейсы Web Speech API, и все они требуют указания префиксов.
Если нам нужно всего лишь использовать Speech API в тех браузерах, где он уже работает, например, для поисковика форума или бота, то всё хорошо. Но внедрять API со слабой поддержкой, который в любой момент может измениться для голосового ассистента банка — не лучшее решение. Поэтому для Альфа, нашего голосового помощника, мы применили другие инструменты.
Если не Web Speech API, то «кто»?
Кратко расскажу о процессе создания нашего помощника и его архитектуру. В мобильных приложениях Альф работает давно, процесс налажен, написано много логики бэкенда. Поэтому расскажу с позиции разработчицы, только недавно приступившей ко внедрению помощника в веб-приложение.
Всё начинается с веб-приложения Альфа-Онлайн — это личный кабинет банка. Внутри вшит AimBox sDK — набор средств разработки для взаимодействия веб-приложения с Yandex SpeechKit API.
После того как пользователь что-нибудь скажет, его аудио с речью отправляется в Yandex SpeechKit API. Это сервис Яндекса, в котором реализована распознавание и синтез речи. Это «уши» и «язык» Альфа: в Яндекс отправляем голос — получаем текст, и наоборот.
Яндекс предоставляет возможность создать свой собственный голос, например, у них есть Алиса, Джейн или робот Захар. Донором голоса для нашего голосового помощника был Всеволод Кузнецов — тот же актер дубляжа, что и для главного героя игр «Ведьмак». Всеволод провёл в студии звукозаписи 50 часов, наговаривая разные слова и фразы с нейтральной интонацией. Потом Яндекс обучался по этим материалам, и именно он отвечает за качество речи.
После того, как голос распознан и преобразован в текст, он отправляется обратно в sDK. Далее — в микросервисы банка: здесь хранятся данные о пользователях, разные конфиги и APIшки, блок отвечает за получение единовременного токена для пользователя.
Дальше текст отправляется в JAICP — это набор микросервисов компании Just AI, которая занимается исследованиями и разработкой технологии разговорного искусственного интеллекта. Здесь все «мозги»: сценарии, навыки голосового помощника, вся логика. Сценарии и навыки помощника прописывает команда лингвистов-программистов Just AI. Именно этот сервис распознаёт намерение пользователя и обращается к остальным банковским микросервисам для выполнения операций.
Все ответы, которые даёт Альф — это наши заготовки.
Конечно, есть языковые модели ИИ, которые могут генерировать ответы за нас (у нас это нейросеть CAILA). Но это очень опасно — можно получить нечто такое:
Поэтому пока мы такое не внедряем и предпочитаем контролировать всё, что говорит помощник. Например, пользователь обращается к Альфу: «Хочу узнать баланс счета».
По ключевым словам мы узнаём, что хочет пользователь: выцепляем слова «баланс», «счет», и здесь формируется логика (микросервисы JAICP).
Возвращаемся к микросервисам банка, забираем данные о счете.
Возвращаемся снова в sDK — здесь у нас есть сформированный ответ в виде текста.
Отправляем текст в Яндекс на синтез.
Синтезированный ответ возвращается в sDK.
Пользователь получает ответ текстом и голосом.
Вот такая у нас архитектура.
Давайте ещё раз вернемся к SpeechKit. Сервис используют разные API, например, REST API, в котором всё просто — «запрос-ответ».
Мы используем gRPC API. Это технология для удаленного вызова процедур, где есть потоковое распознавание и двунаправленные потоки. Двунаправленные потоки, это когда клиент инициализирует соединение, создаются 2 стрима, и сервер может отправить изначально данные для подключения или отвечать на каждый запрос клиентов по типу «пинг-понг»
gRPC API помогает нам сразу распознавать текст, как только человек начал говорить. Пользователю не нужно наговаривать всю фразу и ждать ответ.
Немного про аудиозапись
Я говорила про аудиозапись с речью пользователя, которая отправляется в SpeechKit. Да, нам нужно записывать в аудиофайл речь пользователя, чтобы отправить в сервис по распознаванию речи. Первое, что нам здесь пригодится — это метод интерфейса mediaDevices — get.UserMedia.
navigator.mediaDevices.get.UserMedia({
audio: true
}).then(function (stream) {
…
}Метод запрашивает доступ на использование медиа устройства — в нашем случае микрофона. После подтверждения приложение получит доступ.
Метод get.UserMedia при выполнении вызывает всплывающее окошко, запрашивающее разрешение пользователя на использование устройства, микрофона.
Результат возвращает promise, содержащий поток, который состоит из аудиодорожек
API MediaRecorder позволяет записывать streams — медиа потоки. Нам интересен звук. Результатом этих записей может быть файл, например, OGG.
const recorder = new MediaRecorder(stream,
{mimeType: ‘audio/ogg;codecs=opus’}, options);Получив поток, мы можем создать экземпляр mediaRecorder — это интерфейс Media Stream Recording API. Предоставляет функциональность для простой записи медиа.
Этот экземпляр подобен другим объектом JavaScript: у него есть методы, которые мы можем вызывать, и он генерирует события, которые мы можем прослушивать.
recorder.start();
recorder.stop();
recorder.addEventListener(‘dataavailable’, () => {});Самые важные методы — .start и .stop. Самое важное событие — доступность данных, которое сигнализирует о том, что всё завершено и запись готова.
Поддержка у обоих хорошая.
Пока на этом всё.
Подытожим
По нативным возможностям пока есть только Web Speech API. Но у инструмента плохая поддержка в качестве голосового помощника и будущее не понятно.
Для масштабирования придётся пользоваться сторонними сервисами.
Для доступа к микрофону работы с аудиоданными есть достаточно хорошо поддерживаемые APIшки.
SpeechKit не единственный сервис. Есть много аналогов у Google, Microsoft, Amazon.
Статья подготовлена на основе доклада Ольги: «’’А поговорить?’’, или Что мы знаем о голосовых возможностях в браузерах» В нашей группе Alfa Digital есть и другие интересные доклады — подписывайтесь. Ещё и на Телеграм-канал Alfa Digital можно — там мы постим новости, опросы, видео с митапов, краткие выжимки из статей, иногда шутим.
Подборка от редактора блога:
Aquahawk
Платить по qr коду системы быстрых платежей с мобильного браузера без прилажухи умеете? Если да, открою счёт.
NikaLapka
Лучше сперва пусть сделают возможность закрыть счёт в браузере. А то открыть и получить карту можно моментально с любого телефона(смартфона), а вот что бы закрыть.. будьте любезны ехать за тридевять земель к ним на поклон.