Голосовые технологии повсюду: Siri, Алиса, Alexa, финансовые помощники в приложениях банков, например, Альф. Они есть в колонках, телефонах, даже в автомобилях. Но что насчёт браузеров? Когда я начала заниматься разработкой голосового помощника для личного кабинета банка в браузере, то заметила, что не могу вспомнить никаких голосовых интерфейсов в них. Кроме Web Speech API ничего больше и нет — «готовые» нативные возможности в браузере отсутствуют как класс. Поэтому так получается, что создавать пользовательский опыт взаимодействия голосом с браузерами приходится альтернативными способами.
Привет! Меня зовут Ольга Болотова. Я работаю в Альфа-Банке JavaScript-разработчицей, где работаю над голосовым помощником Альфом, и я немного расскажу о голосовых помощниках в браузере.
![](https://habrastorage.org/getpro/habr/upload_files/3a8/4ea/ee1/3a84eaee140f06d9f6a49902397daa7e.png)
Об авторе:
![](https://habrastorage.org/getpro/habr/upload_files/d1f/735/829/d1f735829d1d04f6277b2eba1465c10b.jpeg)
Ольга Болотова
JavaScript-разработчица в Альфа-Банке, работает над голосовым помощником Альфом.
Сначала о том, что нам вообще нужно от голосовых помощников в браузере.
Какие функции нам нужны?
Нам нужно, чтобы клиент банка мог в браузере получить все те функции, что и в приложении: узнать о комиссии при переводе, перевести деньги на школьную карту ребенку, оплатить мобильную связь или узнать информацию по кредитам.
![](https://habrastorage.org/getpro/habr/upload_files/de1/eb8/50b/de1eb850beaee661ef62b25dcc11e103.png)
Чтобы наш голосовой помощник мог это делать, нам понадобятся две функции:
Speech-to-Text — распознавание речи.
Text-to-Speech — синтез, речевое воспроизведение текста.
Функции работают в связке: сначала пользователь что-то наговаривает, речь распознаётся, переводится в текст, а потом пользователь слышит текстовый ответ, который был синтезирован в речь. Это общий алгоритм, он не зависит от инструментов.
Но единственная нативная технология, которую мы обсудим — это Web Speech API, потому что мы говорим о браузерах, а Web Speech API позволяет взаимодействовать с голосовыми интерфейсами в веб-приложениях. Состоит из двух частей:
SpeechRecognition — асинхронное распознавание речи.
SpeechSynthesis — текст в речь.
Это те же функции, о которых мы только что говорили.
Что у нас для этого есть?
У нас есть рекомендации по веб-доступности от W3C. Если мы будем пользоваться этими рекомендациями, то наши сервисы будут доступнее, но голосового помощника мы не получим.
В браузере, кроме Web Speech API ничего и нет. Да, у него есть некоторые возможности. Например, профессоры из университетов Словении и Черногории разработали прототип платформы с голосовым управлением для колясок людей с ограниченными возможностями. Платформа управляет движением кресла-коляски через интерфейс в веб-браузере как раз с помощью Web Speech API в облаке.
![](https://habrastorage.org/getpro/habr/upload_files/60b/f1e/acd/60bf1eacd313c6b5703fe1d8aa32619f.png)
У Web Speech API есть возможности, которые нам нужны, но все портит поддержка — инструмент хорошо работает в Chrome на десктопах и сносно в мобильной версии. В других браузер хорошей поддержкой не отличается.
![](https://habrastorage.org/getpro/habr/upload_files/02d/720/5c0/02d7205c08fddd7a51c81e4e7279ce6b.png)
![](https://habrastorage.org/getpro/habr/upload_files/329/e03/12f/329e0312f805d9ec7b298de7ded3b9c5.png)
Если генерация речи ещё работает в основных браузерах, то вот поддержка распознавания речи крайне ограничена. Да и в документации отмечено, что технология экспериментальная, а значит сырая, и использовать её как есть — не лучшая идея.
Почему? Например, потому, что 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.
![](https://habrastorage.org/getpro/habr/upload_files/ae4/5a3/05a/ae45a305a0bb9fe7e85972b8e1396d1d.png)
После того как пользователь что-нибудь скажет, его аудио с речью отправляется в Yandex SpeechKit API. Это сервис Яндекса, в котором реализована распознавание и синтез речи. Это «уши» и «язык» Альфа: в Яндекс отправляем голос — получаем текст, и наоборот.
Яндекс предоставляет возможность создать свой собственный голос, например, у них есть Алиса, Джейн или робот Захар. Донором голоса для нашего голосового помощника был Всеволод Кузнецов — тот же актер дубляжа, что и для главного героя игр «Ведьмак». Всеволод провёл в студии звукозаписи 50 часов, наговаривая разные слова и фразы с нейтральной интонацией. Потом Яндекс обучался по этим материалам, и именно он отвечает за качество речи.
После того, как голос распознан и преобразован в текст, он отправляется обратно в sDK. Далее — в микросервисы банка: здесь хранятся данные о пользователях, разные конфиги и APIшки, блок отвечает за получение единовременного токена для пользователя.
Дальше текст отправляется в JAICP — это набор микросервисов компании Just AI, которая занимается исследованиями и разработкой технологии разговорного искусственного интеллекта. Здесь все «мозги»: сценарии, навыки голосового помощника, вся логика. Сценарии и навыки помощника прописывает команда лингвистов-программистов Just AI. Именно этот сервис распознаёт намерение пользователя и обращается к остальным банковским микросервисам для выполнения операций.
Все ответы, которые даёт Альф — это наши заготовки.
![](https://habrastorage.org/getpro/habr/upload_files/ec1/81d/d6c/ec181dd6ccc0605715438ab0eec8af0d.png)
Конечно, есть языковые модели ИИ, которые могут генерировать ответы за нас (у нас это нейросеть CAILA). Но это очень опасно — можно получить нечто такое:
![](https://habrastorage.org/getpro/habr/upload_files/04b/bcb/fe9/04bbcbfe9105b7325b2f512dfd5841f3.png)
Поэтому пока мы такое не внедряем и предпочитаем контролировать всё, что говорит помощник. Например, пользователь обращается к Альфу: «Хочу узнать баланс счета».
По ключевым словам мы узнаём, что хочет пользователь: выцепляем слова «баланс», «счет», и здесь формируется логика (микросервисы 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
при выполнении вызывает всплывающее окошко, запрашивающее разрешение пользователя на использование устройства, микрофона.
![](https://habrastorage.org/getpro/habr/upload_files/2a9/912/f73/2a9912f738a00454594b4956be21647f.png)
Результат возвращает 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. Самое важное событие — доступность данных, которое сигнализирует о том, что всё завершено и запись готова.
Поддержка у обоих хорошая.
![](https://habrastorage.org/getpro/habr/upload_files/b4f/60a/a6e/b4f60aa6e303b62c16564f824f2484e0.png)
Пока на этом всё.
Подытожим
По нативным возможностям пока есть только Web Speech API. Но у инструмента плохая поддержка в качестве голосового помощника и будущее не понятно.
Для масштабирования придётся пользоваться сторонними сервисами.
Для доступа к микрофону работы с аудиоданными есть достаточно хорошо поддерживаемые APIшки.
SpeechKit не единственный сервис. Есть много аналогов у Google, Microsoft, Amazon.
Статья подготовлена на основе доклада Ольги: «’’А поговорить?’’, или Что мы знаем о голосовых возможностях в браузерах» В нашей группе Alfa Digital есть и другие интересные доклады — подписывайтесь. Ещё и на Телеграм-канал Alfa Digital можно — там мы постим новости, опросы, видео с митапов, краткие выжимки из статей, иногда шутим.
Подборка от редактора блога:
Aquahawk
Платить по qr коду системы быстрых платежей с мобильного браузера без прилажухи умеете? Если да, открою счёт.
NikaLapka
Лучше сперва пусть сделают возможность закрыть счёт в браузере. А то открыть и получить карту можно моментально с любого телефона(смартфона), а вот что бы закрыть.. будьте любезны ехать за тридевять земель к ним на поклон.