Optimiser les tests de modèles d'IA Web: GPU Web, WebGL et Chrome sans interface graphique

François Beaufort
François Beaufort

Bonne nouvelle ! Vous avez créé une application d'IA Web sympa qui exécute des modèles de machine learning directement sur l'appareil d'un utilisateur. Il s'exécute entièrement dans le navigateur Web côté client, sans passer par le cloud. Cet appareil améliore la confidentialité des utilisateurs, améliore les performances et réduit les coûts de manière significative.

Cependant, il y a un obstacle. Votre Le modèle TensorFlow.js peut fonctionner sur à la fois des CPU (WebAssembly) et des GPU plus puissants (via WebGL et WebGPU). La question est la suivante: comment pouvez-vous automatiser les tests des navigateurs de manière cohérente avec le matériel sélectionné ?

Le maintien de la cohérence est essentiel pour comparer des modèles de machine learning au fil du temps, à mesure que vous les itérez et les améliorez, avant le déploiement aux utilisateurs du monde réel à utiliser sur leur appareil.

Configurer un environnement de test cohérent avec des GPU peut s'avérer plus difficile comme prévu. Dans cet article de blog, nous allons partager les problèmes auxquels nous avons été confrontés et la façon dont nous les avons résolus, afin que vous puissiez améliorer les performances de votre application.

Ce n'est pas le cas pour les développeurs d'IA pour le Web. Si vous travaillez dans le jeu Web ou graphiques, ce post vous est également précieux.

Que contient notre boîte à outils d'automatisation ?

Voici ce que nous utilisons :

  • Environnement: Google Colab pour Linux notebook connecté à un T4 ou V100. Vous pouvez utiliser d'autres plates-formes cloud, telles que Google Cloud (GCP), si vous le souhaitez.
  • Navigateur: Chrome est compatible avec WebGPU, un puissant succès de WebGL, apporte au Web les avancées des API GPU modernes.
  • Automatisation: Puppeteer est une bibliothèque Node.js qui permet vous pouvez contrôler les navigateurs par programmation avec JavaScript. Avec Puppeteer, nous pouvons automatiser Chrome en mode headless, ce qui signifie que le navigateur s'exécute sans interface visible, sur un serveur. Nous utilisons la version améliorée nouveau mode headless, et non le ancien formulaire.

Vérifier l'environnement

Le meilleur moyen de vérifier si l'accélération matérielle est activée dans Chrome est de saisissez chrome://gpu dans la barre d'adresse. Vous pouvez effectuer l'équivalent avec Puppeteer de manière programmatique avec console.log ou enregistrer le rapport complet au format PDF pour le vérifier manuellement :

