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가 연결되어 있는지, 서버에서 GPU가 인식되는지 확인합니다. 이 출력을 보려면 로그의 앞부분으로 스크롤해야 할 수 있습니다.
그림 5: 'NVIDIA-SMI'로 시작하는 출력을 찾습니다.
4단계: 헤드리스 Chrome 사용 및 자동화
- Code 버튼을 클릭하여 새 코드 셀을 추가합니다.
- 그런 다음 커스텀 코드를 작성하여 원하는 매개변수로 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 자체와 실행 중인 스크립트를 호출하므로 여기에서 세 번째 인수를 검사해야 합니다. 세 번째 요소는 실제로 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 이벤트를 수신 대기하는 이벤트 리스너를 추가합니다. 이를 통해 Node 명령줄에서 메시지를 로깅하고 스크린샷을 트리거한 후 Node에서 브라우저 프로세스를 종료하는 특수 문구 (이 경우 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 저장소에 별표를 추가하세요.