Pruebas de modelos de IA web en Google Colab

Jason Mayes
François Beaufort
François Beaufort
GitHub

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
Figura 1: Un notebook de Colab nuevo.

Paso 2: Conéctate a un servidor habilitado para GPU T4

  1. Haz clic en Conectar cerca de la esquina superior derecha del notebook.
  2. Selecciona Cambiar tipo de entorno de ejecución:
    Captura de pantalla en primer plano que muestra los pasos para cambiar el entorno de ejecución.
    Figura 2: Cambiar el entorno de ejecución en la interfaz de Colab
  3. 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.
    Captura de pantalla del módulo Cambiar tipo de entorno de ejecución.
    Figura 3: En Acelerador de hardware, selecciona GPU T4.
  4. Haz clic en Guardar.
  5. 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

  1. 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

    # 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

  2. Haz clic en junto a la celda para ejecutar el código.

    Captura de pantalla de un nuevo Colab
    Figura 4:

  3. 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

  1. Haz clic en el botón Code para agregar uno nuevo. de la celda de código.
  2. 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
Figura 6: Mira los pasos para descargar el PDF en esta captura de pantalla de la interfaz de Colab.

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
Figura 7: Captura exitosa de un modelo de TensorFlow.js acelerado con GPU capaz de reconocer el lado del cliente de ropa en el navegador en tiempo real

Recursos

Agrega una estrella en el repositorio de GitHub para recibir actualizaciones en el futuro.