Créer et afficher une légende pour le résumé de l'IA

Ce tutoriel vous guide dans la création d'une légende qui affiche un résumé AI des informations sélectionnées par l'utilisateur dans une application Web. Vérifiez la séquence d'actions suivante présentée dans ce tutoriel :

1. Commencez par lancer le site Web Winy.com.
2. Une fois que le logo Winy apparaît, nous affichons une légende avec des instructions d'utilisateur.
3. Lorsque la barre de recherche du site Web apparaît, une autre légende vous invite à rechercher l'emplacement souhaité pour vérifier la météo.
4. Après avoir effectué la demande de recherche, les résultats de météo affichés à partir du site Web servent de contenu pour générer un résumé de l’IA.

   Ce résumé suggère une journée avec une météo optimale pour la marche.

5. La légende s'affiche pendant 30 secondes, après quoi la légende se ferme et tous les déclencheurs sont désactivés.

Prérequis

Cet exemple a été créé à l'aide de ces packages d'activités et versions :

• UiPath.Callout.Activities 25.2.0
• UiPath.IntegrationService.Activities 25.2.1
• UiPath.System.Activities 25.2.1
• UiPath.UIAutomationActivities 25.2.1-preview

Étapes

1. Ouvrez votre projet Studio et accédez au workflow principal .
   1. Ajoutez une activité Use Application/Browser et saisissez https://www.windy.com/ dans le champ URL du navigateur .
   2. Ajoutez une activité Exécuter les déclencheurs locaux (Run Local Triggers ).

      Cela active tous les workflows de déclencheur et leur permet de s'exécuter lorsque leur événement déclencheur se produit.

2. Créez un fichier uiform pour la légende initiale, qui vous invite à suivre les instructions supplémentaires dès que le logo Winy apparaît.
   1. Dans votre projet Studio, dans le menu déroulant Nouveau (New) , sélectionnez Formulaire (Form) pour créer un nouveau formulaire.

      Le fichier de formulaire est utilisé ici comme légende.

   2. Nommez la légende Basic callout.
   3. Dans le panneau Composants (Components) , développez la section Basique (Basic ) et faites glisser trois composants Libellé/En-tête (Label/Header) dans le fichier de légende. Modifiez les composants comme suit :
      1. Pour le premier composant, saisissez le texte suivant dans le champ Contenu (Content ) : « Welcome to Winy.com ! ».
      2. Pour le deuxième composant, saisissez le message suivant dans le champ Contenu (Content ) : « Veuillez suivre les instructions à l'écran pour savoir quel jour sera le meilleur pour une bonne marche. »
      3. Pour le troisième composant, accédez à l'onglet Clé de champ (Field Key ) et modifiez le Nom de la propriété (Property Name) en aiSummary.

         Laissez le champ Contenu (Content) de ce composant vide, car il sera dynamiquement rempli avec le résumé généré par l'IA au moment du runtime.

   4. Enregistrez le fichier de légende.
3. Créez un nouveau workflow nommé Afficher la légende de base (Show Basic Callout) et ajoutez une activité Déclencheur d'événement d'application (Application Event Trigger ).

   Ce workflow affiche la légende qui vous souhaite la bienvenue sur Windy.com et la légende où nous afficherons le résumé de l'IA.

   1. Sélectionnez Indiquer la cible à l'écran (Indicate target on screen) et indiquez l'élément d'IU pour l'automatisation afin de commencer la surveillance.

      Pour cet exemple, nous indiquons le logo Windy que nous voulons surveiller.

   2. Dans la liste déroulante Type d'événement (Event type) , sélectionnez Apparu (Appeared).
   3. Ajoutez une activité Show Callout (Afficher la légende) .
      Cette activité vous permet de sélectionner un fichier uiform , que vous pouvez afficher dans un certain élément d'IU, ainsi que de transmettre des données au fichier uiform , à l'aide d'un dictionnaire d'arguments .
      1. Dans la liste déroulante Sélectionner un formulaire (Select Form) , sélectionnez le fichier de légende que vous avez précédemment créé.
         Pour cet exemple, nous avons sélectionné Basic callout.
      2. Pour le champ Élément d'IU (UI Element) , entrez l'élément d'IU indiqué pour l'activité Déclencheur d'événement d'application (Application Event Trigger) , qui est le logo Winy, auquel nous voulons lier la légende.
         Pour accéder à cet élément cible, utilisez l'expression TriggerEventArgs.TargetElement . TriggerEventArgs est un argument ici, qui est généré automatiquement lors de l'ajout d'une activité de déclencheur dans votre workflow. Dans ce cas, l'activité Déclencheur d'événement d'application (Application Event Trigger) génère l'argument.
