MediaPipe를 활용한 손쉬운 온 디바이스 LLM 추론

 구글에서 제공하는 미디어파이프(MediaPipe)는 인공지능 애플리케이션을 손쉽게 만들수 있도록 여러 라이브러리들을 제공한다. 실제로 인공지능을 활용한 토이 프로젝트를 검색해보면, 얼굴 인식, 손의 제스쳐 인식, 사람의 포즈 인식 등 미디어파이프를 적용한 포스팅을 쉽게 찾아볼 수 있다. 개인적으로는 얼굴의 랜드마크 인식에 미디어파이프 솔루션을 자주 사용하였는데, 사용이 편리하면서도 그 성능이 뛰어나다는 사실에 매번 감탄하게 된다.

 미디어파이프 솔루션들의 강점은 사실 안드로이드, iOS, 웹 환경 등 온-디바이스(on-device) 개발에 적합하도록 최적화된 모델 성능과 경량화라고 생각한다. 누구나 쉽게 엣지 디바이스에 ML/DL이 적용된 애플리케이션을 개발하고 사용할 수 있다. 

 최근에 링크드인 한 포스트에서 미디어파이프가 드디어 LLM 추론을 지원하는 API를 발표했다는 사실을 뒤늦게 접하였다.

• Sachin Kumar : Running LLMs fully on-device for Web, Androind, iOS using Google's MediaPipe LLM Inference API

LLM 연구가 어려운 이유 중에 하나가 언어모델 훈련에 필요한 자원이 어마어마하다는 것이다. 사전학습된 모델을 활용하는 추론 환경 또한 양자화(quantization)를 통해 경량화된 모델이더라도 실행이 쉽지 않다. 비록 개인 환경에서는 기존의 Text Generation WebUI나  llama.cpp 그리고 최근에 대세처럼 활용되는 ollama 등 편리한 실행 도구들이 많아지고, 서비스 환경에서 LLM 서빙을 돕는 vLLM과 같은 프로젝트들이 성숙해져 가지만, 근본적으로 요구되는 자원이 많다는 것은 개발자에게 큰 어려움이다. 가난한 개발자인 H씨는 비싼 클라우드 GPU인스턴스 가격에 놀라면서 어쩔 수없이 ChatGPT와 같은 Closed LLM의 API를 쓸 수밖에 없었다.

MediaPipe의 LLM inference API를 활용한다는 것은 기본적으로 클라이언트의 자원을 사용한다는 것을 의미한다. 물론 클라이언트의 환경에 따라 실행 성능이 달라지거나 제한될 수 있지만, 개발자 입장에서 고려할 부분이 상당히 줄어든다(최소한의 사용자 경험을 제공하기 위해, 최소한으로 점유해 둬야할 실행 자원이나 트래픽에 따른 실행 큐 관리 등등). 또한, 최근에 엣지 디바이스에서 언어모델을 활용하기 위해 sLM(small Language Model)의 연구 추세와도 흐름을 같이한다고 생각한다.

 이번 포스트에서는 웹에서의 LLM추론 실행을 위한 MediaPipe API를 중심으로, API의 개요와 실행방법을 간단하게 설명한다. 미디어파이프에서 제공한 공식 페이지와 실행 예제는 다음과 같다.

• API 설명 공식 페이지 : LLM Inference Guide for Web
• 코드 예제 : MediaPipe LLM Inference task for the web

위의 공식 페이지에서 서술된 것처럼 2024년 5월 현재 실험버전으로 공개되어 있어서, 기능 및 해당 링크가 수정될 가능성이 있다. 이에 따라, (조악한 웹개발 실력이지만) 간단하게 수정한 챗UI에서 MediaPipe LLM 실행을 진행한 레포를 함께 공유한다.

• 테스트 레포 : https://github.com/hayunjong83/mediapipe_llm

---

우선, 미디어파이프를 사용하기 위한 개발환경 설정이 필요하다. 이번 포스트에서 살펴보려고 하는 자바스크립트 웹 애플리케이션 사용을 위한 환경설정(Setup guide for web)을 참고한다. 웹 어플리케이션이 실행되는 웹 브라우져는 크롬(Chrome)이나 사파리(Safari)처럼 WebGPU를 지원하는 브라우저여야 한다.

