Power Apps et OCR est une application qui utilise la reconnaissance de texte AI. Cette manipulation vous explique comment créer cette application Power Apps.
Au sens large, l’OCR permet de reconnaître le texte quand il est dans une image ou un fichier PDF.
Le contrôle Reconnaissance de texte est un des contrôle d’AI Builder proposés par Microsoft dans Power Apps et OCR.
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 un fichier PDF sur votre ordinateur ou sur le smartphone.
Ensuite le contrôle Reconnaissance de texte va reconnaître automatiquement le contenu textuel de l’image ou du fichier PDF.
Le fonctionnement de ce contrôle est très différent du modèle GPT Description de l’image, présenté dans la manipulation Application Power Apps et GPT Reconnaissance d’image.
Si, dans les deux manipulations, il s’agit de reconnaissance, celle-ci es de nature différente.
En effet, dans le modèle GPT Description de l’image, l’application doit reconnaître une image quelconque et générer une description ad’hoc.
Tandis que dans l’exemple de cet article, le contrôle Reconnaissance de texte doit procéder à une reconnaissance des caractères présents dans l’image ou le PDF.
Il s’agit de technologies complexes et nouvelles, que Microsoft améliore continuellement.
Toutefois, la complexité est réellement cachée et 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.
Enfin, 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.
https://make.powerapps.com/signup?redirect=marketing&email=
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 Power Apps et OCR 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 Power Apps et OCR.
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 de l’application Power Apps et OCR
Maintenant, vous allez ajouter le logo de cet exemple, sur le bandeau de votre application.
Notamment, cliquez sur le lien suivant pour récupérer le logo que vous allez utiliser dans cette manipulation : https://coudr.com/logo.
Puis enregistrez ce fichier sur votre disque dur local dans Windows.
Ensuite, 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 le logo que vous venez d’enregistrer sur votre disque dur local dans Windows.
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 / PDF :"
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 = "OCR :"
txtDescription.X = 20
txtDescription.Y = 590
Contrôle Table de données
Ensuite, sur cet écran, vous allez ajouter un contrôle Table de donnée, qui servira à restituer les résultats.
Notamment, dans le volet de gauche, cliquez sur le menu Insérer (icône en forme de +) puis cliquez sur Table de données (sous la catégorie Disposition) : le contrôle DataTable1 apparaît.
Un volet apparait à sa droite pour sélectionner une source de données : n’en tenez pas compte et fermez le volet.
En revanche, 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 DataTable1, et renommez-le en Textes.
Le résultat du contrôle Reconnaissance de texte sera affiché le contrôle Textes.
Ensuite, modifiez les propriétés du contrôle Textes :
Textes.Height = 476
Textes.X = 0
Textes.Y = 660
Contrôle Reconnaissance de texte
Ensuite, sur cet écran, vous allez ajouter un contrôle Reconnaissance de texte.
Notamment, dans le volet de gauche, cliquez sur le menu Insérer (icône en forme de +) puis cliquez sur Reconnaissance de texte (sous la catégorie AI Builder) : le contrôle TextRecognizer1 apparaît.
Ce contrôle permet de charger un fichier qui est ensuite analysée. A l’issue de l’analyse, tous les textes reconnus sont extraits sous forme de chaînes de caractères.
Ensuite, modifiez les propriétés du contrôle TextRecognizer1 :
TextRecognizer1.Height = 458
TextRecognizer1.Text = "Chargez une image ou un pdf"
TextRecognizer1.Width = 640
TextRecognizer1.X = 0
TextRecognizer1.Y = 132
Formulaire dans Power Apps et OCR
Maintenant que l’architecture du formulaire Power Apps est terminée, il reste à relier les deux principaux contrôles.
Pour cela, cliquez sur le contrôle Textes.
Un volet apparait à sa droite pour sélectionner une source de données : n’en tenez pas compte et fermez le volet.
Ensuite, modifiez les propriétés du contrôle Textes :
Textes.Items = TextRecognizer1.Results
Un bandeau rouge d’erreur peut apparaître puis disparaître assez vite. C’est normal qu’il apparaisse car pour l’instant, vous n’avez pas encore terminé le paramétrage du contrôle Textes.
Dans le volet Propriétés (à droite), vous verrez un lien qui s’intitule Modifier les champs.
Ensuite, cliquez sur le lien Modifier les champs : un volet Données apparaît. Dans le volet Données, vous verrez un lien + Ajouter un champ.
Ensuite, cliquez sur le lien + Ajouter un champ : une liste de choix s’affiche.
Dans cette liste, cochez la case du choix Text pour afficher les textes reconnus, puis cliquez sur le bouton Ajouter.
Puis, fermez le volet Données.
C’est tout.
Tester Power Apps et OCR avec une image
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 Chargez une image ou un pdf.
Puis, sélectionnez une image qui contient du texte sur votre ordinateur. Dans ce scénario, une image avec un numéro de série a été sélectionnée.
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.
Dans ce scénario, le résultat est parfait et sans faute.
En effet, tous les caractères ont été reconnus, même ceux qui étaient avec une petite taille.
L’exercice est d’autant plus réussi, qu’il y a 3 polices de caractères différentes.
Vous pouvez copier le texte de votre choix. Pour cela, cliquez sur la ligne de votrre choix dans le tableau puis faites CTRL+A pour tout sélectionner et CTRL+C pour copier.
Ensuite, ouvrez le Bloc-Notes (notepad) ou Word, et collez le contenu avec CTRL+V.
Tester Power Apps et OCR avec un fichier PDF
Si vous le voulez, vous pouvez recommencer la manipulation avec un fichier PDF qui contient des caractères.
Le fichier PDF peut être un fichier avec les glyphes ou sous forme d’image.
Alternative
Plutôt que d’utiliser un contrôle Table de donnée pour restituer les résultats, vous pouvez le remplacer entièrement par un simple contrôle Étiquette de texte.
Pour cela, supprimez le contrôle Table de donnée puis insérez un contrôle Étiquette de texte.
Puis, modifiez les propriétés du contrôle Label1 :
Label1.Text = TextRecognizer1.Selected.Text
Ensuite, appuyez sur la touche F5 de votre clavier.
Ensuite, cliquez sur le texte Chargez une image ou un pdf.
Enfin, sélectionnez une image qui contient du texte sur votre ordinateur.
Patientez quelques secondes car le résultat n’est pas immédiat.
Ensuite, cliquez sur un résultat encadré en bleu dans l’image : le contrôle Étiquette de texte affiche le résultat sélectionné.
Enregistrement de Power Apps et OCR
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.
Résumé
En résumé, vous avez appris à utiliser le contrôle Reconnaissance de texte.
Si vous avez Power Apps Mobile sur votre téléphone, profitez-en pour tester l’application avec une photo d’un objet qui contient du texte.
Pour aller plus loin
Ensuite, consultez aussi l’article qui explique comment créer une Application Power Apps et GPT Reconnaissance d’image.
Laisser un commentaire