반가운 소식입니다. 사용자 기기에서 직접 머신러닝 모델을 실행하는 멋진 웹 AI 애플리케이션을 빌드했습니다. 클라우드에 의존하지 않고 전적으로 클라이언트 측 웹브라우저에서 실행됩니다. 이러한 온디바이스 디자인은 사용자 개인 정보 보호를 강화하고, 성능을 높이고, 비용을 크게 절감합니다.
하지만 난관이 있습니다. TensorFlow.js 모델은 CPU(WebAssembly)와 WebGL 및 WebGPU를 통해 더 강력한 GPU 모두에서 작동할 수 있습니다. 문제는 선택한 하드웨어로 브라우저 테스트를 일관되게 자동화할 수 있는 방법은 무엇인가?입니다.
실제 사용자가 기기에서 사용할 수 있도록 배포하기 전에 반복 및 개선하면서 머신러닝 모델의 성능을 시간 경과에 따라 비교할 때는 일관성을 유지하는 것이 중요합니다.
GPU로 일관된 테스트 환경을 설정하는 것은 예상보다 어려울 수 있습니다. 이 블로그 게시물에서는 Google이 직면한 문제와 이를 해결한 방법을 공유하여 애플리케이션의 성능을 개선할 수 있습니다.
이는 웹 AI 개발자뿐만이 아닙니다. 웹 게임이나 그래픽 작업을 하고 있다면 이 게시물은 여러분에게도 중요합니다.
자동화 도구 상자에 포함된 기능
사용 중인 API는 다음과 같습니다.
- 환경: NVIDIA T4 또는 V100 GPU에 연결된 Linux 기반 Google Colab 노트북입니다. 원하는 경우 Google Cloud(GCP)와 같은 다른 클라우드 플랫폼을 사용할 수도 있습니다.
- 브라우저: Chrome은 WebGL의 강력한 후속인 WebGPU를 지원합니다. WebGPU는 최신 GPU API의 진보를 웹에 제공합니다.
- 자동화: Puppeteer는 JavaScript를 사용하여 프로그래매틱 방식으로 브라우저를 제어할 수 있는 Node.js 라이브러리입니다. Puppeteer를 사용하면 헤드리스 모드에서 Chrome을 자동화할 수 있습니다. 즉, 브라우저에서 인터페이스가 보이지 않는 채 서버에서 실행됩니다. 기존 형식이 아닌 개선된 새로운 헤드리스 모드를 사용하고 있습니다.
환경 확인
Chrome에서 하드웨어 가속이 사용 설정되어 있는지 확인하는 가장 좋은 방법은 주소 표시줄에 chrome://gpu를 입력하는 것입니다. console.log를 사용하여 프로그래매틱 방식으로 Puppeteer를 사용하여 동일한 작업을 수행하거나 전체 보고서를 PDF로 저장하여 수동으로 확인할 수 있습니다.
/* Incomplete example.js */
import puppeteer from 'puppeteer';
// Configure launch parameters: Expands later
const browser = await puppeteer.launch({
headless: 'new',
args: ['--no-sandbox']
});
const page = await browser.newPage();
await page.goto('chrome://gpu');
// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({ path: './gpu.pdf' });
await browser.close();
chrome://gpu를 열면 다음과 같은 결과가 표시됩니다.
| 그래픽 기능 상태 | |
|---|---|
| OpenGL: | 사용 중지됨 |
| Vulkan: | 사용 중지됨 |
| WebGL: | 소프트웨어만 지원되며 하드웨어 가속은 사용할 수 없습니다. |
| WebGL2: | 소프트웨어만 지원되며 하드웨어 가속은 사용할 수 없습니다. |
| WebGPU: | 사용 중지됨 |
|
문제가 감지되었습니다. |
|
좋은 시작이 아닙니다. 하드웨어 감지에 실패했다는 점이 분명합니다. WebGL, WebGL2, WebGPU는 기본적으로 사용 중지되어 있거나 소프트웨어 전용입니다. 이 문제는 우리뿐만 아니라 공식 Chrome 지원 채널(1), (2) 등 비슷한 상황에 있는 사람들에 관한 온라인상에서 많은 논의가 이루어지고 있습니다.
WebGPU 및 WebGL 지원 사용 설정
기본적으로 헤드리스 Chrome은 GPU를 사용 중지합니다. Linux에서 사용 설정하려면 헤드리스 Chrome을 실행할 때 다음 플래그를 모두 적용합니다.
--no-sandbox플래그는 브라우저 프로세스를 나머지 시스템과 격리하는 Chrome의 보안 샌드박스를 사용 중지합니다. 이 샌드박스 없이 Chrome을 루트로 실행하는 것은 지원되지 않습니다.--headless=new플래그는 표시되는 UI 없이 향상된 새 헤드리스 모드로 Chrome을 실행합니다.--use-angle=vulkan플래그는 Chrome에 ANGLE에 Vulkan 백엔드를 사용하도록 지시합니다. 이는 OpenGL ES 2/3 호출을 Vulkan API 호출로 변환합니다.--enable-features=Vulkan플래그는 Vulkan 그래픽 백엔드를 사용하여 Chrome에서 합성 및 래스터화를 지원합니다.--disable-vulkan-surface플래그는VK_KHR_surfacevulkan 인스턴스 확장 프로그램을 사용 중지합니다. swapchain을 사용하는 대신 화면의 현재 렌더링 결과에 비트 블릿이 사용됩니다.--enable-unsafe-webgpu플래그는 Linux의 Chrome에서 실험용 WebGPU API를 사용 설정하고 어댑터 차단 목록을 사용 중지합니다.
이제 지금까지 변경한 모든 내용을 통합합니다. 전체 스크립트는 다음과 같습니다.
/* Complete example.js */
import puppeteer from 'puppeteer';
// Configure launch parameters
const browser = await puppeteer.launch({
headless: 'new',
args: [
'--no-sandbox',
'--headless=new',
'--use-angle=vulkan',
'--enable-features=Vulkan',
'--disable-vulkan-surface',
'--enable-unsafe-webgpu',
]
});
const page = await browser.newPage();
await page.goto('chrome://gpu');
// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});
await browser.close();
스크립트를 다시 실행합니다. WebGPU 문제는 감지되지 않으며 값이 사용 중지에서 소프트웨어 전용으로 변경됩니다.
| 그래픽 기능 상태 | |
|---|---|
| OpenGL: | 사용 중지됨 |
| Vulkan: | 사용 중지됨 |
| WebGL: | 소프트웨어만 지원되며 하드웨어 가속은 사용할 수 없습니다. |
| WebGL2: | 소프트웨어만 지원되며 하드웨어 가속은 사용할 수 없습니다. |
| WebGPU: | 소프트웨어만 지원되며 하드웨어 가속은 사용할 수 없습니다. |
하지만 하드웨어 가속은 여전히 사용할 수 없으며 NVIDIA T4 GPU가 감지되지 않습니다.
올바른 GPU 드라이버 설치
Google에서는 Chrome팀의 GPU 전문가와 함께 chrome://gpu의 출력을 더 면밀히 조사했습니다. Linux Colab 인스턴스에 설치된 기본 드라이버에서 문제가 발견되어 Vulkan에 문제가 발생하여 다음 출력과 같이 Chrome이 GL_RENDERER 수준에서 NVIDIA T4 GPU를 감지할 수 없습니다. 이로 인해 헤드리스 Chrome에 문제가 발생합니다.
| 운전자 정보 | |
|---|---|
| GL_RENDERER | ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), SwiftShader 드라이버-5.0.0) |
따라서 호환되는 올바른 드라이버를 설치하면 문제가 해결됩니다.
| 운전자 정보 | |
|---|---|
| GL_RENDERER | ANGLE (NVIDIA Corporation, ESP T4/PCIe/SSE2, OpenGL ES 3.2 NVIDIA 525.105.17) |
올바른 드라이버를 설치하려면 설정 중에 다음 명령어를 실행합니다. 마지막 두 줄은 NVIDIA 드라이버가 감지하는 항목의 출력을 vulkaninfo와 함께 로깅하는 데 도움이 됩니다.
apt-get install -y vulkan-tools libnvidia-gl-525// Verify the NVIDIA drivers detects along with vulkaninfonvidia-smivulkaninfo --summary
이제 스크립트를 다시 실행하면 다음과 같은 결과를 얻게 됩니다. 🎉
| 그래픽 기능 상태 | |
|---|---|
| OpenGL: | 사용 설정됨 |
| Vulkan: | 사용 설정됨 |
| WebGL: | 하드웨어 속도가 빨라졌지만 성능이 저하되었습니다. |
| WebGL2: | 하드웨어 속도가 빨라졌지만 성능이 저하되었습니다. |
| WebGPU: | 하드웨어 속도가 빨라졌지만 성능이 저하되었습니다. |
Chrome을 실행할 때 올바른 드라이버와 플래그를 사용함으로써 이제 WebGPU 및 WebGL이 새로운 헤드리스 모드를 사용하여 지원됩니다.
비하인드 스토리: Google팀의 조사
많은 연구 끝에 Google Colab에서 실행해야 하는 환경에 적합한 방법을 찾지 못했습니다. 하지만 다른 환경에서도 효과가 있는 희망적인 게시물도 있었으며 이는 유망했습니다. 결국 Colab NVIDIA T4 환경에서 이 같은 성공을 거두지 못했습니다. 2가지 주요 문제가 있었기 때문입니다.
- 일부 플래그 조합은 GPU를 감지할 수 있지만 실제로 GPU를 사용할 수는 없습니다.
- 서드 파티가 실제로 사용하는 솔루션의 예로는 이전 Chrome 헤드리스 버전을 사용했으며, 이 버전은 특정 시점에 지원 중단되고 새 버전으로 대체될 예정입니다. 미래 경쟁력을 높이기 위해서는 새로운 헤드리스 Chrome과 연동되는 솔루션이 필요했습니다.
Google은 영상 인식용 TensorFlow.js 웹페이지 예시를 실행하여 GPU 사용률이 부족하다는 것을 확인했습니다. 이를 통해 의류 샘플을 인식하도록 모델을 학습시켰습니다 (머신러닝의 'hello world'와 같은 의미).
일반 머신에서는 50회의 학습 주기 (에포크)가 각각 1초 이내에 실행되어야 합니다. 기본 상태에서 헤드리스 Chrome을 호출하면 JavaScript 콘솔 출력을 Node.js 서버 측 명령줄에 로깅하여 이러한 학습 주기가 실제로 얼마나 빠른지 확인할 수 있습니다.
예상대로 각 학습 에포크가 예상보다 훨씬 오래 걸렸으며 (몇 초) Chrome에서 GPU를 활용하는 대신 이전의 일반 JS CPU 실행으로 돌아갔습니다.
드라이버를 수정하고 헤드리스 Chrome에 올바른 플래그 조합을 사용한 후 TensorFlow.js 학습 예를 다시 실행하면 학습 에포크가 훨씬 빨라집니다.
요약
웹 AI는 2017년 탄생한 이후 기하급수적으로 성장했습니다. WebGPU, WebGL, WebAssembly와 같은 브라우저 기술을 사용하면 클라이언트 측에서 머신러닝 모델의 수학 연산 속도를 더욱 높일 수 있습니다.
2023년 현재 TensorFlow.js와 MediaPipe Web은 모델과 라이브러리 다운로드 횟수 10억 회를 돌파했습니다. 이는 웹 개발자와 엔지니어가 차세대 웹 앱에 AI를 도입하여 진정으로 놀라운 솔루션을 만들 수 있도록 수용하기 위해 어떻게 나아가고 있는지를 보여주는 역사적인 기록입니다.
성공적인 사용에는 큰 책임이 따릅니다. 프로덕션 시스템에서 이러한 사용 수준에서는 실제 브라우저 환경에서 클라이언트 측의 브라우저 기반 AI 모델을 테스트하면서 확장 가능하고 자동화 가능하며 알려진 표준화된 하드웨어 설정 내에서 테스트해야 합니다.
새로운 Headless Chrome과 Puppeteer의 강력한 기능을 활용하면 표준화되고 복제 가능한 환경에서 이러한 워크로드를 안심하고 테스트하여 일관되고 신뢰할 수 있는 결과를 보장할 수 있습니다.
마무리
Google 문서에서 단계별 안내를 확인할 수 있으므로 전체 설정을 직접 시도해 볼 수 있습니다.
이 내용이 유용했다면 LinkedIn, X (이전 명칭: Twitter) 또는 #WebAI 해시태그를 사용하여 사용하는 다른 소셜 네트워크에 의견을 공유해 주세요. 앞으로 이와 같은 내용을 더 많이 작성할 수 있도록 의견을 보내주시기 바랍니다.
향후 업데이트를 받으려면 GitHub 저장소에 별표를 추가하세요.
감사의 말씀
이 솔루션에서 당면한 드라이버와 WebGPU 문제를 디버그하는 데 도움을 준 Chrome팀의 모든 분께 진심으로 감사드립니다. 특히 이 블로그 게시물을 세울 수 있도록 도움을 주신 Jecelyn Yeen과 Alexandra White에게도 감사의 인사를 전합니다. 최종 작업 솔루션을 만드는 데 중요한 역할을 해 주신 율리 노비코프, 안드레이 코야코프, 알렉스 루덴코 씨께 감사드립니다.