Ternlight – 브라우저에서 실행되는 7MB 짜리 Embedding 모델 (WASM) | AI Paper Digest

TL;DR Highlight

서버 API 없이 브라우저 안에서 바로 돌아가는 7MB짜리 텍스트 임베딩 모델로, npm 패키지 하나만 설치하면 ~5ms 안에 시맨틱 검색을 구현할 수 있다.

Who Should Read

서버 비용이나 외부 API 의존성 없이 클라이언트 사이드에서 시맨틱 검색이나 FAQ 매칭 기능을 구현하고 싶은 프론트엔드/풀스택 개발자.

Core Mechanics

Ternlight는 npm 패키지 하나(@ternlight/base 또는 @ternlight/mini)로 설치하면 별도 모델 다운로드 단계나 서버 없이 브라우저와 Node.js에서 바로 텍스트 임베딩을 생성할 수 있다.
두 가지 티어가 있다: @ternlight/base는 7MB에 ~5ms/임베딩, @ternlight/mini는 5MB에 ~2.5ms/임베딩으로 더 빠르다. mini는 내부적으로 256차원 벡터를 쓰다가 마지막에 384차원으로 프로젝션하는 방식으로 용량을 줄인다.
모델은 MiniLM(마이크로소프트가 만든 경량 언어 모델)을 기반으로 Ternary Quantization-Aware Training(가중치를 -1, 0, 1 세 값만 쓰는 양자화 기법으로 훈련)을 적용해 만들었다.
추론 엔진은 Rust로 처음부터 직접 작성해 WASM SIMD(브라우저에서 CPU 병렬 연산을 활용하는 기술)로 컴파일했기 때문에 JavaScript 대비 월등히 빠르다.
텍스트를 넣으면 384차원 벡터가 나오고, 두 벡터 간 코사인 유사도로 의미적 연관성을 판단한다. 예를 들어 'reset my password'와 'I forgot my password'는 단어가 달라도 유사도 0.88로 높게 나온다.
한 번 로드된 모델은 브라우저 캐시에 저장돼 이후에는 네트워크 요청이 전혀 없다. 데모에서는 React 공식 문서 2,000개 청크를 완전히 온디바이스로 검색한다.
주요 사용 사례는 시맨틱 검색, FAQ/인텐트 매칭, 텍스트 클러스터링이며, 서버 없이 타이핑하는 즉시 검색(search-as-you-type)이 가능하다.
라이선스는 MIT이고, 학습 파이프라인 코드까지 GitHub에 공개되어 있어 직접 모델을 커스텀하거나 재훈련하는 것도 가능하다.

Evidence

댓글 작성자 중 한 명이 'ONNX 가중치를 HuggingFace에서 가져와 Transformers.js로 임베딩하고, Pyodide로 scikit-learn 클러스터러까지 브라우저에서 실행해봤다'는 유사 프로젝트 경험을 공유했다. Ternlight가 이보다 훨씬 가볍고 의존성이 없다는 점에서 차별점이 있다.
IndexedDB/SQLite로 원문 코퍼스를 브라우저에 저장하고, Ternlight로 임베딩을 온디맨드로 생성 및 캐싱하면, SQLite의 FTS5/BM25 전문 검색과 Ternlight의 시맨틱 검색을 합치는 Reciprocal Rank Fusion(RRF, 두 가지 검색 결과를 결합해 정확도를 높이는 기법) 기반 하이브리드 검색을 완전히 브라우저 안에서 구현할 수 있다는 아이디어가 제안됐다.
Astro 같은 메타 프레임워크 플러그인으로 빌드 시 HTML을 파싱해 임베딩 DB를 자동 생성하고, Pagefind처럼 HNSW(계층적 그래프 기반 벡터 검색 자료구조) 인덱스를 청크 단위로 정적 호스팅하는 방식을 제안한 댓글이 있었다. DuckDB HNSW 프로젝트와 연계해 HTTP 범위 요청(range query)으로 Parquet 파일에서 필요한 부분만 가져오는 분산 검색 에코시스템 가능성도 언급됐다.
mini 버전이 base보다 1/3 작지만 정보 손실은 1/3보다 훨씬 작다는 분석이 있었다. 내부 256차원을 384차원으로 프로젝션하는 구조 덕분에 용량 절감 대비 성능 손실이 선형적이지 않고 효율적이라는 것이다.
'웹사이트들이 이걸 악용해 내 브라우저 CPU로 쇼핑 습관 등을 추론하는 데 쓸 것'이라는 프라이버시 우려 댓글이 있었다. 반면 다른 댓글에서는 오히려 로컬 실행이 API 서버에 데이터를 보내지 않아도 돼 프라이버시 보호에 유리하다고 반박했다.

