Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Создание простого AI Chatbot с помощью Web Speech API и Node.js

  1. Предпосылки
  2. Получение речи с помощью интерфейса SpeechRecognition
  3. Создание пользовательского интерфейса
  4. Захват голоса с помощью JavaScript
  5. Настройка API.AI
  6. Использование API.AI Node.js SDK
  7. Предоставление AI голоса с помощью интерфейса SpeechSynthesis
  8. Толкать сеть в будущее!
  9. Рекомендации

Использование голосовых команд стало вездесущим в наши дни, поскольку все больше пользователей мобильных телефонов используют голосовых помощников, таких как Siri и Cortana, а устройства, такие как Amazon Echo и Google Home, вторгаются в наши жилые комнаты. Эти системы построены с программным обеспечением распознавания речи, которое позволяет их пользователям давать голосовые команды. Теперь наши веб-браузеры познакомятся с Web Speech API, который позволяет пользователям интегрировать голосовые данные в веб-приложения.

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

В этом руководстве мы будем использовать API для создания интерфейса голосового чата с искусственным интеллектом (AI) в браузере. Приложение будет слушать голос пользователя и отвечать синтетическим голосом. Поскольку API Web Speech все еще экспериментален, приложение работает только в поддерживаемые браузеры , Функции, используемые в этой статье, как распознавание речи, так и синтез речи, в настоящее время доступны только в браузерах на основе Chromium, включая Chrome 25+ и Opera 27+, в то время как Firefox, Edge и Safari в настоящее время поддерживают только синтез речи.

Использование голосовых команд стало вездесущим в наши дни, поскольку все больше пользователей мобильных телефонов используют голосовых помощников, таких как Siri и Cortana, а устройства, такие как Amazon Echo и Google Home, вторгаются в наши жилые комнаты

( Посмотреть большую версию )

В этом видео показана демонстрация в Chrome, и это то, что мы собираемся построить в этом уроке!

Простая демонстрация бота с использованием AI-чата с Web Speech API

Для создания веб-приложения мы собираемся сделать три основных шага:

  1. Используйте интерфейс SpeechRecognition Web Speech API для прослушивания голоса пользователя.
  2. Отправьте сообщение пользователя в коммерческий API обработки естественного языка в виде текстовой строки.
  3. Как только API.AI вернет текст ответа, используйте интерфейс SpeechSynthesis, чтобы придать ему синтетический голос.

весь исходный код используется для этого урока на GitHub.

Предпосылки

Этот учебник опирается на Node.js. Вы должны быть знакомы с JavaScript и иметь общее представление о Node.js.

Удостовериться Node.js установлен на вашей машине, и тогда мы начнем!

Во-первых, давайте настроим каркас веб-приложения с Node.js. Создайте каталог приложения и настройте структуру приложения следующим образом:

, ├── index.js ├── общедоступный │ ├── css │ │ └── style.css │ └── js │ └── script.js └── просмотров └── index.html

Затем выполните эту команду, чтобы инициализировать приложение Node.js:

$ npm init -f

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

Теперь установите все зависимости, необходимые для создания этого приложения:

$ npm установить экспресс-сокет .io apiai --save

С добавленным флагом --save ваш файл package.json будет автоматически обновлен с учетом зависимостей.

Мы собираемся использовать экспресс среда сервера веб-приложений Node.js для локального запуска сервера. Для обеспечения двусторонней связи в режиме реального времени между сервером и браузером мы будем использовать Socket.IO , Также мы установим инструмент для обработки естественного языка, API.AI для создания искусственного чата, который может вести искусственный разговор.

Socket.IO - это библиотека, которая позволяет нам легко использовать WebSocket с Node.js. Установив сокет-соединение между клиентом и сервером, наши сообщения чата будут передаваться между браузером и нашим сервером и обратно, как только текстовые данные будут возвращены через Web Speech API (голосовое сообщение) или API.AI API. (сообщение «AI»).

Теперь давайте создадим файл index.js, создадим экземпляр Express и прослушаем сервер:

const express = require ('express'); const app = express (); app.use (express.static (__dirname + '/ views')); // html app.use (express.static (__dirname + '/ public')); // js, css, images const server = app.listen (5000); app.get ('/', (req, res) => {res.sendFile ('index.html');});

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

