Synergie de LLM et GUI, au-delà du Chatbot

Synergie entre LLM et GUI au-delà du Chatbot

Utiliser l’appel de fonction OpenAI GPT pour animer votre application mobile

Introduction

Nous introduisons une approche UX radicale pour mélanger de manière optimale l’intelligence artificielle conversationnelle et l’interaction par interface utilisateur graphique (GUI) sous la forme d’une barre de langage naturel. Elle se trouve en bas de chaque écran et permet aux utilisateurs d’interagir avec l’ensemble de votre application depuis un seul point d’entrée. Les utilisateurs ont toujours le choix entre le langage et la manipulation directe. Ils n’ont pas besoin de chercher où et comment accomplir des tâches et peuvent exprimer leurs intentions dans leur propre langue, tandis que la vitesse, la compacité et les fonctionnalités de la GUI sont entièrement préservées. Les définitions des écrans d’une GUI sont envoyées avec la demande de l’utilisateur au modèle de langage volumineux (LLM), permettant au LLM de naviguer dans la GUI vers l’intention de l’utilisateur. Nous nous sommes basés sur un article précédent, où le concept est optimisé, et une application Flutter d’exemple implémentée est disponible ici pour que vous puissiez l’essayer vous-même. Le code complet de Flutter est disponible sur GitHub, vous pouvez donc explorer le concept dans votre propre contexte. Cet article s’adresse aux propriétaires de produits, aux concepteurs UX et aux développeurs mobiles.

Contexte

Les interfaces utilisateur en langage naturel et les interfaces utilisateur graphiques (GUI) permettent à l’utilisateur humain de communiquer avec les capacités du système informatique. Le langage naturel permet aux humains de communiquer entre eux sur des choses en dehors de l’imminence, tandis que le pointage permet de communiquer sur des éléments concrets dans le monde. Le pointage nécessite moins d’efforts cognitifs pour votre interlocuteur communicatif que la production et le traitement du langage naturel, et il laisse également moins de place à la confusion. Le langage naturel, cependant, peut transmettre des informations sur le monde entier : concret, abstrait, passé, présent, futur et méta-monde, offrant un accès aléatoire à tout.

Avec l’avènement de ChatGPT, la qualité d’interprétation du NLP a atteint un niveau élevé, et en utilisant l’appel de fonction, il est maintenant possible de créer des interfaces utilisateur en langage naturel complètes pour les systèmes informatiques, en évitant les petites erreurs d’interprétation. La tendance actuelle dans la communauté du LLM est de se concentrer sur les interfaces de conversation comme interface utilisateur conversationnelle principale. Cette approche découle du fait que la messagerie est la principale forme d’interaction écrite entre humains, préservant l’historique de la conversation dans une fenêtre défilante. De nombreux types d’informations se prêtent à une représentation graphique. Une approche courante consiste à intégrer des éléments de GUI dans la conversation en chat. Cela a toutefois pour inconvénient d’alourdir l’historique de la conversation en chat et la gestion de l’état des éléments de GUI dans un historique de conversation n’est pas trivial. En adoptant pleinement le paradigme de la conversation en chat, nous perdons également la possibilité d’offrir des itinéraires d’interaction basés sur des menus aux utilisateurs, ce qui les laisse davantage dans l’obscurité concernant les capacités de l’application.

• Méta De l’incertitude du metaverse à la réussite de l’IA
• Gouverner le cycle de vie de l’apprentissage automatique à grande échelle, Partie 1 Un cadre pour l’architecture des charges de travail d’apprentissage automatique utilisant Amazon SageMaker
• Intégrer l’IA générative et l’apprentissage par renforcement pour s’améliorer soi-même

