Tests de modèles d'IA Web dans Google Colab

Jason Mayes

François Beaufort

Configurer un environnement de test cohérent avec des GPU peut s'avérer plus difficile comme prévu. Voici les étapes à suivre pour tester des modèles d'IA côté client basés sur le navigateur dans de véritables environnements de navigation, tout en étant évolutif, automatisable et de configuration matérielle standardisée connue.

Dans cet exemple, le navigateur est un véritable navigateur Chrome avec une prise en charge matérielle, par opposition à l'émulation logicielle.

Que vous soyez développeur d'applications Web, de jeux vidéo ou de graphismes, ou que vous soyez si vous souhaitez tester des modèles d'IA pour le Web, ce guide s'adresse à vous.

Étape 1: Créez un notebook Google Colab

</ph>

Étape 2: Connectez-vous à un serveur compatible GPU T4

1. Cliquez sur Connecter arrow_drop_down en haut à droite du notebook.
2. Sélectionnez Modifier le type d'environnement d'exécution: <ph type="x-smartling-placeholder">

   </ph>

3. Dans la fenêtre modale, sélectionnez T4 GPU (GPU T4) en tant qu'accélérateur matériel. Lorsque vous vous connecterez, Colab utilisera une instance Linux associée à un GPU NVIDIA T4. <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

   </ph>

4. Cliquez sur Enregistrer.
5. Cliquez sur le bouton Connecter pour vous connecter à votre environnement d'exécution. Après un certain temps, présente une coche verte, ainsi que des graphiques d'utilisation de la RAM et du disque. Ce message indique qu'un serveur a été créé avec votre configuration requise matériel.

Bravo ! Vous venez de créer un serveur avec un GPU associé.

Étape 3: Installez les pilotes et les dépendances appropriés

1. Copiez et collez les deux lignes de code suivantes dans la première cellule de le notebook. Dans un environnement Colab, l'exécution en ligne de commande est précédée de la mention un point d'exclamation.

   !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
   

   • Vous pouvez inspecter le script sur GitHub. pour voir le code brut de la ligne de commande que ce script exécute.

   # 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. Cliquez sur play_circle à côté de la cellule à exécuter le code.

   <ph type="x-smartling-placeholder">

   </ph>

3. Une fois l'exécution du code terminée, vérifiez que nvidia-smi a affiché quelque chose. semblable à la capture d'écran suivante pour confirmer que vous disposez bien d'un GPU et il est reconnu sur votre serveur. Vous devrez peut-être faire défiler la page jusqu'à une date antérieure dans les journaux pour afficher ce résultat.

   <ph type="x-smartling-placeholder">

   </ph>

Étape 4: Utilisez et automatisez le fonctionnement sans interface graphique de Chrome

1. Cliquez sur le bouton Code add pour ajouter un nouveau la cellule de code.
2. Vous pouvez ensuite écrire votre code personnalisé pour appeler un projet Node.js avec votre vos paramètres préférés (ou appelez simplement google-chrome-stable directement dans ligne de commande). Nous avons des exemples pour les deux suivantes.

Partie A: Utiliser Chrome sans interface graphique directement dans la ligne de commande

# 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

Dans l'exemple, nous avons stocké la capture PDF obtenue dans /content/gpu.pdf. À affichez ce fichier, développez la section content folder. Cliquez ensuite sur more_vert pour télécharger le PDF sur votre ordinateur local.

</ph>

Partie B: Commander Chrome avec Puppeteer

Nous avons fourni un exemple minimaliste utilisant Puppeteer pour contrôler Headless Chrome. qui peut s'exécuter comme suit:

# 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

Dans l'exemple jPuppet, nous pouvons appeler un script Node.js pour créer capture d'écran. Mais comment cela fonctionne-t-il ? Regardez cette démonstration de Node.js dans jPuppet.js ;

Répartition du code du nœud jPuppet.js

Commencez par importer Puppeteer. Cela permet de contrôler Chrome à distance avec Node.js:

import puppeteer from 'puppeteer';

Vérifiez ensuite quels arguments de ligne de commande ont été transmis à l'application Node. Assurez-vous que le troisième argument est défini (il représente une URL à laquelle accéder). Toi Vous devez examiner le troisième argument, car les deux premiers appellent "Node" et le script que nous exécutons. Le 3e élément contient en fait le 1er transmis au programme du nœud:

const url = process.argv[2];
if (!url) {
  throw "Please provide a URL as the first argument";
}

Définissez maintenant une fonction asynchrone nommée runWebpage(). Cela crée un navigateur configuré avec les arguments de ligne de commande pour exécuter binaire de manière à assurer le fonctionnement de WebGL et WebGPU Activez la compatibilité avec WebGPU et 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'
      ]
  });

Créez un objet "Page" de navigateur que vous pourrez utiliser ultérieurement pour accéder à n'importe quelle URL:

const page = await browser.newPage();

Ajoutez ensuite un écouteur d'événements pour écouter les événements console.log lorsque la page Web exécute JavaScript. Cela vous permet de journaliser les messages sur la ligne de commande du nœud et rechercher une expression spéciale dans le texte de la console (dans ce cas, captureAndEnd) qui déclenche une capture d'écran, puis met fin au processus du navigateur dans Node.js. Cette fonctionnalité est utile pour les pages Web qui doivent effectuer certaines tâches avant peut faire une capture d'écran, avec une durée non déterministe de l'exécution.

page.on('console', async function(msg) {
  console.log(msg.text());
  if (msg.text() === 'captureAndEnd') {
    await page.screenshot({ path: '/content/screenshotEnd.png' });
    await browser.close();
  }
});

Enfin, commandez la page pour accéder à l'URL spécifiée et récupérer une une capture d'écran initiale une fois la page chargée.

Si vous choisissez de faire une capture d'écran de chrome://gpu, vous pouvez fermer le navigateur immédiatement au lieu d'attendre les résultats de la console, car cette page ne sont pas contrôlés par votre propre code.

  await page.goto(url,  { waitUntil: 'networkidle2' });
  await page.screenshot({path: '/content/screenshot.png'});
  if (url === 'chrome://gpu') {
    await browser.close();
  }
}
runWebpage();

Modifier package.json

Vous avez peut-être remarqué que nous utilisions une instruction d'importation au début du jPuppet.js. Votre package.json doit définir les valeurs de type sur module, ou vous obtenez une erreur indiquant que le module n'est pas valide.

 {
    "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"
}

C'est aussi simple que cela. Puppeteer facilite l'interface avec Chrome par programmation.

Opération réussie

Nous pouvons maintenant vérifier que Classeur TensorFlow.js Fashion MNIST peut reconnaître correctement un pantalon sur une image, les images dans le navigateur à l'aide du GPU.

Vous pouvez l'utiliser pour toutes les charges de travail basées sur des GPU côté client, du machine learning aux tests de graphismes et de jeux.

</ph>

Ressources

Ajouter une étoile au dépôt GitHub pour recevoir les futures mises à jour.