ONNX Runtime Web 기반 브라우저 내 로컬 Stem 분리 구현

I Ran a Neural Network in a Browser Tab to Split a Song into Stems

Aral Roca2026년 4월 24일6분intermediate

AI 요약

Context

기존 Audio Stem Separation 서비스의 Cloud GPU 의존성으로 인한 높은 구독 비용 및 데이터 프라이버시 침해 문제 발생. 대용량 오디오 데이터의 서버 전송으로 인한 네트워크 오버헤드와 민감한 미발표 곡의 외부 유출 리스크가 상존하는 구조임.

htdemucs 모델의 ONNX Export를 통한 브라우저 실행 환경 최적화
WebAssembly 기반의 ONNX Runtime Web 채택으로 서버리스 로컬 추론 아키텍처 설계
UI 스레드 블로킹 방지를 위한 Web Worker 내 추론 로직 배치
Web Audio API의 decodeAudioData 및 OfflineAudioContext를 활용한 PCM 디코딩과 44100Hz 리샘플링 파이프라인 구축
Transformer의 Long-range Dependency 처리와 U-Net의 Local Spectral Pattern 캡처를 결합한 하이브리드 모델 적용
4개의 Spectral Mask 생성 후 원본 Spectrogram에 적용하여 개별 Stem을 분리하는 마스킹 기법 구현

실천 포인트

1. 무거운 AI 모델의 브라우저 이식 시 ONNX 포맷 변환 및 WASM 런타임 검토

2. CPU 집약적 연산 시 메인 스레드 성능 저하 방지를 위해 Web Worker 필수 적용

3. 대용량 바이너리 데이터 처리 시 SharedArrayBuffer를 통한 Zero-copy 데이터 전송 고려

4. 클라이언트 자원 제약을 고려한 입력 데이터 크기 제한(Quotas) 설정

태그