Получение речи с помощью интерфейса SpeechRecognition

Web Speech API имеет основной интерфейс контроллера, названный Распознавание речи , чтобы получить речь пользователя от микрофона и понять, что они говорят.

Создание пользовательского интерфейса

Пользовательский интерфейс этого приложения прост: просто кнопка для запуска распознавания голоса. Давайте настроим наш файл index.html и включим наш внешний файл JavaScript (script.js) и Socket.IO, которые мы будем использовать позже для включения связи в режиме реального времени:

<html lang = "en"> <head>… </ head> <body>… <script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io .js "> </ script> <script src =" js / script.js "> </ script> </ body> </ html>

Затем добавьте интерфейс кнопки в тело HTML:

Кнопка <> Обсуждение </ кнопка>

Чтобы стилизовать кнопку, как показано в демонстрации, обратитесь к файлу style.css в исходный код ,

Захват голоса с помощью JavaScript

В script.js вызовите экземпляр Распознавание речи интерфейс контроллера API Web Speech для распознавания голоса:

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; распознавание const = новое SpeechRecognition ();

Мы включаем как префиксные, так и нефиксированные объекты, потому что в настоящее время Chrome поддерживает API с префиксными свойствами.

Кроме того, в этом руководстве мы используем некоторые синтаксисы ECMAScript6, потому что синтаксис, включая функции const и arrow, доступен в браузерах, которые поддерживают интерфейсы Speech API, SpeechRecognition и SpeechSynthesis.

По желанию, вы можете установить свойства настроить распознавание речи:

признание.lang = 'en-US'; распознавание .interimResults = false;

Затем захватите ссылку DOM для пользовательского интерфейса кнопки и прослушайте событие click, чтобы начать распознавание речи:

document.querySelector ('button'). addEventListener ('click', () => {распознавание .start ();});

Как только распознавание речи началось, используйте событие результата, чтобы получить то, что было сказано как текст:

