Créez une interface utilisateur personnalisée pour Amazon Q Business afin d'augmenter la productivité de la main-d'œuvre grâce à l'IA générative

Cet article montre comment créer une interface utilisateur personnalisée pour Amazon Q Business. L'interface utilisateur personnalisée vous permet d'implémenter des fonctionnalités spéciales telles que la gestion des commentaires

This walkthrough demonstrates how to build a custom UI for Amazon Q Business. The customized UI allows you to implement special features like handling feedback, using company brand colors and templates, and using a custom login. It also enables conversing with Amazon Q through an interface personalized to your use case.

Cette procédure pas à pas montre comment créer une interface utilisateur personnalisée pour Amazon Q Business. L'interface utilisateur personnalisée vous permet de mettre en œuvre des fonctionnalités spéciales telles que la gestion des commentaires, l'utilisation des couleurs et des modèles de la marque de l'entreprise et l'utilisation d'une connexion personnalisée. Il permet également de converser avec Amazon Q via une interface personnalisée selon votre cas d'utilisation.

Prerequisites

Conditions préalables

For this walkthrough, you should have the following prerequisites:

Pour cette procédure pas à pas, vous devez disposer des prérequis suivants :

An active AWS account. If you do not have an AWS account, create one at https://aws.amazon.com.

Un compte AWS actif. Si vous n'avez pas de compte AWS, créez-en un sur https://aws.amazon.com.

An enterprise knowledge base with relevant data and expertise. For more information, see Creating an enterprise knowledge base.

Une base de connaissances d'entreprise avec des données et une expertise pertinentes. Pour plus d’informations, consultez Création d’une base de connaissances d’entreprise.

An Amazon Q Business application. For more information, see Creating an Amazon Q Business application.

Une application Amazon Q Business. Pour plus d'informations, consultez Création d'une application Amazon Q Business.

Basic knowledge of HTML, CSS, JavaScript, and Python.

Connaissance de base de HTML, CSS, JavaScript et Python.

Generate a private certificate

Générer un certificat privé

If you already have an SSL certificate, you can skip this section.

Si vous disposez déjà d'un certificat SSL, vous pouvez ignorer cette section.

You will receive a warning from your browser when accessing the UI if you didn’t provide a custom SSL certificate when launching the AWS CloudFormation stack. The instructions in this section show you how to create a self-signed certificate. This is not recommended for production use cases. You should obtain an SSL certificate that has been validated by a certificate authority, import it into ACM, and reference this when launching the CloudFormation stack. If you want to continue with the self-signed certificate (for development purposes), you should be able to proceed past the browser warning page. With Chrome, you will see the message Your connection is not private error message (NET::ERR_CERT_AUTHORITY_INVALID), but by choosing Advanced, you should then see a link to proceed.

Vous recevrez un avertissement de votre navigateur lors de l'accès à l'interface utilisateur si vous n'avez pas fourni de certificat SSL personnalisé lors du lancement de la pile AWS CloudFormation. Les instructions de cette section vous montrent comment créer un certificat auto-signé. Ceci n’est pas recommandé pour les cas d’utilisation en production. Vous devez obtenir un certificat SSL validé par une autorité de certification, l'importer dans ACM et y faire référence lors du lancement de la pile CloudFormation. Si vous souhaitez continuer avec le certificat auto-signé (à des fins de développement), vous devriez pouvoir dépasser la page d'avertissement du navigateur. Avec Chrome, vous verrez le message d'erreur Votre connexion n'est pas privée (NET::ERR_CERT_AUTHORITY_INVALID), mais en choisissant Avancé, vous devriez alors voir un lien pour continuer.

The following command generates a sample self-signed certificate (for development purposes) and uploads the certificate to ACM. You can also find the script on the GitHub repo.

La commande suivante génère un exemple de certificat auto-signé (à des fins de développement) et télécharge le certificat sur ACM. Vous pouvez également trouver le script sur le dépôt GitHub.

Note down the CertificateARN to use later while provisioning the CloudFormation template.

Notez le CertificateARN à utiliser ultérieurement lors du provisionnement du modèle CloudFormation.

Provision resources with the CloudFormation template

Provisionner des ressources avec le modèle CloudFormation

The full source of the solution on in the GitHub repository and is deployed with AWS CloudFormation.

La source complète de la solution se trouve dans le référentiel GitHub et est déployée avec AWS CloudFormation.

Choose Launch Stack to launch a CloudFormation stack in your account and deploy the template:

Choisissez Launch Stack pour lancer une pile CloudFormation dans votre compte et déployer le modèle :

This template creates separate IAM roles for the Application Load Balancer, Amazon Cognito, and the EC2 instance. Additionally, it creates and configures those services to run the end-to-end demonstration.

Ce modèle crée des rôles IAM distincts pour l'Application Load Balancer, Amazon Cognito et l'instance EC2. De plus, il crée et configure ces services pour exécuter la démonstration de bout en bout.

