Project_ChatGPT OpenAI 사용하기(React)

📒 오늘의 공부

1. ChatGPT API 연동하기_React

API secret key 발급하기

• OpenAI 공식 사이트

  • ChatGPT를 이용해 본 적 있다면 해당 계정으로 OpenAI 사이트에서 로그인 하기

• Secret key 생성하기

  • 왼쪽 메뉴바에서 API keys 클릭
    
  • key 생성 버튼을 누르면 팝업창이 뜨는데 이때 보이는 secret key를 복사해두기. 창을 닫으면 key를 다시 확인 할 수 없다.

• key 생성 완료
  

---

💡OpenAI는 유료

• 처음 계정을 생성하게 되면 Free Trial $18를 받을 수 있다.
  • Free Trial은 유효 기간이 있는데 이전에 ChatGPT를 사용한 적 있다면 그 때부터 유효 기간이 계산 된다.
    (유효 기간은 정확히 알 수 없다. 문의해봤으나 공식문서를 참고하라는 답변 뿐..)
  • 나의 경우 ChatGPT를 사용한 지 10개월 정도 됐는데 이미 Free Trial의 유효기간이 만료되었다.
• Free Trial을 위해 다른 Oepn AI 계정을 만드는 시도를 했으나 핸드폰 번호로 계정을 인증해야 하기 때문에 해당 번호로 인증한 기존 계정이 있어 Free Trial을 다시 받는 것은 실패했다.

---

ChatGPT OpenAI 사용료 계산

• OpenAI Pricing - 가격 정책 확인

• GPT API 사용료는 Token으로 계산 된다.

  • gpt-3.5-turbo-1106 모델 기준 1000Token당 Input은 $0.0010, Output은 $0.0020
    

• Token이란?

  • GPT 모델에서의 Token은 텍스트의 작은 부분으로 나누어진 단위 ex. 단어, 부분 단어(subword), 혹은 글자(character)
  • API 응답에서 "usage" 섹션을 확인하면 사용된 토큰 수 확인 가능
  • 1000Token은 약 750 words

React에서 연동하기

• OpenAI - API reference

• OpenAI 라이브러리 설치(Node.js 환경)
  npm install openai@^4.0.0

• Secret key를 위해 .env 파일 생성
  

• api 생성

  • 공식문서의 Making requests 참고
    

  • CallGPT api

    • GPT에 "초급 사용자를 위한 영어 단어 3개 알려줘"라는 내용을 요청

  

---

💡 GPT API 요청 파라미터

• Model : 요청하는 모델의 이름
  • Model 확인하기
• Messages : 채팅 형태의 대화를 정의하는 파라미터
• Temperature : 생성된 텍스트의 창의성을 조절하는 파라미터. 값이 낮을수록 보수적이고 높을수록 창의적인 텍스트가 생성
• Max Tokens : 모델이 생성할 최대 토큰 수. 모델이 생성하는 텍스트의 길이 제어 가능

---

• App.jsx 파일

  • 버튼을 누르면 CallGPT api를 호출
    

• 호출 결과
  

  • 응답만 추출하기
    console.log(responseData.choices[0].message.content)
    

• 위의 코드는 단순히 OpenAI API에 요청을 보내고 응답을 확인하는 기본적인 코드로 예외 처리 코드 추가 필요

참고자료

• ChatGPT 알아보기 - API 사용하기
• Youtube - React에서 ChatGPT 연동하기