WebGPU 기반 로컬 LLM 실행을 위한 React Hook, react-brai

Context

브라우저 내 AI 추론 구현 시 WebLLM 및 Transformers.js의 수동 설정 필요. 메인 스레드 프리징 방지를 위한 Web Worker 설정과 대용량 모델 캐싱 처리가 복잡한 구조. 로딩 상태 관리를 위한 반복적인 보일러플레이트 코드 작성의 한계.

Technical Solution

• WebGPU 아키텍처 전체를 단일 React Hook으로 래핑한 react-brai 라이브러리 설계
• 다중 탭 활성화 상황에서 Leader/Follower 협상 알고리즘을 통한 엔진 초기화 관리
• Web Worker 위임 및 모델 캐싱 로직의 추상화를 통한 구현 복잡도 제거
• Llama-3.2-1B-Instruct-q4f16_1-MLC와 같은 양자화된 SLM 지원 구조
• API 통신 없이 로컬 프로세스만 사용하는 읽기 전용 추론 방식

Impact

• 모델 파일 크기 약 1.5GB에서 3GB 사이의 브라우저 로컬 캐시 사용

Key Takeaway

데이터 프라이버시가 중요한 엔터프라이즈 환경에서는 서버 API 의존도를 낮춘 로컬 WebGPU 추론 방식이 유효한 보안 전략임.