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

Jason Mayes
François Beaufort
François Beaufort
GitHub

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

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

1. Accédez à colab.new pour créer un notebook Colab. Il doit ressembler à la figure 1. 2. Suivez les instructions pour vous connecter à votre compte Google. <ph type="x-smartling-placeholder">
</ph> Capture d&#39;écran d&#39;un nouveau Colab
Figure 1: Nouveau notebook Colab

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

  1. Cliquez sur Connecter en haut à droite du notebook.
  2. Sélectionnez Modifier le type d'environnement d'exécution: <ph type="x-smartling-placeholder">
    </ph> Capture d&#39;écran en gros plan montrant les étapes à suivre pour modifier l&#39;environnement d&#39;exécution.
    Figure 2 : Modifiez l'environnement d'exécution dans l'interface Colab.
  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> Capture d&#39;écran du module &quot;Modifier le type d&#39;exécution&quot;.
    Figure 3: Dans l'accélérateur matériel, sélectionnez T4 GPU (GPU T4).
  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

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

    <ph type="x-smartling-placeholder">
    </ph> Capture d&#39;écran d&#39;un nouveau Colab
    Figure 4.

  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>
    Figure 5: Recherchez le résultat qui commence par "NVIDIA-SMI".

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

  1. Cliquez sur le bouton Code 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 . Cliquez ensuite sur pour télécharger le PDF sur votre ordinateur local.

<ph type="x-smartling-placeholder">
</ph> Capture d&#39;écran d&#39;un nouveau Colab
Figure 6: Suivez les étapes indiquées pour télécharger le PDF dans cette capture d'écran de l'interface Colab.

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.

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

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 type="x-smartling-placeholder">
</ph> Capture d&#39;écran d&#39;un nouveau Colab
Figure 7: Capture réussie d'un modèle TensorFlow.js accéléré par GPU capable de reconnaître les vêtements côté client dans le navigateur en temps réel

Ressources

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