L’approche adoptée ici peut s’appliquer à toute une gamme d’applications telles que les applications bancaires, les applications d’achat et les applications de voyage. Les applications mobiles ont leur fonctionnalité la plus importante sur l’écran d’accueil, mais les fonctionnalités présentes sur d’autres onglets ou écrans enfouis dans les menus peuvent être très difficiles à trouver pour les utilisateurs. Lorsque les utilisateurs peuvent exprimer leurs demandes dans leur propre langue, ils peuvent naturellement être dirigés vers l’écran qui est le plus susceptible de répondre à leurs besoins. Lorsque la fonctionnalité la plus importante se trouve sur l’écran d’accueil, le nombre d’options disponibles pour cette fonctionnalité principale peut être assez écrasant pour tout le monde sous forme d’éléments de GUI. Le langage naturel aborde cette problématique de l’autre côté : les utilisateurs ont l’initiative et expriment exactement ce qu’ils veulent. La combinaison des deux approches conduit à un optimum où les deux approches se complètent mutuellement et les utilisateurs peuvent choisir la meilleure option pour répondre à leur tâche ou sous-tâche.

La barre de langage naturel

La barre de langage naturel (NLB) permet aux utilisateurs de taper ou de dire ce qu’ils veulent de l’application. Avec leur demande, les définitions de tous les écrans de l’application sont envoyées au LLM en utilisant une technique appelée “appel de fonction” par OpenAI. Dans notre concept, nous considérons un écran de GUI comme une fonction qui peut être appelée dans notre application, où les widgets pour l’entrée utilisateur sur l’écran sont considérés comme des paramètres de cette fonction.

Nous prendrons une application bancaire comme exemple pour illustrer le concept. Lorsque l’utilisateur formule une demande dans un langage naturel, le LLM répond en indiquant au composant de navigation de notre application quelle page ouvrir et quels paramètres définir. Cela est illustré dans la figure suivante:

Des exemples d’interaction sont donnés dans les images suivantes:

L’image suivante montre une conclusion dérivée par le LLM, où il conclut que la meilleure façon de venir en aide à l’utilisateur est de lui montrer les agences bancaires près de chez lui:

L’exemple suivant montre que même des expressions très raccourcies peuvent conduire au résultat souhaité pour l’utilisateur:

Ainsi, la saisie libre peut également être un mode d’interaction très rapide. L’interprétation correcte de ces abréviations dépend de la non-ambiguïté de l’intention qui les sous-tend. Dans ce cas, l’application n’a pas d’autre écran que les transferts pour lesquels cela pourrait être destiné, la LLM pourrait donc prendre une décision non ambiguë.

Une autre fonctionnalité bonus est que l’interaction a une histoire, vous pouvez donc continuer à taper pour corriger l’intention précédente:

Ainsi, le LLM peut combiner plusieurs messages, l’un corrigeant ou améliorant l’autre, pour produire l’appel de fonction souhaité. Cela peut être très pratique pour une application de planification de voyage où vous mentionnez initialement seulement l’origine et la destination, puis dans des messages ultérieurs vous les affinez avec des exigences supplémentaires, comme la date, l’heure, uniquement les correspondances directes, seulement en première classe, etc.

Cliquez ici pour essayer vous-même l’application d’exemple. La saisie vocale fonctionne dans un navigateur Chrome ainsi que sur Android et iOS natifs. La reconnaissance vocale fournie par la plate-forme est utilisée, donc il est possible de l’améliorer si la qualité n’est pas suffisante pour votre objectif.

Comment ça marche

Lorsque l’utilisateur pose une question dans la barre de langage naturel, un schéma JSON est ajouté à la demande envoyée au LLM, qui définit la structure et les objectifs de toutes les pages et de leurs éléments de saisie. Le LLM tente de faire correspondre l’expression en langage naturel de l’utilisateur à l’une de ces définitions d’écran et renvoie un objet JSON pour que votre code puisse effectuer un “appel de fonction” pour activer la page correspondante.

La correspondance entre les fonctions et les écrans est illustrée dans la figure suivante:

Une spécification de fonction complète est disponible pour votre inspection ici.

