1. Hugging Face API와의 통신 설정

먼저, Hugging Face API에 요청을 보내기 위한 함수를 정의했다.
Hugging Face는 다양한 자연어 처리 모델을 제공하는 서비스로, 여기서 flan-t5-large 모델을 사용해 포트폴리오 내용을 분석하고, 그에 맞는 질문을 생성하는 작업을 수행하고자 했다.

먼저, API의 URL을 상수로 설정해준다.

const HUGGINGFACE_API_URL =
  "https://api-inference.huggingface.co/models/google/flan-t5-large";

그 다음, fetchHuggingFaceAPI라는 비동기 함수를 작성했는데, 이 함수는 주어진 프롬프트를 API에 전달하고 결과를 받아오는 역할을 한다.

async function fetchHuggingFaceAPI(fullPrompt: string) {
  const apiKey = process.env.HUGGINGFACE_API_KEY;
  if (!apiKey) {
    throw new Error("HUGGINGFACE_API_KEY is not set in environment variables");
  }

  const response = await fetch(HUGGINGFACE_API_URL, {
    headers: {
      Authorization: `Bearer ${apiKey}`,
      "Content-Type": "application/json",
    },
    method: "POST",
    body: JSON.stringify({ inputs: fullPrompt }),
  });

  if (!response.ok) {
    throw new Error(
      `Hugging Face API responded with status: ${response.status}`
    );
  }

  return response.json();
}

이 함수에서는 API 키를 환경 변수에서 가져오도록 했다.
만약 API 키가 설정되지 않았다면 명확하게 오류를 발생시키도록 했다.
또한, fetch 함수를 사용해 Hugging Face API에 POST 요청을 보내고, 이 때 요청 본문에 프롬프트를 JSON 형식으로 전달한다.
API에서 성공적으로 응답이 오면 그 결과를 JSON 형태로 반환하고, 요청이 실패하면 상태 코드와 함께 오류를 던지도록 했다.

2. API 응답 파싱

다음으로, Hugging Face API의 응답에서 생성된 질문을 추출하기 위해 parseQuestions 함수를 작성해준다.
이 함수는 API의 응답이 예상한 형식인지 확인하고, 올바른 형식일 경우 질문들을 추출하여 반환한다.

function parseQuestions(result: any): string[] {
  if (
    !Array.isArray(result) ||
    result.length === 0 ||
    !result[0].generated_text
  ) {
    throw new Error("Unexpected response format from Hugging Face API");
  }
  return result[0].generated_text.split("\n").filter(Boolean);
}

이 함수에서는 API 응답이 배열인지, 그리고 배열의 첫 번째 요소에 generated_text 속성이 포함되어 있는지를 확인했다.
예상한 형식이 아니라면 오류를 발생시키고, 예상한 형식이라면 generated_text를 줄 단위로 분리하여 배열로 반환하도록 해주었다.
이렇게 분리된 배열은 이후 면접 질문 목록으로 사용됩니다.

3. Next.js 핸들러 함수

이제 클라이언트의 POST 요청을 처리하는 Next.js의 API 라우트를 작성했다.
이 함수는 클라이언트로부터 데이터를 받아와 Hugging Face API와 상호작용하며, 결과를 다시 클라이언트에 전달한다.

export async function POST(request: Request) {
  try {
    const { portfolioText, prompt } = (await request.json()) as RequestBody;

    console.log("Received portfolio text:", portfolioText);
    console.log("Received prompt:", prompt);

    const fullPrompt = `${prompt}\n\nPortfolio: ${portfolioText}\n\nGenerate 5 interview questions based on this portfolio.`;

    const result = await fetchHuggingFaceAPI(fullPrompt);
    console.log("Hugging Face API response:", result);

    const questions = parseQuestions(result);

    return NextResponse.json({ questions });
  } catch (error) {
    console.error("Detailed error:", error);
    return NextResponse.json(
      {
        error: "Error generating questions",
        details: error instanceof Error ? error.message : String(error),
      },
      { status: 500 }
    );
  }
}

이 함수에서는 클라이언트로부터 포트폴리오 텍스트와 프롬프트를 JSON 형식으로 받아온다.
이 데이터를 조합해 fullPrompt를 생성하고, 이를 fetchHuggingFaceAPI 함수에 전달하여 질문을 생성한다.
API 응답은 parseQuestions 함수를 통해 면접 질문으로 변환되며, 이 질문들을 JSON 형식으로 클라이언트에 반환한다.

오류가 발생할 경우, 오류 메시지를 콘솔에 출력하고 클라이언트에 오류 정보를 반환하도록 처리해줬다.