반가운 소식을 알려드립니다. 멋진 웹 AI 애플리케이션을 빌드했습니다. 머신러닝 모델을 바로 사용자 기기에서 실행하는 ML 프로젝트를 빌드하는 데 클라우드를 사용하지 않고 클라이언트 측 웹브라우저에서 완전히 실행됩니다. 이러한 기기 내 설계는 사용자 개인 정보 보호를 강화하고 성능을 높이며 비용을 크게 절감합니다.
하지만 한 가지 문제가 있습니다. 내 작동 가능한 TensorFlow.js 모델 CPU (WebAssembly)와 더 강력한 GPU (예: WebGL 및 WebGPU). 문제는 선택한 하드웨어로 브라우저 테스트를 일관되게 자동화하려면 어떻게 해야 하나요?
일관성을 유지하는 것은 실제 사용자가 기기에서 사용할 수 있도록 배포하기 전에 머신러닝 모델을 반복하고 개선할 때 시간 경과에 따른 머신러닝 모델 성능을 비교하는 데 중요합니다.
GPU로 일관된 테스트 환경을 설정하는 것은 다른 것보다 더 어려울 수 있습니다. 있습니다. 이 블로그 게시물에서는 Google이 직면한 문제와 애플리케이션의 성능을 개선할 수 있습니다.
이는 웹 AI 개발자만의 이야기가 아닙니다. 웹 게임을 담당하고 있거나 이 게시물은 여러분에게도 중요합니다.
자동화 도구 상자에는 어떤 것이 있나요?
우리가 사용하는 것은 다음과 같습니다.
- 환경: Linux 기반 Google Colab NVIDIA에 연결된 노트북 T4 또는 V100 GPU 원하는 경우 Google Cloud(GCP)와 같은 다른 클라우드 플랫폼을 사용할 수 있습니다.
- 브라우저: Chrome에서 WebGPU를 지원합니다. 강력한 WebGL의 뒤를 잇는 모델로 은 최신 GPU API의 발전된 기능을 웹에 제공합니다.
- 자동화: Puppeteer는 Node.js 라이브러리로, JavaScript를 사용하여 프로그래밍 방식으로 브라우저를 제어합니다. Puppeteer를 사용하면 Chrome을 헤드리스 모드로 자동화합니다. 즉, 브라우저가 볼 수 있습니다. 우리는 새로운 헤드리스 모드입니다. legacy 양식
환경 확인
Chrome에서 하드웨어 가속이 사용 설정되어 있는지 확인하는 가장 좋은 방법은
주소 표시줄에 chrome://gpu
를 입력합니다. 다음을 수행할 수 있습니다.
프로그래매틱 방식으로 Puppeteer를 사용하여 동등한 작업 수행
또는 console.log
(으)로 전체 보고서를 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
플래그는 개선된 새 버전과 함께 Chrome을 실행합니다. 헤드리스 모드로 구현됩니다.--use-angle=vulkan
플래그는 Chrome에 Vulkan 백엔드 이는 ANGLE에 의해 OpenGL ES 2/3 호출을 Vulkan API 호출로 변환합니다.--enable-features=Vulkan
플래그는 다음의 Vulkan 그래픽 백엔드를 사용 설정합니다. 합성 및 래스터화에 대해 알아보았습니다.--disable-vulkan-surface
플래그는VK_KHR_surface
Vulkan 인스턴스 확장 프로그램을 사용 중지합니다. swapchain을 사용하는 대신 비트 블릿은 화면에 렌더링 결과를 표시합니다.--enable-unsafe-webgpu
플래그는 다음 위치에서 실험용 WebGPU API를 사용 설정합니다. Linux용 Chrome에서 어댑터 차단 목록을 사용 중지합니다.
이제 지금까지 변경한 모든 사항을 결합합니다. 전체 스크립트는 다음과 같습니다.
/* 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 드라이버 설치
일부 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) |
올바른 드라이버를 설치하려면 설정 중에 다음 명령어를 실행하세요. 마지막 두 줄은 NVIDIA 드라이버가 vulkaninfo
와 함께 감지하는 출력을 로깅하는 데 도움이 됩니다.
apt-get install -y vulkan-tools libnvidia-gl-525
// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary
이제 스크립트를 다시 실행하면 다음과 같은 결과가 표시됩니다. 🎉
그래픽 기능 상태 | |
---|---|
OpenGL: | 사용 설정됨 |
Vulkan: | 사용 설정됨 |
WebGL: | 하드웨어 가속을 사용했지만 성능이 저하되었습니다. |
WebGL2: | 하드웨어 가속을 사용했지만 성능이 저하되었습니다. |
WebGPU: | 하드웨어 가속을 사용했지만 성능이 저하되었습니다. |
Chrome 실행 시 올바른 드라이버와 플래그를 사용하여 WebGPU 사용 가능 새로운 헤드리스 모드를 사용하여 WebGL을 지원합니다.
비하인드 스토리: Google팀의 조사
많은 연구 결과, 오늘날 우리가 사용하는 환경에 적합한 작동 방법을 Google Colab에서 실행해야 하지만, 희망적인 게시물들 다른 환경에서는 잘 작동했고 이는 매우 유망한 것입니다. 궁극적으로 Colab NVIDIA T4 환경에서 이들의 성공을 재현할 수 없었습니다. 두 가지 주요 문제가 있었기 때문입니다.
- 일부 플래그 조합은 GPU를 감지할 수 있지만 GPU를 사용합니다.
- 기존 Chrome 헤드리스를 사용한 서드 파티의 작업 솔루션 사례 언젠가는 지원이 중단될 예정이며, 대신 새 버전을 사용할 수 있습니다. 해결책이 필요했습니다 새로운 헤드리스 Chrome과 함께 작동하여 미래에 더 대비할 수 있었습니다.
이미지 인식을 위한 TensorFlow.js 웹페이지 예시를 실행하여 GPU의 활용도가 낮음을 확인했습니다. 이 예시에서는 의류 샘플을 인식하도록 모델을 학습시켰습니다(머신러닝의 'Hello World'와 유사).
일반 머신에서는 50회의 학습 주기 (에포크라고 함)가 더 짧은 시간 내에 실행되어야 합니다. 각각 1초 이상 기본 상태에서 헤드리스 Chrome을 호출하는 경우 Node.js 서버 측 명령줄에 자바스크립트 콘솔 출력을 실행하여 시간이 빨랐던 것입니다.
예상대로 각 학습 에포크는 예상보다 훨씬 오래 걸렸습니다. 초). 이는 Chrome이 기존의 일반 JS CPU 실행으로 대체되었음을 나타냅니다. GPU를 활용하는 대신,
드라이버를 수정하고 헤드리스에 대한 올바른 플래그 조합을 사용한 후 Chrome에서 TensorFlow.js 학습 예제를 재실행하여 훨씬 더 빠르게 개선 학습 세대를 기반으로 합니다
요약
기하급수적으로 성장한 웹 AI 2017년 설립 이후 WebGPU, WebGL, WebAssembly와 같은 브라우저 기술을 사용하면 클라이언트 측에서 머신러닝 모델의 수학적 연산을 더욱 가속화할 수 있습니다.
2023년 현재 TensorFlow.js 및 MediaPipe Web의 모델 및 라이브러리 다운로드 수가 10억 건을 돌파했습니다. 이는 웹 개발자와 엔지니어가 차세대 웹 앱에서 AI를 수용하여 정말 놀라운 솔루션을 만들기 위해 전환하고 있음을 보여주는 역사적인 기록입니다.
성공적인 사용에는 큰 책임이 따릅니다. 이 사용량 수준 프로덕션 시스템에서는 클라이언트 측 브라우저 기반 AI 테스트가 필요합니다 모델을 구현할 수 있을 뿐 아니라 확장 및 자동화가 가능하기 때문에 알려진 표준 하드웨어 설정 내에서 작동합니다.
새로운 Headless Chrome과 Puppeteer의 장점을 결합하면 표준화되고 복제 가능한 워크로드를 기반으로 일관되고 신뢰할 수 있는 결과를 보장합니다.
마무리
단계별 안내는 다음에서 확인할 수 있습니다. 전체 설정을 직접 시도해 볼 수 있습니다.
이 내용이 도움이 되었다고 생각하신다면 LinkedIn, X (이전 명칭: 트위터) 등 해시태그 #WebAI를 사용해 사용하는 소셜 네트워크 향후 이와 같은 내용을 더 작성할 수 있도록 의견을 보내주시면 감사하겠습니다.
GitHub 저장소에 별표 추가 향후 업데이트를 받을 수 있습니다.
감사의 말씀
드라이버를 디버그하도록 도와주신 Chrome 팀의 모든 분께 진심으로 감사드립니다. 이 솔루션에서 직면한 WebGPU 문제는 제슬린 인, 알렉산드라 화이트(글자 작성을 도와줌) 이 블로그 게시물을 참고하세요. 작동하는 최종 솔루션을 만드는 데 중요한 역할을 한 Yuly Novikov, Andrey Kosyakov, Alex Rudenko님께 감사드립니다.