ChatGPT API 불러오기. 내 프로젝트에 적용하기

ChatGPT를 불러와서 내가 만들 프로젝트에서 적용을 해보았다.

내가 만든 사이트는 오늘 어떤 책을 읽을지 고민일때 한번에 찾아보기 쉽도록 만든 사이트이다.

 

각각의 가격 정보나 상세설명은 구글 API를 이용했고, 그 이상의 추천이나 질문은 chatGPT에게 질문을 해서 바로 답변을 받을 수 있도록 기능을 구현하였다.

 

이 과정에서 ChatGPT API를 불러오는 코드는 기억해두면 좋을것같아서 기록해둔다.

 

우선 당연히 기본적으로 OpenAI API 사이트에서 personal API키를 발급 받아야한다.

아래의 사이트에서 본인계정을 누르고 - View API KEYS - Create new Secret key

를 통해서 API 키를 발급받고 이것을 따로 저장해둔다.

 

OpenAI API

 

 

그 다음에는 발급받은 것을 본격적으로 vscode에서 코드로 구현해본다.

 

 

 

 

💻 Code 💻 

 

ChatGpt API로 불러오는 것을 수행하는 컴포넌트를 생성한다.

 

1. 상단에 openai를 import한다.

import { Configuration, OpenAIApi } from "openai";

 

 

2. useState Hook을 사용하여 inputValue와 outputValue의 상태를 관리한다.

 const [inputValue, setInputValue] = useState("");
 const [outputValue, setOutputValue] = useState("");

 

3. handleInputChange함수는 inputvalue 상태를 변경한다.

 const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

 

4. handleFormSubmit 함수는 generateText 함수를 호출하여 OpenAI API를 사용하여 입력값을 처리한 결과를 반환받아 outputValue 상태를 변경한다.

const handleFormSubmit = async (event) => {
    event.preventDefault();
    const result = await generateText(inputValue);
    setOutputValue(result);
    setInputValue("");
  };

 

5. generateText 함수는 Configuration 및 OpenApi 객체를 생성하여 OpenAI API에 요청을 보낸다. createCompletion 함수를 사용하여 model, prompt, temperature, max_tokens 등의 옵션을 설정하고 API를 호출한다. API의 응답결과 중 choices[0].text를 반환한다.

 

const generateText = async (input) => {
    const configuration = new Configuration({
      apiKey: process.env.REACT_APP_CHAT_API_KEY,
    });
    const openai = new OpenAIApi(configuration);

    const response = await openai.createCompletion({
      model: "text-davinci-003",
      prompt: input,
      temperature: 0.7,
      max_tokens: 512,
      top_p: 1,
      frequency_penalty: 0,
      presence_penalty: 0,
    });

    return response.data.choices[0].text;
  };

 

6. return문에서는 form 요소를 렌더링하여 input요소와 button 요소를 포함한다.

inputValue 값을 value속성에, handleInputChange 함수를 onChage 속성에 할당한다. button 요소는 type 속성을 submit으로 설정하고, 클릭하면 handleFormSubmit 함수를 호출한다.

 

 

7. 마지막으로 div 요소를 렌더링하여 outputValue 값을 출력한다. 

 return (
    <div className="chat-container">
      <form onSubmit={handleFormSubmit}>
        <input type="text" value={inputValue} onChange={handleInputChange} />
        <button type="submit">Send</button>
      </form>
      <div className="chat-output">{outputValue}</div>
    </div>
  );

 

✅ 결과물 ✅

 

디자인은 추후에 다듬을 예정 ㅎㅎ 일단 기능구현에 중점을 두고 만들었다.

 

💻 전체코드 💻 

//Chat.js

import React, { useState } from "react";
import { Configuration, OpenAIApi } from "openai";
import "./Chat.css";

export default function Chat() {
  const [inputValue, setInputValue] = useState("");
  const [outputValue, setOutputValue] = useState("");

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleFormSubmit = async (event) => {
    event.preventDefault();
    const result = await generateText(inputValue);
    setOutputValue(result);
    setInputValue("");
  };

  const generateText = async (input) => {
    const configuration = new Configuration({
      apiKey: process.env.REACT_APP_CHAT_API_KEY,
    });
    const openai = new OpenAIApi(configuration);

    const response = await openai.createCompletion({
      model: "text-davinci-003",
      prompt: input,
      temperature: 0.7,
      max_tokens: 512,
      top_p: 1,
      frequency_penalty: 0,
      presence_penalty: 0,
    });

    return response.data.choices[0].text;
  };

  return (
    <div className="chat-container">
      <form onSubmit={handleFormSubmit}>
        <input type="text" value={inputValue} onChange={handleInputChange} />
        <button type="submit">Send</button>
      </form>
      <div className="chat-output">{outputValue}</div>
    </div>
  );
}