Google for Developers Korea Blog: TensorFlow.js 웹어셈블리 백엔드를 소개합니다

TensorFlow.js 웹어셈블리 백엔드를 소개합니다

2020년 3월 20일 금요일

.post-body span { white-space: normal !important; } <블로그 원문은 이곳에서 확인하실 수 있으며 블로그 번역 리뷰는 박해선(ML GDE)님이 참여해 주셨습니다> 게시자: Daniel Smilkov, Nikhil Thorat, Ann Yuan - Google 소프트웨어 엔지니어
브라우저와 Node.js 를 위한 TensorFlow.js 웹어셈블리(WebAssembly, 줄여서 WASM라 부릅니다) 백엔드를 공개하게 되어 기쁩니다! 이 백엔드는 WebGL 백엔드를 대신하는 것으로, 최소한의 코드 변경으로 CPU 실행 속도를 높여줍니다. 이 백엔드는 특히 WebGL이 지원되지 않거나 GPU 속도가 느린 저가형 휴대기기를 비롯해 폭넓은 기기의 성능을 개선해 줍니다. 이 백엔드는 XNNPack 라이브러리를 사용해 연산의 속도를 높입니다.
설치 새로운 WASM 백엔드를 사용하는 방법은 두 가지입니다.

NPM 사용


// @tensorflow/tfjs 또는 @tensorflow/tfjs-core를 임포트합니다.
const tf = require('@tensorflow/tfjs');
// 이 WASM 백엔드를 글로벌 백엔드 레지스트리에 추가합니다.
require('@tensorflow/tfjs-backend-wasm');
 
// 이 벡엔드를 WASM으로 지정하고 모듈이 준비될 때까지 기다립니다.
tf.setBackend('wasm').then(() => main());

이 라이브러리는 WASM 바이너리가 메인 JS 파일로부터 상대 경로에 있을 것으로 기대합니다. 파셀(parcel) 또는 웹팩(webpack)과 같은 번들러를 사용 중인 경우, setWasmPath 함수로 WASM 바이너리의 위치를 수동으로 지정해야 합니다.


import {setWasmPath} from '@tensorflow/tfjs-backend-wasm';
setWasmPath(yourCustomPath);
tf.setBackend('wasm').then(() => {...});

자세한 내용은 README의 '번들러 사용' 섹션을 참조하세요.

스크립트 태그 사용


<!-- @tensorflow/tfjs 또는 @tensorflow/tfjs-core를 임포트합니다. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
 
<!-- 이 WASM 백엔드를 글로벌 백엔드 레지스트리에 추가합니다. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm/dist/tf-backend-wasm.js"></script>
 
<script>
  tf.setBackend('wasm').then(() => main());
</script>

참고: TensorFlow.js는 각 백엔드에 대한 우선순위를 정하고 주어진 환경에서 지원되는 최상의 백엔드를 자동으로 선택합니다. 현재는 WebGL의 우선순위가 가장 높고, 그 다음으로 WASM과 기본 JS 백엔드의 순입니다. 항상 WASM 백엔드를 사용하려면 `tf.setBackend(‘wasm’)`을 호출해야 합니다.

데모 WASM 백엔드에서 실행되는 얼굴 인식 데모(미디어파이프(MediaPipe)의 BlazeFace 모델 사용)를 확인해보세요. 이 모델에 대한 자세한 내용은 이 블로그 게시물을 참조하세요. WASM이란? WASM은 다양한 브라우저를 지원하는 이식성이 좋은 어셈블리이자, 네이티브 코드에 가까운 실행 속도를 제공하는 웹용 바이너리 포맷입니다. 2015년에 새로운 웹 기반 바이너리 포맷으로 소개된 WASM은 웹에서 실행하기 위해 컴파일된 C, C++ 또는 Rust로 작성된 프로그램으로 제공됩니다. WASM은 2017년부터 구글 크롬, 애플 사파리, 파이어폭스, 마이크로소프트 엣지 브라우저에서 지원하고 있으며 전 세계 기기의 90%에서 사용할 수 있습니다. 성능 자바스크립트 대비: WASM은 머신러닝 작업에서 많이 등장하는 수치 계산에 대해 자바스크립트보다 일반적으로 훨씬 빠릅니다. 또한 자바스크립트가 파싱되는 것보다 최대 20배 빠르게 WASM이 디코딩됩니다. 자바스크립트는 동적 타입 언어이고 가비지 컬렉션이 수행되기 때문에 실행시에 속도 저하를 예측하기 힘듭니다. 그 밖에도, 최신 자바스크립트 라이브러리(예: TensorFlow.js)는 (폭넓은 브라우저 지원을 위해) ES5 코드를 생성하는 타입스크립트(TypeScript)나 ES6 트랜스파일러(transpiler)와 같은 컴파일 도구를 사용하기 때문에 기본 ES6 자바스크립트보다 실행 속도가 느립니다.
WebGL 대비: 대다수 모델의 경우, WebGL 백엔드는 여전히 WASM 백엔드보다 우수한 성능을 발휘하지만, WASM이 (3MB보다 작고 곱셈-덧셈 연산이 6천만 개 이하인) 초경량 모델인 경우 더 빠를 수 있습니다. 이런 경우에는 GPU 병렬 처리의 이점보다 WebGL 셰이더를 실행하면서 발생하는 고정적인 오버헤드 비용이 더 큽니다. 아래에 이 트레이드오프의 경계를 찾기 위한 가이드라인이 있습니다. 하지만 여러 부동 소수점 연산을 벡터화하고 병렬로 실행할 수 있도록 해주는 SIMD 명령을 추가하기 위해 WASM 확장이 제안되고 있습니다. 예비 테스트 결과, 이런 확장 프로그램을 사용하면 현재 WASM보다 2~3배의 속도 증가가 있는 것으로 나타납니다. 브라우저에서 언제 지원하게 될지 관심있게 살펴보세요! 브라우저에서 지원하면 TensorFlow.js에는 자동으로 적용됩니다. 휴대성과 안정성 머신러닝에서는 수치 정밀도가 중요합니다. WASM은 기본적으로 부동 소수점 연산을 지원하는 반면, WebGL 백엔드는 OES_texture_float 확장이 필요합니다. 모든 기기에서 이 확장 프로그램을 지원하는 것은 아닙니다. 즉, 일부 기기(예: WASM이 지원하는 구형 휴대기기)에서는 TensorFlow.js가 GPU 가속을 할 수 없다는 뜻입니다.
게다가, GPU 드라이버는 하드웨어마다 다를 수 있고 기기마다 다양한 정밀도 문제가 있을 수 있습니다. iOS의 경우, GPU가 32비트 부동 소수점을 지원하지 않으므로 16비트 부동 소수점으로 대체하는데, 이로 인해 정밀도 문제가 발생합니다. WASM에서는 항상 32비트 부동 소수점으로 계산을 수행하므로 모든 기기에서 동일한 정밀도를 가집니다. 언제 WASM을 사용해야 하나요? 일반적으로, WASM은 모델 크기가 작거나 다양한 기기를 지원하거나 프로젝트가 수치 안정성에 민감한 경우 선택하는 것이 좋습니다. 하지만 WASM이 WebGL 백엔드와 동등한 수준은 아닙니다. WASM 백엔드를 사용 중인데 필요한 연산이 있다면, Github에 자유롭게 이슈를 남겨주세요. 제품에 활용하려는 요구사항을 반영하기 위해 훈련보다는 추론을 지원하는데 우선순위를 두고 있습니다. 브라우저에서 모델을 훈련하려면 WebGL 백엔드를 사용하세요.
Node.js의 경우 TensorFlow 바이너리를 지원하지 않는 기기나 소스에서 빌드하고 싶지 않다면 WASM 백엔드가 훌륭한 솔루션입니다.
아래 표에는 WebGL, WASM 및 기본 JS(CPU) 백엔드에서 2018 MacBook Pro(Intel i7 2.2GHz, Radeon 555X)과 구글 크롬을 사용해 측정한 여러 공식 모델의 추론 시간(단위: 밀리초)이 나와 있습니다.

