웹 AI 모델 테스트 강화: WebGPU, WebGL, 헤드리스 Chrome

Jason Mayes

François Beaufort

반가운 소식을 알려드립니다. 멋진 웹 AI 애플리케이션을 빌드했습니다. 머신러닝 모델을 바로 사용자 기기에서 실행하는 ML 프로젝트를 빌드하는 데 Cloud Shell은 데이터에 액세스할 수 있습니다. 이 기기 내 사용자 개인 정보 보호를 강화하고 성능을 개선하며 비용을 절감하는 설계 크게 향상되었습니다.

하지만 난관이 있습니다. 내 작동 가능한 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를 열면 다음과 같은 결과가 표시됩니다.

좋은 시작이 아닙니다. 하드웨어 감지가 실패했다는 것은 분명합니다. 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 문제가 감지되지 않고 값이 소프트웨어에만 적용됩니다.

그러나 하드웨어 가속을 여전히 사용할 수 없으며, NVIDIA T4 GPU가 있습니다.

올바른 GPU 드라이버 설치

일부 GPU 전문가와 함께 chrome://gpu의 출력을 더 자세히 조사했습니다. 일하고 있습니다 기기에 설치된 기본 드라이버에서 Linux Colab 이로 인해 Vulkan에 문제가 발생하여 Chrome에서 다음 출력과 같이 GL_RENDERER 수준의 NVIDIA T4 GPU 이 헤드리스 Chrome에 문제가 발생할 수 있습니다.

따라서 호환되는 올바른 드라이버를 설치하면 문제가 해결됩니다.

올바른 드라이버를 설치하려면 설정 중에 다음 명령어를 실행하세요. 이 마지막 두 줄은 NVIDIA 드라이버가 탐지한 출력의 출력을 vulkaninfo를 사용합니다.

apt-get install -y vulkan-tools libnvidia-gl-525

// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary

이제 스크립트를 다시 실행하면 다음과 같은 결과가 표시됩니다. 🎉

Chrome 실행 시 올바른 드라이버와 플래그를 사용하여 WebGPU 사용 가능 새로운 헤드리스 모드를 사용하여 WebGL을 지원합니다.

비하인드 스토리: Google팀의 조사

많은 연구 결과, 오늘날 우리가 사용하는 환경에 적합한 작동 방법을 Google Colab에서 실행해야 하지만, 희망적인 게시물들 다른 환경에서는 잘 작동했고 이는 매우 유망한 것입니다. 결국 이미 2개의 VM을 보유하고 있었기 때문에 Colab NVIDIA T4 환경에서도 주요 문제:

1. 일부 플래그 조합은 GPU를 감지할 수 있지만 GPU를 사용합니다.
2. 기존 Chrome 헤드리스를 사용한 서드 파티의 작업 솔루션 사례 언젠가는 지원이 중단될 예정이며, 대신 새 버전을 사용할 수 있습니다. 해결책이 필요했습니다 새로운 헤드리스 Chrome과 함께 작동하여 미래에 더 대비할 수 있었습니다.

GPU의 사용률이 낮은 것을 확인한 결과 이미지 인식을 위한 TensorFlow.js 웹페이지 예 의류 샘플을 인식하도록 모델을 학습시켰습니다("안녕하세요"와 World" 머신러닝의 한 유형입니다.

일반 머신에서는 50회의 학습 주기 (에포크라고 함)가 더 짧은 시간 내에 실행되어야 합니다. 각각 1초 이상 기본 상태에서 헤드리스 Chrome을 호출하는 경우 Node.js 서버 측 명령줄에 자바스크립트 콘솔 출력을 실행하여 시간이 오래 걸렸을 것입니다.

예상대로 각 학습 에포크는 예상보다 훨씬 오래 걸렸습니다. 초). 이는 Chrome이 기존의 일반 JS CPU 실행으로 대체되었음을 나타냅니다. GPU를 활용하는 대신,

</ph>

드라이버를 수정하고 헤드리스에 대한 올바른 플래그 조합을 사용한 후 Chrome에서 TensorFlow.js 학습 예제를 재실행하여 훨씬 더 빠르게 개선 학습 세대를 기반으로 합니다

</ph>

요약

기하급수적으로 성장한 웹 AI 2017년 설립 이후 WebGPU, WebGL, WebAssembly는 머신러닝 모델의 클라이언트 측에서 수학적 연산을 더욱 가속화할 수 있습니다.

2023년 현재 TensorFlow.js와 MediaPipe Web은 전 세계의 오늘날과 같은 역사적 이정표이자 웹이 개발자와 엔지니어는 차세대 AI를 도입하기 위해 몇 가지 진정한 놀라운 솔루션을 만들 수 있었습니다.

성공적인 사용에는 큰 책임이 따릅니다. 이 사용량 수준 프로덕션 시스템에서는 클라이언트 측 브라우저 기반 AI 테스트가 필요합니다 모델을 구현할 수 있을 뿐 아니라 확장 및 자동화가 가능하기 때문에 알려진 표준 하드웨어 설정 내에서 작동합니다.

새로운 Headless Chrome과 Puppeteer의 장점을 결합하면 표준화되고 복제 가능한 워크로드를 기반으로 일관되고 신뢰할 수 있는 결과를 보장합니다.

마무리

단계별 안내는 다음에서 확인할 수 있습니다. 전체 설정을 직접 시도해 볼 수 있습니다.

이 내용이 도움이 되었다고 생각하신다면 LinkedIn, X (이전 명칭: 트위터) 등 해시태그 #WebAI를 사용해 사용하는 소셜 네트워크 오늘 이 자리에 오셔서 향후 이와 같은 내용을 더 많이 작성할 수 있도록 의견을 보내주세요.

GitHub 저장소에 별표 추가 향후 업데이트를 받을 수 있습니다.

감사의 말씀

드라이버를 디버그하도록 도와주신 Chrome 팀의 모든 분께 진심으로 감사드립니다. 이 솔루션에서 직면한 WebGPU 문제는 제슬린 인, 알렉산드라 화이트(글자 작성을 도와줌) 이 블로그 게시물을 참고하세요. Yuly Novikov, Andrey Kosyakov, 알렉스 루덴코의 등장 최종적인 실제 솔루션을 만들 수 있습니다.