ChatGPT API로 대화형 챗봇 앱 만들기
목차
- 소개
- GPT 3.5 Turbo API 소개
- 새로운 모델을 사용하여 대화형 챗봇 앱 만들기 방법
- 개발 준비
- OpenAI playground 소개
- OpenAI Node SDK 설치하기
- Endpoint 설정하기
- 챗봇 앱 코드와 마크업 구성
- 메인 앱 페이지 스타일과 마크업 설정하기
- 채팅 메시지 컴포넌트 설정하기
- 챗봇 앱 코드 구성하기
- 토큰 분리 및 토큰 제한 관리
- GPT-3.5 토크나이저 설치하기
- 토큰 수 제한하기
- OpenAI 모델 요청 수 제한하기
- 채팅 완료 응답 처리
- 클라이언트 측 코드 구성
- 폼 제출 처리하기
- 응답 메시지 표시하기
- 스크롤 처리하기
- Vercel을 이용한 앱 배포
- Vercel 설정하기
- 환경 변수 설정하기
- 프로젝트 배포하기
- 결론
2. GPT 3.5 Turbo API 소개
오픈AI는 최신 언어 모델인 GPT 3.5 Turbo API를 공개했다. 이 모델은 챗 (Chad) GPT를 구동하는 모델로, 이전 모델인 GPT-3보다 10배 더 저렴하다. 이 API는 대화형 챗봇 및 기존의 GPT-3와 유사한 완성 기능에 사용할 수 있다.
3. 새로운 모델을 사용하여 대화형 챗봇 앱 만들기 방법
이제 새로운 모델을 사용하여 대화형 챗봇 앱을 만들어보자. 이를 위해 Spell Kit과 Vercel Edge Functions를 사용할 것이다. 먼저 OpenAI playground에서 실제로 API가 작동하는 방식을 살펴보고, 앱에 통합하기 전에 앱을 구축해보자. 왼쪽에 시스템 입력란이 있으며, 이 곳에는 시작할 때 모델에게 필요한 콘텍스트를 제공하여 모델을 시작할 수 있다. 예를 들어, "모델에게 '너는 열정적이고 재치있는 고객 지원 요원이며 Hunter Byte라는 회사에서 일하며, 이름은 Axel이라고 하며, 도움을 주는 것을 즐깁니다'라고 말할 수 있다. 이 정보는 사용자에게 응답할 때 AI가 사용된다. 사용자가 메시지를 입력하고 '제 이름은 무엇인가요?'라고 입력한 후 제출을 클릭하면, AI는 예상할 수 있는 응답을 제공한다. 이와 같은 대화를 계속 진행할 수 있다.
4. 개발 준비
4.1. OpenAI playground 소개
4.2. OpenAI Node SDK 설치하기
4.3. Endpoint 설정하기
4.1. OpenAI playground 소개
오픈AI playground는 챗봇 앱을 통합하기 전에 실제로 API가 작동하는 방식을 더 잘 이해하기 위해 사용할 수 있는 도구이다. 사용자는 왼쪽에 있는 시스템 입력란에 시작 콘텍스트를 제공하고, 사용자 프롬프트에 메시지를 입력한 다음 제출할 수 있다. 그러면 AI는 해당 메시지에 대한 예상 응답을 제공할 것이다.
4.2. OpenAI Node SDK 설치하기
OpenAI Node SDK를 설치해야 한다. 이를 통해 서버 측에서 OpenAI API에 요청을 보낼 수 있다.
4.3. Endpoint 설정하기
API와 통신할 수 있는 엔드포인트를 설정해야 한다. 이 엔드포인트는 POST 요청을 받아들이고 처리하는 핸들러로 구성되어야 한다.
5. 챗봇 앱 코드와 마크업 구성
챗봇 앱을 만들기 위해 스타일과 마크업을 설정해야 한다. 또한 채팅 메시지 컴포넌트를 만들어야 한다. 이렇게 하면 사용자로부터의 메시지와 AI의 응답을 구분할 수 있다. 이러한 컴포넌트는 UI Tailwind 구성 요소를 사용하여 구현할 것이다.
6. 토큰 분리 및 토큰 제한 관리
6.1. GPT-3.5 토크나이저 설치하기
6.2. 토큰 수 제한하기
6.3. OpenAI 모델 요청 수 제한하기
6.1. GPT-3.5 토크나이저 설치하기
GPT-3.5 토크나이저를 설치해야 한다. 이를 통해 요청할 때 토큰 수를 제한할 수 있다. 이를 통해 챗봇 앱이 4096 토큰 이상의 요청을 보내는 것을 방지할 수 있다.
6.2. 토큰 수 제한하기
GPT-3.5는 한 번의 요청당 허용되는 최대 토큰 수에 제한이 있다. 이를 제한하기 위해 채팅 메시지의 토큰 수를 제어해야 한다. 이를 통해 사용자의 입력이 허용 가능한 토큰 수를 초과하지 않도록 할 수 있다.
6.3. OpenAI 모델 요청 수 제한하기
OpenAI는 일정한 기간 내에 일정 수의 모델 요청만 허용한다. 초과되면 요청을 실패시키고 챗봇 앱이 다시 요청해야 하는 상황이 발생한다. 이를 처리하기 위해서는 요청 수를 제한하고 제어하는 방법을 알아야 한다. 이를 통해 챗봇 앱이 제한된 요청 수 내에서 원활하게 작동할 수 있다.
7. 채팅 완료 응답 처리
7.1. OpenAI 모델 요청하기
7.2. 응답 처리하기
7.1. OpenAI 모델 요청하기
OpenAI API에 챗봇 앱 요청을 보내기 위해 적절한 데이터를 전송해야 한다. 요청에는 사용자의 메시지와 챗봇 메시지 역할을 포함해야 한다.
7.2. 응답 처리하기
OpenAI로부터 받은 응답을 처리해야 한다. 응답은 챗봇 앱에 표시되는 형식으로 변환되어야 한다. 응답은 사용자의 메시지에 대한 AI의 응답으로서 채팅 앱에 표시되어야 한다.
8. 클라이언트 측 코드 구성
8.1. 폼 제출 처리하기
8.2. 응답 메시지 표시하기
8.3. 스크롤 처리하기
8.1. 폼 제출 처리하기
사용자가 채팅 메시지를 입력하고 제출 버튼을 클릭하면 챗봇 앱은 서버에 요청을 보내야 한다. 이를 위해 폼 제출 처리기를 구현해야 한다.
8.2. 응답 메시지 표시하기
서버로부터 받은 응답을 화면에 표시해야 한다. 챗봇 앱은 채팅 메시지를 동적으로 렌더링하여 사용자와의 대화를 시각적으로 보여줘야 한다.
8.3. 스크롤 처리하기
채팅 앱에서는 새로운 메시지가 도착할 때마다 자동으로 스크롤을 아래로 이동해야 한다. 이를 위해 스크롤 이벤트를 처리하는 함수를 구현해야 한다.
9. Vercel을 이용한 앱 배포
9.1. Vercel 설정하기
9.2. 환경 변수 설정하기
9.3. 프로젝트 배포하기
9.1. Vercel 설정하기
Vercel을 이용하여 앱을 배포하기 위해 먼저 Vercel 설정이 필요하다. 프로젝트를 Vercel로 배포하기 위해 레포지토리를 선택해야 한다.
9.2. 환경 변수 설정하기
환경 변수를 설정해야 한다. 환경 변수에는 OpenAI API 키가 포함되어야 한다.
9.3. 프로젝트 배포하기
모든 설정이 완료되면 프로젝트를 Vercel로 배포할 수 있다. Vercel은 프로젝트를 빌드하고 호스팅하는 데 사용되는 클라우드 플랫폼이다.
10. 결론
이제 대화형 챗봇 앱을 구축하기 위한 모든 단계를 거쳤다. OpenAI의 GPT 3.5 Turbo API를 사용하여 챗봇 앱을 구축하고, 토큰 수와 요청 수를 제한하여 챗봇 앱이 원활하게 작동하도록 했다. 또한 Vercel을 사용하여 앱을 배포하고 전 세계 어디에서나 앱에 접속할 수 있도록 했다. 이제 대화형 챗봇 앱을 제공하여 사용자와 실시간으로 상호 작용할 수 있다.
FAQ
Q: 대화형 챗봇 앱에 어떤 기능을 추가할 수 있나요?
A: 대화형 챗봇 앱에는 다양한 추가 기능을 구현할 수 있습니다. 예를 들어, 사용자에게 학습 리소스를 제공하거나 실시간 채팅 기능을 추가할 수 있습니다.
Q: GPT 3.5 Turbo API의 가격은 얼마인가요?
A: GPT 3.5 Turbo API는 이전 모델인 GPT-3보다 10배 더 저렴합니다. 자세한 가격 정보는 OpenAI 웹 사이트에서 확인할 수 있습니다.
Q: 챗봇 앱의 보안은 어떻게 보장되나요?
A: 챗봇 앱의 보안을 보장하기 위해 OpenAI는 오픈AI 모델 요청을 위한 인증 및 권한 부여 시스템을 제공합니다. 또한 적절한 데이터 처리 및 저장 정책을 준수하여 사용자의 개인 정보를 보호합니다.
Q: GPT 3.5 Turbo API를 사용할 때 주의할 점은 무엇인가요?
A: GPT 3.5 Turbo API를 사용할 때 토큰 수와 요청 수에 주의해야 합니다. 적절한 제한을 설정하여 API의 사용량을 관리해야 합니다. 또한 채팅 앱에서 사용자 입력을 필터링하고 모니터링하여 부적절한 내용을 방지해야 합니다.
Q: 주어진 챗봇 앱의 코드는 어떤 언어로 작성되었나요?
A: 주어진 챗봇 앱의 코드는 Node.js를 사용하여 작성되었습니다.