Создание помощника, работающего на базе ChatGPT и поддерживающего голосовое управление с использованием React и Express

Создание помощника на базе ChatGPT с голосовым управлением через React и Express

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

В этой статье мы рассмотрим, как создать простого чат-бота на основе языковой модели ChatGPT (в данном случае gpt-35-turbo), чтобы понять, как эти модели могут быть реализованы в реальном приложении. Разрабатываемый нами чат-бот будет представлять собой простое веб-приложение, написанное в основном на TypeScript. Мы будем использовать сервис Azure OpenAI для доступа к модели, Azure AI Speech для включения функций преобразования речи в текст и текста в речь, сервер Express для обработки API-запросов и коммуникации между чат-ботом и сервисами Azure, а также React для фронт-энда.

Быстрая демонстрация приложения.

• Расправьте крылья Falcon 180B здесь
• «On-Policy vs. Off-Policy Monte Carlo, с визуализациями»
• 20 Лучших подсказок ChatGPT для социальных сетей (сентябрь 2023)

GPT означает “Generative Pre-trained Transformer”. Это модель машинного обучения, которая обучается на большом корпусе текстовых данных для предсказания вероятности появления слова или фразы в заданном контексте. Модели GPT могут использоваться для различных задач обработки естественного языка, включая машинный перевод, суммирование текста и разработку чат-ботов. Вместо того, чтобы углубляться в то, как работают эти модели, я предпочел бы направить вас на отличную, очень подробную статью, написанную Беатриз Столлниц здесь.

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

Для разработки этого приложения мы сначала должны рассмотреть его ‘архитектуру’ и ответить на следующие вопросы: Как выглядит интерфейс чат-бота? Как пользователь предоставляет ввод боту? Как приложение общается с моделью? Как будет выглядеть ввод? Как мы получаем информацию от модели для пользователя?

Диаграмма архитектуры приложения

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

Связь между приложением и моделью осуществляется с помощью API. Сервис Azure OpenAI предоставляет доступ к этим моделям, совершая вызовы через REST API, которые принимают набор параметров и доступны с использованием секретов в виде конечной точки и ключа API. Поскольку последние, ну, секреты, нам нужно убедиться, что они не раскрываются при выполнении вызова API. Для этого мы создаем сервер Express для обработки этих запросов API.

Сервер получит вызов от основного интерфейса чат-бота, когда пользователь нажимает кнопку “Отправить”, и получит список предыдущих сообщений для передачи их модели при выполнении вызова API. Обратите внимание, что я сказал список предыдущих сообщений, а не только последнее сообщение. Это намеренно, так как одна из наиболее интересных особенностей моделей GPT – их способность сохранять контекст на протяжении всего разговора, если он предоставлен. Этот список кодируется как список объектов, каждый из которых имеет два свойства: “роль” и “содержание”. Свойство “роль” отличает сообщения от пользователя и помощника, а свойство “содержание” просто содержит текст сообщения.

После определения процесса общения между приложением и моделью GPT последним шагом является добавление поддержки аудио. Для этого мы используем Azure AI Speech, который предоставляет удобный SDK для JavaScript. SDK предоставляет методы для обнаружения аудио с микрофона в режиме реального времени, распознавания речи и синтеза речи из текста.

Для доступа к SDK речи и его методам с клиента нам требуется токен авторизации. Этот токен генерируется путем аутентификации нашего приложения с помощью службы Azure AI Speech, используя его ключ API и регион на серверной стороне. После получения токена мы можем использовать метод SpeechRecognizer из SDK для обнаружения и транскрибирования аудио с микрофона. Эта транскрипция затем добавляется в наш список сообщений в качестве пользовательского ввода и отправляется на сервер таким же образом, как и записанный ввод.

После генерации ответа, вывод модели отправляется обратно в интерфейс чата сервером. Новая запись добавляется в список сообщений под ролью помощника, и окно чата обновляется сообщением чат-бота, отражающим новую запись. Эту новую запись можно передать через метод SpeechSynthesizer в Speech SDK, что позволит приложению озвучивать ответ чат-бота через динамики.

Хотя приложение не идет далее, всё же есть много способов поэкспериментировать и изменить способы общения с моделью и то, как она отвечает нам.

Как сторонник обучения через практику, я настоятельно рекомендую попробовать само приложение, клонируя репозиторий и экспериментируя с параметрами приложения. Например, попробуйте изменить системное предложение (начальные инструкции), чтобы модель отвечала прозой или хайку, изменить язык синтезатора речи на испанский или ограничить количество хранимых сообщений для контекста и посмотреть, как модель отреагирует!

Статья первоначально опубликована здесь. Перепост с разрешения.