Provide the following parameters for the stack:

Fournissez les paramètres suivants pour la pile :

Create an IAM Identity Center application

Créer une application IAM Identity Center

The actions described in this section are one-time actions. The goal is to configure an application in IAM Identity Center to represent the application you are building. Specifically, in this step, you configure IAM Identity Center to be able to trust the identity tokens by which your application will represent its authenticated users. Complete the following steps:

Les actions décrites dans cette section sont des actions ponctuelles. L'objectif est de configurer une application dans IAM Identity Center pour représenter l'application que vous créez. Plus précisément, au cours de cette étape, vous configurez IAM Identity Center pour pouvoir faire confiance aux jetons d'identité par lesquels votre application représentera ses utilisateurs authentifiés. Effectuez les étapes suivantes :

Custom UI

Interface utilisateur personnalisée

The CloudFormation stack deploys and starts the Streamlit application on an EC2 instance on port 8080. To view the health of the application running behind the Application Load Balancer, open the Amazon EC2 console and choose Load Balancing under Target groups in the navigation pane. For debugging purposes, you can also connect to Amazon EC2 through Session Manager, a capability of AWS Systems Manager.

La pile CloudFormation déploie et démarre l'application Streamlit sur une instance EC2 sur le port 8080. Pour afficher l'état de l'application exécutée derrière l'Application Load Balancer, ouvrez la console Amazon EC2 et choisissez Load Balancing sous Groupes cibles dans le volet de navigation. À des fins de débogage, vous pouvez également vous connecter à Amazon EC2 via Session Manager, une fonctionnalité d'AWS Systems Manager.

To access the custom UI, use the URL that you copied from the CloudFormation stack output. Choose Sign up and use the same email address for the users that were registered in IAM Identity Center.

Pour accéder à l'interface utilisateur personnalisée, utilisez l'URL que vous avez copiée à partir de la sortie de la pile CloudFormation. Choisissez S'inscrire et utilisez la même adresse e-mail pour les utilisateurs enregistrés dans IAM Identity Center.

After successful authentication, you’re redirected to the custom UI. You can enhance it by implementing custom features like handling feedback, using your companies brand colors and templates, and personalizing it to your specific use case.

Une fois l'authentification réussie, vous êtes redirigé vers l'interface utilisateur personnalisée. Vous pouvez l'améliorer en implémentant des fonctionnalités personnalisées telles que la gestion des commentaires, en utilisant les couleurs et les modèles de la marque de votre entreprise et en le personnalisant en fonction de votre cas d'utilisation spécifique.

Clean up

Nettoyer

To avoid future charges in your account, delete the resources you created in this walkthrough. The EC2 instance with the custom UI will incur charges as long as the instance is active, so stop it when you’re done.

Pour éviter de futurs frais sur votre compte, supprimez les ressources que vous avez créées au cours de cette procédure pas à pas. L'instance EC2 avec l'interface utilisateur personnalisée entraînera des frais tant qu'elle sera active, alors arrêtez-la lorsque vous avez terminé.

Conclusion

Conclusion

In this post, you learned how to integrate a custom UI with Amazon Q Business. Using a custom UI tailored to your specific needs and requirements makes Amazon Q more efficient and straightforward to use for your business. You can include your company branding and design, and have control and ownership over the user experience. For example, you could introduce custom feedback handling features.

Dans cet article, vous avez appris à intégrer une interface utilisateur personnalisée avec Amazon Q Business. L'utilisation d'une interface utilisateur personnalisée adaptée à vos besoins et exigences spécifiques rend Amazon Q plus efficace et plus simple à utiliser pour votre entreprise. Vous pouvez inclure l’image de marque et le design de votre entreprise, et avoir le contrôle et la propriété de l’expérience utilisateur. Par exemple, vous pouvez introduire des fonctionnalités personnalisées de gestion des commentaires.

The sample custom UI for Amazon Q discussed in this post is provided as open source—you can use it as a starting point for your own solution, and help improve it by contributing bug fixes and new features using GitHub pull requests. Explore the code, choose Watch in the GitHub repo to receive notifications about new releases, and check back for the latest updates. We welcome your suggestions for improvements and new features.

L'exemple d'interface utilisateur personnalisée pour Amazon Q présenté dans cet article est fourni en open source. Vous pouvez l'utiliser comme point de départ pour votre propre solution et contribuer à l'améliorer en apportant des corrections de bugs et de nouvelles fonctionnalités à l'aide des requêtes pull GitHub. Explorez le code, choisissez Regarder dans le dépôt GitHub pour recevoir des notifications sur les nouvelles versions et revenez pour les dernières mises à jour. Nous apprécions vos suggestions d’améliorations et de nouvelles fonctionnalités.

For more information on Amazon Q business, refer to the Amazon Q Business Developer Guide.

Pour plus d'informations sur Amazon Q Business, consultez le Guide du développeur Amazon Q Business.