공식 모델에서 WASM 백엔드가 기본 JS(CPU) 백엔드보다 10~30배 정도 더 빠른 것으로 관찰됩니다. WASM과 WebGL을 비교하면 다음 두 가지 주요 사항을 확인할 수 있습니다.

WASM은 미디어파이프의 BlazeFace 및 FaceMesh와 같은 초경량 모델에 대해 WebGL과 같거나 그보다 빠릅니다.

WASM은 MobileNet, BodyPix, PoseNet과 같은 중간 크기의 엣지 모델에 대해 WebGL보다 2~4배 느립니다.

전망 WASM 백엔드가 점점 더 선호될 것이라고 예상합니다. 작년에는 엣지 장치에 맞는 제품 수준의 초경량 모델(예: 미디어파이프의 BlazeFace 및 FaceMesh)이 대거 등장했습니다. 이런 모델에는 WASM 백엔드가 잘 맞습니다.
또한 SIMD 및 스레드와 같은 확장이 활발하게 개발되고 있어 앞으로 더욱 빨라질 것입니다. SIMD/QFMA SIMD 명령을 추가하기 위한 WASM 확장이 제안되어 있습니다. 현재 구글 크롬은 실험적으로 SIMD를 부분 지원하고 있고, 파이어폭스와 마이크로소프트 엣지에서는 개발 중입니다. 반면, 사파리 브라우저는 아직 공개적인 입장이 없습니다. SIMD는 엄청나게 유망합니다. 널리 알려진 ML 모델에 SIMD-WASM을 사용한 벤치마크에서는 SIMD WASM를 사용하지 않았을 때에 비해 2~3배 속도가 향상되었습니다.
최초의 SIMD 제안 외에도, LLVM WASM 백엔드가 커널 성능을 향상하기 위해 실험적인 QFMA SIMD 명령을 추가했습니다. 지원하여 널리 알려진 ML 모델에 대한 벤치마크에서는 QFMA SIMD가 일반 SIMD보다 추가적으로 26~50%의 속도가 향상되었습니다.
TF.js WASM 백엔드는 WASM SIMD에 최적화된 마이크로 커널을 포함하는 XNNPACK 라이브러리를 통해 SIMD의 장점을 이용합니다. 따라서 SIMD가 브라우저에 적용되면 TensorFlow.js 사용자는 자동으로 이를 활용할 수 있습니다. 멀티스레딩 WASM 스펙에는 최근에 멀티스레드 애플리케이션의 속도 향상을 목표로 하는 스레드 및 원자성 제안이 추가되었습니다. 이 제안은 아직은 초기 단계로, 향후 하나의 W3C Working Group으로 구성될 것입니다. 특히, Chrome 74 이상에서는 WASM 스레드를 기본으로 지원합니다.
스레딩 제안이 통과되면, TensorFlow.js 사용자는 코드를 변경하지 않고도 XNNPACK 라이브러리를 통해 스레드의 장점을 이용할 수 있습니다. 추가 정보

더 자세한 내용을 알고 싶다면 WebAssembly 가이드를 읽어보세요.

모질라 개발자 네트워크(Mozilla Developer Network)에서 제공하는 이 자료 모음을 통해 웹어셈블리에 대해 자세히 알아보세요.

깃헙(GitHub)의 이슈와 PR을 통한 피드백과 기여에 감사합니다!