Cette manipulation vous explique comment créer une Application Power Apps avec GPT avec le modèle GPT Power Apps ‘Description de l’image’.
Il s’agit d’un des modèles d’IA proposés par Microsoft dans Power Apps et Power Automate.
Dans un premier temps, vous allez créer un simple programme Power Apps.
Le rôle de celui-ci est de charger une image ou de photo sur votre ordinateur ou sur le smartphone.
Ensuite le modèle GPT Description de l’image va générer automatiquement une description de l’image. Autrement dit, il va générer un texte qui décrit le contenu de l’image.
Cette description est accompagnée d’un indice de confiance, exprimé en %. Plus le pourcentage est proche de 100 %, meilleure est la véracité de la description.
Malgré tout, il s’agit d’une technologie assez nouvelle. Elle n’est pas fiable à 100%. Par ailleurs, Microsoft veille à améliorer la pertinence des résultats. Il est donc intéressant de développer dès maintenant une application qui utilise la reconnaissance d’image.
D’autant plus que le développement ne présente aucune difficulté technique pour une personne habituée au développement dans Power Apps. Au contraire, il est très simple.
Pour réaliser cette manipulation, vous devez aller sur le site de Microsoft ci-dessous, afin d’activer une version d’évaluation gratuite Power Apps Plan 2.
Si vous rencontrez des erreurs dans les manipulations ci-dessous, lisez l’article qui explique comment débuguer les erreurs dans Power Apps.
Gardez à l’esprit que l’interface a pu évoluer fortement depuis que cet article a été rédigé.
Créer une application
Premièrement, créez un programme vide de type Application canevas vierge (ou Zone de dessin : cela revient au même).
Lors de la création, nommez l’application comme vous voulez et choisissez le format Téléphone.
Dans ce scénario, l’application se nomme Reconnaissance Image avec un format Téléphone.
Eléments visuels
Vous allez créer un bandeau de couleur sur l’écran de votre application, avec le logo de votre organisation.
Notamment, dans le volet de gauche, cliquez sur le menu Insérer (icône en forme de +) puis cliquez sur Rectangle (sous la catégorie Populaire) : le contrôle Rectangle1 apparaît.
Vous allez immédiatement renommer le nouveau contrôle.
En particulier, dans le volet de gauche, cliquez sur le menu Arborescence (icône en forme de feuilles superposées) puis double-cliquez sur Rectangle1, et renommez-le en bandeau.
Largeur dynamique
Afin de créer une application responsive, vous allez indiquer une largeur de bandeau qui corresponde à la largeur de votre application.
En effet, par défaut, le rectangle bandeau est créé avec une taille de 150 pixels x 150 pixels.
Vous allez donc modifier les propriétés de bandeau pour que sa largeur soit égale à la largeur de l’application. L’objectif étant que le bandeau s’adapte automatiquement à la taille de l’application.
Dans la propriété Width de bandeau, à la place de la valeur 150, indiquez la formule :
App.Width
Cette formule indique que la valeur de la propriété Width du rectangle bandeau est égale à la valeur de la propriété Width de l’objet App. Elle est généralement notée ainsi :
bandeau.Width = App.WidthEnsuite, rappelez-vous que App est l’objet qui représente votre application. L’objet App est le premier objet visible sur le volet Arborescence. Il est juste au-dessus du premier écran Screen1.
Enfin, pour aligner la position du rectangle bandeau sur l’écran, modifiez ces propriétés X et Y :
bandeau.X = 0
bandeau.Y = 0
Par ailleurs, vous allez modifier les propriétés du rectangle bandeau pour que sa hauteur soit de 62 pixels.
En effet, cette hauteur de 62 pixels correspond à la hauteur exacte de l’image du logo de l’exemple. Bien évidemment, vous pouvez choisir la hauteur de votre choix.
Aussi, modifiez la hauteur du bandeau :
bandeau.Height = 62Pour appliquer la charte graphique de cet exemple fictif, modifiez aussi la couleur de remplissage du bandeau :
bandeau.Fill = Color.AliceBlueLogo
Maintenant, vous allez ajouter le logo de cetexemple, sur le bandeau.
Notamment, ajoutez un contrôle de type Image en cliquant, dans le menu horizontal, sur Insérer puis Image (dans la zone Rechercher) : le contrôle Image1 apparaît.
Vous allez immédiatement renommer le nouveau contrôle.
En particulier, dans le volet de gauche, cliquez sur le menu Arborescence (icône en forme de feuilles superposées) puis double-cliquez sur Image1, et renommez-le en logo.
Puis, modifiez la hauteur du contrôle logo :
logo.Height = 62Puis, modifiez la hauteur du contrôle logo :
logo.Width = 102Ensuite, pour aligner la position du contrôle logo sur l’écran, modifiez ces propriétés X et Y :
logo.X = 0
logo.Y = 0
Enfin, grâce au volet de droite (IMAGE), cliquez sur le mot Aucun de la liste déroulante en face de la propriété Image.
Ensuite, dans le menu qui s’ouvre, cliquez sur le choix + Ajouter un fichier image.
Puis, allez chercher un logo quelconque.
Contrôles Étiquette de texte
Ensuite, sur cet écran, vous allez ajouter 2 contrôles Étiquette de texte.
Notamment, dans le volet de gauche, cliquez sur le menu Insérer (icône en forme de +) puis cliquez sur Étiquette de texte (sous la catégorie Populaire) : le contrôle Label1 apparaît.
Vous allez immédiatement renommer le nouveau contrôle.
En particulier, dans le volet de gauche, cliquez sur le menu Arborescence (icône en forme de feuilles superposées) puis double-cliquez sur Label1, et renommez-le en txtImage.
Ensuite, modifiez ses propriétés :
txtImage.Text = "Image :"
txtImage.X = 20
txtImage.Y = 62
Puis, dans le volet de gauche, cliquez sur le menu Insérer (icône en forme de +) puis cliquez sur Étiquette de texte (sous la catégorie Populaire) : le contrôle Label2 apparaît.
Vous allez immédiatement renommer le nouveau contrôle.
En particulier, dans le volet de gauche, cliquez sur le menu Arborescence (icône en forme de feuilles superposées) puis double-cliquez sur Label2, et renommez-le en txtDescription.
Ensuite, modifiez ses propriétés :
txtDescription.Text = "Description :"
txtDescription.X = 20
txtDescription.Y = 590
Contrôle Entrée de texte
Ensuite, sur cet écran, vous allez ajouter un contrôle Entrée de texte.
Notamment, dans le volet de gauche, cliquez sur le menu Insérer (icône en forme de +) puis cliquez sur Entrée de texte (sous la catégorie Populaire) : le contrôle TextInput1 apparaît.
Vous allez immédiatement renommer le nouveau contrôle.
En particulier, dans le volet de gauche, cliquez sur le menu Arborescence (icône en forme de feuilles superposées) puis double-cliquez sur TextInput1, et renommez-le en Description.
Le modèle GTP va afficher la description dans ce contrôle.
Comme il s’agit d’un affichage, un contrôle étiquette de texte pourrait servir.
Toutefois, si la description est longue, il est préférable d’utiliser un contrôle entrée de texte. En effet, ce contrôle peut être multi-lignes. De plus, il est facile de changer son mode d’affichage en Affichage (View).
Ensuite, modifiez les propriétés du contrôle Description :
Description.Default = ""
Description.DisplayMode = DisplayMode.View
Description.Fill = RGBA(237; 237; 237; 1)
Description.Height = 190
Description.Mode = TextMode.MultiLine Description.Width = 575
Description.X = 32
Description.Y = 660
Contrôle Ajouter une image
Ensuite, sur cet écran, vous allez ajouter un contrôle Ajouter une image.
Notamment, dans le volet de gauche, cliquez sur le menu Insérer (icône en forme de +) puis cliquez sur Ajouter une image (sous la catégorie Média) : le contrôle AddMediaWithImage1 apparaît.
Ce contrôle est un contrôle Groupe. Il regroupe deux contrôles enfants : AddMediaButton1 et UploadedImage1.
Le contrôle UploadedImage1 est un contrôle Image. Il permet d’afficher la photo chargée dans l’application.
Le contrôle AddMediaButton1 est un contrôle Ajouter une image. Il permet de charger une photo dans l’application.
Lorsqu’aucune photo est chargée, il affiche le texte « Appuyer ou cliquer pour ajouter une image ». C’est une bonne chose car cela permet de savoir ce qu’il faut faire.
Lorsqu’une photo est chargée, il affiche en surimpression, le texte « Modifier l’image ». Ce qui est perturbant car la photo est en partie cachée.
En particulier, supprimez le texte « Modifier l’image » et modifiez les propriétés du contrôle AddMediaButton1 :
AddMediaButton1.ChangePictureText = ""
AddMediaButton1.X = 32
AddMediaButton1.Y = 132
Connexion au modèle GPT
Maintenant que la partie visuelle est terminée, vous devez vous connecter au modèle GPT Description de l’image.
Pour réaliser cette manipulation, vous devez aller sur le site de Microsoft ci-dessous, afin d’activer une version d’évaluation gratuite Power Apps Plan 2.
Ensuite, dans le volet de gauche, cliquez sur le menu Données (icône en forme de Base de données) puis cliquez sur Ajouter des données : le menu Sélectionner une source de données apparaît.
Dans la zone Rechercher de ce menu, tapez uniquement Description : une liste de proposition s’affiche.
Dans cette liste, sélectionnez la proposition Description de l’image.
Patientez quelques secondes car le résultat n’est pas immédiat.
La connexion au modèle GPT est faite.
Formulaire Power Apps
Maintenant que la connexion est faite, il reste à appeller le modèle GPT.
L’appel du modèle sera fait au moment où l’image est chargée dans l’application. Bien évidemment, il est possible de faire autrement. En particulier, d’avoir un bouton qui actionne l’appel.
Toutefois, l’expérience montre que les utilisateurs s’attendent à avoir le résultat de l’analyse dès que l’image est chargée.
Pour cela, cliquez sur le contrôle AddMediaButton1. Veillez bien à cliquer sur AddMediaButton1 (et non pas AddMediaWithImage1).
Ensuite, dans les propriétés avancées (onglet Avancé du volet de droite), cliquez sur la propriété OnChange.
Puis, remplacez la valeur false par :
Set(Image;UploadedImage1);;
Set(ImageResultat;'Description de l’image'.Predict(Image));;
IfError(ImageResultat;Notify(FirstError.Message;NotificationType.Error));;
Explication de la formule
La première ligne de la formule va créer la variable Image. Celle-ci va contenir l’image chargée dans l’application Power Apps.
La création de cette variable n’est pas indispensable pour cette manipulation. Toutefois, il est prévu de l’utiliser ultérieurement dans une autre manipulation.
La seconde ligne appelle le modèle GPT Power Apps Description de l’image et lui demande d’évaluer l’image. Le résultat de l’évaluation est stockée dans la variable ImageResultat.
La troisième ligne affiche le message d’erreur, si une erreur arrive. S’il n’y a aucune erreur, aucun message ne s’affiche évidemment.
Il ne reste plus qu’à afficher la variable ImageResult dans le contrôle Description.
Notamment, modifiez les propriétés du contrôle Description :
Description.Default = ImageResultat.Description
Tester le formulaire
Vous allez tester l’application Power Apps en affichant l’aperçu.
Pour ce faire, appuyez sur la touche F5 de votre clavier.
Ensuite, cliquez sur le texte « Appuyer ou cliquer pour ajouter une image ».
Puis, sélectionnez une image quelconque sur votre ordinateur.
Patientez quelques secondes car le résultat n’est pas immédiat.
Le résultat s’affiche.
Pour vous aider, regardez la copie d’écran ci-dessous.
Puis, fermez l’aperçu en appuyant sur la touche Échap de votre clavier.
La description est presque exacte : « A cat standing on a tree stump », soit en français : « Un chat sur une souche d’arbre ». En réalité, le chat se trouve sur des bûches de bois.
Par ailleurs, si vous le souhaitez, vous pouvez aussi afficher le taux de confiance dans l’évaluation, grâce à la propriété ImageResultat.DescriptionConfidence.
Dans ce scénario, il est de 41 %. Plus la valeur est proche de 100%, plus l’évaluation de l’image est exacte.
Enfin, si vous affichez les valeurs de la colonne Objects de la variable ImageResultat, vous verrez les différentes alternatives qui expliquent en partie les 41 %.
Pour vous aider, regardez la copie d’écran ci-dessous.
Enregistrement du formulaire
Puis, enregistrez votre application avec les touches CTRL + S du clavier.
Enfin, publiez votre application avec les touches CTRL + Maj + P du clavier.
Ensuite, cliquez sur la flèche Précédent (en haut, à gauche) : un pop-up demande s’il faut quitter.
Dans ce pop-up, cliquez sur Quitter : la liste des applications Power Apps s’affiche.
La manipulation est terminée.
Laisser un commentaire