WebGPU가 무엇인지에 관해서 서술하는 것은 이번 포스트의 내용을 넘어서며, 개인적으로 아는 바도 매우 적다. 단지 여기에서는 WebGPU가 웹 환경에서도 GPU등을 이용하여 가속 연산 등이 가능하도록 지원하는 자바스크립트 API라고 이해하고 넘어가려고 한다. LLM추론을 위해서 브라우저에 접속한 클라이언트의 GPU 자원을 활용하기 위하여, MediaPipe LLM API는 WebGPU api를 활용하고 있다.

WebGPU를 지원하는 브라우저에 대해서는 GPU browser compatibility를 참고한다.

 

LLM inference API 사용을 위하여 필요한 패키지는 개발환경에 직접 설치하여 포함 시킬 수도 있지만, 공식예제의 경우처럼 CDN(Content Delivery Network)를 통해 @mediapipe/tasks-genai 패키지에 접근하도록 한다.

참고) 환경설정문서에서처럼 index.html에 script 태그로 포함시키지 않고, 예제는 module로서 포함시키는 index.js에서 패키지를 로드하고 있다. 

 

이제 LLM추론에 사용할 언어모델 파일을 준비해야 한다. 공식페이지에 나와 있는 모델들에는 구글의 Gemma 이외에도 엣지 디바이스에서 활용할 목적으로 상대적으로 파라미터 수가 적은 Falcon 1B, StableLM 3B, Phi-2 등이 있다. (최근에 이런 파라미터의 수가 (많지만 그래도 상대적으로) 적은 모델들을 sLM(small Language Model)이라고 부르기도 한다)

사실 공식페이지에 설명이 나와 있는 것처럼, 공개된 사전학습모델이나 파인튜닝된 언어모델도 AI Edge Torch 도구를 이용하여 TfLite 포맷으로 변환 후, MediaPipe에서 사용가능한 포맷으로 변환한다면 사용이 가능하다. 그러나 온-디바이스 환경의 사용을 고려한다면, 파라미터가 작은 모델의 경량화 버전을 쓰는 것이 현재로서는 바람직하다고 생각된다.

현재 Gemma 모델을 Kaggle에서 다운로드 시 바로 사용할 수 있지만, 기타 모델은 허깅페이스에 tflite 파일 형태로 올라와 있어서, 미디어파이프에 사용할 수 있는 형식으로 변환이 한번 더 필요하다. 한편, 모델을 다운로드 한 경우, index.js의 modelFileName 변수에 모델 파일의 경로를 입력해줘야 최종적으로 실행이 가능하다.

참고로 테스트에 사용해본 모델은 gemma-2b-it-gpu-int4.bin 파일로서 4bit 경량화 모델이었고, 이 경우 대략 모델 파일의 메모리 점유는 1 GB가 될 것이다. 실제 내 노트북에서는 기타 라이브러리들과 다른 그래픽 실행 등에 의하여 1.5GB의 메모리가 LLM 추론시 점유되었다.

 

이제 실행할 모든 준비가 다 되었다. 마지막으로 클라이언트가 접속할 가상의 호스트인 웹서버가 필요하다. Nginx 와 같은 웹 서버를 사용해도 되지만, 여기서는 간단한 테스트가 목적이기 때문에 테스트용 Http 웹 서버를 동작시켜주는 파이썬의 http.server 모듈을 활용한다. 터미널 또는 명령 프롬프트에서 아래의 명령어를 입력한다.

python -m http.server 8000

뒤에 적힌 8000이 접속 가능한 포트를 의미하기 때문에, 테스트 서버 실행 후 localhost:8000으로 접속하면 실행이 가능하다.

 

참고로 index.js에서 현재 사용할 모델 생성 시의 옵션을 지정할 수 있다. 설정할 옵션에는 대표적으로 최대 토큰 수(maxTokens), temperatue, topK 등이 있다. 테스트 레포에서도 간단한 텍스트 생성 정도의 작업이었기 때문에, 최대 토큰 수를 제외하고는 바꿔가면서 작업하지는 않았다. 그러나 이후에 retrieval 작업과 결합하는 프로젝트 등을 수행할때는 작은 모델을 사용하는 만큼 설정을 바꿔가며 테스트하는 일이 필요할 것 같다.

 

다음은 테스트 레포를 통해 실행해본 결과이다. 영어뿐만 아니라 한국어 질문에도 한국어로 잘 응답했으며, 간단한 수학연산 질문에도 정확한 대답을 내놓았다. 그러나 한국어 질문일 때, 답변이 잘못되는 경우가 좀 더 많았고, 정확한 eos 토큰이 생성되지 못한 것처럼 의미없는 답변이 최대 토큰 수까지 반복되는 경우도 종종 경험할 수 있었다.