브라우저의 재발견

LlmInference

브라우저 속 언어 모델 (Gemma)

해결하는 문제

질문이 밖으로 나가지 않는 AI 비서를 망분리 PC에서 쓰고 싶다.

작은 언어 모델(Gemma) 파일을 골라 그래픽카드로 브라우저 안에서 대화합니다. 서버와 API 키가 없습니다.

체험하기

서버 의존도

외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.

브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요

데이터가 흐르는 길

무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.

들어오는 것질문과 모델 파일
브라우저가 하는 일그래픽카드로 언어 모델 실행
나오는 것글자가 흘러나오는 답변

쓰는 브라우저 기술

WebGPUFile API (스트림 읽기)

라이브러리와 모델

MediaPipe Tasks GenAI (로컬 우선 로딩)Gemma 웹용 .task 파일 (별도 내려받기)

바꿀 수 있는 옵션

  • maxTokens
  • temperature·topK
  • 대화 형식(프롬프트 틀)

자주 막히는 곳

  • WebGPU가 없는 브라우저·PC에서는 실행되지 않는다
  • 모델 파일이 수백 MB 이상이라 메모리가 부족하면 실패한다

이 능력으로 만들 수 있는 서비스

같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.

AI 서비스
  • 망분리 업무 비서
  • 개인정보가 나가지 않는 요약
웹 서비스
  • 오프라인 교육용 챗봇
피지컬 AI
  • 로봇의 로컬 대화 두뇌

넓히는 방법

  • 부서 문서 검색과 결합 (RAG)
  • 오프라인 요약·번역 버튼

지원 브라우저

PC 크롬·엣지된다
맥 사파리안 된다
안드로이드 크롬안 된다
아이폰 사파리안 된다

코딩 에이전트에게 줄 프롬프트

복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.

MediaPipe LlmInference로 내가 고른 Gemma 웹용 모델 파일을 읽어 브라우저 안에서 대화하는 채팅 페이지를 만들어줘.

같은 분류의 능력

04 브라우저 속 AI에 속한 다른 능력입니다.

무료로 보는 것

체험 페이지, 한 줄 설명, 미리보기 영상

스킬팩 구성

full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md