/* Incomplete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters: Expands later
const browser = await puppeteer.launch({
  headless: 'new',
  args:  ['--no-sandbox']
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({ path: './gpu.pdf' });

await browser.close();

Ouvrez chrome://gpu. Vous devriez obtenir les résultats suivants:

État des fonctionnalités graphiques
OpenGL : Désactivé
Vulkan: Désactivé
WebGL : Logiciel uniquement, accélération matérielle non disponible.
WebGL2: Logiciel uniquement, accélération matérielle non disponible.
WebGPU : Désactivé

Problèmes détectés :
WebGPU a été désactivé via la liste de blocage ou la ligne de commande.

Ce n'est pas un bon début. Il est assez clair que la détection matérielle a échoué. WebGL, WebGL2 et WebGPU sont désactivés ou uniquement logiciels. Mer ne sont pas les seuls à régler ce problème. De nombreuses discussions en ligne sur des personnes dans une situation similaire, y compris sur les canaux d'assistance officiels de Chrome (1), (2).

Activer la compatibilité avec WebGPU et WebGL

Par défaut, le navigateur sans interface graphique désactive le GPU. Pour l'activer sous Linux, appliquez tous les indicateurs suivants lorsque vous lancez Chrome sans tête :

  • L'option --no-sandbox désactive le bac à sable de sécurité de Chrome, qui isole le du reste du système. Exécuter Chrome en mode root sans ce bac à sable n'est pas pris en charge.
  • L'indicateur --headless=new exécute Chrome avec la nouvelle version améliorée mode headless, sans interface utilisateur visible.
  • L'indicateur --use-angle=vulkan demande à Chrome d'utiliser Backend Vulkan pour ANGLE, convertit les appels OpenGL ES 2/3 en appels d'API Vulkan.
  • L'option --enable-features=Vulkan active le backend graphique Vulkan pour la composition et la rastérisation dans Chrome.
  • L'option --disable-vulkan-surface désactive le vulkan VK_KHR_surface une extension d'instance. Au lieu d'utiliser une chaîne d'échange, Le paramètre Bit blit est utilisé pour afficher le résultat à l'écran.
  • L'indicateur --enable-unsafe-webgpu active l'API WebGPU expérimentale dans Chrome sur Linux et désactive la liste de blocage des adaptateurs.

Nous combinons maintenant toutes les modifications que nous avons apportées jusqu'à présent. Voici le script complet.

/* Complete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters
const browser = await puppeteer.launch({
  headless: 'new',
  args: [
    '--no-sandbox',
    '--headless=new',
    '--use-angle=vulkan',
    '--enable-features=Vulkan',
    '--disable-vulkan-surface',
    '--enable-unsafe-webgpu',
  ]
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});

await browser.close();

Exécutez à nouveau le script. Aucun problème WebGPU n'est détecté et la valeur passe de désactivée pour le logiciel uniquement.

État des fonctionnalités graphiques
OpenGL : Désactivé
Vulkan: Désactivé
WebGL : Logiciel uniquement, accélération matérielle non disponible.
WebGL2: Logiciel uniquement, accélération matérielle non disponible.
WebGPU: Logiciel uniquement, accélération matérielle non disponible.

Cependant, l'accélération matérielle n'est toujours pas disponible, le GPU NVIDIA T4 n'est pas détecté.

Installer les bons pilotes de GPU

Nous avons examiné plus en détail la sortie de chrome://gpu avec des experts en GPU. dans l'équipe Chrome. Nous avons détecté des problèmes avec les pilotes par défaut installés sur le Colab Linux ce qui entraîne des problèmes avec Vulkan, qui empêche Chrome de détecter GPU NVIDIA T4 au niveau GL_RENDERER, comme indiqué dans le résultat suivant. Ce entraîne des problèmes avec Headless Chrome.

La sortie par défaut ne détecte pas le GPU NVIDIA T4.
Informations sur le pilote
GL_RENDERER ANGLE (Google, Vulkan 1.3.0 (appareil SwiftShader (Subzero) (0x0000C0DE)), pilote SwiftShader-5.0.0)

L'installation des pilotes compatibles appropriés résout donc le problème.

Résultat mis à jour après l'installation des pilotes.
Informations sur le conducteur
GL_RENDERER ANGLE (NVIDIA Corporation, Tesla T4/PCIe/SSE2, OpenGL ES 3.2 NVIDIA 525.105.17)

Pour installer les pilotes appropriés, exécutez les commandes suivantes lors de la configuration. La Les deux dernières lignes vous aident à consigner les résultats de ce que les pilotes NVIDIA détectent avec vulkaninfo.

apt-get install -y vulkan-tools libnvidia-gl-525

// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary

Exécutez à nouveau le script. Vous obtenez le résultat suivant. 🎉

État des fonctionnalités graphiques
OpenGL : Activé
Vulkan: Activé
WebGL: Le matériel a accéléré, mais a réduit les performances.
WebGL2: Accélération matérielle, mais avec des performances réduites.
WebGPU: Le matériel a accéléré, mais a réduit les performances.

En utilisant les pilotes et les indicateurs appropriés lors de l'exécution de Chrome, nous disposons désormais de WebGPU et la compatibilité avec WebGL grâce au nouveau mode headless.

En coulisses: l'enquête de notre équipe

Après de nombreuses recherches, nous n'avons pas trouvé de méthodes de travail pour l'environnement que nous pour les exécuter dans Google Colab, bien qu'il y ait posts pleins d'espoir qui fonctionnait dans d'autres environnements, ce qui était prometteur. En fin de compte, nous n’étions pas ont pu répercuter leur succès dans l'environnement Colab NVIDIA T4, puisque nous avions principaux problèmes:

  1. Certaines combinaisons d'indicateurs permettent de détecter le GPU, mais ne vous permettent pas utilisent réellement le GPU.
  2. Exemples de solutions fonctionnelles proposées par des tiers qui utilisaient l'ancienne interface Chrome headless qui, à un moment donné, sera abandonnée au profit de nouvelle version. Nous avions besoin d'une solution qui ont travaillé avec la nouvelle version de Headless Chrome pour être mieux pérenne.

Nous avons confirmé le sous-utilisation du GPU en exécutant un exemple de page Web TensorFlow.js pour la reconnaissance d'images, dans lequel nous avons entraîné un modèle pour reconnaître des échantillons de vêtements (un peu comme un "Bonjour le monde" du machine learning).

Sur une machine standard, 50 cycles d'entraînement (appelés "épopées") doivent s'exécuter en moins d'une seconde chacun. Si vous appelez Chrome headless dans son état par défaut, nous pourrions consigner la sortie de la console JavaScript vers la ligne de commande Node.js côté serveur pour voir comment ces cycles d'entraînement prenaient réellement.

Comme prévu, chaque époque d'entraînement a pris beaucoup plus de temps que prévu (plusieurs secondes), ce qui suggère que Chrome est revenu à l'exécution du processeur JS au lieu d'utiliser le GPU :

Les époques d'entraînement évoluent à un rythme plus lent.
Figure 1: Capture en temps réel montrant le temps nécessaire à l'exécution de chaque époque d'entraînement (en secondes).

Après avoir corrigé les pilotes et utilisé la bonne combinaison d'indicateurs pour le mode headless Si vous exécutez à nouveau l'exemple d'entraînement TensorFlow.js dans Chrome, différentes époques d'entraînement.

La vitesse augmente pour les époques.
Figure 2: Capture en temps réel montrant l'accélération des époques

Résumé

L'IA Web a connu une croissance exponentielle depuis sa création en 2017. Grâce aux technologies de navigateur telles que WebGPU, WebGL et WebAssembly, les opérations mathématiques d'un modèle de machine learning peuvent être encore accélérées côté client.

En 2023, TensorFlow.js et MediaPipe Web ont enregistré plus d'un milliard de téléchargements des modèles et des bibliothèques : une étape historique et un signe de la façon dont le Web développeurs et ingénieurs s'orientent vers l'IA dans leur nouvelle génération des applications Web pour créer des solutions incroyables.

Une utilisation réussie implique de grandes responsabilités. À ce niveau d'utilisation dans les systèmes de production, il devient nécessaire de tester l'IA côté client, intégrée au navigateur dans un véritable environnement de navigation, tout en étant évolutifs, automatisables, et dans une configuration matérielle standardisée connue.

En exploitant la puissance combinée des fonctionnalités Headless Chrome et Puppeteer, peuvent tester ces charges de travail en toute confiance dans un environnement pour garantir des résultats cohérents et fiables.

Conclusion

Un guide par étapes est disponible dans les pays suivants : notre documentation afin que vous puissiez essayer la configuration complète par vous-même.

Si vous avez trouvé cela utile, faites-le savoir sur LinkedIn, X (anciennement Twitter) ou autre le réseau social que vous utilisez avec le hashtag #WebAI. Je serais ravi d'entendre vos commentaires pour que nous sachions comment écrire davantage de choses comme celle-ci à l'avenir.

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

Remerciements

Un grand merci à tous les membres de l'équipe Chrome qui ont aidé à déboguer le pilote et Les problèmes que nous avons rencontrés avec WebGPU dans le cadre de cette solution, en particulier grâce à Jecelyn Yeen et Alexandra White pour son aide à l'écriture de mots cet article de blog. Merci à Yuly Novikov, Andrey Kosyakov et Alex Rudenko, qui ont joué un rôle majeur pour créer la solution finale et fonctionnelle.