Les composants IA
sont la nouveauté phare de
la version 5.0 du SDK JavaScript d'ArcGIS. Intégrés à vos applications cartographique, ils ont pour but d'aider vos
utilisateurs à naviguer dans vos cartes et vos données via des interactions en
langage naturel. Ainsi, les agents que vous pouvez ajouter à vos applications
les rendent plus simples à explorer et à comprendre, notamment pour des
utilisateurs finaux qui ne seraient pas habitués à manipuler des données
géographiques. Dans cet article, je vous propose de découvrir ensemble ces agents : quelles
tâches peuvent-ils effectuer, comment les intégrer à son application
et comment préparer au mieux ses données pour un fonctionnement
optimal.
Préparation des données
A l'heure actuelle, les agents sont capables d'interroger uniquement des
couches d'entités hébergées, intégrées à une webmap. Vous pouvez ajouter
d'autres types de couches dans votre carte, mais ils ne seront pas pris en
compte par les agents.
Métadonnées
Une fois
votre webmap configurée, la première étape pour permettre aux agents de fonctionner est de
compléter les métadonnées. Plus vos métadonnées seront complètes, plus
les agents comprendront rapidement à quoi servent les données, sur quels
champs ils peuvent s'appuyer pour répondre à vos questions, etc. Les
métadonnées doivent êtres remplies à différents niveaux :
- Les feature layers et chacune de leurs couches : description, résumé, titre, balises ;
- Les champs des couches : noms, alias et description clairs.
On le sait, modifier les métadonnées, c'est long, parfois laborieux, et loin
d'être l'activité favorite de tout le monde. Surtout si vos couches
contiennent de nombreux champs. ArcGIS intègre depuis récemment un assistant
IA permettant de vous épauler dans cette étape. Dans le feature layer et
dans les couches, trouverez une nouvelle option "Suggérer", qui va analyser
vos données pour proposer automatiquement un titre, une description, un
résumé et des balises. Vous pouvez ensuite les passer en revue, les modifier
et les affiner si nécessaire, puis les appliquer.
De la même manière, vous retrouverez une option similaire au niveau des
champs, qui vous permettra de suggérer un nom d'affichage, une description
et un type de valeur.
Pour modifier les métadonnées, vous devez être propriétaire ou avoir accès
en écriture aux couches d'entités. Notez que si ça n'est pas le cas, vous
pouvez tout de même intégrer les couches à votre carte. Si les métadonnées
sont incomplètes, le LLM les génèrera lui-même à l'étape suivante,
permettant tout de même aux agents de questionner la couche. Cependant, ces
métadonnées ne seront pas persistantes, et vous n'y aurez pas accès ; vous
ne pourrez donc pas contrôler comment le contenu de vos couches a été
interprété.
Embeddings
Après avoir complété les métadonnées, il faut générer les embeddings
de la carte.
En quelques mots, cette opération consiste à transformer le contenu de la
webmap en vecteurs numériques. Lorsque vous poserez une question à
l’assistant, elle sera elle aussi convertie en vecteurs, que l’agent compare à
ceux de la webmap pour rechercher les similarités et ainsi identifier
rapidement les réponses les plus pertinentes.
Pour générer les embeddings, rendez-vous dans les paramètres de votre webmap,
puis cliquez sur le bouton "Générer les intégrations" tout en bas de la page.
Autres bonnes pratiques
Si les résultats des agents ne vous semble pas optimaux, plusieurs bonnes
pratiques peuvent être observées pour améliorer les résultats :
- Ne pas inclure trop de couches ne rentrant pas dans les cas d'usages pour lesquelles vous souhaitez questionner l'agent. Ces couches diminuent ses performances.
- Conserver uniquement les champs de la couche pertinents pour une interaction avec l'agent. Cela peut être fait en se servant d'une vue par exemple. Préférer des couches avec une seule thématique précise qu'une couche contenant beaucoup d'informations de différentes natures.
Présentation des Agents et du composant Assistant
Assistant
Le composant <arcgis-assistant> fournit l'interface de
discussion permettant aux utilisateurs finaux d’interagir avec une webmap via
un ou plusieurs agents.
Qu'est-ce qu'un agent ?
Les agents traitent les entrées en langage naturel à l’aide d’un grand modèle
de langage (LLM) afin de générer des réponses, soit sous forme de texte, soit
en exécutant un outil ou une action qui interagit avec la carte.
En coulisses, les agents sollicitent le LLM pour déterminer l’intention de l’utilisateur, définir les paramètres des outils ou résumer des informations. Bien que les appels au LLM soient effectués côté serveur, le SDK JavaScript Maps définit et exécute la logique principale des agents dans le navigateur, permettant ainsi des interactions performantes entre les utilisateurs et l’application cliente.
En coulisses, les agents sollicitent le LLM pour déterminer l’intention de l’utilisateur, définir les paramètres des outils ou résumer des informations. Bien que les appels au LLM soient effectués côté serveur, le SDK JavaScript Maps définit et exécute la logique principale des agents dans le navigateur, permettant ainsi des interactions performantes entre les utilisateurs et l’application cliente.
D'un point de vue fondamental, les agents possèdent les composants suivants :
- Les prompts système sont des instructions qui guident le comportement de l'agent et ses réponses. Ils sont définis par le créateur de l'agent, et l'utilisateur final n'a pas la main dessus.
- Le contexte rassemble les informations sur lesquelles s'appuie l'assistant pour générer des réponses. Dans le cas des agents ArcGIS, il s'agit des données issues de la webmap.
- Les outils sont des fonctions prédéfinies que l'agent peut utiliser pour interagir avec la carte ou réaliser des tâches spécifiques. Ici, ces outils s'appuient sur les fonctionnalités du SDK JavaScript d'ArcGIS pour interroger des couches, ou effectuer un zoom ou un déplacement.
- L'agent génère un résultat en fonction de l'intention de l'utilisateur. Il peut s'agir d'une simple réponse textuelle ou de l'exécution d'un outil interagissant avec la carte.
Le SDK JavaScript d'ArcGIS possède actuellement 3 agents prêts à l'emploi, et
vous offre également la capacité d'intégrer vos propres agents personnalisés.
Notez que les agents personnalisés peuvent se baser sur le LLM de votre choix,
à condition de mettre en place votre propre backend pour accéder à ces LLM.
Cependant, vous ne pouvez pas changer le LLM utilisé par les agents prêts à
l'emploi et l'orchestrateur (dont nous reparlerons après).
Agent de navigation
L’agent de navigation permet à l’utilisateur de se déplacer vers différentes
zones d’une webmap. Cela inclut la navigation vers une adresse ou un nom de
lieu, l’emprise d’une couche, des entités au sein d’une couche, des géosignets
de la webmap ou encore des coordonnées.
Consultez la documentation de
l’agent de navigation
pour plus de détails sur ses capacités, ses limites et des exemples
d’interactions utilisateur.
Agent d'exploration des données
L’agent d’exploration des données permet à l’utilisateur d’interroger des
entités et des statistiques à partir des attributs et de la géométrie d’une
couche de la webmap. Il permet également de filtrer visuellement les données
sur la carte.
Consultez la documentation de
l’agent d’exploration
des données pour plus de détails sur ses capacités, ses limites et des
exemples d’interactions utilisateur.
Agent d'aide
L’agent d’aide fournit des indications sur les capacités de l’assistant, les
agents qui y sont associés, et peut répondre à des questions générales sur
les données présentes dans la webmap. Les utilisateurs peuvent interroger
cet agent sur la carte et sur les fonctionnalités de l’assistant.
Consultez la documentation de
l’agent d’assistance
pour plus de détails sur ses capacités, ses limites et des exemples
d’interactions utilisateur.
Agents personnalisés
En complément des agents fournis par le SDK JavaScript Maps, les développeurs
peuvent créer des
agents personnalisés
afin d’étendre les capacités du composant <arcgis-assistant>. Un
agent personnalisé peut par exemple proposer des analyses de données
spécifiques, s’intégrer à des services externes, ou répondre à des
besoins métiers propres à une application.
Par exemple, dans la vidéo ci-dessous, un agent personnalisé calcule un temps
de trajet à partir d’une instruction en langage naturel.
Si votre assistant doit effectuer plusieurs actions de natures différentes, une
bonne pratique pour maximiser les performances de vos agents est de créer des
agents très spécialisés dans une tâches puis de tous les implémenter dans
l'assistant, plutôt que de créer un seul agent devant s'occuper de tout. Pour en
savoir plus sur la création d’agents personnalisés, consultez
la documentation, qui inclut des liens vers le code de cet exemple et d’autres cas d’usage.
Orchestration des agents
Lorsqu’un utilisateur soumet une requête en langage naturel, le composant
<arcgis-assistant> utilise un agent d’orchestration (ou
orchestrateur) qui détermine l’intention de l’utilisateur. Cette
intention permet de rediriger les différentes parties de la requête vers le ou
les agent appropriés, en fonction du contenu de la requête et des capacités
des agents. Les agents génèrent ensuite des réponses selon leurs
fonctionnalités et les renvoient au composant Assistant, qui les affiche dans
l’interface de chat ou exécute l’action correspondante sur la carte.
Dans l'exemple ci-dessous, pour ma demande "Quels accidents ont eu lieu dans
un rayon de 100 mètres autour du 2 Place Marcel Sembat ?", l'orchestrateur
identifie que parmi les agents qu'il a a disposition, il devra utiliser
l'agent de navigation pour géocoder et zoomer sur l'adresse demandée, puis
l'agent d'exploration des données pour requêter les données correspondant à la
demande.
Intégration dans une application
Pour ma part, je vais créer une application pour interroger les données
d'accidents corporels de la circulation routière dans les Hauts-de-Seine de
2006 à 2021, produites par le département des Hauts-de-Seine. Je les ai
préparées dans
cette webmap, j'ai rempli les métadonnées des couches et généré les embeddings. Vous
pouvez enregistrer cette webmap sur votre organisation et regénérer les
embeddings pour tester par vous-même, ou essayer avec vos propres
données.
Intégration de base
Pour intégrer les composants d'IA, vous devez importer la version 5.0 du SDK
JavaScript, puis ajouter la webmap et le composant <arcgis-assistant> à
votre application. Notez qu'il faut ajouter un id au composant webmap, pour
ensuite pouvoir le référencer dans l'assistant en tant que reference-element.
Pour fonctionner, l'assistant doit contenir au moins un agent, mais vous
pouvez en rajouter autant que vous le souhaitez. Dans mon exemple, j'ai ajouté
les 3 agents préconfigurés.
<arcgis-map id="map" item-id="07341efe8c47428a8caeee89bf16e0d3">
</arcgis-map>
<arcgis-assistant reference-element="#map">
<arcgis-assistant-navigation-agent></arcgis-assistant-navigation-agent>
<arcgis-assistant-data-exploration-agent></arcgis-assistant-data-exploration-agent>
<arcgis-assistant-help-agent></arcgis-assistant-help-agent>
</arcgis-assistant>
L'ajout du composant <arcgis-assistant> ajoute automatiquement une
demande d'authentification, même si votre carte est partagée en public. En
effet, il est pour l'instant utilisable uniquement par un utilisateur
authentifié avec un compte ArcGIS Online. Si l'utilisateur ne se connecte pas,
il peut avoir accès à la carte selon son niveau de partage, mais s'il pose une
question à l'assistant, celui-ci ne s'activera pas.
Voici à quoi ressemble le code complet, avec
les éléments d'UI de Calcite pour permettre une mise en page propre (notez que pour avoir
l'interface de l'assistant en français, il suffit de rajouter l'attribut
lang="fr" au <body>. ) :
<body class="calcite-mode-light" lang="fr">
<calcite-shell>
<arcgis-map id="map" item-id="07341efe8c47428a8caeee89bf16e0d3">
</arcgis-map>
<calcite-shell-panel slot="panel-end" width="l" id="assistant-panel">
<calcite-panel>
<arcgis-assistant reference-element="#map" heading="Accidents corporels de 2006 à 2021">
<arcgis-assistant-navigation-agent></arcgis-assistant-navigation-agent>
<arcgis-assistant-data-exploration-agent></arcgis-assistant-data-exploration-agent>
<arcgis-assistant-help-agent></arcgis-assistant-help-agent>
</arcgis-assistant>
</calcite-panel>
</calcite-shell-panel>
</calcite-shell>
</body>
En quelques lignes, on obtient une application que l'utilisateur peut
interroger en langage naturel :
Configurations supplémentaires de l'assistant
Dans un premier temps, je souhaite donner davantage d'informations sur les
capacités de l'assistant à l'utilisateur final. Nous pouvons modifier l'entête
(heading), et ajouter un description (description) et des suggestions de prompt (suggestedPrompts). Vous pouvez le faire en modifiant les attributs des balises HTML :
<arcgis-assistant reference-element="#map" heading="Accidents corporels de 2006 à 2021">
const assistant = document.querySelector("arcgis-assistant");
assistant.description =
"Explorez le jeu de données des accidents corporels de la circulation routière dans les Hauts-de-Seine";
assistant.suggestedPrompts = [
"Filtre uniquement les accidents mortels",
"Quel type de route est le plus accidentogène ?",
"Combien d'accidents ont eu lieu dans un rayon de 100m autour du 2 Place Marcel Sembat ?"
];Voilà le résultat :
assistant.logEnabled = true;
assistant.copyEnabled = true;
Dans un premier temps, j'ajoute un bouton "Réinitialiser la conversation" dans
le
slot "footer-content"
du composant assistant côté HTML.
<calcite-button id="btn_r0" width="full" appearance="outline" icon-start="trash">
Réinitialiser la conversation
</calcite-button>
Ensuite, côté JS, au click du bouton, je me sers de deux méthodes de
l'assistant :
en premier, submitMessage envoie automatiquement un message à l'assistant pour
lui demander de réinitialiser les filtres et l'étendue de la carte
ensuite, clearChatHistory supprime l'historique de conversation.
btn_r0.addEventListener("click", async () => {
await assistant.submitMessage("Réinitialise tous les filtres s'il y en a et rezoome à l'étendue initiale");
await assistant.clearChatHistory();
});
.calcite-mode-light {
--calcite-color-brand: #e89746;
--calcite-color-focus: #e89746;
--calcite-color-brand-hover: #c24c25;
--calcite-color-brand-press: #5e2e1c;
}
Aucun commentaire:
Enregistrer un commentaire