WebLLM: 브라우저 안에서 LLM을 돌리는 추론 엔진

Who Should Read

서버 비용·개인정보 문제 때문에 LLM을 사용자 브라우저에서 직접 돌려 보려는 프론트엔드 개발자

Core Mechanics

• 서버 없이 브라우저에서 돌아간다
  • WebGPU로 하드웨어 가속을 받아 추론이 전부 브라우저 안에서 실행된다.
  • 서버 지원이 필요 없다고 원문이 밝힌다.
• OpenAI API와 같은 방식으로 쓴다
  • engine.chat.completions.create로 호출하고 streaming, JSON-mode, seed를 지원한다.
  • function-calling은 아직 WIP(작업 중)로 표기돼 있다.
• 지원 모델 계열이 정해져 있다
  • Llama 3, Phi 3, Gemma-2B, Mistral-7B-v0.3, Qwen2 0.5B/1.5B/7B 등이 내장돼 있다.
  • MLC 형식으로 컴파일한 커스텀 모델도 붙일 수 있다.
• UI 멈춤은 Worker로 피한다
  • Web Worker나 Service Worker에 추론을 넘겨 UI 스레드를 비워 둔다.
  • Service Worker는 모델 재로딩을 줄이지만 브라우저가 언제든 종료할 수 있어 에러 처리가 필요하다.
• 첫 실행은 모델 다운로드가 필요하다
  • 캐시가 없는 첫 실행에는 시간이 꽤 걸린다고 원문이 적는다.
  • 캐시 백엔드는 cache(기본), indexeddb, opfs, cross-origin 중에서 고른다.

Community Reactions

• WebGPU가 없는 환경에서는 안 돈다는 경험
  • Linux의 Firefox와 Chromium 모두에서 WebGPUNotAvailableError가 났다는 댓글이 있다.
  • 다른 댓글은 maxStorageBuffersPerShaderStage 한도(요청 10, 한도 9) 초과 에러를 겪었다고 한다.
• 세션마다 500MB~1GB 다운로드라는 지적
  • 모델에 따라 브라우저 세션마다 500MB에서 1GB쯤 받게 된다는 댓글이 있다.
  • 고객용 사이트에 쓴다면 안내 문구를 넣는 게 좋다는 의견이다.
• 업데이트가 멈췄다는 평가와 대안 추천
  • 오래 써 왔지만 6개월 전에 걷어냈다며 사실상 죽은 프로젝트라는 의견이 있다.
  • Gemma 2 이후 갱신이 없어 요즘은 Transformers.js를 권한다는 댓글도 있다.
• 실제 속도 측정 경험
  • M4 Max의 Safari에서 1B 모델 기준 prefill 181.2 tok/s, decode 58.5 tok/s가 나왔다는 댓글이 있다.
  • 속도는 인상적이진 않아도 브라우저에서 돈다는 점이 놀랍다는 반응이다.

How to Apply

• 데모 사이트로 내 브라우저 WebGPU 확인하기
  • chat.webllm.ai를 Chrome에서 열어 작은 모델을 로드해 본다.
  • WebGPUNotAvailableError가 나는지, 속도가 쓸 만한지 확인한다.
• 개인정보 민감 기능 하나만 로컬 추론 후보로 뽑기
  • 서버로 보내기 꺼려지는 입력(예: 요약, 분류)을 골라 OpenAI 호환 코드로 WebLLM에 연결해 본다.
  • 기존 chat.completions 호출 구조는 그대로 두고 엔진만 바꾼다.
• 추론을 Web Worker로 분리하기
  • CreateWebWorkerMLCEngine으로 엔진을 만들어 UI 스레드와 분리한다.
  • initProgressCallback으로 진행률 바를 붙여 첫 다운로드 대기를 보여 준다.
• 다운로드 용량 고지와 대안 비교하기
  • 사용자에게 500MB~1GB 다운로드 안내와 WebGPU 미지원 폴백(서버 API)을 넣는다.
  • 장기 유지보수가 걱정되면 Transformers.js도 같은 과제로 돌려 비교한다.

Try It

// 브라우저 프로젝트(Vite 등)에서 실행: npm install @mlc-ai/web-llm

import { CreateMLCEngine } from "@mlc-ai/web-llm";

const engine = await CreateMLCEngine(
  "Llama-3.1-8B-Instruct-q4f32_1-MLC",
  { initProgressCallback: (p) => console.log(p) }
);

const chunks = await engine.chat.completions.create({
  messages: [
    { role: "system", content: "You are a helpful AI assistant." },
    { role: "user", content: "{{질문}}" },
  ],
  stream: true,
});

let reply = "";
for await (const c of chunks) {
  reply += c.choices[0]?.delta.content || "";
  console.log(reply);
}

// 이어서 해 볼 것: 모델 ID를 더 작은 모델(예: Llama-3.2-1B-Instruct-q4f16_1-MLC)로 바꿔 속도와 다운로드 용량을 비교해 보자.

Terminology

관련 논문

• Mercury 3: 규모를 키운 diffusion LLM, 초당 1,000토큰 이상

  Diffusion LLM을 40배 키웠더니 속도 4~8배, 품질은 속도 특화 모델 수준

• Timestral: Mistral의 시계열 파운데이션 모델

  209M 파라미터 시계열 모델이 3대 벤치마크 1위, CPU에서도 돌아간다

• DeepSeek V4.1 Flash 1017 (Max) 성능·속도·가격 분석

  DeepSeek V4.1 Flash 1017 Max는 지능 지수 45에 211 tok/s, 입력 $0.30

• LLM 프록시를 직접 안 돌리면 무슨 일이 벌어지는지 어떻게 아나

  자체 LLM 프록시를 세웠더니 키·모델·캐시 미스를 직접 볼 수 있다

• DeepSeek V4.1 Flash 1017: 싼 가격에 1M 컨텍스트를 주는 에이전트용 모델

  DeepSeek V4.1 Flash 1017은 입력 $0.05/M, 1M 컨텍스트의 에이전트용 모델

• DeepSeek-V4.1-Flash-1017 공개: 더 짧게 생각하고 더 빠르게 일하는 에이전트용 모델

  DeepSeek V4.1 Flash 마이너 업데이트로 코딩·에이전트 벤치 점수↑, 실행 시간·출력 길이↓

• Llmspeed: 로컬 LLM 속도를 하드웨어 구매 전에 체감해 보는 시뮬레이터

  GPU·모델을 고르면 로컬 LLM 속도를 미리 체감하게 해 주는 시뮬레이터

Related Resources

• https://github.com/mlc-ai/web-llm
• https://chat.webllm.ai/
• https://npm.im/webml-kit