Project_ChatGPT OpenAI 사용하기(Next.js 13)

정윤숙·2024년 1월 30일

Project

목록 보기

12/12

📒 오늘의 공부

1. ChatGPT API 연동하기_Next.js 13

사용자가 선택한 언어와 학습 수준에 맞는 단어를 제공하는 Language learning with GPT 프로젝트를 진행 중
OpenAI 사용을 위한 API secret key 발급 및 OpenAI 연동 기초 내용은 아래의 글 참고
👉🏻 React에서 OpenAI 연동하기

ChatGPT 요청 및 응답 전체 코드

'오늘의 단어' 버튼 클릭 시 Api 요청 및 GPT 응답을 console에 출력하기

Api code

// src/app/api/openAi/route.ts 
  import { NextResponse, NextRequest } from "next/server"

  export const POST = async (req: NextRequest) => {
    try {
      const response = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_SECRET_KEY}`,
        },
        body: JSON.stringify({
          model: "gpt-3.5-turbo",
          messages: [
            { role: "user", content: "이전 단어와 중복되지 않는 초급 수준의 영어 단어 3개를 '단어[발음기호] - 한국어 뜻' 형식으로 알려줘" },
          ],
          temperature: 1,
          max_tokens: 200,
        }),
      });

      const responseData = await response.json();
      const wordsData = responseData.choices[0].message.content

      return NextResponse.json({ message: wordsData });
    } catch (error) {
      return NextResponse.json({ error: 'An error occurred' });
    }
  };

Client code

  // src/app/page.tsx
    // '오늘의 단어' 버튼 클릭 시 API 요청
    const handleWordOfTheDay = async () => {
      try {
        const response = await fetch('/api/openAi', { method: 'POST' });

        if (response.ok) {
          const data = await response.json();
          console.log('Response status:', response.status);
          console.log('Response message:', data.message);
        } else {
          console.log('API 요청 실패. 상태 코드:', response.status);
        }
      } catch (error) {
        console.error('API 요청 오류:', error);
      }
    };

      ...

      {/* '오늘의 단어' 버튼 */}
      <Button
      variant="contained"
      disabled={!isLanguageSelected}
      onClick={handleWordOfTheDay}
      >
        오늘의 단어
      </Button>

결과

ChatGPT 요청 message 변화

1. 요청 message : "이전 단어와 중복되지 않는 초급 수준의 영어 단어 3개를 '단어[발음기호] - 뜻' 형식으로 알려줘"
- 영어 단어의 뜻을 한국어가 아닌 영어로 응답하는 경우 발생
- 토큰 수를 100으로 제한했더니 응답이 잘리는 문제 발생
1. 요청 message : "이전 단어와 중복되지 않는 초급 수준의 영어 단어 3개를 '단어[발음기호] - 한국어 뜻' 형식으로 알려줘"
- 형식 변경: '단어[발음기호] - 뜻' => '단어[발음기호] - 한국어 뜻'
- 토큰 수 변경: max_tokens: 100 => max_tokens: 200

UseState를 활용해 서버 응답을 화면에 출력하기

Client code

    const [words, serWords] = useState('');

      ...

    // '오늘의 단어' 버튼 클릭 시 API 요청
    const handleWordOfTheDay = async () => {
      try {
        const response = await fetch('/api/openAi', { method: 'POST' });

        if (response.ok) {
          const data = await response.json();
          console.log('Response status:', response.status);
          serWords(data.message);
        } else {
          console.log('API 요청 실패. 상태 코드:', response.status);
        }
      } catch (error) {
        console.error('API 요청 오류:', error);
      }
    };

      ...
       {/* ChatGPT 응답 출력 */}
        {words ? (
          <Chip
          sx={{
          height: 'auto',
          margin: '10px',
          padding: '3px',
          fontSize: '14px',
          backgroundColor: 'lightskyblue',
          '& .MuiChip-label': {
          display: 'block',
          whiteSpace: 'normal',
          },
        }}
        label={words}
        />
          ) : null}

결과

사용자가 선택한 언어와 학습 수준에 맞는 단어 출력하기

Client code

사용자가 선택한 언어 language 와 학습 수준 userLevel을 body에 담아 api 요청하기

// src/app/page.tsx
    // '오늘의 단어' 버튼 클릭 시 API 요청
    const handleWordOfTheDay = async () => {
      try {
        const response = await fetch('/api/openAi', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            language: language,
            userLevel: userLevel,
          }),
        });

        if (response.ok) {
          const data = await response.json();
          console.log('Response status:', response.status);
          serWords(data.message);
        } else {
          console.log('API 요청 실패. 상태 코드:', response.status);
        }
      } catch (error) {
        console.error('API 요청 오류:', error);
      }
    };

Api Code

Client에서 보낸 값을 받아오는 code 추가

		const requestData = await req.json();
		const { language, userLevel } = requestData;

요청 메시지를 템플릿 리터럴(Template Literal)로 변경

      messages: [
        { role: "user", content: `이전 단어와 중복되지 않는 ${userLevel} 수준의 ${language} 단어 3개를 '단어[영문 발음기호] - 한국어 뜻' 형식으로 알려줘` },
      ],

전체코드

  // src/app/api/openAi/route.ts 
  import { NextResponse, NextRequest } from "next/server"

  export const POST = async (req: NextRequest) => {
    try {

      const requestData = await req.json();
      const { language, userLevel } = requestData;

      const response = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_SECRET_KEY}`,
        },
        body: JSON.stringify({
          model: "gpt-3.5-turbo",
          messages: [
            { role: "user", content: `이전 단어와 중복되지 않는 ${userLevel} 수준의 ${language} 단어 3개를 '단어[영문 발음기호] - 한국어 뜻' 형식으로 알려줘` },
          ],
          temperature: 1,
          max_tokens: 200,
        }),
      });

      const responseData = await response.json();
      const wordsData = responseData.choices[0].message.content

      return NextResponse.json({ message: wordsData });
    } catch (error) {
      return NextResponse.json({ error: 'An error occurred' });
    }
  };

결과

영어

스페인어

스페인어의 경우 '단어[영어 발음기호] - 한국어 뜻' 형식으로 요청 메시지를 보냈는데도 불구하고 아래와 같이 발음기호가 한국어로 표기되는 경우가 발생
'단어[IPA] - 한국어 뜻' 형식으로 요청 메시지를 변경하니 발음기호가 영문으로 잘 표기됐다.
- IPA = 국제음성기호(International Phonetic Alphabet)