Используйте ChatGPT+React для создания чат-бота (просто)

Перед запуском мы должны создать учетную запись на https://platform.openai.com/, а затем, как только мы начнем сеанс, потребуется ключ API, для этого мы сделаем это по следующей ссылке: https:// platform.openai.com/ docs/quickstart/build-your-application.

теперь мы должны создать наш проект в реакции и установить следующие зависимости:

$ npx create-react-app react-chatbot //create the react app
npm install axios
npm install openai express body-parser cors // for server side

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

теперь в нашем App.js мы создадим логику для создания чат-бота:

1. нам понадобятся эти 3 состояния

const [prompt, setPrompt] = useState(""); //here we same the user promps
const [isWriting, setIsWriting] = useState(false); // a loading state for the request
const [responses, setResponses] = useState([]); //array for save all the chatGPT responses

2. Теперь мы создадим функцию, отвечающую за выполнение запроса и сохранение ответов.

  const handleSubmit = (e) => {
    const newPromp = prompt;
    e.preventDefault();
    setIsWriting(true); //to show the loading animation
    setPrompt(""); // to clean the textbox
    axios
      .post("http://localhost:8080/chat", { prompt }) //http://localhost:8080/chat-> is our banckend URL
      .then((res) => {
        setResponses([...responses, newPromp, res.data]); //we save our promps and response from the backend to create a chat
        setIsWriting(false);
      })

      .catch((err) => {
        setResponses([
          ...responses,
          newPromp,
          "Something went wrong wit the server try again please",
        ]);
        setIsWriting(false);
        console.error(err);
      });
  };

В двух словах, мы создадим наш сервер с единственной функцией, которая получит «запрос», который будет обработан и отправлен в ChatGPT, и он вернет ответ, который мы сохраним.
Наш фронт будет в плата за отправку и сохранение этих запросов

Полный код для App.js

import axios from "axios";
import { useState } from "react";
import "./App.css";

const App = () => {
  const [prompt, setPrompt] = useState("");
  const [isWriting, setIsWriting] = useState(false);
  const [responses, setResponses] = useState([]);

  const handleSubmit = (e) => {
    const newPromp = prompt;
    e.preventDefault();
    setIsWriting(true);
    setPrompt("");
    axios
      .post("http://localhost:8080/chat", { prompt })
      .then((res) => {
        setResponses([...responses, newPromp, res.data]);
        setIsWriting(false);
      })

      .catch((err) => {
        setResponses([
          ...responses,
          newPromp,
          "Something went wrong wit the server try again please",
        ]);
        setIsWriting(false);
        console.error(err);
      });
  };

  return (
    <div>
      <div className="answer_container">
        {responses.map((response, index) => (
          <div
            key={index}
            className={
              index % 2 === 0
                ? "message chat-gpt-message"
                : "message my-message"
            }
          >
            {response}
          </div>
        ))}
      </div>

      {isWriting && (
        <div className="writing-message">
          <p className="writing-message-text">Chat GPT is Writing..</p>
          <div className="loader"></div>
        </div>
      )}

      <form onSubmit={handleSubmit} className="form">
        <input
          type="text"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          className="message-box"
        />
        <button type="submit" className="button">
          Submit
        </button>
      </form>
    </div>
  );
};
export default App;

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

nodeserver.js

Чтобы узнать, что мы инициализировались и наш сервер настроен правильно в другом терминале, мы можем запустить следующую команду:

curl -X POST -H "Content-Type: application/json" -d '{"prompt":"Hello, how are you doing today?"}' http://localhost:8080/chat

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

Наша модель довольно проста, мы можем обучить ее, чтобы она давала нам лучшие ответы. но это будет первый шаг к созданию чат-бота с помощью ChatGPT+React.

Как всегда, полный код можно найти по адресу:

Если он был вам полезен, не забудьте оставить свою звезду.