🎯 YOLO11 - 브라우저 기반 실시간 객체 감지

ONNX Runtime Web 기반 브라우저 실시간 YOLO11 객체 감지 시스템입니다. WebGPU 가속과 WASM(CPU) 폴백을 지원하며, 웹캠을 통한 실시간 영상 처리가 가능합니다.

✨ 주요 기능

• 실시간 추론 - 웹캠을 통한 실시간 객체 감지
• WebGPU 가속 - CPU 대비 최대 10배 빠른 처리 속도
• 다양한 모델 - 감지, 세그멘테이션, 포즈 추정 지원
• 설치 불필요 - 브라우저에서 바로 실행
• 카메라 선택 - 사용 가능한 카메라 자동 인식

🚀 지원 모델

사용 가능한 YOLO11 모델

모델	타입	입력 크기	용량	기능
YOLO11n	객체 감지	640×640	10.7MB	80가지 객체 클래스 감지
YOLO11n-seg	세그멘테이션	640×640	11.7MB	인스턴스 세그멘테이션 마스크
YOLO11n-pose	포즈 추정	640×640	11.8MB	17개 인체 관절 추정

추론 백엔드

• WebGPU - GPU 가속 추론 (Chrome 113+ 지원)
• WASM - 멀티스레딩 CPU 폴백
• ONNX Runtime Web - 브라우저 최적화 실행 환경

🛠️ 기술 스택

• React 18 + TypeScript + Vite
• Tailwind CSS
• ONNX Runtime Web
• pnpm

⚡ Setup

# clone
git clone https://github.com/your-username/react-yolo11n-object-detection-web.git
cd react-yolo11n-object-detection-web

# install dependencies
pnpm install

# start dev server
pnpm dev

🎮 사용 방법

1. 카메라 권한 허용 - 브라우저에서 카메라 접근 권한 부여
2. 카메라 선택 - 드롭다운에서 원하는 카메라 장치 선택
3. AI 모델 선택 - 감지/세그멘테이션/포즈 중 선택
4. "감지 시작" 클릭 - 실시간 추론 시작
5. 결과 확인 - 바운딩 박스, 마스크, 키포인트 실시간 표시

💪 ONNX Runtime Web의 장점

클라이언트 사이드 추론

• 서버 비용 절감: 추론이 사용자 디바이스에서 실행되어 서버 인프라 비용 불필요
• 실시간 처리: 네트워크 지연 없이 즉시 결과 제공
• 프라이버시 보장: 영상 데이터가 사용자 디바이스를 벗어나지 않음
• 오프라인 지원: 인터넷 연결 없이도 추론 가능

하드웨어 가속

• 브랜드 중립적: NVIDIA, AMD, Intel, Apple Silicon 모든 GPU 지원
• WebGPU 표준: 브라우저 표준 기술로 네이티브 수준의 GPU 성능 활용
• 자동 최적화: 사용자 하드웨어에 맞춰 최적의 실행 백엔드 선택

⚠️ 한계점과 고려사항

성능 일관성 문제

• 디바이스 성능 의존: 사용자 하드웨어에 따라 추론 속도 편차 발생
• 고성능 GPU: ~30-60fps
• 중급 GPU: ~15-30fps
• CPU만 사용: ~5-15fps
• 배터리 소모: 모바일 디바이스에서 GPU 사용 시 배터리 사용량 증가

브라우저 호환성

• WebGPU 지원: Chrome 113+, Edge 113+, Safari 18+
• 메모리 제한: 브라우저 메모리 제한으로 대형 모델 사용 어려움

📊 성능 벤치마크

환경	WebGPU	WASM	비고
M4 Mac Mini	~35ms	~100ms	Apple Silicon