React & openAI API (Examples) 활용하여 이름생성기 만들기 + API 사용은 결제하자!

1. openAI 홈페이지 / Developers / example 에 들어가서 사용하고 싶은 것 중 선택하면 된다.

 

 

2. 여기서 이름 생성기를 사용해보겠다.

 

클릭하면 상세 페이지가 뜨는데

이제 curl 과 node.js 선택하면 소스코드가 뜬다.

이것을 활용하여 만들었다.

 

await 비동기로 받아와서 작성 함수에 async 달아주기!!

https://~ ,, post 요청 보낼 주소 값
-H ,, 헤더에 넣어 줄 값
-d ,, data로 body에 넣어 줄 값

 

 

 

 

---

1. 

.env 파일 생성하여 작성한다.

REACT_APP_OPENAI_API_KEY="API 키"

 

 

2.

        const dataBody = {
          model: "text-davinci-003",
          prompt: `suggest three pet names ${animalNameInput}`,
          temperature: 0.8,
          max_tokens: 60,
          top_p: 1.0,
          frequency_penalty: 0.0,
          presence_penalty: 0.0,
        };

 

이때 max_tokens으로 생성될 글의 길이를,

temperature와 top_p로 생성될 다음 단어의 샘플링 방법 등을 지정한다.

 

 

 

키 중에서 prompt 에 원하는 내용을 입력하면 결과 값을 도출 해준다.

 

 ${animalNameInput} 은 useState() 를 사용하여,

페이지 인풋 값을 적용하여 요청하기 위하여 사용 했다.

 

 

 

그리고 적용 페이지에서 fetch 나 axios 를 통해 요청(post) 해준다.

받은 data를 변수에 담아서 화면에 띄워주면 된다!

 

 

 

주요코드~

      try {
        const dataBody = {
          model: "text-davinci-003",
          prompt: `suggest three pet names ${animalNameInput}`,
          temperature: 0.8,
          max_tokens: 60,
          top_p: 1.0,
          frequency_penalty: 0.0,
          presence_penalty: 0.0,
        };

        const response = await fetch("https://api.openai.com/v1/completions", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + process.env.REACT_APP_OPENAI_API_KEY,
          },
          body: JSON.stringify(dataBody),
        });

        const data = await response.json();

        //! data에서 답변 가져오기
        setResult(data.choices[0].text);
        setAnimalNameInput("");
      } catch (error) {
        console.log(error);
        alert("서버에서 잘못된 데이터를 반환했습니다.");
      }

 

아래코드를 사용하여, 결과 값을 넣는다.

 

 

완성!

사이드 프로젝트 고양이 MBTI 결과 페이지에 넣을 예정이다.

 

 

 

 

+ 에러

 

알고나서 너무 화가 났다.. ㅎㅎ
코드 에러도 없었고, 몇번이나 확인 했는데 500 에러가 계속 뜨고
POST 할 때도, JSON.stringify() 로 키,값을 잘 보내고
response.json() 써서 문제가 없었다.. 하지만
openAI API 를 사용할려면 결제를 했어야했다.

결제하자마자 바로 데이터가 이렇게 잘 오다니..

 

 

 

 

 

참조

[React] Next.js로 chatGPT 활용하기 (OpenAI Api 가져오기)

 

[OpenAI] 음악 추천 서비스 만들어보기 (React) 2부