Разработка веб-приложения чат-бота на React/Next.js c интеграцией нейросети ChatGPT-3.5
Введение
Чат-боты на базе искусственного интеллекта становятся всё более популярными, предоставляя бизнесам и сайтам автоматизированные агенты для общения, которые могут взаимодействовать с клиентами.
В этой статье мы будем использовать React фреймворк Next.js для разработки фронтенда и интегрируем нейросеть GPT-3 для создания собственного веб-приложения чат-бота.
Даже без предварительного опыта в нейросетях или чат-ботах, следуя шагам из статьи, вы получите возможность создавать интерактивные чат-бот с нуля.
Обзор
Вот краткий обзор того, что мы рассмотрим:
- Установка приложения Next.js — запускаем нашу React среду и проект
- Регистрация для получения ключа API OpenAI — получаем доступ к GPT-3.5
- Создание пользовательского интерфейса чат-бота — строим чат с использованием React
- Подключение API OpenAI — связываем фронтенд чат-приложения с API OpenAI
- Развертывание готового веб-приложения
Взволнованы? Шаги ниже проведут вас через создание собственного веб-приложения чат-бота с нейросетью ChatGPT, который может поддерживать естественные беседы на любую выбранную вами тему.
Шаг 1 — Установка приложения Next.js
Сначала установим проект Next.js как основу для фронтенда нашего чат-бота. Next.js идеально подходит для этого, так как из коробки обрабатывает серверный рендеринг и генерацию статических сайтов.
Для начала убедитесь, что Node.js установлен на вашем рабочем устройстве, затем выполните:
npm create next-app
Это создаст для вас новый проект Next.js. Перейдите в новый каталог, затем выполните:
npm run dev
Теперь вы должны увидеть ваше приложение "привет, мир" по адресу http://localhost:3000
Теперь, когда наша окружение React готово, давайте переключимся и получим доступ к модели GPT-3 от OpenAI.
Шаг 2 — Регистрация для получения ключа API OpenAI
Для того чтобы наш фронтенд мог общаться с бэкенд-серверами OpenAI, нам понадобится ключ API:
- Перейдите на openai.com и зарегистрируйтесь для бесплатного аккаунта
- После регистрации кликните на фотографию профиля > Посмотреть ключи API
- Скопируйте секретный ключ — он идентифицирует ваше приложение для OpenAI
Относитесь к секретному ключу OpenAI как к паролю и храните его в безопасности. Теперь мы готовы начать интеграцию API OpenAI
Шаг 3 — Создаем пользовательский интерфейс чат-бота в React
Теперь, когда наша основа на Next.js готова и есть доступ к API, мы можем начать создание пользовательского интерфейса нашего чат-бота с использованием компонентов React.
Внутри pages/index.js удалите стандартное содержимое и добавьте:
// UI и разметка
import { useState } from 'react'
export default function ChatPage() {
const [chatLog, setChatLog] = useState([])
return (
<div>
{/* Интерфейс чата */}
</div>
)
}
Это инициализирует хук chatLog для отслеживания истории беседы и заложит основу для нашего пользовательского интерфейса чата.
Далее, создайте графический интерфейс с помощью стандартного React и flexbox:
return (
<div className="app">
<div className="sidebar">
{/* Аватар чата */}
</div>
<div className="chatbox">
<div className="chat-messages">
{/* История сообщений */}
</div>
<div className="chat-input">
{/* Текстовый ввод */}
</div>
</div>
</div>
)
Это разделяет наше приложение на сайдбар и чатбокс — идеальное место для аватара чата и истории сообщений.
Внутри этих контейнеров добавьте элементы пользовательского интерфейса, например:
// Сайдбар
<img
className="avatar"
src="bot.svg"
/>
// Сообщения
<div className="messages">
{
chatLog.map((msg, index) => (
<ChatMessage
key={index}
message={msg}
/>
))
}
</div>
// Ввод
<textarea
rows={1}
placeholder="Напишите ваше сообщение..."
/>
<button>
<img src="send.svg" />
</button>
Используя стандартные техники React, такие как отображение интерфейса чата путем отображения состояния. Для вашего аватара чат-бота используйте любое изображение.
Наконец, стилизуем пользовательский интерфейс чат-бота, добавив css стилей:
const styles = {
app: css`
display: flex;
height: 100vh;
`,
sidebar: css`
width: 220px;
background: #ddd;
`
}
И так далее для цветов, размеров, поведения flex — настроив это под свои нужды.
У нас есть графический интерфейс чата, отображающийся в React — последний штрих — включение AI.
Шаг 4 — Подключение API OpenAI
Теперь самая интересная часть — интеграция модели естественного языка OpenAI в наш чат-бот.
Сначала установите пакет openai npm в корне вашего приложения Next.js:
npm install openai
Затем на вашей индексной странице импортируйте библиотеку openai:
import { Configuration, OpenAIApi } from 'openai'
Создайте объект конфигурации с вашим секретным ключом:
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
Теперь мы можем обращаться к GPT-3!
Для поля ввода добавьте обработчик отправки сообщения:
<textarea
placeholder="Поболтай со мной..."
onKeyUp={handleSubmit}
/>
Где handleSubmit передает текст в OpenAI:
async function handleSubmit(e) {
// Предотвращаем стандартное поведение формы
e.preventDefault()
// Получаем текстовый ввод пользователя
const userMessage = e.target.value
// Ответ чат-бота
const botResponse = await openai.createCompletion({
model: "text-davinci-003",
prompt: generatePrompt(userMessage),
temperature: 0.5,
})
// Отображаем ответ
setChatLog(prevState => ([
...prevState,
{
user: userMessage,
bot: botResponse.data.choices[0].text
}
]))
}
Разбираем обработчик handleSubmit подробнее:
- Предотвращаем обновление формы с помощью preventDefault
- Забираем текст чата пользователя
- Отправляем его в модель GPT-3 text-davinci-003
- Передаем текст как prompt для завершения
- Сохраняем ответ + историю в состоянии
Наконец, нам нужно построить фактический запрос, который подготовит GPT-3 к следующему ответу:
function generatePrompt(msg) {
let prompt = chatLog.map(
chat => `${chat.user}: ${chat.userText}\nAI: ${chat.botText}`
).join('\n') + `\nHuman: ${msg}\nAI:`
return prompt;
}
Данный код форматирует историю сообщений пользователя в запрос, готовый к AI, который вызывает следующий связанный ответ.
Всего с ~100 строками кода у вас теперь есть собственное функциональное веб-приложение чат-бота, использующее Next.js и OpenAI
Шаг 5 — Развертывание веб-приложения
Чтобы поделиться вашим чат-ботом с миром, бесплатно разверните веб-приложение в сети с помощью Vercel:
npm install -g vercel
vercel
Следуйте подсказкам, чтобы подключить ваш репозиторий GitHub/GitLab и выложить в продакшн!
Теперь любой сможет получить доступ к вашему умному онлайн-помощнику. Никаких конфигураций сервера не требуется благодаря бессерверной платформе.
Основные моменты:
- Строим веб-приложение чат-бота на React
- Используем Next.js для SSR с Vercel
- Интегрируем API OpenAI
- Создаем агента для бесед на основе запросов/промптов
Теперь у вас есть черновик для создания чат-ботов, настраиваемых для бизнес-задач, таких как обслуживание клиентов, интернет магазины, виртуальные помощники и многое другое.
