google-ai-edge/mediapipe-samples-web
카메라와 텍스트만으로 얼굴·손·자세를 인식하는 웹 데모 모음, 서버 없이 브라우저에서 다 돌아간다
Google의 MediaPipe Tasks API를 브라우저 안에서 바로 체험할 수 있는 예제 모음이다. 얼굴 인식, 손동작 인식, 전신 자세 추적 같은 비전 작업부터 소리 분류, 텍스트 감정 분석까지 다양한 기능을 웹페이지 안에서 CPU나 GPU로 실시간 처리한다. 별도 서버 설치 없이 저장소를 내려받아 명령어 몇 줄이면 로컬에서 실행해볼 수 있다.
무엇을 하는 레포인가
- 얼굴에서 478개의 3D 점을 찾아내는 얼굴 랜드마커, 양손 각각 21개 지점을 추적하는 손 랜드마커, 얼굴·손·전신 자세를 동시에 추적하는 홀리스틱 랜드마커 등 다양한 비전 인식 기능을 제공한다
- 이미지를 클릭해 원하는 물체만 오려내는 인터랙티브 세그멘테이션, 물체 테두리를 그려주는 객체 탐지, 이미지 간 유사도를 비교하는 이미지 임베딩 같은 기능도 포함한다
- 오디오 분류, 언어 감지, 텍스트 감정 분류, 문장 간 의미 유사도 비교(텍스트 임베딩) 등 소리와 텍스트를 다루는 작업도 지원한다
- 모든 처리가 기기(브라우저) 안에서 이뤄지는 온디바이스 머신러닝 방식이라 클라우드 서버로 데이터를 보내지 않는다
- pnpm install과 pnpm dev 명령만으로 로컬 개발 서버를 띄워 바로 시험해볼 수 있고, Playwright 기반 E2E(엔드투엔드) 테스트 도구로 동작을 검증한다
왜 중요한가
웹 개발자가 서버 인프라 구축이나 별도 ML 학습 없이 얼굴 인식, 손동작 인식 같은 기능을 자기 웹사이트에 바로 붙여볼 수 있는 참고 코드가 된다. 브라우저에서 직접 돌아가는 예제라 개인정보가 서버로 전송되지 않는 서비스를 설계할 때도 참고할 수 있다.
이 레포의 용어
- MediaPipe Tasks API · 구글이 만든, 얼굴·손·자세 인식 등을 손쉽게 구현하게 해주는 온디바이스 머신러닝 도구 모음
- 온디바이스 머신러닝 · 데이터를 서버로 보내지 않고 사용자의 기기(브라우저 등) 안에서 직접 처리하는 방식
- 랜드마커 · 얼굴이나 손, 몸의 주요 지점 좌표를 찾아내는 기능
- 임베딩 · 이미지나 텍스트를 숫자 벡터로 바꿔 서로 얼마나 비슷한지 비교할 수 있게 만드는 방법
- E2E 테스트 · 실제 사용자가 쓰는 것처럼 프로그램 전체 흐름을 처음부터 끝까지 검증하는 테스트 방식
레포 원문 소개 (영문)
A collection of examples for the MediaPipe Task APIs that can run fully inside your browser.
GitHub에서 보기주목받는 레포
- vorssaint/vorssaint-utils메뉴바 아이콘 하나로 유료 맥 앱 열 개 값을 대신하는 오픈소스 도구
- Alishahryar1/free-claude-code코딩 AI 에이전트를 무료 모델 49곳에 자유롭게 연결해주는 로컬 프록시
- freestylefly/awesome-gpt-image-2GPT-Image2로 원하는 이미지를 정확히 뽑아내는 프롬프트 설계도 532개를 모아놓은 저장소
- block/buzz사람과 AI 에이전트가 같은 채팅방에서 함께 일하는 오픈소스 협업 플랫폼
- NousResearch/hermes-agentNous Research가 만든, 쓰면 쓸수록 스스로 똑똑해지는 AI 에이전트 Hermes
- virgiliojr94/book-to-skill기술서 PDF를 AI 에이전트가 언제든 펼쳐볼 수 있는 '스킬'로 바꿔주는 도구
- VoltAgent/awesome-agent-skillsAI 코딩 도구가 특정 작업을 '전문가처럼' 하도록 도와주는 매뉴얼 1000개 이상을 한곳에 모았다
- anthropics/claude-plugins-community누구나 만든 Claude 확장 기능을 한곳에 모아 설치하게 해주는 저장소