몇 달 전 저는 한 가지 질문에 집착했습니다: 백엔드도, GPU도, 설치도 없이 브라우저 탭 안에서만 완전히 실행되는 진짜 LLM을 구동할 수 있을까?

정답은 '예'입니다. 제가 무엇을 만들었는지 소개합니다.

ghost는 단일 HTML 파일로, 첫 방문 시 양자화된 언어 모델(quantized language model)을 브라우저 캐시에 다운로드한 다음, 그 이후에는 WebAssembly (WASM)를 통해 로컬에서 영구적으로 추론(inference)을 실행합니다. 첫 다운로드 이후에는 완전히 오프라인 상태로 작동합니다. API 키도, npm도, 빌드 단계도 필요 없습니다. 파일을 열고, 모델을 선택하고, 채팅하세요.

작동 원리

추론 엔진은 wllama입니다. 이는 llama.cpp를 위한 WebAssembly 바인딩입니다. WASM SIMD를 사용하여 브라우저에서 GGUF 양자화 모델을 직접 실행합니다. 저는 JS와 WASM 파일이 항상 일치하도록 특정 버전에 고정했습니다 (메모리 임포트 불일치로 인한 고통스러운 디버깅 세션을 거치며 뼈저리게 배운 점입니다).

모델은 첫 로드 시 HuggingFace에서 다운로드되며 브라우저의 Cache API를 통해 캐싱됩니다. 이후 방문할 때마다 네트워크 연결 없이 캐시에서 즉시 로드됩니다.

주요 기능

• 세 가지 모델: Qwen2.5 1.5B (똑똑함), Qwen2 0.5B (빠름), TinyLlama (경량)
• 처음부터 직접 구현한 Markdown 렌더링 — 라이브러리 없이 정규 표현식(regex) 변환만 사용
• RAG: .txt 또는 .pdf 파일을 채팅창으로 드래그하세요. 텍스트를 청크(chunk)로 나누고, wllama의 임베딩 API를 사용하여 각 청크를 임베딩하며, 벡터를 메모리에 저장한 뒤, 메시지마다 상위 3개의 관련 청크를 검색합니다. 완전히 로컬이며, 완전히 오프라인입니다.
• Web Speech API를 통한 음성 입력 — 마이크 버튼을 누르고 침묵 시 자동 전송
• 최대 10턴으로 제한된 멀티턴 대화 메모리
• PWA 설치 가능 — 모바일 홈 화면에서도 작동

어려웠던 점들

캐시된 모델로부터 wllama가 로드되도록 만드는 과정은 정말 까다로웠습니다. 메인 스레드에서 생성된 Blob URL은 wllama의 내부 Web Worker에서 접근할 수 없습니다. IndexedDB 청크 재구성은 Windows Chrome에서 2GB ArrayBuffer 제한에 걸렸습니다. 최종 해결책은 모든 것을 내부적으로 처리하는 wllama의 내장 함수인 loadModelFromHF를 useCache: true 옵션과 함께 사용하는 것이었습니다.

임베딩 (embeddings) API를 사용하려면 일반적인 채팅 완성 (chat completion)과 충돌하는 플래그(embeddings: true)를 전환해야 합니다. 그래서 저는 각 임베딩 호출 전에 이 플래그를 켜고, finally 블록에서 다시 끕니다.

직접 시도해 보세요

라이브 데모: https://zaydmulani09.github.io/ghost/ghost.html
GitHub: https://github.com/zaydmulani09/ghost

CPU에서의 속도는 모델에 따라 초당 약 3~8 토큰 (tokens/sec)입니다. 빠르지는 않지만 작동하며, 모든 토큰은 사용자의 기기에 그대로 머뭅니다.