브라우저에서 LLM 에이전트 실행하기

대부분의 AI 어시스턴트는 데이터 센터에 위치합니다. API 키와 서버가 필요하며, 요청당 비용이 발생합니다.

저는 조금 다른 것을 만들었습니다.

서버나 클라우드 비용 없이 브라우저에서 완전히 실행될 수 있도록 LiquidAI LFM2.5 모델(230M 및 350M)을 파인튜닝했습니다.

목표는 웹 페이지와 함께 배포할 수 있을 만큼 모델을 작게 만드는 것이었습니다.

이 모델은 특정 제품에 대한 사실을 저장하는 것이 아니라 패턴을 학습합니다. 아주 작은 모델 하나로 재학습 없이 커피숍, 식료품점 또는 기타 어떤 상점도 운영할 수 있습니다.

모델의 기능

  • 작업에 적합한 도구 선택
  • 인자(argument)와 아이템 ID를 정확하게 연결
  • “두 번째 것” 또는 “한 다스”와 같은 지칭 표현 이해
  • 검색된 텍스트를 사용하여 질문에 답변
  • 정보가 부족할 경우 답변 거부
  • 대화가 주제에서 벗어나면 다시 주제로 유도

구현 방법

  • 8개의 도구 세트(search, add_to_cart, checkout 등)를 고정(frozen)
  • RAG를 별도의 파이프라인이 아닌 하나의 도구로 취급
  • 정확도를 위해 문법 제약 디코딩(grammar-constrained decoding) 적용
  • 18개의 상호작용 레시피를 통해 합성 데이터셋(synthetic dataset) 생성
  • 단일 16GB GPU를 사용하여 3,000만(30M) 토큰으로 파인튜닝

학습 중점 사항 저는 차단 목록(blocklists)이 아닌 행동 양식에 초점을 맞춰 모델을 학습시켰습니다. 단어를 금지하는 대신, 대화를 정중하게 유도하는 법을 가르쳤습니다.

이것이 중요한 이유

  • 개인정보 보호: 데이터가 기기를 절대 떠나지 않음
  • 오프라인 사용: 인터넷 연결 없이도 작동
  • 비용: 추론(inference) 비용 제로
  • 접근성: 복잡한 UI를 음성으로 탐색 가능하게 함

모델은 작지만 유용합니다. 거대 모델이 작업을 수행할 수 있는지 묻는 것을 멈추십시오. 대신, 기기에서 유용함을 유지하면서 모델이 얼마나 작아질 수 있는지 물으십시오.

Demo: https://lajosbencz.github.io/frontend-agent/ Code: https://github.com/lajosbencz/frontend-agent/ Source: https://dev.to/lajosbencz/running-an-llm-agent-entirely-in-your-browser-5foe

Lajos Bencz는 3억 5천만 개의 파라미터를 가진 언어 모델을 웹 브라우저에서 완전히 실행되도록 파인튜닝하여, 정적인 페이지를 API 키, 서버, 클라우드 기반 추론 비용이 필요 없는 자율형 쇼핑 어시스턴트로 변모시켰습니다. 그 결과, 각 도메인에 대해 재학습할 필요 없이 커피숍, 식료품점 또는 유사한 카탈로그를 관리할 수 있는 개인정보 보호 우선의 오프라인 지원 AI가 탄생했습니다.

브라우저에서 LLM을 실행해야 하는 이유

대부분의 AI 어시스턴트는 데이터 센터에 거주합니다. 각 쿼리는 인터넷을 통해 이동하여 API에 도달하고 요청당 비용을 발생시킵니다. 이러한 설정은 사용자 데이터를 유출하고, 네트워크를 필요로 하며, 청구 금액을 빠르게 증가시킵니다. 모델을 클라이언트로 옮기면 이러한 문제들을 해결할 수 있습니다. 데이터는 로컬 머신에 머물고, 네트워크가 끊겨도 어시스턴트가 작동하며, 추론 비용은 0으로 떨어집니다.

모델 구축 방법

  • 모델 선택 – LiquidAI LFM2.5의 230M 및 350M 변형 모델로 시작했습니다. 크기가 작아 일반적인 웹 페이지에서도 다운로드할 수 있습니다.
  • 도구 세트 – 8개의 유틸리티(search, add_to_cart, checkout 등)를 에이전트에 하드코딩했습니다. 모델은 어떤 도구를 호출해야 하는지, 아이템 ID와 같은 인자를 어떻게 전달해야 하는지를 학습합니다.
  • 도구로서의 RAG – 검색 증강 생성(RAG)을 단순히 호출 가능한 또 다른 도구로 취급하여 아키텍처를 단순화했습니다.
  • 문법 제약 디코딩 – 디코더를 유효한 도구 호출 구문으로 제한하여 잘못된 출력을 대폭 줄였습니다.
  • 합성 데이터 – 18개의 상호작용 레시피(예: “도넛 두 다스 추가”)를 단일 16GB GPU에서 생성된 3,000만 토큰 데이터셋으로 변환했습니다.
  • 행동 중심 학습 – 차단 목록 대신, 대화 유도(conversational steering)에 중점을 두어 파인튜닝했습니다. 주제에서 벗어난 대화를 정중하게 다시 돌리고, 정보가 부족할 때 거절하며, “두 번째 것”과 같은 모호한 지칭을 확인하는 법을 학습했습니다.

파인튜닝은 단일 16GB GPU에서 진행되었습니다.

에이전트의 기능

  • 도구 선택 – 쿼리에 검색, 장바구니 업데이트 또는 다른 기능이 필요한지 결정합니다.
  • 인자 처리 – 아이템 식별자, 수량 및 수식어(예: “한 다스”)를 파싱하여 정확하게 전달합니다.
  • 지칭 해소(Reference resolution) – “두 번째 것”과 같은 문구를 검색된 목록의 적절한 아이템과 연결합니다.
  • RAG 기반 답변 – 관련 텍스트를 가져와 답변에 녹여냅니다.
  • 우아한 거절 – 환각(hallucination)을 일으키는 대신 필요한 정보가 없으면 요청을 거절합니다.
  • 대화 유도 – 흐름을 깨지 않으면서 주제에서 벗어난 발언을 작업 방향으로 다시 유도합니다.

라이브 데모(https://lajosbencz.github.io/frontend-agent/)를 통해 음성 또는 텍스트 입력을 사용하여 브라우징부터 결제까지 이어지는 간단한 이커머스 흐름을 처리하는 에이전트를 확인할 수 있습니다.

한계 및 반론

(이 섹션은 의도적으로 비워 두었습니다)

향후 주목할 점

코드베이스(https://github.com/lajosbencz/frontend-agent)는 공개되어 있으며, 커뮤니티가 도구를 추가하거나, 합성 레시피를 확장하거나, 하이브리드 방식을 시도해 볼 수 있도록 열려 있습니다.

핵심 요약: 적절한 규모의 LLM을 독립형 에이전트로 미세 조정하면, 서버나 비용 없이, 데이터가 사용자의 기기를 벗어나지 않으면서도 기능적이고 개인정보를 보호하는 AI를 웹 페이지에 직접 임베딩할 수 있습니다.