translation.addEventListener ('result', (e) => {let last = e.results.length - 1; let text = e.results [last] [0] .transcript; console.log ('Confidence:' + e .results [0] [0] .confidence); // Здесь мы будем использовать Socket.IO позже…});

Это вернет объект SpeechRecognitionResultList, содержащий результат, и вы можете получить текст в массиве. Кроме того, как вы можете видеть в примере кода, это вернет уверенность и для транскрипции.

Теперь давайте используем Socket.IO, чтобы передать результат нашему серверному коду.

Socket.IO библиотека для веб-приложений в реальном времени Это позволяет в режиме реального времени осуществлять двустороннюю связь между веб-клиентами и серверами. Мы собираемся использовать его, чтобы передать результат из браузера в код Node.js, а затем передать ответ обратно в браузер.

Вы можете быть удивлены, почему мы не используем вместо этого простой HTTP или AJAX. Вы можете отправить данные на сервер через POST. Однако мы используем WebSocket через Socket.IO, потому что сокеты - лучшее решение для двунаправленной связи, особенно при передаче события с сервера в браузер. При непрерывном сокетном соединении нам не нужно перезагружать браузер или продолжать отправлять AJAX-запросы с частыми интервалами.

Создайте экземпляр Socket.IO в файле script.js:

const socket = io ();

Затем вставьте этот код в то место, где вы слушаете событие результата из SpeechRecognition:

socket.emit ('сообщение чата', текст);

Теперь вернемся к коду Node.js, чтобы получить этот текст, и использовать AI для ответа пользователю.

Многочисленные платформы и сервисы позволяют интегрировать приложение с системой искусственного интеллекта, используя обработку речи и текста и естественный язык, включая IBM Ватсон , Microsoft LUIS а также Wit.ai , Для создания быстрого диалогового интерфейса мы будем использовать API.AI потому что он предоставляет бесплатную учетную запись разработчика и позволяет нам быстро настроить систему small-talk, используя ее веб-интерфейс и библиотеку Node.js.

Настройка API.AI

Создав учетную запись, создайте «агента». Обратитесь к Начиная Руководство, шаг первый.

Затем, вместо того, чтобы идти по полному маршруту настройки путем создания сущностей и намерений, сначала просто щелкните пресет «Small Talk» в левом меню, а затем, во-вторых, переключите переключатель, чтобы включить службу.

( Посмотреть большую версию )

Настройте своего агента для небольших разговоров так, как вы хотите, используя интерфейс API.AI.

Перейдите на страницу «Общие настройки», щелкнув значок cog рядом с именем вашего агента в меню, и получите ключ API. Вам понадобится «токен доступа клиента», чтобы использовать Node.js SDK.

Использование API.AI Node.js SDK

Давайте подключим наше приложение Node.js к API.AI, используя последний Node.js SDK! Вернитесь к файлу index.js и инициализируйте API.AI с помощью токена доступа:

const apiai = требуется ('apiai') (APIAI_TOKEN);

Если вы просто хотите запустить код локально, вы можете жестко закодировать ваш ключ API здесь. Есть несколько способов установить переменные окружения, но я обычно устанавливаю файл .env для включения переменных. В исходном коде на GitHub я скрыл свои собственные учетные данные, включив файл с .gitignore, но вы можете посмотрите на .env-тест файл, чтобы увидеть, как он установлен.

Теперь мы используем серверный Socket.IO для получения результата из браузера.

Как только соединение установлено и сообщение получено, используйте API.AI API для получения ответа на сообщение пользователя:

io.on («соединение», функция (сокет) {socket.on («сообщение чата», (текст) => {// Получить ответ от API.AI let apiaiReq = apiai.textRequest (text, {sessionId: APIAI_SESSION_ID) }); apiaiReq.on ('response', (response) => {let aiText = response.result.fulfillment.speech; socket.emit ('bot reply', aiText); // Отправить результат обратно в браузер! }); apiaiReq.on ('error', (error) => {console.log (error);}); apiaiReq.end ();});});

Когда API.AI возвращает результат, используйте Socket.IO socket.emit (), чтобы отправить его обратно в браузер.

Предоставление AI голоса с помощью интерфейса SpeechSynthesis

Давайте вернемся к script.js еще раз, чтобы завершить приложение!

Создайте функцию для генерации синтетического голоса. На этот раз мы используем интерфейс контроллера SpeechSynthesis Web Speech API.

Функция принимает строку в качестве аргумента и позволяет браузеру произносить текст:

function synthVoice (text) {const synth = window.speechSynthesis; const utterance = new SpeechSynthesisUtterance (); utterance.text = text; synth.speak (произнесение); }

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

Затем создайте новый SpeechSynthesisUtterance () Например, используя его конструктор, и установите текст, который будет синтезирован при произнесении высказывания. Вы можете установить другие свойства например, голос, чтобы выбрать тип голосов, которые должны поддерживать браузер и операционная система.

Наконец, используйте SpeechSynthesis.speak (), чтобы он говорил!

Теперь снова получите ответ от сервера, используя Socket.IO. Как только сообщение получено, вызовите функцию.

socket.on ('bot reply', function (replyText) {synthVoice (replyText);});

Вы сделали! Давайте попробуем поболтать с нашим ботом AI!

( Посмотреть большую версию )

Обратите внимание, что браузер запросит у вас разрешение на использование микрофона в первый раз. Как и другие веб-API, такие как Geolocation API и Notification API, браузер никогда не получит доступ к вашей конфиденциальной информации, если вы не предоставите ее, поэтому ваш голос не будет записан в тайне без вашего ведома.

Вам скоро надоест разговор, потому что ИИ слишком прост. Тем не менее, API.AI является настраиваемым и обучаемым. Прочитайте API.AI документация чтобы сделать это умнее.

Надеюсь, вам понравился урок и вы создали веселого чат-бота!

Толкать сеть в будущее!

Голосовое взаимодействие изменило способ управления компьютерами и подключенными устройствами. Теперь с Web Speech API пользовательский опыт также меняется в сети. В сочетании с искусственным интеллектом и глубоким обучением ваши веб-приложения станут более интеллектуальными и предоставят пользователям больше возможностей!

Рекомендации

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

Кроме того, чтобы изучить Node.js и библиотеки, используемые в этом руководстве, ознакомьтесь со следующим:

Наконец, ознакомьтесь с различными инструментами обработки естественного языка и диалоговыми платформами!

Похожие

Настройка виртуальной машины Windows 8
... ailable.html"> Windows 8's Consumer Preview Вам, наверное, не терпится потратить некоторое время на последнюю операционную систему Microsoft. Хотя вы, возможно, уже скачал ISO Спорим, некоторые из вас еще не решили, как вы собираетесь его установить. Учитывая, что вы только что встретились, мы предполагаем, что большинство из вас не готовы очистить ящик комода для Windows 8. Перезапись текущей
Защита SSH с помощью Fail2ban
SSH позволяет войти на удаленный компьютер или сервер и управлять им через интерфейс командной строки. Тем не менее, потому что SSH открыт для Интернета; Злоумышленники могут попытаться войти, используя различные комбинации имени пользователя и пароля. Хороший способ защитить SSH - запретить
Использование Safari для тестирования веб-сайтов iPhone, iPad и iPod Touch
На прошлой неделе мы показали, как определить пользовательский агент iPhone и iPad. На этой неделе мы покажем вам, как использовать веб-браузер Apple Safari для тестирования вашего iDevice-ready веб-сайта путем имитации HTTP-запроса от Safari на iPad, iPhone и iPod Touch. В большинстве руководств предполагается, что разработчики в настоящее время имеют iPhone для тестирования своего сайта, готового к iDevice, но мы не будем этого делать. Веб-браузер Apple Safari можно легко использовать
Создание чата на Facebook с Node и Heroku
... помощью ботов владельцы приложений могут лучше взаимодействовать со своими пользователями, предоставляя персонализированное и интерактивное общение, которое может масштабироваться для масс. С момента запуска компании и владельцы приложений проявили большой интерес к чат-ботам. Всего через три месяца после объявления было 11 000 ботов построен на платформе.
RT 7 Lite: настройка и обновление образов Windows 7
... строить эталонную установку Windows 7, которая затем будет захвачена и распространена в сети, вы можете автоматизировать установку с помощью файла ответов. альтернатива вы устанавливаете Windows 7 в интерактивном режиме на виртуальной машине и настраивает его вручную в соответствии с индивидуальными требованиями. Интересная альтернатива этим двум методам предлагает бесплатный
fail2ban: для SSH и не только
... ail2ban - это один из нескольких инструментов, предназначенных для защиты других сервисов путем блокировки нежелательных и, возможно, повторяющихся действий. Наиболее распространенным вариантом его использования, вероятно, является защита SSH-сервера от грубых атак, когда неоднократно неудачные попытки входа в систему будут щедро вознаграждены запретом брандмауэра iptables или каким-либо другим вариантом блокировки или нулевой маршрутизацией. Отслеживая правильный набор файлов журналов
Создание и проверка будущего карты вашего клиента
ФОТО: Даниэль Гонсалес Вдумчивая карта путешествий клиентов помогает маркетологам думать о своих клиентах. Они служат для лучшего понимания конкретных точек принятия решений, с которыми сталкивается клиент при рассмотрении продукта, от осведомленности до покупки и затем лояльности. Решающие моменты в пути клиента - это точки, когда доставка правильных маркетинговых материалов в нужный момент может
Онлайн тестирование Free Quiz Maker Создайте лучшие тесты
Доступ к FTP-серверам с помощью собственного браузера файлов
... помощью Finder действительно довольно просто, хотя некоторые более строгие серверы могут усложнить задачу. В Finder выберите « Перейти»> «Подключиться к серверу…» или нажмите cmd + K. Откроется диалоговое окно подключения, показанное ниже. В поле адреса сервера введите
Тест WD My Cloud EX2 Ultra: наше мнение
... семейство NAS (Network Attached Storage), решения для сетевого хранения My Cloud of Western Digital (WD) продолжало расти. Модель EX2 Ultra дополняет большое семейство, которое уже насчитывает около девяти продуктов. Модели, ориентированные на широкую публику и продвинутых пользователей: WD My Cloud (отсек,) первое поколение WD My Cloud Mirror (два отсека),
Сравнение браузеров iPad: что лучше?
... air-why-how-i-use-them-both/"> полноразмерный или мини IPad Mini или IPad Air? Почему и как я использую их оба IPad Mini или IPad Air? Почему и как я использую их оба Недавно я приобрел новый iPad Air с намерением продать или передать свой iPad mini. Проведя время с обоими устройствами, я понял, что
Air-why-how-i-use-them-both/"> полноразмерный или мини IPad Mini или IPad Air?
Почему и как я использую их оба IPad Mini или IPad Air?