Gemma 4 E2B로 브라우저에서 다이어그램을 즉시 생성!
Gemma 4 E2B 모델을 활용하여 브라우저 내에서 Excalidraw 다이어그램을 생성하는 데모가 공개됨
TurboQuant 알고리즘을 통해 모델의 메모리 사용량을 최적화하여 3GB RAM 환경에서 구동 가능
WebGPU 및 WGSL을 사용하여 GPU 가속을 구현하여 빠른 속도로 다이어그램 생성
브라우저 호환성(Browser Compatibility) 및 오픈소스 여부(Open Source)에 대한 커뮤니티의 관심이 높음
TurboQuant 알고리즘을 통한 메모리 최적화
데모는 TurboQuant 알고리즘을 사용하여 LLM의 KV 캐시를 압축함으로써 메모리 사용량(Memory Usage)을 약 2.4배 줄였다. 이를 통해 3GB RAM 환경에서도 긴 대화 내용을 처리할 수 있다. 특히, WGSL(WebGPU Shading Language)을 활용하여 GPU에서 해당 알고리즘을 구현함으로써 30+ 토큰/초의 속도를 달성했다. 이는 GPU 가속(GPU Acceleration)을 통해 LLM의 성능을 향상시킨 사례로 볼 수 있다.
WGSL 기반 GPU 가속 구현
데모는 WGSL(WebGPU Shading Language)을 사용하여 TurboQuant 알고리즘을 GPU에서 실행하도록 구현했다. WGSL은 WebGPU를 위한 셰이딩 언어로, GPU의 병렬 처리 능력을 활용하여 모델 추론 속도(Model Inference Speed)를 향상시킨다. 이 기술은 특히 브라우저 환경에서 LLM을 실행할 때 성능 병목 현상(Performance Bottleneck)을 해결하는 데 기여한다. 하지만, WebGPU의 브라우저 호환성(Browser Compatibility)에 따라 사용 가능 여부가 제한된다.
Excalidraw와의 통합 및 토큰 절감
LLM은 Excalidraw JSON 대신 압축된 코드(Compact Code)를 출력하여 다이어그램을 생성한다. 이 방식은 약 5,000 토큰에 달하는 Excalidraw JSON 대신 약 50 토큰만 사용하여 메모리 사용량(Memory Usage)을 줄인다. 이 코드는 Excalidraw 파일로 변환되어 다이어그램을 렌더링한다. 이러한 방식은 LLM의 출력 크기(Output Size)를 줄여 브라우저 환경에서의 성능을 향상시킨다.
브라우저 호환성 및 기술적 제약
데모는 데스크톱 Chrome 134+ 버전을 지원하며, WebGPU 서브그룹(Subgroup)을 필요로 하므로 Safari/iOS에서는 지원되지 않는다. 또한, 3GB RAM 이상이 필요하며, 모바일 브라우저에서는 메모리 제한으로 인해 실행이 어려울 수 있다. 커뮤니티에서는 브라우저 호환성(Browser Compatibility)에 대한 질문과 함께, 파이어폭스(Firefox) 지원 여부에 대한 문의가 있었다. 이러한 제약은 데모의 접근성(Accessibility)을 제한하는 요인으로 작용한다.
