클라이언트 사이드 기술을 활용한 LLM 기반 웹 앱 구축하기

웹 애플리케이션을 위한 로컬 LLM 통합

오직 로컬 모델과 클라이언트 사이드 기술만을 사용하여 웹 애플리케이션을 구축하면 OpenAI나 Anthropic과 같은 제공업체에 대한 비용이 많이 드는 API 호출의 필요성을 제거할 수 있습니다. 이 접근 방식은 세 가지 주요 장점을 제공합니다: 개발자를 위한 추가 컴퓨팅 비용 제로, 데이터가 로컬 머신을 떠나지 않으므로 향상된 사용자 프라이버시, 그리고 HTTP 호출 오버헤드를 제거함으로써 속도가 향상될 잠재력이 있지만, 이는 사용자의 하드웨어 제한으로 인해 상쇄될 수 있습니다.

로컬 RAG 파이프라인 구현

검색 증강 생성(Retrieval-Augmented Generation, RAG)을 통해 사용자는 비정형 데이터에서 정보를 추출하여 "docs와 채팅하기"를 할 수 있습니다. 완전한 로컬 RAG 파이프라인은 데이터 수집(data ingestion)과 검색/생성(retrieval/generation)이라는 두 가지 주요 단계로 구성됩니다.

데이터 수집

데이터 수집은 세 가지 단계를 통해 원본 문서(PDF 또는 웹페이지 등)를 쿼리 가능한 형식으로 변환합니다:

Semantic Chunking: 문서를 더 작고 의미 있는 조각으로 나누는 것.
Vector Representation: 임베딩 모델을 사용하여 각 조각에 대한 임베딩을 생성하는 것.
Vector Storage: 이러한 조각과 벡터를 전문화된 벡터 스토어에 로드하는 것.

이 구현을 위해 LangChain이 문서 로딩 및 분할을 처리했습니다. 임베딩은 Transformers.js 패키지를 통해 양자화된 HuggingFace 모델을 사용하여 생성되었으며, 벡터 스토어는 Web Assembly 기반의 벡터 스토어인 Voy에 의해 관리되었습니다.

검색 및 생성

사용자 쿼리를 답변하기 위해, 시스템은 벡터 스토어에서 입력과 의미론적으로 가장 유사한 문서 조각들을 검색합니다. 이러한 조각들은 원래의 질문과 결합되어 LLM이 최종 답변을 생성하도록 안내합니다. \n대명사나 이전 채팅 기록을 참조하는 후속 질문의 경우, 역참조(dereferencing) 단계가 추가됩니다. 이 단계는 벡터 스토어 검색이 정확하게 유지되도록 초기 쿼리를 "standalone" 질문으로 다시 작성합니다.

로컬 웹 앱에서의 Ollama의 역할

작업 특정 모델(임베딩 모델 등)은 브라우저에서 효율적으로 실행될 수 있지만, 대규모 LLM은 일반적으로 웹 애플리케이션에 직접 번들링하기에는 너무 큽니다. 저자는 브라우저 기반 LLM 프로젝트들이 고품질의 응답을 생성하지 못하거나, 수 기가바이트의 다운로드를 요구하여 상당한 지연 시간을 유발하는 경우가 많다는 것을 발견했습니다.

Ollama는 로컬에서 실행되는 모델을 셸 명령어를 통해 웹 애플리케이션에 노출시킬 수 있게 함으로써 이 문제를 해결합니다. 설명된 프로젝트에서는 16GB M2 MacBook Pro에서 효과적으로 실행되는 Mistral 7B 모델이 사용되었습니다. 이를 통해 웹 앱은 모델을 앱 번들에 포함하여 배포하는 오버헤드 없이 사용자의 머신에 사전 설치된 강력한 LLM을 활용할 수 있습니다.

향후 전망 및 브라우저 API 제안

오픈 소스 모델이 더 작고 빨라지며 소비자용 하드웨어에 GPU가 점점 더 포함됨에 따라 로컬 LLM 실행은 더욱 실현 가능해지고 있습니다. However, because non-technical users are unlikely to run shell commands to configure CORS and servers to start, a more seamless integration이 필요합니다.

저자는 웹 애플리케이션이 팝업을 통해 로컬에서 실행 중인 LLM에 대한 액세스 권한을 요청할 수 있는 새로운 브라우저 API를 제안합니다. 이를 통해 앱은 수동적인 기술적 설정 없이도 다른 브라우저 내 기술과 함께 로컬 컴퓨팅 파워를 사용할 수 있게 됩니다.