Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
# Créez une application de synthèse de texte basée sur l'IA avec Amazon Bedrock
Dans ce didacticiel, vous allez créer une application dans App Studio qui utilise Amazon Bedrock pour fournir des résumés concis des textes saisis par les utilisateurs finaux. L'application contient une interface utilisateur simple dans laquelle les utilisateurs peuvent saisir le texte qu'ils souhaitent résumer. Il peut s'agir de notes de réunion, de contenus d'articles, de résultats de recherche ou de toute autre information textuelle. Une fois que les utilisateurs ont saisi le texte, ils peuvent appuyer sur un bouton pour l'envoyer à Amazon Bedrock, qui le traitera à l'aide du modèle Claude 3 Sonnet et renverra une version résumée.
**Contents**
+ [Conditions préalables](#tutorial-conversational-bedrock-prerequisites)
+ [Étape 1 : créer et configurer un rôle IAM et un connecteur App Studio](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [Étape 2 : Création d'une application](#tutorial-conversational-bedrock-steps-create-application)
+ [Étape 3 : Création et configuration d'une automatisation](#tutorial-conversational-bedrock-steps-create-automation)
+ [Étape 4 : Création de pages et de composants](#tutorial-conversational-bedrock-steps-user-interface)
+ [Renommer la page par défaut](#tutorial-conversational-bedrock-steps-user-interface-create-page)
+ [Ajouter des composants à la page](#tutorial-conversational-bedrock-steps-user-interface-add-components)
+ [Configuration des composants de la page](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [Étape 5 : Publier l'application dans l'environnement **de test**](#tutorial-conversational-bedrock-steps-publish)
+ [(Facultatif) Nettoyer](#tutorial-conversational-bedrock-steps-cleanup)
## Conditions préalables
Avant de commencer, passez en revue et remplissez les conditions préalables suivantes :
+ Accès à AWS App Studio. Notez que vous devez avoir le rôle d'administrateur pour créer un connecteur dans ce didacticiel.
+ Facultatif : passez en revue [AWS Concepts d'App Studio](concepts.md) et familiarisez-vous avec les concepts importants d'App Studio. [Tutoriel : Commencez à créer à partir d'une application vide](getting-started-tutorial-empty.md)
## Étape 1 : créer et configurer un rôle IAM et un connecteur App Studio
Pour permettre à App Studio d'accéder aux modèles Amazon Bedrock, vous devez :
1. Activez les modèles Amazon Bedrock que vous souhaitez utiliser dans votre application. Pour ce didacticiel, vous utiliserez **Claude 3 Sonnet**. Assurez-vous donc d'activer ce modèle.
1. Créez un rôle IAM avec les autorisations appropriées sur Amazon Bedrock.
1. Créez un connecteur App Studio avec le rôle IAM qui sera utilisé dans votre application.
Accédez à [Connectez-vous à Amazon Bedrock](connectors-bedrock.md) des instructions détaillées, puis revenez à ce didacticiel après avoir suivi les étapes et créé le connecteur.
## Étape 2 : Création d'une application
Utilisez la procédure suivante pour créer une application vide dans App Studio que vous intégrerez à l'application de synthèse de texte.
1. Connectez-vous à App Studio.
1. Accédez au Builder Hub et choisissez **\$1 Create app**.
1. Choisissez **Commencer à zéro**.
1. Dans le champ **Nom de l'application**, saisissez un nom pour votre application, tel que**Text Summarizer**.
1. Si vous êtes invité à sélectionner des sources de données ou un connecteur, choisissez **Skip** dans le cadre de ce didacticiel.
1. Choisissez **Suivant** pour continuer.
1. (Facultatif) : Regardez le didacticiel vidéo pour un aperçu rapide de la création d'applications dans App Studio.
1. Choisissez **Modifier l'application**, qui vous permettra d'accéder au studio d'applications.
## Étape 3 : Création et configuration d'une automatisation
Vous définissez la logique et le comportement d'une application App Studio dans les *automatisations.* Les automatisations se composent d'étapes individuelles appelées *actions*, de *paramètres* utilisés pour transmettre des données à l'action à partir d'autres ressources et d'une *sortie* pouvant être utilisée par d'autres automatisations ou composants. Au cours de cette étape, vous allez créer une automatisation qui gère l'interaction avec Amazon Bedrock avec les éléments suivants :
+ Entrées : paramètre permettant de transmettre le texte saisi par l'utilisateur à l'automatisation.
+ Actions : une action **GenAI Prompt** qui envoie le texte saisi à Amazon Bedrock et renvoie le résumé du texte de sortie.
+ Sorties : une sortie d'automatisation qui comprend le résumé traité par Amazon Bedrock, qui peut être utilisé dans votre application.
**Pour créer et configurer une automatisation qui envoie une invite à Amazon Bedrock, traite et renvoie un résumé**
1. Choisissez l'onglet **Automatisations** en haut du canevas.
1. Choisissez **\$1 Ajouter une automatisation**.
1. Dans le panneau de droite, sélectionnez **Propriétés**.
1. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez **InvokeBedrock** et appuyez sur **Entrée**.
1. Ajoutez un paramètre à l'automatisation qui sera utilisé pour transmettre l'invite de texte saisie par l'utilisateur à l'automatisation à utiliser dans la demande adressée à Amazon Bedrock en effectuant les étapes suivantes :
1. Dans le canevas, dans la zone de paramètres, choisissez **\$1 Ajouter**.
1. Pour **Name (Nom)**, entrez **input**.
1. Dans **Description**, entrez une description, telle que**Text to be sent to Amazon Bedrock**.
1. Dans **Type**, sélectionnez **Chaîne**.
1. Choisissez **Ajouter** pour créer le paramètre.
1. Ajoutez une action **GenAI Prompt** en effectuant les étapes suivantes :
1. Dans le panneau de droite, sélectionnez **Actions**.
1. Choisissez **GenAI Prompt** pour ajouter une action.
1. Configurez l'action en effectuant les étapes suivantes :
1. Choisissez l'action dans le canevas pour ouvrir le menu **Propriétés** de droite.
1. Renommez l'action **PromptBedrock** en choisissant l'icône en forme de crayon, en saisissant le nom et en appuyant sur Entrée.
1. Dans **Connector**, sélectionnez le connecteur créé dans[Étape 1 : créer et configurer un rôle IAM et un connecteur App Studio](#tutorial-conversational-bedrock-steps-create-role-connector).
1. Dans **Model**, choisissez le modèle Amazon Bedrock que vous souhaitez utiliser pour traiter l'invite. Dans ce tutoriel, vous allez choisir **Claude 3.5 Sonnet.**
1. Dans **Invite utilisateur**, entrez`{{params.input}}`. Cela représente le `input` paramètre que vous avez créé précédemment et contiendra le texte saisi par les utilisateurs de votre application.
1. Dans **Invite du système**, entrez les instructions du système que vous souhaitez envoyer à Amazon Bedrock. Pour ce didacticiel, entrez les informations suivantes :
```
You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
```
1. Choisissez **Paramètres de demande** pour le développer et mettez à jour les champs suivants :
+ Dans **Température**, entrez`0`. La température détermine le caractère aléatoire ou créatif de la sortie sur une échelle de 0 à 10. Plus le chiffre est élevé, plus la réponse est créative.
+ Dans **Max Tokens**, entrez `4096` pour limiter la longueur de la réponse.
1. Le résultat de cette automatisation sera le texte résumé, mais par défaut, les automatisations ne créent pas de sorties. Configurez l'automatisation pour créer une sortie d'automatisation en effectuant les étapes suivantes :
1. Dans le menu de navigation de gauche, choisissez l'**InvokeBedrock**automatisation.
1. Dans le menu **Propriétés** de droite, dans **Sortie**, choisissez **\$1 Ajouter**.
1. Dans **Sortie**, entrez**\$1\$1results.PromptBedrock.text\$1\$1**. Cette expression renvoie le contenu de l'`processResults`action.
## Étape 4 : Création de pages et de composants
Dans App Studio, chaque page représente un écran de l'interface utilisateur (UI) de votre application avec lequel vos utilisateurs interagiront. Dans ces pages, vous pouvez ajouter divers composants tels que des tableaux, des formulaires, des boutons, etc. pour créer la mise en page et les fonctionnalités souhaitées.
### Renommer la page par défaut
L'application de synthèse de texte de ce didacticiel ne contiendra qu'une seule page. Les applications nouvellement créées sont fournies avec une page par défaut, vous allez donc la renommer au lieu d'en ajouter une.
**Pour renommer la page par défaut**
1. Dans le menu de navigation de la barre supérieure, sélectionnez **Pages**.
1. Dans le panneau de gauche, choisissez **Page1** et choisissez le panneau **Propriétés** dans le panneau de droite.
1. Choisissez l'icône en forme de crayon**TextSummarizationTool**, entrez et appuyez sur **Entrée**.
1. Dans **Libellé de navigation**, entrez**TextSummarizationTool**.
### Ajouter des composants à la page
Pour ce didacticiel, l'application de synthèse de texte comporte une page contenant les éléments suivants :
+ Composant de **saisie de texte** que les utilisateurs finaux utilisent pour saisir une invite à résumer.
+ Un composant **Button** utilisé pour envoyer l'invite à Amazon Bedrock.
+ Un composant de **zone de texte** qui affiche le résumé d'Amazon Bedrock.
Ajoutez un composant de **saisie de texte** à la page que les utilisateurs utiliseront pour saisir une invite de texte à résumer.
**Pour ajouter un composant de saisie de texte**
1. Dans le panneau **Composants** de droite, localisez le composant de **saisie de texte** et faites-le glisser sur le canevas.
1. Choisissez le texte saisi dans le canevas pour le sélectionner.
1. Dans le panneau **Propriétés** de droite, mettez à jour les paramètres suivants :
1. Cliquez sur l'icône en forme de crayon pour renommer le texte saisi. **inputPrompt**
1. Dans **Label**, entrez**Prompt**.
1. Dans **Placeholder**, entrez**Enter text to be summarized**.
Ajoutez maintenant un composant **Button** que les utilisateurs choisiront pour envoyer l'invite à Amazon Bedrock.
**Pour ajouter un composant de bouton**
1. Dans le panneau **Composants** de droite, localisez le composant **Bouton** et faites-le glisser sur le canevas.
1. Cliquez sur le bouton dans le canevas pour le sélectionner.
1. Dans le panneau **Propriétés** de droite, mettez à jour les paramètres suivants :
1. Choisissez l'icône en forme de crayon pour renommer le bouton. **sendButton**
1. Dans **Libellé du bouton**, entrez**Send**.
Ajoutez maintenant un composant de **zone de texte** qui affichera le résumé renvoyé par Amazon Bedrock.
**Pour ajouter un composant de zone de texte**
1. Dans le panneau **Composants** de droite, localisez le composant **Zone de texte** et faites-le glisser sur le canevas.
1. Choisissez la zone de texte dans le canevas pour la sélectionner.
1. Dans le panneau **Propriétés** de droite, mettez à jour les paramètres suivants :
1. Choisissez l'icône en forme de crayon pour renommer le bouton. **textSummary**
1. Dans **Label**, entrez**Summary**.
### Configuration des composants de la page
Maintenant que l'application contient une page contenant des composants, l'étape suivante consiste à configurer les composants pour qu'ils adoptent le comportement approprié. Pour configurer un composant, tel qu'un bouton, afin qu'il prenne des mesures lorsqu'il interagit avec celui-ci, vous devez y ajouter un *déclencheur*. Pour l'application décrite dans ce didacticiel, vous allez ajouter deux déclencheurs au `sendButton` bouton pour effectuer les opérations suivantes :
+ Le premier déclencheur envoie le texte du `textPrompt` composant à Amazon Bedrock pour analyse.
+ Le deuxième déclencheur affiche le résumé renvoyé par Amazon Bedrock dans le `textSummary` composant.
**Pour ajouter un déclencheur qui envoie l'invite à Amazon Bedrock**
1. Cliquez sur le bouton dans le canevas pour le sélectionner.
1. Dans le panneau **Propriétés** de droite, dans la section **Déclencheurs**, choisissez **\$1 Ajouter**.
1. Choisissez **Invoke Automation**.
1. Choisissez le déclencheur **InvokeAutomation1** qui a été créé pour le configurer.
1. Dans **Nom de l'action**, entrez**invokeBedrockAutomation**.
1. Dans **Invoke Automation**, sélectionnez l'**InvokeBedrock**automatisation créée précédemment.
1. Dans la zone des paramètres, dans le paramètre **d'entrée** créé précédemment, entrez**\$1\$1ui.inputPrompt.value\$1\$1**, qui transmet le contenu du composant de saisie de `inputPrompt` texte.
1. Cliquez sur la flèche gauche en haut du panneau pour revenir au menu des propriétés du composant.
Maintenant que vous avez configuré un déclencheur qui invoque l'automatisation pour envoyer une demande à Amazon Bedrock lorsque vous cliquez sur le bouton, l'étape suivante consiste à configurer un deuxième déclencheur qui affiche les résultats dans le composant. `textSummary`
**Pour ajouter un déclencheur qui affiche les résultats d'Amazon Bedrock dans le composant de zone de texte**
1. Dans le panneau **Propriétés** situé à droite du bouton, dans la section **Déclencheurs**, choisissez **\$1 Ajouter**.
1. Choisissez **Exécuter l'action du composant**.
1. Choisissez le déclencheur **Runcomponentaction1** créé pour le configurer.
1. Dans **Nom de l'action**, entrez**setTextSummary**.
1. Dans **Composant**, sélectionnez le composant **TextSummary**.
1. Dans **Action**, sélectionnez **Définir la valeur**.
1. Dans **Définir la valeur sur**, entrez**\$1\$1results.invokeBedrockAutomation\$1\$1**.
## Étape 5 : Publier l'application dans l'environnement **de test**
Lorsque vous créez une application, il est généralement recommandé de la prévisualiser pour voir à quoi elle ressemble et de tester ses fonctionnalités dans un premier temps. Toutefois, étant donné que les applications n'interagissent pas avec les services externes dans l'environnement de prévisualisation, vous allez plutôt publier l'application dans l'environnement de test afin de pouvoir tester l'envoi de demandes et la réception de réponses d'Amazon Bedrock.
**Pour publier votre application dans l'environnement de test**
1. Dans le coin supérieur droit du générateur d'applications, choisissez **Publier**.
1. Ajoutez une description de version pour l'environnement de test.
1. Vérifiez et cochez la case concernant le SLA.
1. Sélectionnez **Démarrer**. La publication peut prendre jusqu'à 15 minutes.
1. (Facultatif) Lorsque vous êtes prêt, vous pouvez autoriser d'autres personnes à y accéder en choisissant **Partager** et en suivant les instructions. Pour plus d'informations sur le partage d'applications App Studio, consultez[Partage d'applications publiées](application-share.md).
Après avoir testé votre application, choisissez à nouveau **Publier** pour promouvoir l'application dans l'environnement de production. Notez que les applications de l'environnement de production ne sont pas accessibles aux utilisateurs finaux tant qu'elles ne sont pas partagées. Pour plus d'informations sur les différents environnements d'applications, consultez[Environnements d'applications](applications-publish.md#application-environments).
## (Facultatif) Nettoyer
Vous avez maintenant terminé avec succès le didacticiel et créé une application de synthèse de texte dans App Studio avec Amazon Bedrock. Vous pouvez continuer à utiliser votre application ou nettoyer les ressources créées dans ce didacticiel. La liste suivante contient la liste des ressources à nettoyer :
+ Le connecteur Amazon Bedrock créé dans App Studio. Pour de plus amples informations, veuillez consulter [Affichage, modification et suppression de connecteurs](viewing-deleting-connectors.md).
+ L'application de synthèse de texte dans App Studio. Pour de plus amples informations, veuillez consulter [Suppression d’une application](applications-delete.md).
+ Rôle IAM créé dans la console IAM. Pour plus d'informations, consultez la section [Supprimer des rôles ou des profils d'instance](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html) dans le *Guide de Gestion des identités et des accès AWS l'utilisateur*.
+ Si vous avez demandé l'accès aux modèles pour utiliser Claude 3 Sonnet et que vous souhaitez rétablir l'accès, consultez la section [Gérer l'accès aux modèles de fondation Amazon Bedrock dans le guide de l'utilisateur](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) d'*Amazon Bedrock*.