Как сделать своего клиента ChatGPT с помощью React и OpenAI API?

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

Что рассматривает эта статья?

1. Создание чатбота с использованием OpenAI ChatGPT и React: В этом руководстве представлены пошаговые инструкции по созданию пользовательского приложения чатбота на React с использованием OpenAI ChatGPT для расширенной обработки языка. Чатбот запоминает предыдущие подсказки, имитируя непрерывный разговор с учетом контекста.
2. Реализация пользовательского интерфейса и нужных функций: Приложение имеет удобный интерфейс с такими компонентами, как окно сообщений, область ввода, кнопка отправки и история переписки. Оно демонстрирует, как структурировать React-приложение, управлять состоянием и обрабатывать события для обеспечения бесперебойной работы пользователя.
3. Интеграция вызовов API и обработка данных: В руководстве рассказывается о процессе выполнения вызовов API к ChatGPT от OpenAI и обработке данных для отображения ответов чатбота. В нем подчеркивается важность защиты ключа API, особенно для продакшена, и предлагаются такие усовершенствования, как использование Express для операций на стороне сервера и включение постоянного хранилища для сохранения истории переписки.

Чат-боты стали незаменимыми инструментами для компаний и разработчиков, стремящихся улучшить взаимодействие с клиентами и оптимизировать работу пользователей в современном быстро развивающемся цифровом ландшафте. Чатбот ChatGPT от OpenAI превратился из выдающегося эксперимента в мощный инструмент разработки чатботов.

Демо-код этого проекта доступен на CodeSandbox. Чтобы протестировать проект вживую, вам придется указать свой собственный API-ключ OpenAI в файле .env. Чтобы получить его, создайте учетную запись на OpenAI, войдите в систему, перейдите в раздел API-ключей и сгенерируйте новый API-ключ.

Особенности планирования и пользовательский интерфейс

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

• Область ввода, в которой пользователи смогут создавать подсказки, предлагая контекстно-значимые запросы.
• Кнопка Go, которая позволит пользователям отправлять свои запросы в API, инициируя процесс разговора.
• Элементы сообщений, которые будут отображаться в виде сообщений в стиле чата в окне переписки, улучшая интерактивность чата.
• Элементы сообщений для отображения ответов ChatGPT.
• Функция History, в которой будут перечислены все последние промпты пользователя. Это также позволит пользователям вернуться к предыдущим промптам.
• Кнопка Clear позволит удалить созданный контент, открывая новую страницу для новых сеансов.

На изображении ниже показан наш каркас, основанный на компонентах.

Все приложение будет обернуто в основной контейнер, который будет отображать все элементы вместе. Далее он будет разделен на две колонки. Первая колонка будет содержать все сообщения от пользователя и ChatGPT. В нижней части будет располагаться область ввода и кнопка для отправки сообщения. Во второй колонке будет храниться история всех последних подсказок. В нижней части столбца будет находиться кнопка Clear, которая позволит пользователю очистить переписку.

Выбор цветовой гаммы

В дизайне приложения приоритет отдается простоте восприятия.

На изображении ниже показана наша цветовая гамма.

Фон приложения будет черным, а сообщения, элементы истории и форма ввода - темно-серыми. Текст на фоне сообщений и формы ввода будет белым, что обеспечит контраст и сделает текст легко читаемым. Чтобы придать приложению изюминку, заголовки колонок, кнопка Go и иконки ответных сообщений будут выполнены в ярких зеленых тонах. Чтобы подчеркнуть кнопку Clear используем мягкий красный тон. Это поможет пользователям избежать случайного нажатия на кнопку.

Настройка приложения React

Мы будем использовать create-react-app для создания нашего приложения. Запустите

npx create-react-app
react-chatgpt

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

cd react-chatgpt

и запустить

npm start

для того, чтобы запустить сервер разработчика. Это должно открыть наш проект в браузере по умолчанию. Если это не так, перейдите по адресу http://localhost:3000, чтобы открыть его вручную. Перед нами должен появиться экран приветствия React, как показано на рисунке ниже.

Добавление стилей

Мы сделаем глобальные стили, чтобы сделать единый визуальный вид для всех компонентов приложения. Для этого нужно открыть index.css и включить следующие правила стилизации:

@import url ("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" ); 

* { 
  margin : 0 ; 
  padding :0 ; 
  box-sizing : border-box ; 
  font-family : "Varela Round", sans-serif; 
} 

body { 
  background-color : #121212 ; 
}

Сначала мы импортируем шрифт Varela Round и настроим все приложение на его использование. Мы также удалим все предустановленные поля и отступы, а также установим box-sizing на border-box чтобы приложение выглядело одинаково в разных браузерах. Наконец, установим фон тела темного тона, что позволяет выделить содержимое приложения.

