Chat GPT AI TIL

Chat GPT의 API를 이용하는 방법

먼저 제일중요한건 Open AI 사이트에 접속하자

로고 참이쁘다 ..🤣

Open AI -> 좌측상단 API Reference -> Instroduction 에서
Create chat complention 을 찾자 Ctrl+f 로 찾아보자
여기서는 Post를 이용해서 Chat GPT를 가져올것이다.

Postman을 이용하자

Postman을 이용해서 Chat GPT가 잘 되는지 보자

Postman에서 +

여기서 GET POSR PUT PATCH DELETE 등 많다
POST를 선택하자 그리고나서 OpenAI에 POST http로 되어있는걸 복붙해서 Send하기전에

BODY로 들어가자

여기서 raw 그리고 JSON 형식으로 선택하자

{
    "messages": [
        {
            "role": "user",
            "content": "안녕"
        }
    ],
    "model": "gpt-3.5-turbo"

이렇게 작성해주자 우리에게 필요한건 message의role과 model Authorized API key 이렇게 필요하다
Bearer Token Type에서 키를 입력하자
이상태에서 send를 하면 APIkey가 인증이 됬다면 아래 Body에 답변이 돌아올것이다.

서버상태가 정상적이라면 messages,key를 복사해 가져오자

먼저 http형식에 API를 사용할것이기 때문에 axios를 사용해 구현하자.
제일먼저 물어볼것을 타이핑할곳 물어볼것을 타이핑한것을 보낼버튼 그리고
물어볼것을 대답해줄 chat GPT도 있어야하고 물어볼것을 대답해준것을 화면에 내보내줘야한다.
그리고 우리가 질문한것과 대답한 기록이 있어야한다.

axios로 http서버를 가져오자

const onSubmitChat = async (e) => {
    try {
      e.preventDefault();
 const response = await axios.post(
        "https://api.openai.com/v1/chat/completions",
        {
          model: "gpt-3.5-turbo",
          messages: [{ role: "user", content: newQuestion }],
        },
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${process.env.REACT_APP_OPEN_AI_KEY}`,
          },
        }
      );
      console.log(response);
      
      ]);

get이 아닌 post로 사용하자 onSubmitChat 함수는 우리가 물어볼것을 생성하는 버튼이다
event를 새로고침이 안되는 e.preventDefault에 내려주고 response에 await 비동기처리로
axios.post를 한것을 담아준다. 그리고나서 콘솔로그를 찍어보자.

 response->data->choices[0]->message->content

npm run start 로 로컬호스트에서 devtools - console 에 status 200 과 함께 잘찍혀있다면 위 순서로
들어가보면 우리가 작성한 질문과 함께 답변이 작성되있을것이다.

newQuestion은 setNewQuestion과의 useState이다

인풋의 value에 newQuestion 과 내장함수 onChage={(e)=>(e.target.value)} 로 들어가있다

이렇게해서 openAI API를 HTTP로가져오는방법과 질문작성 하는방법을배웠다 출력 렌더링은 다음시간에알아보자 😆