L’implémentation Flutter de la barre de langage naturel est basée sur LangChain Dart, la version Dart de l’écosystème LangChain. Tous les processus d’ingénierie de la demande se font côté client. Il s’avère plus logique de regrouper les écrans, la logique de navigation et les modèles de fonction ensemble. En fait, les modèles de fonction sont intégrés à la structure de navigation puisqu’il existe une relation un-à-un. Voici le code pour activer et naviguer vers l’écran de la carte de crédit:

DocumentedGoRoute(   name: 'creditcard',   description: 'Afficher votre carte de crédit et peut-être effectuer une action dessus',   parameters: [     UIParameter(       name: 'limit',       description: 'Nouvelle limite pour la carte',       type: 'integer',     ),     UIParameter(       name: 'action',       description: 'Action à effectuer sur la carte',       enumeration: ['remplacer', 'annuler'],     ),   ],   pageBuilder: (context, state) {     return MaterialPage(         fullscreenDialog: true,         child: LangBarWrapper(             body: CreditCardScreen(                 label: 'Carte de Crédit',                 action: ActionOnCard.fromString(                     state.uri.queryParameters['action']),                 limit:                     int.tryParse(state.uri.queryParameters['limit'] ?? ''))));   }),

En haut, nous voyons que c’est une route : une destination dans le système de routage de l’application, qui peut être activée via un hyperlien. La description est la partie que le LLM utilisera pour associer l’écran à l’intention de l’utilisateur. Les paramètres ci-dessous (limite de carte de crédit et action à prendre) définissent les champs de l’écran en langage naturel, afin que le LLM puisse les extraire de la question de l’utilisateur. Ensuite, l’élément pageBuilder définit comment l’écran doit être activé, en utilisant les paramètres de requête du lien profond. Vous pouvez les reconnaître dans https://langbar-1d3b9.web.app/home : tapez « limite de carte de crédit à 10000 » dans le NLB, et la barre d’adresse du navigateur affichera : https://langbar-1d3b9.web.app/creditcard?limit=10000.

Un agent LangChain a été utilisé, ce qui rend cette approche indépendante de GPT, elle peut donc également être appliquée à l’aide d’autres LLM comme Llama, Gemini, Falcon, etc. De plus, cela facilite l’ajout d’une assistance basée sur un LLM.

Panneau historique

La barre de langage naturel offre un panneau d’historique d’interaction réduit, de sorte que l’utilisateur peut facilement répéter les déclarations précédentes. De cette façon, l’historique d’interaction est conservé, de manière similaire aux interfaces de discussion, mais de manière compacte et réduite, ce qui permet de gagner de l’espace à l’écran et d’éviter l’encombrement. Les déclarations linguistiques précédentes de l’utilisateur sont affichées dans la langue utilisée par l’utilisateur. Les réponses du système sont incorporées comme un hyperlien sur cette déclaration utilisateur, de sorte qu’elles peuvent être cliquées pour réactiver l’écran correspondant :

Lorsque le LLM ne peut pas déterminer complètement l’écran à activer, les réponses du système sont affichées explicitement, auquel cas le panneau d’historique s’étend automatiquement. Cela peut se produire lorsque l’utilisateur a fourni trop peu d’informations, lorsque la demande de l’utilisateur est hors du champ d’application de l’application, ou lorsqu’une erreur se produit :

Futur

Le panneau d’historique est un bon endroit pour offrir un support client et une aide contextuelle en forme de chatbot. Au moment de la rédaction de cet article, il y a une discussion animée et une évolution des techniques RAG (Retrieval Augmented Generation) qui permettent aux chatbots de répondre aux questions des utilisateurs en se basant sur un large corpus de contenu textuel fourni par votre propre organisation. En plus de cela, la barre de langage naturel est un bon point de départ pour imaginer les améliorations et les facilités que vous pouvez apporter aux applications utilisant le langage naturel. Veuillez laisser vos idées dans les commentaires. Je suis vraiment curieux.

Support client

En plus de votre application, votre organisation dispose également d’un site web avec beaucoup d’informations pour vos utilisateurs. Peut-être que ce site web a déjà un chatbot. Peut-être même que votre application a déjà un chatbot. Le panneau d’historique des interactions est un bon endroit pour avoir également de telles conversations de support client.

