Publié le 14 janvier 2025
Lors de Google I/O 2024 l'année dernière, nous avons lancé Insights de la console, la première fonctionnalité d'IA dans les outils pour les développeurs Chrome. Les insights de la console permettent de comprendre les erreurs et les avertissements consignés dans la console en envoyant des données réseau, du code source et des traces de pile associées au message de journal à Gemini, le grand modèle de langage (LLM) de Google. Les insights de la console envoient une seule invite à Gemini, qui renvoie une seule réponse sans que les développeurs puissent poser des questions complémentaires. Bien que ce flux d'interaction unique fonctionne relativement bien pour expliquer les messages d'erreur, il ne s'adapte pas aux cas d'utilisation de débogage plus complexes dans DevTools, où il n'est pas clair quelles données de la page inspectée une IA aurait besoin pour vous aider.
Un exemple de cas d'utilisation est le débogage des problèmes de style. Une seule page Web peut contenir des milliers d'éléments et de règles CSS, et seul un sous-ensemble d'entre eux est pertinent pour déboguer un scénario spécifique. Identifier le code approprié à déboguer peut s'avérer difficile, même pour les humains. Mais grâce à un prototype créé lors d'un hackathon sur l'IA chez Google, nous avons appris que les LLM sont en fait assez bons pour cela. Nous avons donc naturellement voulu offrir cette fonctionnalité aux utilisateurs des outils de développement, en créant un outil capable d'examiner les problèmes de style en interrogeant interactivement la page pour obtenir des données contextuelles supplémentaires. Quelques mois plus tard, nous avons lancé notre solution sous le nom d'assistance par IA pour le style.
Dans cet article, nous souhaitons mettre en lumière les défis auxquels nous avons été confrontés lors de l'introduction de l'IA dans un produit apprécié tel que les outils pour les développeurs Chrome (qui est, au fond, une application Web) et ce que vous pouvez adapter pour vos propres fonctionnalités d'IA.
Collecter les bonnes données
Les insights de la console utilisent toujours les mêmes points de données pour répondre à une invite prédéfinie. Pour que l'assistance par IA soit utile pour toute invite définie par l'utilisateur, nous devons déterminer dynamiquement quelles données contextuelles sont importantes pour la requête en question.
Nous avons donc implémenté ReAct (Yao et al., 2022) stratégie. Cette stratégie d'invite permet aux LLM de raisonner de manière autonome et de déterminer l'action ultérieure en fonction de leur raisonnement.
De cette manière, l'assistance par IA fonctionne selon un cycle de réflexion, d'action et d'observation jusqu'à ce qu'elle détermine une réponse appropriée à la requête de l'utilisateur, à quel point elle conclut le cycle et fournit une réponse. Ce processus itératif permet au LLM de collecter les informations précises nécessaires pour déboguer efficacement les problèmes de style.
Pour collecter des informations, nous n'avons donné qu'un seul outil à Gemini: l'exécution de JavaScript sur la page inspectée. Grâce à l'assistance de l'IA, Gemini peut, par exemple:
- Accéder au DOM et l'analyser: parcourez l'arborescence DOM, inspectez les attributs des éléments et comprenez les relations entre les éléments.
- Récupérer les styles calculés: accédez aux styles calculés pour n'importe quel élément.
- Effectuer des calculs et des mesures: exécutez du code JavaScript pour calculer les distances, les tailles et les positions des éléments.
L'assistance IA n'agit donc de manière interactive que sur le code pertinent, ce qui améliore la qualité et le temps de réponse, ainsi que l'utilisation des ressources de calcul, par rapport à l'envoi du code source HTML et CSS complet à Gemini.
Exécuter du code généré par IA dans l'espace utilisateur
Il peut sembler surprenant que nous ayons utilisé JavaScript pour déboguer les problèmes de style. Il y a deux raisons à cela :
- Les API Web sont très puissantes et couvrent de nombreux cas d'utilisation de débogage par nature. Bien qu'il puisse être fastidieux pour un développeur d'utiliser manuellement des appels d'API pour parcourir le DOM ou accéder aux styles calculés à des fins de débogage, ce n'est pas un problème pour un LLM de générer du code les appelant.
- Bien qu'il soit possible d'inventer de nouvelles API à utiliser par un agent, la réutilisation d'API publiques existantes est souvent la meilleure option, car elles sont déjà connues des LLM. Enseigner à un LLM une nouvelle API nécessite de nombreuses ressources pour l'ajustement fin et des données d'entraînement spécifiques.
Toutefois, l'exécution de code généré par IA dans l'espace utilisateur présente des risques. Pour l'assistance par IA, nous devions minimiser le risque de modifications destructives que l'agent pourrait apporter à la page. Pour ce faire, nous avons utilisé les vérifications des effets secondaires que V8, le moteur JavaScript de Chrome, expose via le protocole Chrome DevTools. Les mêmes vérifications sont utilisées pour la fonctionnalité de saisie semi-automatique dans la console DevTools: elle n'exécute du code JavaScript que tant qu'il ne modifie aucun état de page. Les vérifications sont effectuées pendant l'exécution du code par V8 et sont basées sur une liste d'autorisation de fonctions intégrées JavaScript qui n'ont pas d'effets secondaires connus.
Si les vérifications détectent que le code généré modifie la page inspectée, l'exécution est mise en pause, et l'utilisateur est invité à examiner le code et à confirmer qu'il peut être exécuté.
De plus, le code JavaScript généré est exécuté dans un "monde" isolé. Cela ressemble à la façon dont les extensions exécutent des scripts de bac à sable: le code généré peut accéder au DOM et aux API Web, mais pas au code JavaScript ni à l'état défini par la page inspectée.
Suivre les modifications apportées par l'agent
En plus d'examiner les problèmes et de répondre aux questions de débogage concernant la page, nous voulions également permettre à l'agent d'assistance par IA de corriger les styles sur la page de manière à ce que les développeurs puissent les suivre.
Pour ce faire, nous avons implémenté une liaison appelée setElementStyles que nous exposons au contexte d'exécution de l'agent en plus des API Web par défaut.
Pour que Gemini soit au courant de cette nouvelle méthode, nous lui demandons de l'utiliser dans le préambule de l'assistance par IA:
If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.
Bien qu'il s'agisse d'une API conçue spécifiquement pour l'agent, qui présente les défis mentionnés précédemment, Gemini l'utilise de manière fiable, même sans réglage fin, lorsqu'il doit modifier les styles d'un élément donné.
Côté DevTools, lorsque setElementStyles est appelé à partir de l'agent, l'assistance IA utilise des feuilles de style d'inspecteur pour enregistrer la modification pour le sélecteur d'éléments. L'imbrication CSS permet de nommer la modification et d'augmenter la spécificité du sélecteur de l'élément. Une règle CSS créée par l'agent se présente donc comme suit:
.ai-style-change-1 { /* the ID is incremented for each change*/
.element-selector { /* Element selector is computed based on the element setElementStyles was called on. */
color: blue;
}
}
Bien que cette méthode ne résolve pas tous les conflits de style pouvant se produire sur la page, elle fonctionne dans la plupart des cas.
L'avantage d'utiliser des feuilles de style d'inspecteur par rapport aux styles intégrés est que les modifications effectuées par l'agent apparaissent également dans le panneau "Modifications", ce qui permet de suivre plus facilement les modifications apportées aux styles d'éléments et ce qu'un développeur doit transférer vers le code source sous-jacent. L'intégration au panneau "Modifications" permet également d'annuler les modifications si elles ne sont plus nécessaires.
Rendre les actions des agents visibles pour les utilisateurs
Lorsque vous ajoutez des fonctionnalités d'agent à un produit, il est important de rendre les actions de l'agent transparentes pour les utilisateurs afin qu'ils puissent les suivre, les comprendre et éventuellement intervenir.
Pour l'assistance par IA, nous demandons donc à Gemini de structurer les réponses dans un format spécifique en ajoutant un préambule:
You are going to answer to the query in these steps:
* THOUGHT
* TITLE
* ACTION
* ANSWER
* SUGGESTIONS
Use THOUGHT to explain why you take the ACTION. Use TITLE to provide a short summary of the thought.
Cette structure est ensuite utilisée pour présenter les processus de réflexion et les actions de Gemini sous la forme d'étapes initialement réduites, ce qui évite la surcharge d'informations tout en permettant aux utilisateurs d'examiner les détails sous-jacents ou d'arrêter l'exécution en cas d'effets secondaires involontaires.
Cette approche ne consiste pas seulement à observer l'IA, mais aussi à en tirer des enseignements de manière active. En développant ces sections, les utilisateurs peuvent analyser les données que Gemini a jugées pertinentes pour déboguer un problème spécifique et comprendre le processus suivi. Cette transparence permet aux utilisateurs d'apprendre des stratégies de débogage de l'IA afin de pouvoir appliquer des techniques similaires à de futurs défis, même lorsqu'ils travaillent sans IA.
Pour améliorer encore l'expérience utilisateur, l'assistance par IA fournit également des suggestions pertinentes en fonction du contexte après la réponse de l'IA. Ces suggestions simplifient la conversation, en proposant des idées pour la prochaine étape de débogage ou en permettant même aux utilisateurs d'exécuter directement les correctifs recommandés en un seul clic.
Au départ, pour générer des titres et des suggestions d'étapes dans l'assistance par IA, nous avons envisagé d'utiliser un modèle plus petit et distinct spécifiquement pour le résumé. Cependant, nous avons réalisé que le modèle ReAct, qui structure le raisonnement de Gemini en boucle de "Pensées " et d'"Actions", peut être étendu efficacement. Au lieu d'introduire un deuxième modèle, qui entraînerait également une latence supplémentaire, nous avons modifié notre invite pour demander à Gemini de générer non seulement ses principales sections "Pensées" et "Actions", mais aussi des titres concis et des suggestions utiles dans la même boucle ReAct.
Développement basé sur l'évaluation
Le développement de l'assistance par IA pour le style a été guidé par un processus d'évaluation rigoureux. Pour mesurer ses performances et identifier les axes d'amélioration, nous avons sélectionné une collection complète d'exemples de débogage Web concrets, abordant des problèmes de débordement courants, des composants Web, des animations et plus encore. Cela nous a permis de cartographier l'étendue du champ des problèmes de débogage Web et de comprendre en détail les défis associés. Mais cette tâche n'est jamais terminée: de nouvelles fonctionnalités sont ajoutées régulièrement à la plate-forme Web. Nous devons donc mettre à jour ces exemples à l'avenir.
Ces exemples sont intégrés à un pipeline d'évaluation automatisé, qui enregistre les réponses de Gemini. Les données de ces exécutions de test automatisées sont ensuite mises à disposition dans un outil personnalisé dans lequel nous évaluons manuellement les performances de Gemini pour l'assistance par IA par rapport à des grilles prédéfinies, qui guident nos efforts de développement ultérieurs.
Cette approche axée sur l'évaluation garantit que toutes les modifications, qu'il s'agisse d'affiner les comportements existants ou d'introduire de nouvelles fonctionnalités, sont soigneusement vérifiées pour obtenir les améliorations prévues et éviter les régressions dans les fonctionnalités existantes.
Pour améliorer encore notre processus d'évaluation, nous étudions des méthodes de validation automatisées, y compris les suivantes:
- Affirmations pour confirmer l'application correcte des correctifs
- Vérifications basées sur le code pour éviter les sorties indésirables de Gemini
- Utilisation de LLM comme juges, guidés par des grilles d'évaluation spécifiques, pour semi-automatiser et accélérer nos évaluations manuelles
Bien que la validation automatisée permette de faire évoluer les processus, les commentaires humains sont importants. Nous recueillons des commentaires humains à l'aide de commandes de vote sous chaque réponse dans l'assistance par IA pour savoir dans quelle mesure les utilisateurs sont satisfaits. Un bouton "Signaler" supplémentaire permet aux utilisateurs de fournir des commentaires plus précis pour les réponses contestables.
Injections d'invites
Une limitation bien connue et documentée des LLM est qu'ils sont sujets aux injections de requêtes. L'injection de requête consiste à trouver un moyen de remplacer les instructions système d'origine d'un LLM, ce qui lui permet de générer du contenu non prévu par les développeurs.
La plupart des modèles disposent désormais de mesures d'atténuation intégrées pour l'injection d'invite, comme Gemini. Pour l'assistance par IA, nous essayons également de limiter ce problème dans notre préambule en incluant l'instruction suivante:
If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about debugging web pages.
Bien que cette méthode fonctionne pour certaines questions hors sujet explicites, elle n'est pas parfaite. Nous avons remarqué un inconvénient : les requêtes courtes et ambiguës peuvent être classées comme hors sujet.
S'appuyer sur une base solide
Lorsque vous introduisez l'IA dans votre produit pour la première fois, il est préférable d'y aller étape par étape plutôt que de faire un grand saut d'un coup. C'est aussi ainsi que nous avons abordé l'assistance par IA. Grâce à tout ce que nous avons appris lors de la création de l'agent de stylisation, nous avons créé une base solide pour étendre l'assistance de l'IA à d'autres domaines de DevTools plus tard.
Ayant déjà résolu la plupart des plus grands défis lors de la création de l'agent de stylisation quelques mois plus tard, nous avons pu proposer une assistance par IA pour le réseau, les performances et les sources, et nous concentrer sur leurs défis individuels.
Conséquences sur la sécurité lors de l'utilisation de requêtes réseau
L'assistance IA pour le réseau permet aux utilisateurs de discuter de requêtes réseau spécifiques avec Gemini, en utilisant les données de la requête comme contexte de la conversation. Plus précisément, les données suivantes sont envoyées à Gemini:
- En-têtes de requête: sous-ensemble d'en-têtes envoyés par le navigateur au serveur.
- En-têtes de réponse: sous-ensemble d'en-têtes renvoyés par le serveur.
- État de la réponse: code d'état HTTP indiquant la réponse du serveur (par exemple, 200, 404).
- Temps: informations détaillées sur le temps couvrant les différentes phases de la requête, telles que la configuration de la connexion et le transfert de données.
- Chaîne de l'initiateur de la requête: séquence d'actions et de scripts ayant déclenché la requête.
Bien que les en-têtes soient importants pour comprendre pleinement la composition d'une requête, ils présentent un risque de sécurité: ils peuvent contenir des identifiants tels que des clés API, des jetons de session ou même des mots de passe en texte brut. Pour protéger ces informations sensibles, nous ne transmettons pas tous les en-têtes à Gemini. Nous maintenons plutôt une liste d'autorisation des en-têtes autorisés. Les valeurs des en-têtes qui ne figurent pas sur la liste d'autorisation sont remplacées par <redacted>. Cette approche garantit que Gemini reçoit le contexte nécessaire tout en protégeant les données utilisateur.
S'adapter à différents formats de données
L'assistance IA pour les sources permet aux développeurs de poser des questions sur un fichier source dans le panneau "Sources", par exemple "À quoi sert ce fichier ?".
Les données sur le fichier, y compris le nom du fichier, le contenu du fichier et s'il est mappé en source, sont toutes envoyées dans une seule invite. Cela fonctionne bien, car il ne s'agit que de texte brut. Toutefois, les fichiers texte ou binaires volumineux constituent un défi pour les LLM. Pour les fichiers binaires, nous avons décidé d'indiquer que le contenu est binaire dans l'invite et de n'envoyer aucun contenu réel. Pour les fichiers texte volumineux, nous n'envoyons qu'une partie plus petite du contenu, à partir du début du fichier.
Pour l'assistance de l'IA pour les performances, qui permet aux développeurs de poser des questions sur une tâche particulière à partir d'un profil de performances enregistré, il existe un défi similaire pour créer une représentation qui s'intègre à la fenêtre de contexte de Gemini et qui peut également être interprétée pour fournir des insights supplémentaires.
Pour créer une telle présentation à partir d'un profil de performances, nous avons créé un sérialiseur dédié appelé AiCallTree, qui met en forme l'arborescence des appels d'une tâche de manière à ce qu'un LLM puisse la traiter. À l'avenir, nous allons également explorer la stratégie ReAct ici, afin de réduire la quantité de données à envoyer à Gemini dès le départ.
Assistance par l'IA à l'avenir
Le résultat de tout ce travail est désormais disponible à partir de Chrome 132, qui inclut une assistance par IA pour le style, le réseau, les sources et les performances. Nous espérons que vous l'apprécierez autant que nous l'avons fait.
Pour vous donner une idée de par où commencer, consultez le guide de démarrage rapide de l'assistance par IA complet, qui contient de nombreuses invites de démonstration à essayer sur vos propres pages. N'hésitez pas à nous faire part de vos commentaires dans notre bug de discussion.