4. Créez un fichier uiform pour la légende qui apparaît lorsque la barre de recherche du site Web devient visible et vous invite à rechercher l'emplacement souhaité.
   1. Dans votre projet Studio, dans le menu déroulant Nouveau (New) , sélectionnez Formulaire (Form) pour créer un nouveau formulaire.

      Le fichier de formulaire est utilisé ici comme légende.

   2. Nommez la légende Please search for your desired location.
   3. Dans le panneau Composants (Components) , développez la section Basique (Basic ) et un composant Libellé/En-tête (Label/Header) dans le fichier de légende.
   4. Enregistrez le composant et le fichier.
5. Créez un nouveau workflow nommé Veuillez rechercher l'emplacement souhaité, puis ajoutez une activité Déclencheur d'événement d'application .

   Ce workflow affiche la légende qui vous demande de rechercher leur emplacement où ils souhaitent trouver des informations sur la météo.

   1. Sélectionnez Indiquer la cible à l'écran (Indicate target on screen) et indiquez l'élément d'IU pour l'automatisation afin de commencer la surveillance.

      Pour cet exemple, nous indiquons la barre de recherche Winty que nous voulons surveiller.

   2. Dans la liste déroulante Type d'événement (Event type) , sélectionnez Apparu (Appeared).
   3. Ajoutez une activité de type Délai (Delay ) et définissez sa Durée (Duration) sur trois secondes, afin d'avoir suffisamment de temps de lecture pour d'abord lire la légende de bienvenue, puis vérifier celle qui s'affiche à côté de la barre de recherche.
   4. Ajoutez une activité Show Callout (Afficher la légende) .
      Cette activité vous permet de sélectionner un fichier uiform , que vous pouvez afficher dans un certain élément d'IU, ainsi que de transmettre des données au fichier uiform , à l'aide d'un dictionnaire d'arguments .
      1. Dans la liste déroulante Sélectionner un formulaire (Select Form) , sélectionnez le fichier de légende que vous avez précédemment créé.
         Pour cet exemple, nous avons sélectionné Basic callout.
      2. Pour le champ Élément d'IU (UI Element) , entrez l'élément d'IU indiqué pour l'activité Déclencheur d'événement d'application (Application Event Trigger) , qui est le logo Winy, auquel nous voulons lier la légende.
         Pour accéder à cet élément cible, utilisez l'expression TriggerEventArgs.TargetElement . TriggerEventArgs est un argument ici, qui est généré automatiquement lors de l'ajout d'une activité de déclencheur dans votre workflow. Dans ce cas, l'activité Déclencheur d'événement d'application (Application Event Trigger) génère l'argument.
      3. Ouvrez le dictionnaire Arguments et, dans le champ Valeur (Value) de la clé générée, saisissez le texte que vous souhaitez afficher.

         Pour cet exemple, nous affichons le texte suivant : « Veuillez rechercher l'emplacement souhaité et le sélectionner dans la liste ».

