로컬 LLM + RAG 기반 AI 채팅봇 만들기8.1 프로젝트 개발 과정 정리이번 장에서는 로컬 LLM과 RAG 기반 AI 챗봇 프로젝트의 개발 과정과 주요 기술을 정리합니다.또한, 프로젝트를 진행하면서 배운 점과 개선할 점을 정리하여향후 프로젝트 확장 및 최적화 방향을 고민해보겠습니다.1) 프로젝트 개요 및 목표✅ 프로젝트 목표클라우드가 아닌 로컬 환경에서 실행되는 LLM 기반 AI 챗봇 개발RAG(Retrieval-Augmented Generation) 기술을 활용한 검색 기반 보강 생성 적용WebSocket을 통한 실시간 채팅 지원PostgreSQL 및 FAISS를 활용한 대화 기록 및 벡터 검색 엔진 구축SvelteKit을 활용한 사용자 친화적인 UI 구현 및 배포✅ 주요 사용 기술 스택카테고리 ..
로컬 LLM + RAG 기반 AI 채팅봇 만들기7.3 시스템 확장 및 추가 기능 구현이제 기본적인 AI 챗봇 기능이 완성되었으므로,더 많은 사용자 환경에서 활용할 수 있도록 시스템을 확장하고 추가 기능을 구현하겠습니다.이번 단계에서는 다국어 지원, 추천 시스템, AI 챗봇 기능 확장 등을 다룹니다.1) 다국어 지원 (Multilingual AI 챗봇)✅ ① 다국어 번역 기능 추가LLM이 한 언어로만 응답하는 경우 다국어 환경에서는 불편함이 발생할 수 있습니다.이를 해결하기 위해 자동 번역 기능을 추가하여 다국어 대응합니다.📌 OpenAI의 GPT-4 번역 API 활용suspend fun translateText(text: String, targetLanguage: String): String { ..
로컬 LLM + RAG 기반 AI 채팅봇 만들기6.2 프론트엔드 배포 (Vercel)이제 SvelteKit으로 개발한 프론트엔드를 배포하여어디서나 AI 챗봇을 사용할 수 있도록 Vercel을 활용하여 배포하겠습니다.1) Vercel을 사용하는 이유✅ Vercel의 장점손쉬운 배포 → GitHub와 연동하여 자동 배포 가능서버리스(Serverless) 환경 지원 → API 호출만으로 백엔드와 통신 가능빠른 글로벌 배포 → CDN(Content Delivery Network) 적용2) Vercel 가입 및 환경 설정✅ ① Vercel 가입 및 프로젝트 생성Vercel 공식 사이트에 접속GitHub 계정과 연결"New Project" 버튼 클릭SvelteKit 프로젝트 선택 후 Import배포 설정 페이지에서..
로컬 LLM + RAG 기반 AI 채팅봇 만들기4.3 WebSocket을 활용한 실시간 채팅 기능 구현이제 프론트엔드에서 사용자가 입력한 메시지를 WebSocket을 통해 백엔드(Ktor)로 전송하고,AI 챗봇의 응답을 받아 실시간으로 화면에 표시하는 기능을 구현하겠습니다.1) WebSocket을 활용한 실시간 채팅 흐름1️⃣ [사용자] 웹 UI에서 메시지를 입력 2️⃣ [프론트엔드] WebSocket을 통해 메시지를 백엔드(Ktor)로 전송 3️⃣ [백엔드] AI 챗봇이 메시지를 받아 LLM 모델에 요청 4️⃣ [백엔드] LLM 응답을 받아 WebSocket을 통해 클라이언트로 전송 5️⃣ [프론트엔드] AI 응답을 받아 채팅 UI에 표시 2) WebSocket을 통한 메시지 전송 및 응답 처..
로컬 LLM + RAG 기반 AI 채팅봇 만들기4.2 챗봇 UI 설계 및 Tailwind CSS 적용이제 SvelteKit을 활용하여 사용자가 AI 챗봇과 직접 상호작용할 수 있는 UI를 설계하고 구현합니다.이번 단계에서는 채팅 인터페이스의 디자인을 정의하고, Tailwind CSS를 적용하여 스타일을 구성합니다.1) 챗봇 UI 설계 개요✅ 요구사항 정의1️⃣ 실시간 채팅 인터페이스 구현2️⃣ 사용자가 입력한 메시지를 WebSocket을 통해 서버로 전송3️⃣ 서버에서 AI 응답을 받아 채팅 화면에 표시4️⃣ Tailwind CSS를 활용하여 UI 스타일링✅ 챗봇 UI 와이어프레임┌──────────────────────────┐│ AI Chatbot │├──────────────..
로컬 LLM + RAG 기반 AI 채팅봇 만들기4.1 SvelteKit 소개 및 환경 설정이제 백엔드 구현을 완료했으므로,프론트엔드에서 사용자가 직접 AI 챗봇과 상호작용할 수 있도록 UI를 구축해야 합니다.이번 단계에서는 SvelteKit을 활용한 프론트엔드 환경 설정을 진행하겠습니다.1) SvelteKit이란?✅ SvelteKit 개요SvelteKit은 Svelte 기반의 풀스택 프레임워크로,빠른 성능과 간단한 코드 구조를 제공하여 인터랙티브 웹 애플리케이션을 쉽게 개발할 수 있도록 지원합니다.✅ 왜 SvelteKit을 선택했는가?컴파일 기반 프레임워크 → 실행 속도가 빠르고, 성능 최적화가 쉬움반응형(Reactivity) 지원 → 상태 관리가 간편하며, 사용하기 쉬움SSR(Server-Side Re..
- Total
- Today
- Yesterday
- LangChain
- Next.js
- 개발블로그
- 로컬LLM
- Ktor
- nextJS
- 페이지
- 웹개발
- 백엔드
- AI챗봇
- llm
- rag
- 백엔드개발
- Page
- Webpack
- 챗봇개발
- Python
- 관리자
- PostgreSQL
- github
- til
- 리액트
- Project
- kotlin
- Docker
- 프론트엔드
- babel
- REACT
- nodejs
- fastapi
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |