GPU를 사용하여 일관된 테스트 환경을 설정하는 것은 예상보다 어려울 수 있습니다. 다음은 확장 가능하고 자동화 가능하며 알려진 표준화된 하드웨어 설정 내에서 실제 브라우저 환경에서 클라이언트 측 브라우저 기반 AI 모델을 테스트하는 단계입니다.
이 경우 브라우저는 소프트웨어 에뮬레이션이 아닌 하드웨어가 지원되는 실제 Chrome 브라우저입니다.
웹 AI, 웹 게임 또는 그래픽 개발자이거나 웹 AI 모델 테스트에 관심이 있다면 이 가이드를 확인하세요.
1단계: 새 Google Colab 노트북 만들기
1. colab.new로 이동하여 새 Colab 노트북을 만듭니다. 그림 1과 같이 표시됩니다. 2. 표시되는 메시지에 따라 Google 계정에 로그인합니다.
2단계: T4 GPU 지원 서버에 연결
- 노트북 오른쪽 상단에 있는 연결 을 클릭합니다.
- 런타임 유형 변경을 선택합니다.
그림 2. Colab 인터페이스에서 런타임을 변경합니다. - 모달 창에서 하드웨어 가속기로 T4 GPU를 선택합니다. 연결하면 Colab에서 NVIDIA T4 GPU가 연결된 Linux 인스턴스를 사용합니다.
그림 3: 하드웨어 가속기에서 T4 GPU를 선택합니다. - 저장을 클릭합니다.
- 연결 버튼을 클릭하여 런타임에 연결합니다. 잠시 후 버튼에 RAM 및 디스크 사용량 그래프와 함께 녹색 체크표시가 표시됩니다. 이는 필수 하드웨어가 포함된 서버가 성공적으로 생성되었음을 나타냅니다.
수고하셨습니다. GPU가 연결된 서버를 만들었습니다.
3단계: 올바른 드라이버 및 종속 항목 설치
다음 두 줄의 코드를 복사하여 노트북의 첫 번째 코드 셀에 붙여넣습니다. Colab 환경에서는 명령줄 실행 앞에 느낌표가 추가됩니다.
!git clone https://github.com/jasonmayes/headless-chrome-nvidia-t4-gpu-support.git !cd headless-chrome-nvidia-t4-gpu-support && chmod +x scriptyMcScriptFace.sh && ./scriptyMcScriptFace.sh- GitHub에서 스크립트를 검사하여 이 스크립트가 실행하는 원시 명령줄 코드를 확인할 수 있습니다.
# Update, install correct drivers, and remove the old ones. apt-get install -y vulkan-tools libnvidia-gl-525 # Verify NVIDIA drivers can see the T4 GPU and that vulkan is working correctly. nvidia-smi vulkaninfo --summary # Now install latest version of Node.js npm install -g n n lts node --version npm --version # Next install Chrome stable curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/googlechrom-keyring.gpg echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrom-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list sudo apt update sudo apt install -y google-chrome-stable # Start dbus to avoid warnings by Chrome later. export DBUS_SESSION_BUS_ADDRESS="unix:path=/var/run/dbus/system_bus_socket" /etc/init.d/dbus start셀 옆에 있는 를 클릭하여 코드를 실행합니다.
그림 4. 코드 실행이 완료되면
nvidia-smi가 다음 스크린샷과 유사한 내용을 출력했는지 확인하여 GPU가 실제로 연결되어 있고 서버에서 인식되었는지 확인합니다. 이 출력을 보려면 로그에서 이전으로 스크롤해야 할 수 있습니다.
그림 5: 'NVIDIA-SMI'로 시작하는 출력을 찾습니다.
4단계: 헤드리스 Chrome 사용 및 자동화
- 코드 버튼을 클릭하여 새 코드 셀을 추가합니다.
- 그런 다음 원하는 매개변수를 사용하여 Node.js 프로젝트를 호출하는 맞춤 코드를 작성하거나 명령줄에서
google-chrome-stable를 직접 호출하면 됩니다. 다음 두 가지 예가 나와 있습니다.
파트 A: 명령줄에서 직접 헤드리스 Chrome 사용
# Directly call Chrome to dump a PDF of WebGPU testing page
# and store it in /content/gpu.pdf
!google-chrome-stable \
--no-sandbox \
--headless=new \
--use-angle=vulkan \
--enable-features=Vulkan \
--disable-vulkan-surface \
--enable-unsafe-webgpu \
--print-to-pdf=/content/gpu.pdf https://webgpureport.org
이 예에서는 결과 PDF 캡처를 /content/gpu.pdf에 저장했습니다. 이 파일을 보려면 콘텐츠 를 펼칩니다.
그런 다음 아이콘을 클릭하여 PDF 파일을 로컬 머신에 다운로드합니다.
B 부분: Puppeteer로 Chrome 명령
다음과 같이 실행할 수 있는 Puppeteer를 사용하여 헤드리스 Chrome을 제어하는 최소한의 예시를 제공했습니다.
# Call example node.js project to perform any task you want by passing
# a URL as a parameter
!node headless-chrome-nvidia-t4-gpu-support/examples/puppeteer/jPuppet.js chrome://gpu
jPuppet 예에서 Node.js 스크립트를 호출하여 스크린샷을 만들 수 있습니다. 그렇다면 어떻게 작동하는 것일까요? jPuppet.js의 Node.js 코드에 관한 이 둘러보기 자료를 확인하세요.
jPuppet.js 노드 코드 분류
먼저 Puppeteer를 가져옵니다. 이렇게 하면 Node.js로 Chrome을 원격으로 제어할 수 있습니다.
import puppeteer from 'puppeteer';
그런 다음 Node 애플리케이션에 전달된 명령줄 인수를 확인합니다. 이동할 URL을 나타내는 세 번째 인수가 설정되어 있는지 확인합니다. 여기서 세 번째 인수를 검사해야 합니다. 처음 두 인수는 Node 자체와 실행 중인 스크립트를 호출하기 때문입니다. 세 번째 요소에는 실제로 노드 프로그램에 전달된 첫 번째 매개변수가 포함되어 있습니다.
const url = process.argv[2];
if (!url) {
throw "Please provide a URL as the first argument";
}
이제 runWebpage()라는 비동기 함수를 정의합니다. 그러면 WebGPU 및 WebGL 지원 사용 설정에 설명된 대로 WebGL 및 WebGPU가 작동하도록 하는 방식으로 Chrome 바이너리를 실행하기 위해 명령줄 인수로 구성된 브라우저 객체가 생성됩니다.
async function runWebpage() {
const browser = await puppeteer.launch({
headless: 'new',
args: [
'--no-sandbox',
'--headless=new',
'--use-angle=vulkan',
'--enable-features=Vulkan',
'--disable-vulkan-surface',
'--enable-unsafe-webgpu'
]
});
나중에 URL을 방문하는 데 사용할 수 있는 새 브라우저 페이지 객체를 만듭니다.
const page = await browser.newPage();
그런 다음 웹페이지에서 JavaScript를 실행할 때 console.log 이벤트를 수신 대기하는 이벤트 리스너를 추가합니다. 이렇게 하면 노드 명령줄에서 메시지를 로깅하고 스크린샷을 트리거한 다음 노드에서 브라우저 프로세스를 종료하는 특수 문구 (이 경우 captureAndEnd)가 있는지 콘솔 텍스트를 검사할 수 있습니다. 이는 스크린샷을 찍기 전에 일정량의 작업을 실행해야 하며 실행 시간이 결정되지 않은 웹페이지에 유용합니다.
page.on('console', async function(msg) {
console.log(msg.text());
if (msg.text() === 'captureAndEnd') {
await page.screenshot({ path: '/content/screenshotEnd.png' });
await browser.close();
}
});
마지막으로, 지정된 URL을 방문하여 페이지가 로드되면 초기 스크린샷을 찍도록 페이지에 지시합니다.
chrome://gpu의 스크린샷을 찍으려면 이 페이지가 자체 코드로 제어되지 않으므로 콘솔 출력을 기다리는 대신 브라우저 세션을 즉시 닫을 수 있습니다.
await page.goto(url, { waitUntil: 'networkidle2' });
await page.screenshot({path: '/content/screenshot.png'});
if (url === 'chrome://gpu') {
await browser.close();
}
}
runWebpage();
package.json 수정
jPuppet.js 파일의 시작 부분에 import 문을 사용한 것을 알 수 있습니다. package.json는 유형 값을 module로 설정해야 합니다. 그러지 않으면 모듈이 잘못되었다는 오류가 발생합니다.
{
"dependencies": {
"puppeteer": "*"
},
"name": "content",
"version": "1.0.0",
"main": "jPuppet.js",
"devDependencies": {},
"keywords": [],
"type": "module",
"description": "Node.js Puppeteer application to interface with headless Chrome with GPU support to capture screenshots and get console output from target webpage"
}
그러면 끝입니다. Puppeteer를 사용하면 프로그래매틱 방식으로 Chrome과 더 쉽게 상호작용할 수 있습니다.
성공
이제 TensorFlow.js Fashion MNIST 분류기가 GPU를 사용하여 브라우저에서 클라이언트 측 처리를 통해 이미지에서 바지를 올바르게 인식할 수 있는지 확인할 수 있습니다.
머신러닝 모델부터 그래픽 및 게임 테스트에 이르기까지 모든 클라이언트 측 GPU 기반 워크로드에 사용할 수 있습니다.
리소스
향후 업데이트를 받으려면 GitHub 저장소에 별표를 추가하세요.