How to Apply

정적 사이트(블로그, 문서 사이트 등)에 서버 없이 시맨틱 검색을 붙이고 싶다면 @ternlight/mini를 npm으로 설치하고, 빌드 타임에 문서를 청크로 나눠 임베딩을 미리 계산해 JSON으로 저장해두면 된다. 브라우저에서 첫 로드 시 5MB 모델을 캐싱하면 이후엔 완전히 오프라인으로 ~2.5ms 짜리 검색이 동작한다.
제품 카탈로그나 FAQ에서 사용자 질문의 의도를 파악해 가장 관련 있는 항목을 보여주고 싶은 경우, similar() 함수에 사용자 입력 텍스트와 전체 항목 배열을 넘기면 topK개의 랭킹된 결과를 ~5ms 안에 받을 수 있다. 외부 API 키나 서버가 전혀 필요 없다.
SQLite를 브라우저에서 사용하는 앱(absurder-sql 등)과 조합해 하이브리드 검색을 구현할 수 있다. BM25 키워드 검색 결과와 Ternlight 시맨틱 검색 결과를 RRF로 합치면 둘 중 하나만 쓰는 것보다 검색 정확도가 올라간다.
Node.js 백엔드에서도 동일한 패키지를 사용할 수 있으므로, 외부 임베딩 API(OpenAI Embeddings 등)를 쓰고 있는 경우 비용 절감 목적으로 로컬 대안을 테스트해볼 수 있다. 다만 384차원 MiniLM 계열 모델이므로 고성능 임베딩(text-embedding-3-large 등)보다 품질은 낮을 수 있어 유사도 임계값 튜닝이 필요하다.

Code Example

snippet

// npm install @ternlight/base
import { embed, similar } from '@ternlight/base';

// 시맨틱 검색: 레시피 목록에서 가장 관련 있는 3개 반환
const results = await similar('easy weeknight dinner ideas', recipes, { topK: 3 });
// → 랭킹된 매치 결과, ~5ms, 네트워크 요청 없음

// 개별 임베딩 생성
const vector = await embed('how do I reset my password');
// → Float32Array (384차원)

Terminology

Ternary Quantization신경망 가중치를 -1, 0, 1 세 가지 값만 쓰도록 압축하는 기법. 일반 float32(32비트)를 쓸 때보다 용량이 극적으로 줄어들고 연산도 빨라진다.

WASM SIMDWebAssembly의 SIMD(Single Instruction Multiple Data) 확장으로, 브라우저 안에서 CPU의 병렬 연산 능력을 활용해 JavaScript보다 훨씬 빠른 수치 연산을 가능하게 한다.

코사인 유사도두 벡터가 얼마나 같은 방향을 가리키는지를 -1~1 사이 숫자로 나타낸 것. 1에 가까울수록 의미가 유사하고, 0에 가까울수록 관련 없다.

HNSWHierarchical Navigable Small World의 약자로, 수백만 개의 벡터 중에서 가장 유사한 것을 빠르게 찾기 위한 그래프 기반 자료구조. 전체를 다 비교하지 않고도 근사 최근접 이웃을 효율적으로 찾는다.

RRF (Reciprocal Rank Fusion)키워드 검색(BM25)과 시맨틱 검색(벡터 유사도) 두 결과를 합쳐 최종 랭킹을 만드는 기법. 각 방법의 단점을 서로 보완해 검색 품질이 올라간다.

MiniLMMicrosoft가 만든 경량화 언어 모델. 대형 BERT 계열 모델을 지식 증류(knowledge distillation)로 크기를 줄인 것으로, 임베딩 생성에 자주 쓰인다.

Ternlight – 브라우저에서 실행되는 7MB 짜리 Embedding 모델 (WASM)