Пошаговое руководство по созданию приложения-клона ChatGPT с помощью API React и OpenAI
Введение
В последние годы в индустрии искусственного интеллекта, особенно в области обработки естественного языка, произошел значительный прогресс. Модели OpenAI GPT (Generative Pre-trained Transformer), такие как ChatGPT, продемонстрировали беспрецедентные возможности в создании человеческого текста.
Поскольку использование чат-ботов и виртуальных помощников продолжает расти, многие предприятия и разработчики ищут способы создания своих собственных чат-ботов на базе ИИ. Теперь у разработчиков есть возможность создавать свои собственные клоны ChatGPT, революционизируя область диалогового ИИ, объединяя силу ReactJS, популярного набора инструментов JavaScript для создания пользовательских интерфейсов, с API OpenAI. В этой статье мы будем пошагово разрабатывать клон ChatGPT, который поддерживает интерактивные и интеллектуальные разговоры с использованием ReactJS и API OpenAI.
Понимание ChatGPT и OpenAI API
ChatGPT — это современная языковая модель, разработанная OpenAI. Он был обучен на обширном массиве текстовых данных из Интернета, что позволяет ему генерировать связные и контекстуально релевантные ответы. ChatGPT может понимать и генерировать человеческий текст, что делает его отличным инструментом для создания диалоговых агентов и чат-ботов.
Разработчики могут использовать API, предоставляемый OpenAI API, облачной платформой, для доступа к языковым моделям из OpenAI, таким как GPT-3. Он позволяет программистам интегрировать функции NLP в свои приложения, такие как анализ настроений, обобщение и многое другое, без необходимости создавать и обучать свои модели. Разработчики должны зарегистрироваться на веб-сайте OpenAI, получить ключ API, а затем использовать API. Ключ API используется для проверки запросов API и мониторинга использования.
Использование возможностей ReactJS
ReactJS — это библиотека JavaScript, широко используемая для создания пользовательских интерфейсов. Его компонентная архитектура и эффективный рендеринг делают его популярным среди разработчиков. Комбинируя ReactJS с API OpenAI, разработчики могут создавать динамические и интерактивные интерфейсы чата, легко интегрирующиеся с моделью ChatGPT.
Если вы новичок и хотите улучшить свои навыки программирования с помощью React, вы можете посетить w3schools, Codecademy, Scrimba или даже официальный веб-сайт React.
Шаг 1: Настройка среды разработки
Цель этого урока состоит в том, чтобы предоставить «последовательный» опыт. В результате наличие следующего позволит вам легко кодировать вместе:
- Базовое знакомство с HTML, CSS и JavaScript
- Некоторое знание Реакта
- На вашем компьютере установлен Node.js, npm (диспетчер пакетов Node) или yarn.
- Следующий шаг — создать новое приложение React с помощью команды
npx create-react-app my-app, заменив «my-app» именем вашего приложения. После создания приложения перейдите в каталог приложения с помощью командыcd my-app.
Шаг 2: Установка зависимостей
Для завершения установки может потребоваться несколько минут. Пакет Node.js OpenAI, который предлагает простой доступ к OpenAI API из Node.js, может быть установлен с помощью следующей команды после успешной установки в каталоге:
npm install openai
Установите axios для упрощения сети и выполнения запросов API.
npm install axios
Используйте команду create-react-app, чтобы создать проект React, который устанавливает для вас предопределенную структуру папок. Папка src — это основная папка для разработки, где вы будете проводить большую часть своего времени. Хотя эта папка по умолчанию содержит несколько файлов, основное внимание следует уделить файлам App.js, index.js и index.css. Эти файлы играют решающую роль в определении компонентов, точек входа и стиля вашего приложения React.
- App.js: App.js является основным компонентом приложения React и отвечает за рендеринг всех остальных компонентов.
- index.js: Index.js — это первый файл, который загружается при запуске. В данном случае он отвечает за отображение компонента App.js в браузере.
- index.css: в этом файле задаются стиль и макет вашего приложения React в целом.
Удалите остальные файлы в папке src и оставьте App.js, index.js и index.css.
Запустите «npm start», чтобы просмотреть свое приложение на локальном сервере, который можно запустить с порта localhost:3000.
Шаг 3: Настройка кода
В этом руководстве давайте начнем с создания папки в папке src нашего приложения с именем Components. Это для правильной организации и передовой практики.
Создайте простой пользовательский интерфейс
Создайте файл с именем «Header.jsx» и скопируйте в него приведенный ниже код. Он будет содержать содержимое нашего заголовка.
import React from "react";
const Header = () => {
return (
<div className="header">
<div className="headerSubDiv">
<h1 className="headerText">ChatGPT CLONE</h1>
<br />
<p className="headerSubText">
I am ChatGPT, an AI language model developed by OpenAI. I'm here to
assist and provide information on a wide range of topics. You can ask
me questions, seek explanations, or request help with various
subjects. Please note that while I strive to provide accurate and
helpful information, my responses should be verified and
cross-referenced for critical or sensitive matters.
</p>
</div>
<br />
</div>
);
};
export default Header;
Компонент должен выглядеть следующим образом при импорте в файл App.js:
Затем мы создаем файл с именем «ChatForm.jsx» и копируем в него приведенный ниже код. Этот компонент будет содержать текстовое поле и кнопку.
// components/FormSection.jsx
import React from 'react';
const ChatForm = () => {
return (
<div className="formDiv">
<textarea
rows="5"
className="formControl"
placeholder="Ask me anything..."
></textarea>
<button className="formBtn">
Generate Response
</button>
</div>
);
};
export default ChatForm;
При импорте в файл App.js форма должна выглядеть следующим образом:
Создайте еще один файл в папке компонента с именем «Answers.jsx». Этот компонент определяет, где будут отображаться все вопросы и ответы. Вы можете скопировать и вставить приведенный ниже код в свой файл.
const AnswerSec = () => {
return (
<div className="answerDiv">
<div className="answerSubDiv">
<hr className="hrLine" />
<div className="answerContainer">
<div className="answerSection">
<p className="question">who are your founders?</p>
<p className="answer">
OpenAI was founded by a group of prominent individuals in the
field of technology and artificial intelligence. The organization
was founded in December 2015, and its initial founders include
Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech
Zaremba, and John Schulman. These individuals have played
significant roles in the advancement of AI research and have been
instrumental in shaping the vision and mission of OpenAI.
</p>
<div className="copy-icon">
<i className="fa-solid fa-copy"></i>
</div>
</div>
</div>
</div>
</div>
);
};
export default AnswerSec;
Вот как этот раздел будет выглядеть, когда вы также импортируете его в свой файл App.js.
Шаг 4: Получите ключ API для OpenAPI
Получить ключ API для платформы OpenAI просто, если вы уже используете ChatGPT. В противном случае вам нужно будет создать учетную запись и подтвердить свою учетную запись, используя номер мобильного телефона. Для деловых целей вам понадобится банковский счет.
Посетите веб-сайт OpenAI по адресу https://platform.openai.com/ и нажмите кнопку Профиль в правом верхнем углу, чтобы получить ключ API. В раскрывающемся меню выберите Просмотреть ключи API, чтобы получить доступ к любым существующим ключам, связанным с вашей учетной записью.
Если у вас еще нет ключа API или вы хотите его создать, это простой процесс на платформе OpenAI.
Скопируйте этот ключ, похожий на хэш, из всплывающего окна и сохраните его в безопасном месте, потому что мы будем использовать его в приложении.
Шаг 5: Параметры HTTP-вызова и функции
Конечная точка, необходимая для вызова API:
https://api.openai.com/v1/completions
Также требуется несколько параметров, которые можно найти ниже:
{
prompt: `Complete this sentence: "${input}"`,
model: model,
max_tokens: 50,
n: 1,
stop: ".",
}
Примечание. prompt используется в качестве отправной точки для создания ответа. Кроме того, доступны различные models. Вы можете ознакомиться с документацией для получения дополнительной информации. Для нашего проекта мы будем использовать модель text-davinci-002. Токены относятся к отдельным словам или фрагментам текста, разделенным пробелами или знаками препинания. Параметр остановки представляет собой строку токенов, указывающую API на остановку генерации после создания этой последовательности.
Чтобы делать запросы к API, включите заголовки HTTP для передачи информации о токене и формате данных. Эти заголовки обеспечивают правильную связь и форматирование между клиентом и API OpenAI.
{
"Content-Type": "application/json",
Authorization: `Bearer ${API_KEY}`,
}
Затем мы начинаем работать над нашими функциями в приложении, включая состояния и взаимодействия с API, чтобы мы могли получать ответы.
Использование данных формы
Откройте компонент ChatForm.jsx и импортируйте хук useState() из React. Этот хук используется для управления состояниями в функциональных компонентах. После этого приступайте к созданию состояния для хранения и обновления новых входных данных.
import { useState } from 'react';
const ChatForm = ({responseGenerate}) => {
const [inputText, setInputText] = useState('');
return (
// return statement
);
};
export default ChatForm;
Затем присвойте значение поля textarea состоянию и установите событие onChange(), чтобы поддерживать обновление состояния при каждом изменении входного значения.
<textarea
rows="10"
className="formControl"
placeholder="Ask me anything..."
value={inputText}
onChange={(e) => setInputText(e.target.value)}
></textarea>
Создайте событие onClick() для загрузки функции при каждом нажатии кнопки отправки. Этот метод будет создан в файле App.js и передан в качестве реквизита в компонент ChatForm.jsx со значениями inputText и setInputText в качестве аргументов.
<button
onClick={() => responseGenerate(inputText, setInputText)}
className="formBtn"
>
Generate Response
</button>
Ниже показано, как выглядит окончательный код;
import { useState } from "react";
const ChatForm = ({ responseGenerate }) => {
const [inputText, setInputText] = useState("");
return (
<div className="formDiv">
<textarea
rows="10"
className="formControl"
placeholder="Ask me anything..."
value={inputText}
onChange={(e) => setInputText(e.target.value)}
></textarea>
<br />
<button
onClick={() => responseGenerate(inputText, setInputText)}
className="formBtn"
>
Generate Response
</button>
</div>
);
};
export default ChatForm;
Затем создайте переменную среды во вновь созданном файле .env и сохраните внутри ключ OpenAIApi. Вы можете сделать файл в корневой папке вашего приложения и сохранить ключ в переменной REACT_APP_OPENAI_API_KEY.
// .env file REACT_APP_OPENAI_API_KEY = sk-Nh.............
Импортируйте классы Configuration и OpenAIApi из пакета openai. Эти классы необходимы для настройки и взаимодействия с API OpenAI.
import { Configuration, OpenAIApi } from 'openai';
Продолжайте создавать метод в файле App.js для обработки всего процесса взаимодействия с API OpenAI.
Создайте объект конфигурации, используя класс Configuration. Свойство apiKey объекта конфигурации задается с помощью process.env.REACT_APP_OPENAI_API_KEY. Это позволяет безопасно хранить ключ API в переменной среды. Обязательно установите переменную среды с вашим фактическим ключом API OpenAI.
Создается экземпляр класса OpenAIApi, которому передается объект конфигурации в качестве аргумента. Этот объект openai используется для взаимодействия с API OpenAI.
import './App.css';
import ChatForm from './Components/ChatForm';
import Header from './Components/Header';
import AnswerSec from './Components/Answer';
import { Configuration, OpenAIApi } from 'openai';
const App = () => {
const configuration = new Configuration({
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
return (
// return statement
);
};
export default App;
Создайте метод responseGenerate в файле App.js и передайте два параметра, ожидаемых от формы, которую вы создали для обработки запроса и получения ответа от API.
import './App.css';
import ChatForm from './Components/ChatForm';
import Header from './Components/Header';
import AnswerSec from './Components/Answer';
import { Configuration, OpenAIApi } from 'openai';
const App = () => {
const configuration = new Configuration({
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
const responseGenerate = async (inputText, setInputText) => {
let options = {
prompt: `Complete this sentence: "${inputText}"`,
model: 'text-davinci-003',
max_tokens: 50,
n: 1,
stop: ".",
};
let completeOptions = {
...options,
prompt: inputText,
};
};
return (
// return statement
);
};
export default App;
Затем создайте состояние с именем «messages» и «setMessages» с начальным значением пустого массива. Массив будет служить контейнером для хранения вопросов и ответов. Впоследствии этот массив будет передан в качестве реквизита компоненту AnswerSection.
Затем мы создаем метод createFinished для отправки запроса в API OpenAI и получения ответа.
import "./App.css";
import ChatForm from "./Components/ChatForm";
import Header from "./Components/Header";
import AnswerSec from "./Components/Answer";
import { Configuration, OpenAIApi } from "openai";
const App = () => {
const [messages, setMessages] = useState([]);
const configuration = new Configuration({
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
const responseGenerate = async (inputText, setInputText) => {
let options = {
prompt: `Complete this sentence: "${inputText}"`,
model: 'text-davinci-003',
max_tokens: 50,
n: 1,
stop: ".",
};
let completeOptions = {
...options,
prompt: inputText,
};
const response = await openai.createFinished(completeOptions);
if (response.data.choices) {
setMessages([
{
question: inputText,
answer: response.data.choices[0].text,
},
...messages,
]);
setInputText('');
}
};
return (
<div className="App">
<Header />
<ChatForm responseGenerate={responseGenerate} />
<AnswerSec messages={messages} />
</div>
);
};
export default App;
Откройте компонент Answer, чтобы он получил значение реквизита из App.js, и используйте метод JavaScript Map() для просмотра массива messages, у вас должно получиться что-то вроде этого.
import React from "react";
const AnswerSec = ({ messages }) => {
return (
<div className="answerDiv">
<div className="answerSubDiv">
<hr className="hrLine" />
<div className="answerContainer">
{messages.map((value, index) => {
<div className="answerSection" key={index}>
<p className="question">{value.input}</p>
<p className="answer">{value.answer}</p>
</div>;
})}
</div>
</div>
</div>
);
};
export default AnswerSec;
Как только вы запустите свое приложение, ваш клон ChatGPT будет работать без проблем. Чтобы сделать его доступным в Интернете и поделиться им с другими, вы можете приступить к развертыванию своего приложения.
Хотя многое еще предстоит сделать, вы можете интегрировать приложение с MUI или использовать TailwindCSS для создания и оформления внешнего интерфейса вашего клонированного приложения, чтобы он выглядел потрясающе. Кроме того, вы можете интегрировать дополнительные функции в качестве дополнительной задачи.
Вы можете ознакомиться с полным исходным кодом по этой ссылке репозитория GitHub: https://github.com/Ghostsmaw/chatgpt-clone.
Заключение
Это подводит нас к концу нашей статьи, поскольку мы видим огромный потенциал, который может возникнуть благодаря интеграции ReactJS и API OpenAI для разработчиков, чтобы они могли создавать свои собственные клоны ChatGPT, революционизируя приложения для разговорного ИИ и создавая более сложные платформы с использованием двух . Это краткое руководство по настройке и запуску, в котором мы создадим базовое приложение для завершения текста с использованием OpenAI API и React. Мы рассмотрели создание ключа API и интеграцию API с приложением React с помощью библиотеки axios. Затем мы показали, как использовать API для создания дополнений текста на основе пользовательского ввода и как отображать результаты в приложении React.
Опираясь на эту мощную синергию, мы прокладываем путь к следующему поколению диалоговых технологий, управляемых искусственным интеллектом.
