[간단오류] OpenAI API - content: 'undefined' 나오는 이유

웹클라이언트 컴퓨팅 과제 프로젝트를 하던 도중 생긴 문제 해결 과정이다.

 

문제

사진은 GPT의 대답.

요청을 보내는데 대답을 안해준다!

 

해결

위 코드 복붙해서 재사용한거라 content에 codeName이 없어서 오류가 난 것..

바보

 

이 오류가 뜬 이후 chatGPT에게 코드 간소화 요청을 보냈더니

async function useOpenAI(content, key) {
  try {
    if (key === "n2f") {
      const completion = await openai.chat.completions.create({
        messages: [
          {
            role: "system", // ChatGPT에게 어떻게 행동을 할지 지정
            content: `너는 세계 최고의  '${content.framework}' 전문가야.
          리액트 프레임워크에 언어는 javascript를 사용해서 '${content.codeName}'라는 이름을 가진 함수를 만들어줘.
          또한 그 함수를 만들 때 '${content.etc}'라는 사항도 고려해서 만들어줘.
          대답을 할 땐 다른 말이나 import구문 등 없이, 그저 코드만 보내줬으면 좋겠어.
          그리고 함수를 만들 땐 const가 아닌 function문을 사용해줘.`,
          },
        ],
        model: "gpt-4",
        max_tokens: 512,
        temperature: 1, //창의성,
      });
      console.log(completion.choices);
      return completion.choices[0].message.content;
    } else if (key === "f2n") {
      const completion = await openai.chat.completions.create({
        messages: [
          {
            role: "system",
            content: `너는 세계 최고의 'React' 전문가야.
          리액트 프레임워크에 언어는 javascript를 사용해서 '${content.codeName}'라는 함수를 만들었어.
          그 함수를 보고 그 함수의 정확한 이름을 알려줘.
          대답을 할 땐 다른 말 없이, 'handleInputChange'처럼 이름만 보내줬으면 좋겠어.`,
          },
        ],
        model: "gpt-4",
        max_tokens: 1024,
        temperature: 1, //창의성,
      });
      console.log(completion.choices);
      return completion.choices[0].message.content;
    }
  } catch (error) {
    console.error("Error fetching data from ChatGPT API:", error);
    throw error;
  }
}

이렇게 길고 긴 코드에서

 

async function useOpenAI(content, key) {
  const messages = {
    n2f: `너는 세계 최고의 '${content.framework}' 전문가야.
          리액트 프레임워크에 언어는 javascript를 사용해서 '${content.codeName}'라는 이름을 가진 함수를 만들어줘.
          또한 그 함수를 만들 때 '${content.etc}'라는 사항도 고려해서 만들어줘.
          대답을 할 땐 다른 말이나 import구문 등 없이, 그저 코드만 보내줬으면 좋겠어.
          그리고 함수를 만들 땐 const가 아닌 function문을 사용해줘.`,
    f2n: `너는 세계 최고의 'React' 전문가야.
          리액트 프레임워크에 언어는 javascript를 사용해서 '${content.codeName}'라는 함수를 만들었어.
          그 함수를 보고 그 함수의 정확한 이름을 알려줘.
          대답을 할 땐 다른 말 없이, 'handleInputChange'처럼 이름만 보내줬으면 좋겠어.`,
  };

  try {
    const completion = await openai.chat.completions.create({
      messages: [{ role: "system", content: messages[key] }],
      model: "gpt-4",
      max_tokens: key === "n2f" ? 512 : 1024,
      temperature: 1, // 창의성
    });
    console.log(completion.choices);
    return completion.choices[0].message.content;
  } catch (error) {
    console.error("Error fetching data from ChatGPT API:", error);
    throw error;
  }
}

매우 간결한 코드로 바꿔줬다.

어차피 바뀌는건 메시지밖에 없을텐데 이 생각을 왜 못했지,,쩝