우선 시작하기 전에 변경사항이 있다.

API 버전 3.5가 나오면서 새 url과 모델 gpt-3.5-turbo로 변경했다. 저번에 따끈뚱땅 뉴스로 다뤘던 내용인데, api 적용이 그동안 안돼서 골머리 앓고 있다가 여러번 시도 끝에 반환값을 얻는 데 성공해 공유한다.

export const getChatResponse = async (prompt: string): Promise<ChatResponseData> => {
  try {
    // 다빈치 사용
    // const response = await axios.post(
    //   "https://api.openai.com/v1/completions",
    //   {
    //     model: "text-davinci-003",
    //     prompt,
    //     temperature: 0.9,
    //     max_tokens: 100,
    //     top_p: 1,
    //     frequency_penalty: 0,
    //     presence_penalty: 0.6,
    //     stop: [" Human:", " AI:"],
    //   },
    //   {
    //     headers: {
    //       "Content-Type": "application/json",
    //       Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPEN_API}`,
    //     },
    //   }
    // );
    // const resText = response.data.choices[0].text;
    // const resId = response.data.id;

    // gpt 3.5 터보 사용
    const response = await axios.post(
      "https://api.openai.com/v1/chat/completions",
      {
        model: "gpt-3.5-turbo",
        messages: [{ role: "user", content: prompt }],
        temperature: 0.9,
        max_tokens: 100,
      },
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPEN_API}`,
        },
      }
    );
    const resText = response.data.choices[0].message.content;
    const resId = response.data.id;

    return { resText, resId };
  } catch (error) {
    console.error(`Error in getChatResponse: ${error}`);
    throw new Error("Unable to generate chat response");
  }
};

좀 더 빨라진 듯한 느낌이 든다 ㅎㅎ

디자인 기획

어떤 식으로 할 거냐! 나는 next.js와 제일 잘 어울린다고 생각하는 테일윈드 css를 쓸 것이다. 그러면서 라이트, 다크모드도 같이 할 것이다. 포트폴리오 사이트 만들면서 했었는데 거의 까먹어서 다시 해봐야겠다.

또 전편에서 설정했던 UI도 할 것인데

약간 이런 식으로 할 것이다. 드롭다운은 큰 편이므로 좀 길게, 모달은 차피 버튼처럼 누르면서 레이아웃을 띄울 것이기에 좀 작게 했다. 색과 다크모드 등등은 하면서 어울리는 색을 찾아 갈 것이다. 팁이 하나 있는데 색상 고르는 사이트, 컬러헌트에서 고르고 색들을 사용하면 훨씬 모노톤, 배색 등 컬러 기술을 조금이나마 사용할 수 있다.

데이터 가공

내가 API를 가져와 반환 데이터를 주었을 때, 결괏값을 한번 보자.

resText 변수 부분을 보면 반환값이 저렇게 나온다. 저 반환값이 한덩이라면 가지고 예쁘게 꾸미거나 각각 데이터를 가지고 관리하기 까다롭다.

그래서 이 데이터를 가공하는, string 메소드들을 이용하여 사용할 것이다.

  const variableArr = data?.resText
    .replace(/^\d+\./gm, "")
    .replace(/\n/g, "")
    .trim()
    .split(/\s+/)
    .slice(0, 10);

이렇게 말이다! 각각 문자들은 정규식으로 표현했다. 그 다음 메소드들의 작용을 보자면 이런 식일 것이다.

각 줄의 시작 부분에서 숫자를 제거 - 줄 바꿈 제거 - 선행/후행 공백 제거 - 공백으로 분할 - 만든 배열 얕은 복사

1., 2. 등 숫자를 없애고, \n 줄바꿈 없애고, 앞뒤 공백 없앤 다음 그 사이 남은 공백으로 분할해 배열을 만들었다. 마지막으로 slice로 얕은 복사를 하여 변수로서 활용도도 높였다.

이거 하는데 은근히 오래 걸렸다. 하여간 정규식은 오래 걸려서 싫지만 어떡하랴,, 쨌든 이렇게 완성했다! 기본 재료들은 확실하게 만들었으니, 다크모드 및 기능 추가는 다음에 하겠다.