Bonne nouvelle ! Vous avez créé une application d'IA Web intéressante qui exécute des modèles de machine learning directement sur l'appareil d'un utilisateur. Il s'exécute entièrement sur le navigateur Web côté client, sans passer par le cloud. Cette conception sur l'appareil améliore la confidentialité des utilisateurs, améliore les performances et réduit considérablement les coûts.
Il y a toutefois un obstacle. Votre modèle TensorFlow.js peut fonctionner à la fois sur des processeurs (WebAssembly) et sur des GPU plus puissants (via WebGL et WebGPU). La question est la suivante : comment automatiser de manière cohérente les tests des navigateurs avec le matériel sélectionné ?
La cohérence est essentielle pour comparer les performances d'un modèle de machine learning au fil du temps à mesure que vous l'itérez et l'améliorez avant son déploiement.
Configurer un environnement de test cohérent avec des GPU peut s'avérer plus difficile que 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.
Cette fonctionnalité n'est pas réservée aux développeurs Web AI. Si vous travaillez sur des jeux en ligne ou des graphismes, cet article est également important pour vous.
Que contient notre boîte à outils d'automatisation ?
Voici ce que nous utilisons:
- Environnement: notebook Google Colab basé sur Linux connecté à un GPU NVIDIA T4 ou V100. Si vous préférez, vous pouvez utiliser d'autres plates-formes cloud, telles que Google Cloud (GCP).
- Navigateur: Chrome est compatible avec WebGPU, un puissant successeur de WebGL, qui bénéficie des avancées des API modernes de GPU sur le Web.
- Automatisation: Puppeteer est une bibliothèque Node.js qui vous permet de contrôler les navigateurs de manière automatisée avec JavaScript. Puppeteer permet d'automatiser Chrome en mode sans interface graphique, ce qui signifie que le navigateur s'exécute sur un serveur sans interface visible. Nous utilisons le nouveau mode sans interface graphique amélioré, et non l'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 saisir chrome://gpu dans la barre d'adresse. Vous pouvez par programmation effectuer l'équivalent avec Puppeteer 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ée |
| Vulkan: | Désactivée |
| WebGL: | Logiciel uniquement, accélération matérielle indisponible. |
| WebGL2: | Logiciel uniquement, accélération matérielle indisponible. |
| WebGPU: | Désactivée |
|
Problèmes détectés. |
|
Ce n'est pas un bon début. Il est assez clair que la détection matérielle ne fonctionnait pas. WebGL, WebGL2 et WebGPU sont essentiellement désactivés ou exclusivement logiciels. Nous ne sommes pas les seuls à s'attaquer à ce problème : de nombreuses discussions en ligne ont lieu à propos de personnes se trouvant dans une situation similaire, y compris sur les canaux d'assistance officiels de Chrome (1) et (2).
Activer la compatibilité avec WebGPU et WebGL
Par défaut, Chrome sans interface graphique désactive le GPU. Pour l'activer sous Linux, appliquez tous les indicateurs suivants lors du lancement de Chrome sans interface graphique:
- L'option
--no-sandboxdésactive le bac à sable de sécurité de Chrome, qui isole le processus du navigateur du reste du système. Il n'est pas possible d'exécuter Chrome en mode root sans ce bac à sable. - L'option
--headless=newexécute Chrome avec le nouveau mode sans interface graphique amélioré, sans interface utilisateur visible. - L'option
--use-angle=vulkanindique à Chrome d'utiliser le backend Vulkan pour ANGLE, qui convertit les appels OpenGL ES 2/3 en appels d'API Vulkan. - L'indicateur
--enable-features=Vulkanactive le backend graphique Vulkan pour la composition et la rastérisation dans Chrome. - L'option
--disable-vulkan-surfacedésactive l'extension d'instance vulkanVK_KHR_surface. Au lieu d'utiliser une chaîne de permutation, le bit blit est utilisé pour le résultat de rendu à l'écran. - L'indicateur
--enable-unsafe-webgpuactive l'API expérimentale WebGPU dans Chrome sous 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é" à "Logiciel uniquement".
| État des fonctionnalités graphiques | |
|---|---|
| OpenGL: | Désactivée |
| Vulkan: | Désactivée |
| WebGL: | Logiciel uniquement, accélération matérielle indisponible. |
| WebGL2: | Logiciel uniquement, accélération matérielle indisponible. |
| WebGPU: | Logiciel uniquement, accélération matérielle indisponible. |
Toutefois, l'accélération matérielle n'est toujours pas disponible, et le GPU NVIDIA T4 n'est pas détecté.
Installer les bons pilotes de GPU
Nous avons examiné plus en détail le résultat de chrome://gpu, en collaboration avec certains experts GPU de l'équipe Chrome. Nous avons détecté des problèmes avec les pilotes par défaut installés sur l'instance Colab Linux, entraînant des problèmes avec Vulkan, empêchant Chrome de détecter le GPU NVIDIA T4 au niveau GL_RENDERER, comme illustré dans le résultat suivant. Cela entraîne des problèmes avec le mode sans interface graphique de Chrome.
| Informations sur le conducteur | |
|---|---|
| GL_RENDERER | ANGLE (Google, Vulkan 1.3.0 (appareil SwiftShader (Subzero) (0x0000C0DE)), SwiftShader driver-5.0.0) |
L'installation des pilotes compatibles permet donc de résoudre le problème.
| 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. Les deux dernières lignes vous aident à consigner les sorties que les pilotes NVIDIA détectent avec vulkaninfo.
apt-get install -y vulkan-tools libnvidia-gl-525// Verify the NVIDIA drivers detects along with vulkaninfonvidia-smivulkaninfo --summary
Exécutez à nouveau le script. Nous obtenons le résultat suivant. 🎉
| État des fonctionnalités graphiques | |
|---|---|
| OpenGL: | Activé |
| Vulkan: | Activé |
| WebGL: | Accélération matérielle, mais avec des performances réduites. |
| WebGL2: | Accélération matérielle, mais avec des performances réduites. |
| WebGPU: | Accélération matérielle, mais avec des performances réduites. |
Grâce à l'utilisation des pilotes et des indicateurs appropriés lors de l'exécution de Chrome, la compatibilité avec WebGPU et WebGL est assurée via le nouveau mode sans interface graphique.
Dans les 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 devions mettre en œuvre dans Google Colab, bien que quelques posts "espérants" aient fonctionné dans d'autres environnements, ce qui s'est avéré prometteur. En fin de compte, nous n'avons pas pu reproduire cette réussite dans l'environnement Colab NVIDIA T4, car nous avons rencontré deux problèmes clés:
- Certaines combinaisons d'indicateurs permettent la détection du GPU, mais ne vous permettent pas de l'utiliser réellement.
- Des exemples de solutions tierces fonctionnelles utilisaient l'ancienne version sans interface graphique de Chrome, qui sera à un moment abandonnée au profit de la nouvelle version. Nous avions besoin d'une solution qui fonctionnait avec la nouvelle version de Chrome sans interface graphique pour être mieux adaptée à l'avenir.
Nous avons confirmé la sous-utilisation du GPU en exécutant un exemple de page Web TensorFlow.js pour la reconnaissance d'image, dans lequel nous avons entraîné un modèle à reconnaître des échantillons de vêtements (un peu comme un "hello world" de machine learning).
Sur une machine standard, 50 cycles d'entraînement (appelés "époques") doivent s'exécuter en moins d'une seconde chacun. En appelant le mode sans interface graphique de Chrome dans son état par défaut, nous avons pu consigner la sortie de la console JavaScript dans la ligne de commande Node.js côté serveur pour voir à quelle vitesse 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 simple d'un ancien processeur JS au lieu d'utiliser le GPU:
Après avoir corrigé les pilotes et utilisé la bonne combinaison d'indicateurs pour Chrome sans interface graphique, réexécuter l'exemple d'entraînement TensorFlow.js permet d'accélérer les époques d'entraînement.
Résumé
L'IA sur le Web a connu une croissance exponentielle depuis sa création en 2017. Avec des 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 franchi plus d'un milliard de téléchargements de modèles et de bibliothèques, un jalon historique qui témoigne de la façon dont les développeurs et ingénieurs Web adoptent l'IA dans leurs applications Web de nouvelle génération pour concevoir des solutions vraiment incroyables.
Une utilisation réussie implique de grandes responsabilités. À ce niveau d'utilisation dans les systèmes de production, il est nécessaire de tester les modèles d'IA côté client basés sur un 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 nouveaux outils Headless Chrome et Puppeteer, vous pouvez tester ces charges de travail en toute confiance dans un environnement standardisé et reproductible, et obtenir ainsi des résultats cohérents et fiables.
Synthèse
Un guide par étapes est disponible dans notre documentation. Vous pouvez ainsi tester la configuration complète vous-même.
Si vous avez trouvé cela utile, n'hésitez pas à nous en faire part sur LinkedIn, X (anciennement Twitter) ou tout autre réseau social que vous utilisez en utilisant le hashtag #WebAI. N'hésitez pas à nous faire part de vos commentaires afin que nous puissions écrire d'autres contenus de ce type à l'avenir.
Ajoutez une étoile au dépôt GitHub pour être informé des prochaines mises à jour.
Remerciements
Un grand merci à tous les membres de l'équipe Chrome qui ont aidé à déboguer les problèmes de pilote et WebGPU que nous avons rencontrés dans cette solution. Un grand merci à Jecelyn Yeen et Alexandra White pour leur aide dans cet article de blog. Merci à Yuly Novikov, Andrey Kosyakov et Alex Rudenko, qui ont joué un rôle déterminant dans la création de la solution finale qui fonctionne.