기존에 맡았던 오픈AI로 챌린지 문제 만들기는 문법 만드는 것과 로직이 같아 한 사람이 해도 될 것 같아, 역할 재분배를 받았다. 나는 오픈AI로 언어수업을 통해 받은 텍스트를 사용자의 언어로 코칭해주는 기능을 맡게 되었다.
어제 API 키 발급과 충전까지는 해놓은지라 호출 및 프롬프팅을 하면 되겠다고 생각했다.

---

타입 정의

1) 타입검사 명령어 입력

yarn add --dev @types/openai 명령어(타입 검사를 할 수 있도록 타입 정의를 설치하는 명령어)를 입력했더니, 이런 에러가 뜸.

warning ../../../package.json: No license field
[1/4] 🔍  Resolving packages...
error Error: https://registry.yarnpkg.com/@types%2fopenai: Not found

⇒ OpenAI API 라이브러리에 대한 공식 타입 정의는 제공되지 않음.

2) 타입 정의 파일 생성(직접 작성)

// src/@types/openai.d.ts

declare module 'openai' {
  export class Configuration {
    constructor(options: { apiKey: string });
  }

  export interface Message {
    role: string;
    content: string;
  }

  export interface Choice {
    index: number;
    message: Message;
    finish_reason: string;
  }

  export interface CreateChatCompletionResponse {
    id: string;
    object: string;
    created: number;
    choices: Choice[];
    usage: {
      prompt_tokens: number;
      completion_tokens: number;
      total_tokens: number;
    };
  }

  export class OpenAIApi {
    constructor(configuration: Configuration);
    createChatCompletion(params: {
      model: string;
      messages: Message[];
      max_tokens?: number;
    }): Promise<CreateChatCompletionResponse>;
  }
}

---

API 호출

1. 서버에서 OpenAI API 호출하기

서버의 API 라우트를 작성해 사용자가 말한 텍스트를 OpenAI API에 보내 개선된 표현을 추천받습니다.

// app/api/getSuggestion/route.ts

import { NextRequest, NextResponse } from 'next/server';
import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

export async function POST(req: NextRequest) {
  const { text } = await req.json();

  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4o-mini",
      messages: [
        { role: "system", content: "You are a helpful assistant that improves phrasing for spoken English to make it sound more natural." },
        { role: "user", content: `Here's what was spoken: "${text}". How could this be phrased more naturally?` },
      ],
      max_tokens: 100,
    });

    const suggestion = response.choices[0].message?.content;
    return NextResponse.json({ suggestion });
  } catch (error) {
    console.error(error);
    return NextResponse.json({ message: 'Error generating suggestion' }, { status: 500 });
  }
}

• 설명: 이 서버 API는 사용자가 말한 텍스트(text)를 받아 OpenAI API에 전달하고, 자연스럽게 고쳐진 표현을 클라이언트에 반환합니다.
• 문제: 터미널에서 콘솔 확인이 안됨…🤯

2. 해결방법

• OpenAI가 자동import 되지 않음. ⇒ 직접 import 작성
• 타입지정한 src/@types/openai.d.ts 파일 내용은 전체 주석처리함.
• API 호출 코드를 페이지에 작성

//app/(mobile)/chat/page.tsx

import OpenAI from "openai";
import React from "react";

const openai = new OpenAI({
  apiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY
});

const Page = async () => {
  const text = "me here airport";
  const completion = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [
      {
        role: "system",
        content:
          "You are a useful tutor who will help you improve your spoken language so that it sounds more natural. If the user says something in Korean, please give me advice so that I can change it to more natural expression in Korean, and if I say something in English, I say English."
      },
      {
        role: "user",
        content: `${text}`
      }
    ]
  });

  const result = completion.choices[0].message.content;
  // console.log(completion.choices[0].message); // 객체

  return <>{result}</>;
};

export default Page;

• 오류해결: 콘솔이 객체였기 때문에 브라우저 화면에 뿌려줄 데이터를 result로 바꿔주기 위해 .content 를 덧붙여서 아래처럼 화면에 나타날 수 있다.
  
• 문제점: “자연스러운 표현으로는 "I’m in the airport." 라고 할 수 있습니다.” 라고 코칭해줘야함

---

AI 프롬프팅

1. 첫 번째 시도

user: 한국인 / 배우고 싶은언어: 영어
영어로 “me here airport”라고 말하면,
AI는 “자연스러운 표현으로는 "I’m in the airport." 라고 할 수 있습니다.” 라고 코칭해줘야함.
system content 수정 필요

content: 당신은 음성 언어의 표현을 개선하여 더 자연스럽게 표현할 수 있도록 도와주는 유용한 튜터입니다. 사용자가 한국어로 말하면 고칠 표현은 한국어로 조언은 영어로, 영어로 말하면 고칠 표현은 영어로, 조언은 한국어로 코칭해줘.

결과 : “”안에만 표현한 언어로 말하고, 조언은 그 반대 언어로 말해야하는데 약간 어설픔.

2. 두 번째 시도

content: 당신은 음성 언어의 표현을 개선하여 더 자연스럽게 표현할 수 있도록 도와주는 유용한 한국어와 영어 튜터입니다. 사용자가 한국어로 말하면 고칠 표현은 한국어로 ""안에 넣어주고, 조언은 영어로 해줘. 만약 사용자가 영어로 말하면 고칠 표현은 영어로 ""안에 넣어주고, 조언은 한국어로 해줘.

1) 한국인이 영어 공부

결과: 문법까지 고려해서 잘 말해줌.

2) 미국인이 한국어 공부

text = "나 갈게 너집안으로”
content: a랑 동일하게

결과: 어색한 표현을 어떻게 표현하면 좋을지 고쳐줌.

---

AI 프롬프트

• 프롬프트란? - AI 모델의 응답을 생성하기 위한 입력값
• 프롬프트 엔지니어링 - AI 중 NLP(자연어처리) 의 개념으로, 프롬프트 입력값들의 조합을 찾아 output의 품질을 높이는 작업
• 참고 링크