Скачиваем Media

Нам понадобится пара иконок, которые будут представлять авторов сообщений от пользователя и OpenAI API. Так будет легче их различать. Для этого, создайте новую папку icons внутри каталога src и включите в нее bot.png и user.png.

Создание компонентов

Во-первых, нам нужна хорошо организованная файловая структура, соответствующая дизайну каркаса. С помощью консоли, мы создадим необходимые папки и файлы компонентов. У каждого компонента будет свой JavaScript-файл для функциональности и CSS-файл стилей. Измените рабочий каталог в папке src запустив папку cd src а затем выполните следующую команду:

mkdir components && cd components && touch Message.js Message.module.css Input.js Input.module.css
History.js History.module.css Clear.js Clear.module.css

Приведенная выше команда сначала создаст /components папку, затем изменит на нее рабочий каталог и создаст в нем все необходимые файлы.

Компонент Message

Компонент Message будет отображать подсказки пользователя и ответы API в разговоре, облегчая обмен информацией между пользователем и чатботом в реальном времени. Откройте Message.js файл и включите в него следующий код:

import bot from "../icons/bot.png";
import user from "../icons/user.png";
import styles from "./Message.module.css";

export default function Message ( { role, content } ) {
    return (
      <div className={styles.wrapper}> 
        <div> 
          <img src={role === "assistant" ? bot : user} className={styles.avatar} alt="аватар профиля" /> 
        </div>
        <div> 
          <div> 
            <p> {content} </p> 
          </div> 
        </div>
      </div>
     ); 
}

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

После этого мы создаем обертку для The Message компонент, который будет содержать как иконки, так и текстовый контент.

Мы используем role параметр в условии для отображения соответствующего аватара в качестве изображения src.

Мы также используем content который будет передан в качестве текстового ответа от OpenAI API и подсказки для ввода пользователем.

Теперь давайте оформим компонент так, чтобы он выглядел как сообщение в чате!

Откройте компонент Message.module.css файл и включите в него следующие правила:

  .wrapper { 
    display : grid; 
    grid-template-columns : 60px auto; 
    min-height : 60px; 
    padding : 20px;
    margin-bottom : 20px; 
    border-radius : 10px; 
    background-color : #1b1b1d; 
  } 
  
  .avatar { 
    width : 40px; 
    height : 40px; 
  }

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

Компонент Input

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

Откройте Input.js файл и включите в него следующий код:

import styles from "./Input.module.css";
  
export default function Input ( { value, onChange, onClick } ) { 
    return (
        <div className={styles.wrapper}>  
            <input className={styles.text} placeholder="Ваш запрос здесь..." value={value} onChange={onChange} />
            <button className={styles.btn} onClick={onClick}> 
                Go 
            </button>  
        </div> 
    );
}

Сначала мы импортируем внешнюю таблицу стилей для оформления компонента.

Возвращаем обертку компонента, которая включает поле ввода для пользовательских подсказок и кнопку для отправки в API. Задаем значение-заполнитель, которое будет отображаться, когда форма ввода пуста, и создаем файл value реквизит для хранения введенной подсказки, а также onChange который будет вызываться при изменении значения ввода.

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

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

Откройте компонент Input.module.css файл и включите в него следующие правила:

.wrapper { 
    display : grid; 
    grid-template-columns : auto 100px; 
    height : 60px; 
    border-radius : 10px;
    background-color : #323236; 
} 
    
.text { 
    border : none ; 
    outline : none; 
    background : none; 
    padding : 20px; 
    color : white; 
    font-size : 16px; 
} 
    
.btn { 
    border : none; 
    border-radius : 0 10px 10px 0; 
    font-size : 16px;
    font-weight : bold; 
    background-color : rgb (218, 255, 170); 
} 
    
.btn:hover { 
    cursor : pointer;
    background-color : rgb (200 ,253 ,130 ); 
}

Мы показываем, что обертка должна быть разделена на две колонки, с фиксированной шириной для кнопки и остальной доступной шириной, отведенной под область ввода.

Мы также задаем определенную высоту компонента, устанавливаем для него округлые границы и устанавливаем темно-серый фон.

Для области ввода мы удалим границы, контур и фон по умолчанию и добавляем немного подложки. Установливаем белый цвет текста и задаем определенный размер шрифта.

Компонент History

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

import styles from "./History.module.css"; 
export default function History ( {question , onClick} ) { 
    return (<div className={styles.wrapper} onClick={onClick}>  
                <p>  
                    { question.substring (0 , 15) }
                    ... 
                </p>  
            </div>  
    ); 
}

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

