View a markdown version of this page

Créez une application de synthèse de texte basée sur l'IA avec Amazon Bedrock - AWS App Studio
Conditions préalablesÉtape 1 : Création et configuration d'un rôle IAM et d'un connecteur App StudioÉtape 2 : Création d'une applicationÉtape 3 : Création et configuration d'une automatisationÉtape 4 : Création de pages et de composantsÉtape 5 : Publiez l'application sur Tests environment(Facultatif) Nettoyer

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 du texte saisi 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 contenu 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 envoyer le texte à Amazon Bedrock, qui le traitera à l'aide du modèle Claude 3 Sonnet et renverra une version résumée.

Conditions préalables

Avant de commencer, vérifiez et complétez les prérequis suivants :

Étape 1 : Création et configuration d'un rôle IAM et d'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.

  2. Créez un rôle IAM avec les autorisations appropriées pour Amazon Bedrock.

  3. Créez un connecteur App Studio avec le rôle IAM qui sera utilisé dans votre application.

Accédez à Connectez-vous à Amazon Bedrock 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

Suivez 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.

  2. Accédez au hub de création et choisissez + Créer une application.

  3. Choisissez Repartir de zéro.

  4. Dans le champ Nom de l'application, donnez un nom à votre application, par exempleText Summarizer.

  5. Si vous êtes invité à sélectionner des sources de données ou un connecteur, choisissez Ignorer pour les besoins de ce didacticiel.

  6. Choisissez Suivant pour continuer.

  7. (Facultatif) : regardez le didacticiel vidéo pour un aperçu rapide de la création d'applications dans App Studio.

  8. Choisissez Modifier l'application, ce qui vous amènera dans le 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 qui peut ê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 : sortie automatique composée du résumé traité depuis Amazon Bedrock, qui peut être utilisé dans votre application.

Pour créer et configurer une automatisation qui envoie une invite à Amazon Bedrock et traite et renvoie un résumé

  1. Choisissez l'onglet Automatisations en haut du canevas.

  2. Choisissez + Ajouter une automatisation.

  3. Dans le panneau de droite, choisissez Propriétés.

  4. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez InvokeBedrock et appuyez sur Entrée.

  5. 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 à Amazon Bedrock en effectuant les étapes suivantes :

    1. Dans le canevas, dans la zone des paramètres, choisissez + Ajouter.

    2. Pour Name (Nom), entrez input.

    3. Dans Description, entrez n'importe quelle description, telle queText to be sent to Amazon Bedrock.

    4. Dans Type, sélectionnez Chaîne.

    5. Choisissez Ajouter pour créer le paramètre.

  6. Ajoutez une action GenAI Prompt en suivant les étapes suivantes :

    1. Dans le panneau de droite, choisissez Actions.

    2. Choisissez GenAI Prompt pour ajouter une action.

  7. Configurez l'action en effectuant les étapes suivantes :

    1. Choisissez l'action dans le canevas pour ouvrir le menu Propriétés de droite.

    2. Renommez l'action PromptBedrock en choisissant l'icône en forme de crayon, en saisissant le nom et en appuyant sur Entrée.

    3. Dans Connector, sélectionnez le connecteur qui a été créé dansÉtape 1 : Création et configuration d'un rôle IAM et d'un connecteur App Studio.

    4. Dans Modèle, choisissez le modèle Amazon Bedrock que vous souhaitez utiliser pour traiter l'invite. Dans ce tutoriel, vous allez choisir Claude 3.5 Sonnet.

    5. Dans l'invite utilisateur, entrez{{params.input}}. Il s'agit du input paramètre que vous avez créé précédemment et qui contiendra le texte saisi par les utilisateurs de votre application.

    6. Dans l'invite système, saisissez les instructions 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.

    7. Choisissez les paramètres de demande pour le développer et mettez à jour les champs suivants :

      • Dans Température, entrez0. La température détermine le caractère aléatoire ou la créativité 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.

  8. La sortie de cette automatisation sera le texte résumé, cependant, 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 la barre de navigation de gauche, choisissez l'InvokeBedrockautomatisation.

    2. Dans le menu Propriétés de droite, dans Sortie, choisissez + Ajouter.

    3. Dans Sortie, entrez{{results.PromptBedrock.text}}. Cette expression renvoie le contenu de l'processResultsaction.

