Configurar un entorno de pruebas coherente con GPU puede ser más difícil que lo esperado. Sigue estos pasos para probar los modelos de IA del cliente y basados en el navegador en verdaderos entornos de navegador, a la vez que son escalables y automatizables, y están configuración de hardware estandarizada.
En este caso, el navegador es un navegador Chrome real compatible con hardware, en lugar de la emulación de software.
No importa si eres un desarrollador de gráficos, IA web o videojuegos web, o interesados en las pruebas de modelos de IA web, esta guía es para ti.
Paso 1: Crea un notebook nuevo de Google Colab
1) Ve a colab.new para crear un notebook de Colab nuevo. Debería verse similar a la figura 1. 2. Sigue las indicaciones para acceder a tu Cuenta de Google.![Captura de pantalla de un nuevo Colab](https://developer.chrome.google.cn/static/docs/web-platform/webgpu/colab-headless/image/colab_new.png?authuser=0000&hl=es)
Paso 2: Conéctate a un servidor habilitado para GPU T4
- Haz clic en Conectar cerca de la esquina superior derecha del notebook.
- Selecciona Cambiar tipo de entorno de ejecución:
Figura 2: Cambiar el entorno de ejecución en la interfaz de Colab - En la ventana modal, selecciona T4 GPU como acelerador de hardware. Cuando te conectes, Colab usará una instancia de Linux con una GPU NVIDIA T4 adjunta.
Figura 3: En Acelerador de hardware, selecciona GPU T4. - Haz clic en Guardar.
- Haz clic en el botón Conectar para conectarte al entorno de ejecución. Después de un tiempo, la presentará una marca de verificación verde, junto con gráficos de uso del disco y de la memoria RAM. Esto indica que se creó correctamente un servidor con los servidores hardware.
Buen trabajo. Acabas de crear un servidor con una GPU conectada.
Paso 3: Instala los controladores y las dependencias correctos
Copia y pega las siguientes dos líneas de código en la primera celda de código de el notebook. En un entorno de Colab, la ejecución de la línea de comandos se antepone a un signo de exclamación.
!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
- Puedes inspeccionar la secuencia de comandos en GitHub. para ver el código de la línea de comandos sin procesar que ejecuta esta secuencia de comandos.
# 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
Haz clic en
junto a la celda para ejecutar el código.Figura 4: Cuando el código termine de ejecutarse, verifica que
nvidia-smi
imprimió algún elemento. similar a la siguiente captura de pantalla para confirmar que sí tienes una GPU que esté conectada y que se reconozca en tu servidor. Es posible que debas desplazarte hacia arriba en los registros para ver este resultado.Figura 5: Busca el resultado que comienza con “NVIDIA-SMI”.
Paso 4: Usa y automatiza Chrome sin interfaz gráfica
- Haz clic en el botón Code para agregar uno nuevo. de la celda de código.
- Luego, puedes escribir tu código personalizado para llamar a un proyecto de Node.js con tu
parámetros preferidos (o solo llama a
google-chrome-stable
directamente en la línea de comandos). A continuación, se muestran ejemplos de ambos casos.
Parte A: Usa Chrome sin interfaz gráfica directamente en la línea de comandos
# 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
En el ejemplo, almacenamos la captura de PDF resultante en /content/gpu.pdf
. Para
para verlo, expande el contenido .
Luego, haz clic en para descargar el PDF.
en tu máquina local.
![Captura de pantalla de un nuevo Colab](https://developer.chrome.google.cn/static/docs/web-platform/webgpu/colab-headless/image/download-pdf.gif?authuser=0000&hl=es)
Parte B: Usa Chrome con Puppeteer
Proporcionamos un ejemplo minimalista con Puppeteer para controlar Headless Chrome que puede ejecutarse de la siguiente manera:
# 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
En el ejemplo de jPuppet, podemos llamar a una secuencia de comandos de Node.js para crear una captura de pantalla. Pero ¿cómo funciona? Revisa esta explicación sobre la biblioteca Node.js codificar en jPuppet.js
Desglose del código de Node de jPuppet.js
Primero, importa Puppeteer. Esto permite controlas Chrome de forma remota con Node.js:
import puppeteer from 'puppeteer';
A continuación, verifica qué argumentos de línea de comandos se pasaron a la aplicación de Node. Asegúrate de que el tercer argumento esté configurado, que representa una URL a la que navegar. Tú es necesario inspeccionar el tercer argumento porque los dos primeros llaman a Node y la secuencia de comandos que estamos ejecutando. En realidad, el tercer elemento contiene el primer elemento que se pasa al programa de Node:
const url = process.argv[2];
if (!url) {
throw "Please provide a URL as the first argument";
}
Ahora define una función asíncrona llamada runWebpage()
. Se creará un navegador
configurado con los argumentos de la línea de comandos para ejecutar la interfaz
binario de la manera en que necesitamos que WebGL y WebGPU funcionen como se describe en
Habilita la compatibilidad con WebGPU y WebGL.
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'
]
});
Crea un nuevo objeto de página del navegador que puedas usar más adelante para visitar cualquier URL:
const page = await browser.newPage();
Luego, agrega un objeto de escucha de eventos para escuchar los eventos console.log
cuando la página web
ejecuta JavaScript. Esto te permite registrar mensajes en la línea de comandos de Node
y también inspeccionar el texto de la consola en busca de una frase especial (en este caso,
captureAndEnd
) que activa una captura de pantalla y finaliza el proceso del navegador en
Nodo. Esto es útil para páginas web que necesitan realizar cierta cantidad de trabajo antes.
se puede tomar una captura de pantalla y tiene un tiempo no determinista
ejecución.
page.on('console', async function(msg) {
console.log(msg.text());
if (msg.text() === 'captureAndEnd') {
await page.screenshot({ path: '/content/screenshotEnd.png' });
await browser.close();
}
});
Por último, ordena a la página que visite la URL especificada y tome una captura de pantalla inicial cuando se carga la página.
Si eliges tomar una captura de pantalla de chrome://gpu
, puedes cerrar el navegador
de forma inmediata, en lugar de esperar un resultado de la consola, ya que esta página
no está controlado por tu propio código.
await page.goto(url, { waitUntil: 'networkidle2' });
await page.screenshot({path: '/content/screenshot.png'});
if (url === 'chrome://gpu') {
await browser.close();
}
}
runWebpage();
Modifica package.json
Habrás notado que usamos una declaración de importación al comienzo de la
jPuppet.js
. Tu package.json
debe establecer los valores de tipo como module
.
recibirás un error que indica que el módulo no es válido.
{
"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"
}
¡Eso es todo! Usar Puppeteer facilita la interacción con Chrome de forma programática.
Listo
Ahora podemos verificar que el Clasificador Fashion MNIST de TensorFlow.js reconocer correctamente un par de pantalones en una imagen, con el lado del cliente en el navegador con la GPU.
Puedes usar esto para cualquier carga de trabajo basada en GPU del cliente, desde aprendizaje automático modelos de AA hasta las pruebas de gráficos y juegos.
![Captura de pantalla de un nuevo Colab](https://developer.chrome.google.cn/static/docs/web-platform/webgpu/colab-headless/image/fashion-mnist-classifier.png?authuser=0000&hl=es)
Recursos
Agrega una estrella en el repositorio de GitHub para recibir actualizaciones en el futuro.