chatGPT를 이용한 대화 봇 만들기(2)

임성은·2023년 5월 9일

리액트 프로젝트

이어서 기본 적인 틀을 구성해보려고 합니다.

가장 먼저 헤더를 구성하고 넘어가려는데..(분명 간단히 하면 되는데)

폰트까지만 적용하자!(눈에 빨리빨리 보여야만 기분 좋은 스타일)

다행이다. 무료 폰트다~!!(메이플 무료 폰트를 찾아서 적용 시킵니다.)

방법을 보자!

폰트 적용하기

사이트에서 폰트를 복사합니다.
index.html> head안에 스타일을 생성해서 붙여넣기.

 <style>
      @font-face {
        font-family: 'MaplestoryOTFBold';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff')
          format('woff');
        font-weight: normal;
        font-style: normal;
      }
    </style>

넣어준 폰트를 사용하기!

const Font = styled.div`
  font-size: 4.5rem;
  font-family: 'MaplestoryOTFBold';
  letter-spacing: 0.5rem;
`;

크크
일단 여기까지만 적용해주고 후딱 다음으로!

먼저 대화를 주고 받을 틀을 대충 보더라인만 추가해서 만들어 주고

대화가 오갈때 말풍선을 컴포넌트 화 하여 관리하려고 유저와 예티의 말풍선 컴포넌트를
만들어 주었습니다.

유저 말풍선 컴포넌트


interface UserMessageProps {
  text: string;
}

const MessageContainer = styled.div`
  background-color: #f4cf95;
  padding: 10px;
  border-radius: 30px;
  align-self: flex-end;
  margin-bottom: 10px;
`;

const UserMessage = ({ text }: UserMessageProps): JSX.Element => {
  return <MessageContainer>{text}</MessageContainer>;
};

export default UserMessage;

메인에서 텍스트를 가져와서 사용합니다.

임의로(하드코딩) 글을 넣어 봤습니다.
예티는 본래 조금 네모각진 얼굴을 하여 말풍선도 네모스럽고 유저는 좀 동글하고 메이플 스러운 칼라?(내 개인적인 생각) 으로다가 했어요.

그리고 프로필?이미지 처럼 이미지를 추가해주었습니다.

const UserMessage = ({ text }: UserMessageProps): JSX.Element => {
  return (
    <Flex>
      <Image src="./img/user.png" alt="프사" />
      <MessageContainer>{text}</MessageContainer>
    </Flex>
  );
};

하드 코딩으로 채팅먼저 구현했는데 여기에다가 api를 입혀보겠습니다.
https://platform.openai.com/docs/api-reference

일단 api key를 만들고 .env파일을 만들어 키를 넣어서 사용합니다

npm install axios

API 코드

import axios from 'axios';

const api_key = process.env.REACT_APP_API_KEY;

export const GptResponse = async (userMessage: string) => {
  try {
    const response = await axios.post(
      'https://api.openai.com/v1/engines/davinci/completions',
      {
        prompt: `${userMessage}\n`,
        max_tokens: 60,
        temperature: 0.7,
        n: 1,
        stop: '\n',
      },
      {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${api_key}`,
        },
      },
    );
    const botResponse = response.data.choices[0].text
      .trim()
      .replace(/(\r\n|\n|\r)/gm, ' ');

    return botResponse;
  } catch (error) {
    console.error(error);
    return '예티가 대답하지 못했습니다.';
  }
};

api 코드는 래퍼런스를 보고 따라했는데 계속 존재하지 않는 모델이라고 나오길래 gpt에 알아보니
변경된 모델이 있어 url을 수정하여 작성하였다!!역시 ai!!

그래서 시연을 해보았더니