É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 laquelle vos utilisateurs vont interagir. 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 dotées d'une page par défaut, vous allez donc renommer celle-ci au lieu d'en ajouter une.

Pour renommer la page par défaut

  1. Dans le menu de navigation de la barre supérieure, choisissez Pages.

  2. Dans le panneau de gauche, choisissez Page1 et choisissez le panneau Propriétés dans le panneau de droite.

  3. Choisissez l'icône en forme de crayon, entrezTextSummarizationTool, puis appuyez sur Entrée.

  4. Dans Libellé de navigation, entrezTextSummarizationTool.

Ajouter des composants à la page

Pour ce didacticiel, l'application de synthèse de texte comporte une page qui contient les éléments suivants :

  • Composant de saisie de texte que les utilisateurs finaux utilisent pour saisir une invite à résumer.

  • Composant Button utilisé pour envoyer l'invite à Amazon Bedrock.

  • 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.

  2. Choisissez le texte saisi dans le canevas pour le sélectionner.

  3. Dans le panneau Propriétés situé à droite, mettez à jour les paramètres suivants :

    1. Choisissez l'icône en forme de crayon pour renommer la saisie de inputPrompt texte.

    2. Dans Libellé, entrezPrompt.

    3. Dans Placeholder, entrezEnter 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 Button et faites-le glisser sur le canevas.

  2. Cliquez sur le bouton dans le canevas pour le sélectionner.

  3. Dans le panneau Propriétés situé à droite, mettez à jour les paramètres suivants :

    1. Choisissez l'icône en forme de crayon pour renommer le bouton. sendButton

    2. Dans Libellé du bouton, entrezSend.

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.

  2. Choisissez la zone de texte dans le canevas pour la sélectionner.

  3. Dans le panneau Propriétés situé à droite, mettez à jour les paramètres suivants :

    1. Choisissez l'icône en forme de crayon pour renommer le bouton. textSummary

    2. Dans Libellé, entrezSummary.

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 entreprenne des actions lorsqu'il interagit avec lui, 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 second 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.

  2. Dans le panneau Propriétés de droite, dans la section Déclencheurs, choisissez + Ajouter.

  3. Choisissez Invoke Automation.

  4. Choisissez le InvokeAutomation 1 déclencheur qui a été créé pour le configurer.

  5. Dans Nom de l'action, entrezinvokeBedrockAutomation.

  6. Dans Invoke Automation, sélectionnez l'InvokeBedrockautomatisation créée précédemment.

  7. Dans la zone des paramètres, dans le paramètre d'entrée créé précédemment, entrez{{ui.inputPrompt.value}}, qui transmet le contenu du composant de saisie de inputPrompt texte.

  8. 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 appelle l'automatisation pour envoyer une demande à Amazon Bedrock lorsque vous cliquez sur le bouton, l'étape suivante consiste à configurer un second 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 + Ajouter.

  2. Choisissez Exécuter l'action du composant.

  3. Choisissez le déclencheur Runcomponentaction1 qui a été créé pour le configurer.

  4. Dans Nom de l'action, entrezsetTextSummary.

  5. Dans Composant, sélectionnez le composant TextSummary.

  6. Dans Action, sélectionnez Définir la valeur.

  7. Dans Définir la valeur sur, entrez{{results.invokeBedrockAutomation}}.

Étape 5 : Publiez l'application sur Tests environment

En général, lorsque vous créez une application, il est 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 des 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 l'angle supérieur droit de l'éditeur d'applications, choisissez Publier.

  2. Ajoutez une description de version pour l'environnement de test.

  3. Vérifiez et cochez la case concernant le SLA.

  4. Sélectionnez Démarrer. La publication peut prendre jusqu'à 15 minutes.

  5. (Facultatif) Lorsque vous êtes prêt, vous pouvez autoriser d'autres personnes à accéder en choisissant Partager et en suivant les instructions. Pour plus d'informations sur le partage d'applications App Studio, consultezPartage des applications publiées.

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 disponibles pour les utilisateurs finaux tant qu'elles ne sont pas partagées. Pour plus d'informations sur les différents environnements d'application, consultezEnvironnements applicatifs.

(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 :