Dialogflow - это масштабируемое решение для создания высококачественных интерфейсов чат-ботов, разработанное и поддерживаемое Google.

Чат-боты и другие чат-интерфейсы на основе искусственного интеллекта в наши дни пользуются огромным спросом почти во всех секторах. Часто мы используем Google Assistant, Siri или Cortana для ускорения наших повседневных процессов; следовательно, их можно считать эталоном чат-ботов в наши дни. Они умные, быстрые, гибкие, и люди чувствуют себя очень увлеченными и удобными при их использовании.

Но как насчет их создания? Создание таких чат-ботов требует больших усилий, потому что ядро ​​этих чат-ботов лежит в обработке естественного языка (или NLP), которая является механизмом искусственного интеллекта для создания чат-ботов. К счастью, Google упростил эту задачу разработчикам со своей платформой Dialogflow.

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

Теперь, после создания модели чат-бота в Dialogflow, сама платформа предоставляет множество решений для интеграции с многочисленными платформами, такими как Siri, Cortana, Alexa, Actions on Google и т. Д. Мы даже можем интегрировать этого чат-бота в наш Интернет, мобильный телефон или компьютер. Приложения.

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

Теперь, когда вы знаете основы Dialogflow и ваш агент / бот готов, давайте перейдем к части интеграции. Вы можете создать агент для любого варианта использования. Я создал бота для заказа гамбургеров, который будет брать предпочтения пользователя и соответственно заказывать гамбургеры у него или у нее. Имя моего бота - «TheDevBurger» («Dev» означает «разработчик»).

Создание узла-сервера

Это первый шаг к интеграции вашего агента / бота с веб-приложением. Платформа Dialogflow предоставляет нам API, чтобы мы могли взаимодействовать с нашим ботом извне. В среде NodeJS у нас есть пакет NPM для этой цели, и мы должны создать сервер для взаимодействия с нашим ботом. Для этого нам нужны учетные данные для подключения к целевому агенту в облаке.

Вот шаги, чтобы получить учетные данные вашего проекта из консоли GCP:

Теперь нам необходимо создать учетную запись службы в учетных данных для нашей интеграции. Мы также добавим сюда ключ. Для этого перейдите в СОЗДАТЬ УЧЕТНЫЕ ДАННЫЕ → Учетная запись службы → Создать (после ввода данных). После создания учетной записи сервиса мы добавим ключ. Для этого перейдите в свой сервисный аккаунт → Добавить ключ → Создать новый ключ → JSON API. При добавлении ключа будет сгенерирован файл JSON, и этот файл является нашей целью. Этот файл JSON состоит из учетных данных нашего проекта.

Теперь, когда мы готовы с учетными данными нашего проекта Dialogflow, мы создадим проект Node и создадим конечную точку REST API, которая будет помогать нам в общении с нашим чат-ботом.

Здесь мы создали конечную точку «/ chatbot», которая поможет нам общаться с нашим агентом в Dialogflow. Эта конечная точка примет запрос POST от клиента и тело, которое будет содержать сообщение от клиента. Здесь talkToChatbot - это функция, которая содержит основную логику интеграции Dialogflow и NodeJS.

В приведенном выше файле мы используем пакет Dialogflow npm и отправляем запрос в Dialogflow с помощью объекта sessionClient и метода detectIntent. Метод detectIntent возвращает обещание, поэтому мы используем методы then-catch для обработки обещания. И, наконец, мы возвращаем ответ, исходящий от сервера Dialogflow, на основе введенных пользователем данных.

Мы широко используем концепции асинхронного JavaScript, поскольку это поможет нам элегантно создавать и обрабатывать асинхронные запросы к серверу Dialogflow. При получении ответа от метода talkToChatbot мы снова используем блоки then-catch, поскольку этот метод является асинхронным по своей природе.

Это завершает настройку нашего сервера NodeJS, который предоставит нам шлюз к нашему агенту Dialogflow.

Создание приложения React

После того, как сервер Node готов и конечная точка работает нормально, мы можем приступить к созданию интерфейсной части приложения (то есть приложения React). Для этого вы можете использовать инструмент командной строки create-react-app, который позволяет вам загрузить проект React.

Компонент чата

В компоненте чата мы принимаем данные пользователя. На основе этого пользовательского ввода мы вызываем API, созданный на сервере Node, для связи с нашим агентом. Здесь мы используем массив для хранения пользовательского ввода, а также ответа от сервера.

Обратите внимание: чтобы использовать массив в хуках useState, мы используем функцию-оболочку (метод setResponses) и возвращаем обновленную копию массива из этой функции. Это оптимальное решение для обновления массива с помощью API хуков.

Компонент сообщений

Этот компонент довольно прост: мы просто берем сообщения в качестве опоры из компонента Чат, а с помощью функции карты JavaScript мы просто визуализируем компонент Сообщение.

Компонент сообщения

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

Окончательный результат

Здесь этот бот / агент дает ответы в соответствии с его обучением. Я обучил бота этим фразам и создал диалог, используя контекст в Dialogflow. Вы можете создать своего бота соответствующим образом и интегрировать его с вашим приложением React.

Код для вышеуказанного приложения React находится в этом репозитории GitHub.

Заключительные слова

Искусственный интеллект в наши дни - одна из самых востребованных вещей в ИТ. Модные проекты, такие как чат-боты и другие диалоговые боты с ИИ, пользуются большим спросом и будут оставаться таковыми в ближайшем будущем. Помимо их создания, мы также должны следить за тем, как интегрировать их с различными платформами, чтобы пользователь мог легко с ними взаимодействовать. Я надеюсь, что эта статья поможет вам понять, как можно интегрировать агентов Dialogflow с приложением React для создания собственного бота.

Спасибо, что дочитали статью до конца. Благодарю за ваши усилия и терпение при чтении этой статьи.