React Open AI 활용

1. React 파일에 Node.js 환경을 세팅해준다. 

아래 파일에 보면 node.js 를 활성화할 수 있는 작동 방법이 들어있다.

2023.10.27 - [코딩/React] - React Google Map으로 지역간 거리 및 이동 시간 계산하기

React Google Map으로 지역간 거리 및 이동 시간 계산하기

 

2. Node.js에 Server.js 파일 생성 후 아래와 같이 코드를 붙여 넣는다. 

이때 env 파일을 설정하여 api key를 보호해주는 것이 좋다.  (이땨 node.js에서 env를 실행하기 위해서는 아래 명령어를 통해 env 환경을 node.js 에 만들어주어야한다.

npm install dotenv

const express = require("express");
const { OpenAI } = require("openai");
require("dotenv").config();
const cors = require("cors"); 

const app = express();
const port = 3001;

app.use(express.json());
app.use(cors()); 

const openai = new OpenAI({
  apiKey: process.env.REACT_APP_OPEN_AI_KEY,
});

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

app.post("/ask", async (req, res) => {
  const { question } = req.body;

  try {
    let chatCompletion;
    let retryCount = 0;

    do {
      if (retryCount > 0) {
        await sleep(3);
      }

      chatCompletion = await openai.chat.completions.create({
        model: "gpt-3.5-turbo",
        messages: [
          { role: "system", content: "You are a helpful assistant." },
          { role: "user", content: question },
        ],
      });

      const retryAfter =
        chatCompletion.headers && chatCompletion.headers["retry-after"];
      if (retryAfter) {
        await sleep(retryAfter * 1000);
      }

      retryCount++;
    } while (chatCompletion.headers && chatCompletion.headers["retry-after"]);

    const choices = chatCompletion.choices;
    const answer = choices?.[0]?.message?.content;

    res.json({ answer, chatCompletion });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Internal Server Error" });
  }
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

3. Open AI 설치 

아래 코드를 server 파일에 들어가서 설치해주면 된다.

npm install openai

4. React로 질문 남기기

node server를 작동시킨 후 돌아가 npm start로 react를 실행한 후 아래 코드를 실행화면 답변을 확인할 수 있는 것을 알 수 있다. 

import React, { useState } from 'react';
import axios from 'axios';

function OpenAIPage() {
  const [question, setQuestion] = useState('');
  const [answer, setAnswer] = useState('');
  const [chatCompletion, setChatCompletion] = useState(null);

  
  const handleAsk = async () => {
    try {
      const response = await axios.post('http://localhost:3001/ask', { question });
      setAnswer(response.data.answer);
      setChatCompletion(response.data.chatCompletion);
    } catch (error) {
      console.error(error);
    } 
  };

  return (
    <div>
      <h1>OpenAI Question and Answer</h1>
      <input
        type="text"
        placeholder="Ask a question..."
        value={question}
        onChange={(e) => setQuestion(e.target.value)}
      />
      <button onClick={handleAsk}>Ask</button>
      {answer && (
        <div>
          <h2>Answer:</h2>
          <p>{answer}</p>
        </div>
      )}
      {chatCompletion && (
        <div>
          <h2>Chat Completion:</h2>
          <pre>{JSON.stringify(chatCompletion, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

export default OpenAIPage;