6. Créez un nouveau workflow nommé Récupérer et fournir un résumé de la météo de l'IA (Fetch and publish AI Weather Summary).

   Ce workflow commence à générer un résumé AI de la meilleure journée pour avoir une marche à l'extérieur, en fonction des résultats météo qui apparaissent à l'emplacement que vous avez précédemment recherché.

   1. Ajoutez une activité Déclencheur d'événement d'application (Application Event Trigger ).
      1. Sélectionnez Indiquer la cible à l'écran (Indicate target on screen) et indiquez l'élément d'IU pour l'automatisation afin de commencer la surveillance.

         Pour cet exemple, nous indiquons les résultats de Windows que nous voulons surveiller.

      2. Dans la liste déroulante Type d'événement (Event type) , sélectionnez Apparu (Appeared).
   2. Ajoutez une activité Fermer le formulaire (Close Form) pour fermer la légende qui vous a demandé de rechercher un emplacement souhaité.
   3. Dans la liste déroulante Sélectionner un formulaire (Select Form) , sélectionnez la légende Veuillez rechercher votre emplacement souhaité ( Veuillez rechercher votre emplacement souhaité) .
   4. Ajoutez une activité Définir les valeurs du formulaire (Set Form Values) pour mettre à jour la légende de base (Basic Callout) d'origine avec des informations sur le processus de génération du résumé de l'IA.
   5. Ajoutez une activité Utiliser l'application/le navigateur (Use Application/Browser) pour vous connecter à la fenêtre du navigateur Windows et extraire les informations relatives à la météo. Dans le champ URL du navigateur (Browser URL) , entrez https://www.windy.com.
   6. Dans le bloc Faire (Do) , effectuez les actions suivantes :
      1. Ajoutez une activité Extraire les données de table (Extract Table Data) .
         1. Sélectionnez Indiquer la cible à l’écran (Indicate target on screen) et sélectionnez les résultats de la météo.
         2. Créez une variable de sortie pour le champ Extraire vers (Extract to ).
            Dans cet exemple, nous l'avons nommé extractedWeatherDetails.
      2. Ajouter une activité Table de données de sortie (Output Data Table) .
         1. Entrez la variable précédemment créée (extractedWeatherDetails), qui contient les données de la météo, dans le champ Table de données (Data Table ).
         2. Créez une variable de sortie pour le champ Texte (Text) . Dans cet exemple, nous l'avons nommé weatherData.
      3. Ajoutez une activité Définir les valeurs du formulaire (Set Form Values) pour afficher les informations qui doivent vous mettre à jour sur l'état du processus d'analyse.
         1. Dans la liste déroulante Sélectionner un formulaire (Select Form) , sélectionnez le formulaire Basic callout
         2. Dans le dictionnaire des arguments , saisissez la valeur suivante pour l'argument aiSummary : "...analyse des données de météo...".
      4. Ajoutez une activité de génération de contenu pour générer le résumé de l’IA.
         1. Dans le corps de l'activité, sélectionnez Ajouter une nouvelle connexion (Add new connection) pour créer une connexion aux activités UiPath GenAI, qui permet à l'activité de s'exécuter.
         2. Dans la liste déroulante Nom du modèle (Model name) , choisissez le modèle d'IA souhaité.
         3. Dans le champ Invite (Prompt) , saisissez la variable de résultat de l'activité Table de données de sortie (Output Data Table) . Dans cet exemple, entrez weatherData.
         4. Dans le champ Invite système (System prompt) , saisissez les instructions du modèle d'IA à utiliser pour générer un résumé basé sur les données météo fournies. Dans cet exemple, nous avons utilisé l’invite suivante :

            « Vous recevrez un ensemble de données au format suivant : jour, heure, icône manquante pour le temps, température, champ, champ, bogues, la dernière peut être ignorée. Veuillez m'indiquer quel jour aura le meilleur temps pour une bonne marche. Dans votre sortie, veuillez vous en tenir à la courte recommandation et à une raison, sans aucun détail de votre analyse spécifique ».

         5. Créez une variable de sortie pour le champ Premier texte généré . Dans cet exemple, nous l'avons nommé topGeneratedText.
      5. Ajoutez une autre activité Définir les valeurs du formulaire (Set Form Values) pour afficher le résumé généré par l'IA.
         1. Dans la liste déroulante Sélectionner un formulaire (Select Form) , sélectionnez le formulaire Basic callout .
         2. Dans le dictionnaire Arguments , saisissez l'expression suivante, contenant la sortie de l'activité Génération de contenu (Content Selection ) et des informations sur l'état de la légende : "topGeneratedText + Environment.NewLine + "This callout will close in 30 seconds.".
      6. Ajoutez une activité Delay et réglez-la sur 30 secondes.
      7. Ajoutez une activité Fermer le formulaire (Close Form) et choisissez Basic callout dans la liste déroulante Sélectionner un formulaire (Select Form) .
      8. Ajoutez une activité Arrêter les déclencheurs locaux (Stop Local Triggers ) pour arrêter l'exécution de tous les workflows de déclencheur.

         Cette activité est particulièrement importante si votre projet se compose uniquement de workflows de déclencheur. Sans intégration de cette activité, les déclencheurs s'exécuteront de manière persistante dans une boucle continue sans s'arrêter.

Résultat

L'automatisation ouvre le site Web Winy et déclenche le workflow Afficher la légende de base (Show basic callout) une fois le logo affiché. Lorsque la barre de recherche s'affiche, le workflow Veuillez rechercher votre emplacement (Failed search for your location) commence à s'exécuter, vous demandant de rechercher l'emplacement souhaité pour lequel ils souhaitent trouver des informations sur la météo. Lorsque les résultats de la météo sont affichés, le workflow Récupérer et fournir le Résumé de la météo de l'IA (Fetch and publish AI Weather Summary) commence à s'exécuter, récupérant les résultats de la météo et les envoyant dans le cadre d'une invite à un modèle d'IA, qui sera réaffiché ultérieurement sous la même forme. Une fois le résumé de l'IA affiché, le formulaire est fermé après 30 secondes. Cette description du processus de runtime est visualisée dans l'image interactive suivante :

Figure 1. Légende affichant un résumé généré par l’IA

Exemple de workflow

Pour vérifier comment les étapes de ce tutoriel sont implémentées, téléchargez l'exemple de projet suivant : Affichage de la légende AI-summary pour Winy.