Как создать своего AI-ассистента с помощью JavaScript

В этой статье мы поэтапно создадим современного помощника на основе искусственного интеллекта, который сможет обрабатывать текстовые запросы и генерировать изображения, используя возможности API OpenAI. Наш помощник будет иметь удобный интерфейс, похожий на современные чат-боты, такие как ChatGPT. Используемые технологии — React и Next.js.

Вы получите в свое распоряжение полноценного ИИ-ассистента, научитесь работать с использованием актуальных JavaScript-инструментов, интегрировать API и создавать адаптивный интерфейс.

Что понадобится для старта

Чтобы успешно выполнить этот проект, вам понадобятся:

• Node.js версии 18 или выше. Установите с официального сайта, следуя инструкциям для вашей операционной системы.
• Редактор кода, например VS Code.
• Ключ API от OpenAI. Чтобы ключ API работал, необходимо пополнить баланс аккаунта на специальной странице. Обратите внимание, что пополнение российскими или белорусскими картами в данный момент недоступно.
• Аккаунт на GitHub.

Шаг 1: Подготовка рабочей среды

Начнем с создания проекта на Next.js и установки всех необходимых инструментов.

Создание проекта

С помощью команды создайте новый проект на Next.js:

При создании приложения вам будут заданы вопросы. Выберите:

• Использовать ESLint? — Да.
• Использовать папку src/? — Да. 
• Использовать Turbopack для next dev? — Да. 
• Настроить псевдоним импорта (@/*)? — Нет. 

Эти настройки создадут проект на основе TypeScript и Tailwind CSS с улучшенными условиями разработки благодаря Turbopack.

Установка зависимостей

В рамках данного проекта мы установим SDK OpenAI и необходимые библиотеки для работы с интерфейсом чата. Для начала необходимо открыть папку проекта:

После этого необходимо установить библиотеки.

• openai — клиент для работы с API OpenAI.
• react-markdown и remark-gfm — нужны для рендеринга отформатированных текстовых ответов.

Шаг 2: Настройка API для AI-запросов

Разработаем интерфейс для работы с OpenAI — он будет анализировать текстовые сообщения и генерировать изображения.

Создайте директорию и файл для API:

1. Внутри папки app, которая находится в src, создайте новую папку api.
2. Внутри папки api создайте еще одну папку, под названием chat.
3. Внутри папки chat создайте файл route.ts.

Добавьте в src/app/api/chat/route.ts следующий код:

Этот код создает API, который:

• Обрабатывает текстовые запросы через GPT-4o в режиме chat.
• Генерирует изображения через DALL-E 3 в режиме image.
• Использует параметр temperature=0.7 для баланса между креативностью и точностью. Более подробно про этот параметр можно прочитать в официальной документации.

Шаг 3: Разработка интерфейса чата

Разработаем современный дизайн, напоминающий ChatGPT, который включает в себя функции текстового чата и возможность создания изображений. Этот интерфейс будет реализован с использованием React — популярного JavaScript-фреймворка, который позволяет создавать интерактивные пользовательские интерфейсы через компоненты. Мы создадим компонент ChatInterface, который станет основой нашего чата, и разберем его структуру, чтобы вы могли адаптировать его под свои нужды.

В каталоге src создайте папку с именем components. В созданной папке создайте новый файл с названием ChatInterface.tsx.

Компонент ChatInterface использует хуки React (например, useState и useEffect) для управления состоянием и побочными эффектами, а также стилизацию через Tailwind CSS для современного дизайна.

• Импорт зависимостей: Мы импортируем необходимые модули, такие как useState, useRef и useEffect из React, а также ReactMarkdown и remarkGfm для рендеринга разметки Markdown.

• Интерфейс Message: Определяет структуру сообщений (роль, содержимое, тип и модель), что помогает TypeScript проверять типы данных.

• Константа AVAILABLE_MODELS: Список доступных моделей ИИ с описаниями, которые отображаются в выпадающем меню для выбора.

• Состояние и рефы: Компонент использует несколько состояний (messages, input, isLoading, и т.д.) для управления чатом, а также рефы (messagesEndRef, textareaRef) для управления DOM-элементами (например, автоматической прокруткой и динамической высотой текстового поля).

• Функции:

  • scrollToBottom обеспечивает плавную прокрутку к последнему сообщению.
  • handleSubmit отправляет запрос к API и обновляет состояние чата.
  • handleKeyDown позволяет отправлять сообщение по нажатию Enter.
  • clearConversation сбрасывает историю чата.

• Разметка: Интерфейс разбит на три секции — заголовок с выбором модели и кнопкой очистки, область сообщений и поле ввода с переключением режимов (текст/изображение). Tailwind CSS используется для стилизации.

Добавьте в ChatInterface.tsx следующий код. Комментарии внутри кода помогут вам понять, как каждая часть работает, и дадут подсказки, где можно экспериментировать.

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

Шаг 4: Интеграция интерфейса в приложение

На следующем этапе потребуется объединить наш интерфейс с приложением и завершить работу.

Откройте src/app/page.tsx и замените всё его содержимое на это:

Откройте файл src/app/layout.tsx и замените всё его содержимое для добавления заголовка:

Добавьте обработку ошибок, создав src/app/error.tsx:

Шаг 5: Тестирование ассистента

Запустите сервер разработки:

Запустите браузер и откройте адрес http://localhost:3000. Перед вами появится окно помощника — в нем можно менять режим с общения в чате на создание изображений. Попробуйте оба варианта, задавая вопросы и предоставляя описания изображений.

Шаг 6: Развертывание AI-ассистента

Теперь, когда AI-ассистент полностью готов, его можно развернуть на сервере, чтобы иметь к нему беспрерывный доступ.

Но перед этим откройте файл next.config.ts и настройте его следующим образом:

Также создайте файл .eslintrc.json в корне проекта и добавьте в него следующий код:

Загрузка на GitHub

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

1. Добавьте все изменения к коммиту:

2. Создайте коммит:

3. Измените название текущей ветви и установите ее как основную:

4. Добавьте удаленный репозиторий и свяжите его с указанным URL. Вместо ссылки на мой репозиторий укажите ссылку на свой.

5. Отправьте изменения на репозитории:

Загрузка на сервер

Когда файлы будут загружены на GitHub, можно приступить к запуску приложения. Я буду использовать сервис App Platform от Timeweb Cloud. 

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

После того как проект был создан, необходимо создать Apps. Выберите тип Frontend и фреймворк Next.js.

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

Выберите минимальную конфигурацию — ее достаточно для нашего AI-ассистента. В настройках приложения необходимо добавить одну переменную, под названием OPENAI_API_KEY, а в значение вставить ключ API.

В описании приложения необходимо указать его имя, при необходимости — комментарий. Также не забудьте выбрать проект, к которому будет привязан Apps.

Затем можно активировать процесс развертывания Next.js на сервере, нажав на кнопку «Запустить деплой». 

Через некоторое время приложение будет запущено, и в случае успешного развертывания проекта в журнале деплоя появится сообщение «Deployment successfully completed».

После успешного запуска приложения вы можете открыть его, нажав на соответствующую кнопку, которая расположена справа от названия приложения. 

Нажмите на нее, и вы увидите новую вкладку в браузере с вашим готовым к работе AI-ассистентом.

Часто задаваемые вопросы

Возможно ли разработать помощника на основе искусственного интеллекта исключительно с использованием JavaScript?

Конечно! Применение JavaScript в сочетании с такими библиотеками, как OpenAI, открывает разнообразные перспективы для разработки полезных помощников для работы с текстом и изображениями.

Какая библиотека лучше для чат-бота?

• OpenAI: отличная библиотека для работы с текстом и изображениями.
• Dialogflow: идеальное решение для реализации разговорных интерфейсов.
• Botpress: универсальный и эффективный инструмент для разработки сложных чат-ботов.

Стоит ли применять методы машинного обучения?

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

Python или JavaScript для AI?

Python — превосходный инструмент для создания сложных моделей с применением TensorFlow и Keras. В то же время JavaScript — оптимальный выбор для разработки веб-приложений и чат-ботов благодаря использованию Node.js и библиотек, таких как TensorFlow.js.

Заключение

В этой статье мы разработали и внедрили современного помощника на основе искусственного интеллекта. Он может обрабатывать текстовые запросы и создавать изображения с помощью API OpenAI. Ассистент, вдохновленный дизайном ChatGPT, готов к применению в режиме реального времени и может быть усовершенствован и дополнен новыми возможностями, такими как поддержка новых моделей или интеграция с другими сервисами. Проект демонстрирует мощь JavaScript и современных фреймворков для создания различных приложений.