Aide contextuelle

Dans le contexte décrit ci-dessus, nous conservons un historique de l’interaction linguistique avec notre application. À l’avenir, nous pourrions (de manière invisible) ajouter une trace de l’interaction directe de l’utilisateur avec l’interface graphique à cette séquence d’historique. L’aide contextuelle pourrait alors être donnée en combinant la trace d’historique de l’interaction de l’utilisateur avec RAG sur la documentation d’aide de l’application. Les questions de l’utilisateur seraient ensuite répondues davantage dans le contexte de l’état actuel de l’application.

Au-delà de l’assistance statique pour les applications mobiles

La proposition actuelle est un MVP. Elle offre un modèle statique pour l’interprétation des demandes linguistiques d’un utilisateur dans le contexte d’une application. Cette technique ouvre un large éventail d’améliorations futures :

• Lorsque les utilisateurs posent une question alors qu’ils se trouvent sur un écran spécifique, nous pourrions être en mesure d’ajouter dynamiquement des modèles d’interprétation plus spécifiques (fonctions) à l’invite qui dépendent de l’état de cet écran, comme « Pourquoi le bouton Soumettre est-il grisé/désactivé ? ».
• L’appel de fonctions à l’aide d’une barre de langage naturel peut être utilisé comme assistant pour des applications créatives, par exemple pour exécuter des procédures sur des sélections telles que « rendre de la même taille » ou « transformer en composant réutilisable ». Microsoft Copolit 365 utilise déjà des fonctionnalités similaires. L’approche présentée dans cet article peut également permettre à votre organisation de tirer parti de telles fonctions.

L’interaction en langage naturel avec chaque aspect de votre système deviendra rapidement un élément majeur de chaque interface utilisateur. Lors de l’utilisation de l’appel de fonction, vous devez inclure les capacités de votre système dans l’invite, mais bientôt des méthodes plus économiques et plus puissantes arriveront sur le marché. Par exemple, OpenAI a récemment ouvert le perfectionnement du modèle avec l’appel de fonction, ce qui vous permet de créer une version LLM avec les capacités de votre système intégrées. Même lorsque ces capacités sont très étendues, la charge sur l’invite reste limitée.

Conclusion

Les LLM peuvent être utilisés comme un merveilleux lien pour interagir avec des applications basées sur une interface graphique en langage naturel par le biais de l’« appel de fonction ». Une barre de langage naturel a été introduite, qui permet aux utilisateurs de taper ou de parler leurs intentions et le système répondra en naviguant vers l’écran approprié et en pré-remplissant les bonnes valeurs. L’application d’exemple vous permet de réellement ressentir ce que cela signifie et le code source disponible permet de l’appliquer rapidement à votre propre application si vous utilisez Flutter. La barre de langage naturel n’est pas exclusivement réservée à Flutter ou aux applications mobiles, mais peut être appliquée à n’importe quelle application avec une interface graphique. Sa plus grande force réside dans le fait qu’elle ouvre toutes les fonctionnalités de l’application à l’utilisateur à partir d’un seul point d’accès, sans que l’utilisateur ait besoin de savoir comment faire les choses, où les trouver, ou même de connaître le jargon de l’application. Du point de vue du développement d’une application, vous pouvez offrir tout cela à l’utilisateur en documentant simplement l’objectif de vos écrans et les widgets d’entrée qui s’y trouvent.

Suivez-moi sur LinkedIn

Merci particulier à David Miguel Lozano pour m’avoir aidé avec LangChain Dart

Quelques articles intéressants : dialogue multimodal, blog Google sur les interfaces graphiques et les LLM, interpréter l’interaction GUI comme du langage, assistants alimentés par des LLM, langage et GUI, Chatbot et GUI

Toutes les images de cet article, sauf indication contraire, sont de l’auteur

We will continue to update IPGirl; if you have any questions or suggestions, please contact us!