<원더웨이>만의 특별한 기능은 "생성형 AI와 대화하며 자동으로 여행 계획 짜기"이다.
이를 위해서 ChatGPT, 그리고 Tmap API를 활용해 간단한 채팅만으로도 계획이 자동으로 셋팅되도록 구현했다.
Tmap에 자동 셋팅되는 부분은 다음 포스팅에서 다루도록 하고, 이번 포스팅에선 ChatGPT의 응답을 활용해 응답 문자열을 객체 데이터화 하는 방법을 다룰것이다.
위와같이 대전의 여행지를 GPT에게 추천받으면, 서론과 함께 여행지와 여행지 정보를 응답받게 된다.
위 문자열에서 여행지 제목만을 추출해서 Tmap에 전달해야 하는데, 어떻게 해야할까?
나는 두가지를 활용했다. (1)프롬프트 엔지니어링, (2)정규표현식이다.
프롬프트 엔지니어링으로 응답형식 지정하기
프롬프트 엔지니어링은 생성형AI가 고품질의 아웃풋을 생성할 수 있도록 최적의 입력을 설계하는 프로세스다. 어려워보이지만, 간단하게 요약하면 '질문을 잘 하는방법'인 것이다. 기법은 여러가지가 있지만, 몇가지 소개하자면 '구체적인 지시와 명확한 맥락 제공', '단계별 지시', '예시 제공' 등이 있다.
그래서 나는 chatGPT와의 통신 API에 사용자의 입력 뒤에 다음과 같은 프롬프트를 추가했다. 이렇게하면 정해진 형식의 응답이 올것이다.
const data = JSON.stringify({
messages: [
{
role: "user",
content:
message +
"\n 각 여행지에 대한 설명을 한줄씩 작성해주세요."+
"형식은 숫자로 매기고, 여행지 이름 다음에 콜론을 붙이고, 한줄로 간단한 설명을 작성해주세요."+
"예를들어: \n\n1. 여행지이름 : 여행지에 대한 설명 \n2. 여행지이름 : 여행지에 대한 설명\n\n 이런 형식으로 반환해주세요..",
},
],
max_tokens: 400,
model: "gpt-3.5-turbo",
});
message가 유저의 입력값이고, 뒤의 문자열이 프롬프트이다. 이해를 돕기 위해 문자열로 하드코딩했지만, 위 내용은 env파일과 같은 안전한 경로에 저장해두고 꺼내서 쓰는 방법이 더 적합할것이다.
정규표현식으로 객체화
이제 응답의 형식이 지정되었다. 그렇다면 해당 형식의 문자열에서 특정 데이터, 즉 여행지 제목을 분리하면 된다.
이 방법은 정규표현식을 활용해 해결했다. 문자열에서 특정 패턴을 찾아 처리한다.
기본적인 예시는 다음과 같다.
[a-zA-Z]+ : 영문자가 하나 이상 포함된 문자열과 매칭됨
\d{3}-\d{4}-\d{4} : "010-1234-5678"과 같은 전화번호 형식과 매칭됨
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$ : 이메일 주소 형식과 매칭됨
그리고 정규표현식을 통해 여행지 정보를 찾는 방법은 다음과 같다.
// 여행지 이름만 추출 - 추출된 결과를 배열에 저장
const pattern = /\d+\.\s*([^:]+)\s*:/g;
const matches = Array.from(chatGPTResponse.matchAll(pattern), (match) =>
match[1].trim()
);
locations.value = matches;
console.log(locations);
그럼 다음과 같이 결과가 추출된다!
(이제 추출된 위치정보를 바탕으로, Tmap API에 검색을 자동요청한뒤 핀을 띄우고, 여행 루트를 생성해 제공하면 된다😀)
이렇게 프롬프트 엔지니어링, 정규표현식을 활용해 응답을 데이터화하는 방법을 알아보았다.
해당 기능은 발표회당시 아주 좋은 반응을 얻었던만큼, 편의성을 극대화 하기 위해 필요한 테크닉같다.
자세한 코드는 여기서 볼수있다!
'프로젝트 > 원더웨이' 카테고리의 다른 글
Vue3.js에서 TMap API 사용하는 방법(바닐라JS를 Vue로 커스텀) (13) | 2024.11.11 |
---|---|
QueryDSL 동적쿼리로 편리한 검색기능 만들기 (12) | 2024.11.08 |