반가운 소식입니다. 사용자의 기기에서 직접 머신러닝 모델을 실행하는 멋진 웹 AI 애플리케이션을 빌드했습니다. 클라우드에 의존하지 않고 전적으로 클라이언트 측 웹브라우저에서 실행됩니다. 이러한 온디바이스 설계는 사용자 개인 정보 보호를 강화하고 성능을 향상하며 비용을 크게 절감합니다.
하지만 난관이 있습니다. TensorFlow.js 모델은 CPU (WebAssembly)와 더 강력한 GPU (WebGL 및 WebGPU를 통해)에서 모두 작동할 수 있습니다. 문제는 선택한 하드웨어로 브라우저 테스트를 일관되게 자동화하려면 어떻게 해야 하는가입니다.
일관성을 유지하는 것은 실제 사용자가 기기에서 사용할 수 있도록 배포하기 전에 반복하고 개선하면서 시간 경과에 따라 머신러닝 모델 성능을 비교하는 데 중요합니다.
GPU를 사용하여 일관된 테스트 환경을 설정하는 것은 예상보다 어려울 수 있습니다. 이 블로그 게시물에서는 애플리케이션 성능을 개선할 수 있도록 Google이 직면한 문제와 그 해결 방법을 공유합니다.
이는 웹 AI 개발자만의 이야기가 아닙니다. 웹 게임이나 그래픽 작업을 하고 있다면 이 게시물도 유용할 것입니다.
자동화 도구 상자에는 어떤 것이 있나요?
우리가 사용하는 것은 다음과 같습니다.
- 환경: NVIDIA T4 또는 V100 GPU에 연결된 Linux 기반 Google Colab 노트북입니다. 원하는 경우 Google Cloud(GCP)와 같은 다른 클라우드 플랫폼을 사용할 수 있습니다.
- 브라우저: Chrome은 최신 GPU API의 발전된 기능을 웹에 제공하는 WebGL의 강력한 후속 제품인 WebGPU를 지원합니다.
- 자동화: Puppeteer는 JavaScript를 사용하여 프로그래매틱 방식으로 브라우저를 제어할 수 있는 Node.js 라이브러리입니다. Puppeteer를 사용하면 헤드리스 모드에서 Chrome을 자동화할 수 있습니다. 즉, 브라우저가 눈에 보이는 인터페이스 없이 서버에서 실행됩니다. Google에서는 레거시 양식이 아닌 개선된 새로운 헤드리스 모드를 사용하고 있습니다.
환경 확인
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는 기본적으로 사용 중지되거나 소프트웨어로만 제공됩니다. Google만 이 문제가 아닙니다. 공식 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플래그는 Chrome에서 합성 및 래스터화에 Vulkan 그래픽 백엔드를 사용할 수 있도록 합니다.--disable-vulkan-surface플래그는VK_KHR_surfacevulkan 인스턴스 확장 프로그램을 사용 중지합니다. swapchain을 사용하는 대신 화면의 현재 렌더링 결과에 Bit blit가 사용됩니다.--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, Tesla T4/PCIe/SSE2, OpenGL ES 3.2 NVIDIA 525.105.17) |
올바른 드라이버를 설치하려면 설정 중에 다음 명령어를 실행하세요. 마지막 두 줄은 vulkaninfo와 함께 NVIDIA 드라이버가 감지한 출력의 출력을 기록하는 데 도움이 됩니다.
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에서 실행해야 하는 환경에 맞는 방법을 찾지 못했습니다. 하지만 다른 환경에서 효과가 있는 좋은 소식도 있었고 이는 매우 유망한 경우가 많습니다. 결과적으로 다음과 같은 2가지 주요 문제가 있었기 때문에 Colab NVIDIA T4 환경에서도 성공을 거두지 못했습니다.
- 일부 플래그 조합은 GPU를 감지할 수 있지만 실제로 GPU를 사용하도록 허용하지는 않습니다.
- 서드 파티에서 제공하는 작업 솔루션의 예에서는 이전 Chrome 헤드리스 버전을 사용했으며 이 버전은 특정 시점에 지원 중단되고 새 버전으로 대체될 예정입니다. 미래 경쟁력을 높이기 위해서는 새로운 Headless Chrome과 호환되는 솔루션이 필요했습니다.
이미지 인식용 TensorFlow.js 웹페이지 예시를 실행하여 GPU의 사용률이 낮은 것을 확인했습니다. 이 웹페이지는 머신러닝의 'Hello World'와 같이 의류 샘플을 인식하도록 모델을 학습시켰습니다.
일반 머신에서 학습 주기 50회 (에포크라고도 함)가 각각 1초 이내에 실행되어야 합니다. 기본 상태의 헤드리스 Chrome을 호출하면 JavaScript 콘솔 출력을 Node.js 서버 측 명령줄에 기록하여 이러한 학습 주기가 실제로 얼마나 빨리 걸리는지 확인할 수 있습니다.
예상대로 각 학습 에포크가 예상보다 훨씬 오래 걸렸습니다 (몇 초). 이는 Chrome이 GPU를 활용하는 대신 기존의 일반 JS CPU 실행으로 대체되었음을 나타냅니다.
드라이버를 수정하고 헤드리스 Chrome의 올바른 플래그 조합을 사용한 후 TensorFlow.js 학습 예를 다시 실행하면 학습 세대가 훨씬 빨라집니다.
요약
2017년 탄생 이래 웹 AI는 기하급수적으로 성장했습니다. WebGPU, WebGL, WebAssembly와 같은 브라우저 기술을 사용하면 클라이언트 측에서 머신러닝 모델의 수학적 작업을 더욱 가속화할 수 있습니다.
2023년 현재 TensorFlow.js와 MediaPipe Web은 모델과 라이브러리 다운로드 횟수가 10억 회를 돌파했습니다. 이는 역사적인 이정표이자 웹 개발자와 엔지니어가 차세대 웹 앱에 AI를 도입하여 진정으로 놀라운 솔루션을 만드는 방법을 보여주는 신호입니다.
성공적인 사용에는 큰 책임이 따릅니다. 프로덕션 시스템에서 이러한 사용 수준에는 확장성과 자동화가 가능하고 알려진 표준화된 하드웨어 설정 내에서 클라이언트 측 브라우저 기반 AI 모델을 실제 브라우저 환경에서 테스트해야 할 필요가 있습니다.
새로운 Headless Chrome과 Puppeteer의 강력한 성능을 활용하면 표준화되고 복제 가능한 환경에서 이러한 워크로드를 안심하고 테스트하여 일관되고 신뢰할 수 있는 결과를 보장할 수 있습니다.
마무리
문서에 단계별 안내가 있으므로 전체 설정을 직접 시도해 볼 수 있습니다.
이 내용이 유용했다면 LinkedIn, X (이전 명칭: 트위터) 또는 해시태그 #WebAI를 사용해 사용하는 소셜 네트워크에 메시지를 남겨 보세요. 의견이 있으면 언제든지 보내 주시면 앞으로 이와 같은 내용을 더 많이 작성하겠습니다.
향후 업데이트를 받으려면 GitHub 저장소에 별표를 추가합니다.
감사의 말씀
이 솔루션에서 당면한 드라이버 및 WebGPU 문제를 디버그하는 데 도움을 주신 Chrome팀의 모든 분께 진심으로 감사의 인사를 드립니다. 또한 이 블로그 게시물 작성에 도움을 주신 제슬린 옌과 알렉산드라 화이트에게도 감사의 인사를 전합니다. 실제로 작동하는 최종 솔루션을 만드는 데 도움을 주신 Yuly Novikov, Andrey Kosyakov, Alex Rudenko에게 감사드립니다.