TwentyTwentyOne

로컬 LLM + RAG 기반 AI 채팅봇 만들기8.2 추가 기능 및 향후 발전 방향이번 장에서는 프로젝트를 확장할 수 있는 추가 기능과 미래 발전 가능성을 살펴보겠습니다.현재 구축된 챗봇을 더 발전시키기 위해 성능 개선, AI 모델 업데이트, 새로운 기술 도입 등의 전략을 고민해 봅니다.1) 고급 검색 기능 추가 (강화된 RAG 적용)✅ ① 현재 RAG 검색 방식의 한계현재 FAISS 기반 벡터 검색 엔진을 활용하여 문서를 검색하지만,→ 정확도가 부족할 수 있으며 대량의 문서 검색 시 속도가 저하될 수 있음더 정교한 검색이 필요할 경우 하이브리드 검색 기법 적용 가능✅ ② 하이브리드 검색 (벡터 검색 + 키워드 검색 결합)벡터 검색(FAISS) + Elasticsearch 키워드 검색을 함께 사용하여 더..

로컬 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 채팅봇 만들기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..

로컬 LLM + RAG 기반 AI 채팅봇 만들기3.4.3 다중 사용자 지원WebSocket을 이용한 AI 챗봇을 구현하면 실시간으로 사용자와 대화할 수 있지만, 현재는 단일 사용자만 지원하는 구조입니다.이제 여러 사용자가 동시에 AI와 대화할 수 있도록 WebSocket을 확장하여 다중 사용자 지원 기능을 추가하겠습니다.1) 다중 사용자 지원이 필요한 이유✅ 기존 WebSocket 구조의 문제점현재 WebSocket은 단일 클라이언트 연결만 관리여러 사용자가 연결할 경우 각각의 세션을 분리하여 관리할 수 없음✅ 개선 목표각 사용자마다 독립적인 WebSocket 세션을 유지여러 사용자가 동시에 AI 챗봇과 대화 가능사용자의 WebSocket 연결이 끊어져도 정상적으로 처리 가능2) WebSocket을 이용..

로컬 LLM + RAG 기반 AI 채팅봇 만들기3.4.2 실시간 대화 데이터 처리이제 WebSocket을 이용한 실시간 채팅의 기본 구조를 구축했으므로,LLM과의 실시간 대화 데이터를 처리하는 로직을 추가해야 합니다.이를 통해 클라이언트가 메시지를 보내면, LLM이 이를 처리하고 응답하는 기능을 구현할 것입니다.1) 실시간 대화 데이터 처리 개요✅ 기존 WebSocket의 한계현재 WebSocket은 사용자가 보낸 메시지를 그대로 반환하는 방식LLM과 연결되지 않아 AI 응답이 동적으로 생성되지 않음✅ 개선 방향사용자가 보낸 메시지를 LLM에 전달 → AI가 응답 생성LLM 응답을 WebSocket을 통해 클라이언트에 실시간 전송대화 흐름을 유지하여 AI가 문맥을 인식하도록 설계2) 실시간 대화 흐름 개..

로컬 LLM + RAG 기반 AI 채팅봇 만들기3.4 WebSocket을 이용한 실시간 채팅 기능 구현3.4.1 WebSocket 기본 구조WebSocket은 클라이언트와 서버 간의 양방향 통신을 지원하는 프로토콜로, 실시간 채팅 시스템을 구현하는 데 최적화되어 있습니다.본 챕터에서는 Ktor에서 WebSocket을 설정하는 기본 구조를 구축하고, 실시간 메시지를 주고받는 방식을 설명합니다.1) WebSocket이 필요한 이유✅ 기존 HTTP 기반 요청/응답 방식의 한계HTTP는 요청(Request)-응답(Response) 구조로, 클라이언트가 요청을 보내야만 응답을 받을 수 있음실시간 데이터 전송이 어렵고, 대기 시간이 길어짐상태 유지가 어렵기 때문에 연속적인 대화 흐름을 관리하기 어려움✅ WebSoc..

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 3.2.3 Next.js의 데이터 페칭 전략 (App Router 방식)이번 글에서는 Next.js 13+ App Router에서 데이터를 가져오는 방법과 함께 React Query 사용 시 발생하는 No QueryClient set 오류를 해결하는 방법을 다룹니다.✅ 서버 컴포넌트 및 클라이언트 컴포넌트에서 데이터 패칭을 수행하는 최적의 방법을 설명합니다.✅ React Query에서 QueryClientProvider를 올바르게 설정하는 방법을 실습합니다.📌 1. Next.js 13+ App Router에서의 데이터 패칭 개요Next.js 13+ App Router에서는 서버 컴포넌트와 클라이언트 컴포넌트를 명확하게 구분해야 합니다.서버 사이드..