Значение текста будет передано в виде поля question из подсказки пользователя, и будут отображаться только первые 15 символов текстовой строки.

Пользователям будет разрешено щелкать на элементах истории, и мы передадим параметр onClick чтобы управлять поведением кликов.

Теперь давайте присвоим компоненту стиль, чтобы он был визуально привлекательным и хорошо вписывался в боковую панель!

Для этого, откройте History.module.css файл и включите в него следующие правила:

  .wrapper { 
        padding : 20px; 
        margin-bottom : 20px; 
        border-radius : 10px; 
        background-color : #1b1b1d; 
    } 
    
    .wrapper:hover { 
        cursor : pointer; 
        background-color : #323236; 
    }

Мы установим подложку, добавим отступ снизу и зададим закругленные углы для элементов истории. Мы также установим темно-серый цвет фона. Когда пользователь наведет курсор на элемент, он превратится в указатель, а цвет фона изменится на более светлый оттенок серого.

Компонент Clear

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

  import styles from "./Clear.module.css"; 
  export default function Clear ( { onClick } ) { 
    return (<button className={styles.wrapper} onClick={onClick}>  
                Clear 
            </button>
        ); 
    }

Сначала мы импортируем таблицу стилей для стилизации компонента.

Код возвращает кнопку, которая позволит пользователям очистить содержимое приложения.

Передаем onClick чтобы добиться желаемого поведения.

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

Откройте компонент Clear.module.css файл и включите в него следующие стили:

  .wrapper { 
        width : 100%; 
        height : 60px; 
        background-color : #ff9d84; 
        border : none; 
        border-radius : 10px;
        font-size : 16px; 
        font-weight : bold; 
    } 
    .wrapper:hover { 
        cursor : pointer; 
        background-color : #ff886b; 
    }

Установим кнопку так, чтобы она заполняла всю доступную ширину столбца. Зададим определенную высоту и установим мягкий красный цвет фона. Также удалим границы по умолчанию, установим закругленные углы, зададим определенный размер шрифта и сделаем его жирным. При наведении курсор будет меняться на указатель, а цвет фона - на более темный оттенок красного.

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

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

import { useState } from "react"; 
import Message from "./components/Message"; 
import Input from "./components/Input"; 
import History from "./components/History"; 
import Clear from "./components/Clear"; 
import "./styles.css"; 
    
export default function App() { 
    const [input, setInput]=useState(""); 
    const [messages, setMessages]=useState([]); 
    const [history, setHistory]=useState([]); 
    return (<div className="App">
                <div className="Column">  
                    <h3 className="Title">
                        Chat Messages
                    </h3>  
                <div className="Content"> { 
                        messages.map((el, i)=>{ 
                            return <Message key={i} role={el.role} content={el.content}/>; 
                        }
                    } 
                </div>  
                <input 
                    value={input} 
                    onChange={(e)=> setInput (e.target.value) } 
                    onClick={input ? handleSubmit : undefined} 
                />  
            </div>  
            <div className="Column">  
                <h3 className="Title">History</h3>
                <div className="Content">  { 
                    history.map((el, i)=> { 
                        return (
                            <History 
                                key={i} 
                                question={el.question} 
                                onClick={()=> 
                                    setMessages([
                                        { role:"user", content:history[i].question }, 
                                        { role:"assistant", content:history[i].answer},
                                    ])} 
                                    />
                                );
                            } 
                        )}
                    </div>
                    <Clear onClick={clear}/>  
                </div>
            </div>
        );
    }

Сначала мы импортируем хук useState, который мы будем использовать для отслеживания состояния данных в приложении. Затем мы импортируем все компоненты, которые мы создали, и внешнюю таблицу стилей для стилизации. Затем мы создаем переменную состояния input для хранения ввода запроса пользователя, messages для хранения разговора между пользователем и ChatGPT, и history для хранения истории пользовательских подсказок.

Мы также создаем главную обертку для всего приложения, которая будет содержать две колонки. Каждая колонка будет иметь заголовок и обертку содержимого, которая будет включать в себя сообщения беседы, область ввода и кнопку Go для первого столбца и элементов истории и кнопку Clear для второго столбца.

Сообщения разговора будут генерироваться путем сопоставления переменной Messages и элементов истории через переменную History.

Мы устанавливаем onChange для обновления input каждый раз, когда пользователь вводит любое значение в форму ввода. Как только пользователь нажимает кнопку Go, запрос пользователя будет отправлен в OpenAI API для обработки и получения ответа.

Для элементов истории мы установили значение onClick, чтобы Message обновлялся для конкретного запроса и ответа.

Наконец, для Clear мы передаем onClick чтобы установить функцию, которая очистит значения сообщения и истории приложения.

Создание макета приложения

В этом разделе мы расположим компоненты пользовательского интерфейса так, чтобы создать интуитивно понятную структуру UX/UI. Для этого нужно открыть App.css и включить следующие стили:

  .App { 
        display : grid; 
        grid-template-columns : auto 200px; 
        gap : 20px ; max-width : 1000px; 
        margin : 0 auto;
        min-height : 100vh; 
        padding : 20px; 
    } 
    
    .Column { 
        color : white; 
    } 
    
    .Title { 
        padding : 20px; 
        margin-bottom : 20px; 
        border-radius : 10px; 
        color : black; 
        background-color : rgb(218, 255, 170); 
    } 
    
    .Content { 
        height : calc(100vh - 200px); 
        overflow-y : scroll; 
        margin-bottom : 20px; 
    } 
    
    ::-webkit-scrollbar { 
        display : none ; 
    }

Мы разделили основной контейнер приложения на две колонки, разделенные промежутком, используя CSS grid layout, и установили фиксированную ширину левой колонки для элементов истории.

Затем мы установили wrapper так, чтобы он никогда не превышал определенную ширину, отцентрировали его на экране, заставили использовать всю высоту области просмотра экрана и добавили подложку внутри.

Для содержимого каждой колонки мы установили белый цвет текста. Для заголовков столбцов мы установим подложку, добавим нижнее поле и установим закругленные углы. Мы также установим цвет фона элемента заголовка на лаймово-зеленый, а цвет текста - на черный.

Мы также оформим сами колонки, установив правило, что содержимое не должно превышать определенную высоту, и зададим прокрутку содержимого, если оно выходит за пределы высоты.

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

Получение ключа API от OpenAI

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

REACT_APP_OPENAI_API_KEY=paste-your-code-here

Запросы к OpenAI API

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

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

В этом разделе мы подготовим запрос и реализуем вызов API для получения ответа и установки данных в переменную состояния, которую мы определили ранее.

Для этого, откройте App.js и добавьте следующий код:

// imported modules ... 
    
export default function App ( ) { 
    // useState variables ... 
    
    const handleSubmit = async () = > { 
    const prompt = { 
        role : "user", 
        content : input, 
    }; 
    
    setMessages ([... messages , prompt]); 
    
    await fetch("https://api.openai.com/v1/chat/completions", { 
            method : "POST", 
            headers : { 
                Authorization : 'Bearer ${ process.env.REACT_APP_OPENAI_API_KEY }', 
                "Content-Type":"application/json", 
            }, 
            body : JSON.stringify({
                model : "gpt-3.5-turbo", 
                messages : [... messages, prompt], 
            }), 
        })
        .then((data) = > data.json())
        .then((data) = > { 
                const res=data.choices[0].message.content; 
                setMessages((messages) => [
                    ...messages, 
                    { 
                        role : "assistant", 
                        content : res, 
                    },
                ]); 
                setHistory((history) => [ ... history , { question:input, answer:res }]); 
                setInput(""); 
        }); 
    };
    
    const clear=() => { 
        setMessages([]);
        setHistory([]);
    }; 
    
    return <div className="App"> // returned elements ...;
}

Сначала мы создадим отдельную функцию handleSubmit, которая будет выполнена после того, как пользователь введет запрос в форму ввода и нажмет кнопку Go.

Внутри handleSubmit начала мы создадим переменную prompt, которая содержит в себе роль пользователя user и само сообщение. Роль в данном случае важна, поскольку при хранении сообщений нам нужно знать, какие из них являются сообщениями пользователя. Затем мы обновляем переменную messages с подсказкой пользователя. Далее мы создаем фактический fetch, т.е. вызов api.openai.com/v1/chat/completions для доступа к данным из OpenAI API. Мы указываем, что это post запрос и устанавливаем в заголовках токен авторизации и content-type содержимого.

Для параметра body, мы указываем, какую модель API использовать, и передаем переменную messages вместе с пользовательским содержимым. После получения ответа мы сохраняем его в переменной res.

Мы добавляем объект, состоящий из роли assistant и сам ответ в message. Мы также обновляем переменную history, question и answer.

После получения ответа и обновления переменных мы очищаем input, чтобы подготовить форму ввода к следующему запросу пользователя.

Наконец, мы создаем простую функцию clear чтобы очистить messages и history, позволяя пользователю очистить данные приложения.

Тестирование приложения

К этому моменту мы должны были создать полностью функциональное приложение для чата! Осталось протестировать его. Для начала попробуем задать в ChatGPT один вопрос.

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

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

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

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

Заключение

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

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

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

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

Часто задаваемые вопросы (FAQ) о создании копии функционала ChatGPT с помощью React и OpenAI API