Build and deploy UIs for generated AI applications using AWS and Python

The advent of generative AI has ushered in a new era of possibilities, making it possible to create human-like text, images, code, and more. However, while these advances are exciting, data scientists often face challenges when it comes to developing UIs, prototyping, and interacting with business users. Traditionally, building front-end and back-end applications required knowledge of web development frameworks and infrastructure management, which can be difficult for those with primarily data science and machine learning expertise. did.

AWS provides a powerful set of tools and services that simplify the process of building and deploying generative AI applications, even for those with limited front-end and back-end development experience. This post uses Streamlit, a Python library for building interactive data applications, and AWS services such as Amazon Elastic Container Service (Amazon ECS), Amazon Cognito, and AWS Cloud Development Kit (AWS CDK) to User-friendly generative AI applications with and deployment.

Solution overview

This solution deploys a demo application that provides a clean and intuitive UI for interacting with the generative AI model, as shown in the following screenshot.

The UI consists of a text input area where the user can enter a query, and an output area that displays the generated results.

The default interface is simple and straightforward, but you can extend and customize it to suit your specific needs. Streamlit’s flexibility allows you to add features, adjust styles, and integrate other features as needed for your use case.

The solution we will consider consists of two main components: a Python application for the UI and an AWS deployment architecture to securely host and serve the application.

Python applications use the Streamlit library to provide an easy-to-use interface for interacting with generative AI models. Streamlit allows data scientists to use their existing skills and knowledge to create interactive web applications using Python. Streamlit allows you to quickly build and iterate on applications without having extensive front-end development experience.

The AWS deployment architecture hosts your Python application and makes it accessible from the internet to authenticated users. This solution uses the following major components:

• Amazon ECS and AWS Fargate provide serverless container orchestration platforms for running Python applications
• Amazon Cognito handles user authentication and ensures that only authorized users can access the generated AI applications.
• Application Load Balancer (ALB) and Amazon CloudFront are responsible for load balancing and content distribution, so your application is available to users around the world
• AWS CDK allows you to define and provision AWS infrastructure resources using familiar programming languages ​​such as Python.
• Amazon Bedrock is a fully managed service that provides a selection of high-performance generative AI models through an API.

The following diagram shows this architecture.

Prerequisites

As a prerequisite, you must enable access to your model in Amazon Bedrock and have access to a Linux or macOS development environment. You can also use a Windows development environment, but in that case you will need to update the instructions in this post.

Access to Amazon Bedrock underlying models is not allowed by default. To enable access to Anthropic’s Claude on Amazon Bedrock for use as part of this post, follow these steps:

1. Sign in to the AWS Management Console.
2. Select the us-east-1 AWS Region from the top right corner.
3. In the Amazon Bedrock console, model access in the navigation pane.
4. choose Manage access to models.
5. Select the model you want to access (in this post, Claude from Anthropic). You can also choose other models for future use.
6. choose Next after that submit Confirm your selection.

For more information about how to manage access to your models, see Accessing Amazon Bedrock Foundation Models.

Set up your development environment

To begin deploying your Streamlit application, you need access to a development environment with the following software installed:

You must also configure the AWS CLI. One way to do this is to get your access key from the console and set your credentials using the aws configure command in Terminal.

Clone a GitHub repository

Using your development environment’s terminal, enter the commands in the following steps.

1. create a clone deploy-streamlit-app Repository from the AWS sample GitHub repository:

git clone https://github.com/aws-samples/deploy-streamlit-app.git

2. Navigate to the cloned repository.

Create a Python virtual environment and install AWS CDK

Complete the following steps to set up your virtual environment and AWS CDK.

1. Create a new Python virtual environment (Python version must be 3.8 or later).

2. Activate your virtual environment.

source .venv/bin/activate

3. Install the AWS CDK, which includes the required Python dependencies.

pip install -r requirements.txt

Configure the Streamlit application

To configure your Streamlit application, follow these steps:

1. in docker_app In the directory, config_file.py file.
2. open config_file.py In the editor, STACK_NAME and CUSTOM_HEADER_VALUE variable:
   1. Stack names allow you to deploy multiple applications to the same account. Choose a different stack name for each application. For your first application, you can leave the default values.
   2. The custom header value is a security token that CloudFront uses to authenticate with your load balancer. It can be selected randomly, but must be kept secret.

Deploy the AWS CDK template

To deploy the AWS CDK template, follow these steps.

1. Bootstrap the AWS CDK from the terminal.

2. Deploy the AWS CDK template. This creates the required AWS resources.

3. input y When asked if you want to deploy the changes (yes).

The deployment process may take 5 to 10 minutes. Once completed, note the CloudFront distribution URL and Amazon Cognito user pool ID in the output.

Create an Amazon Cognito user

To create an Amazon Cognito user, follow these steps.

1. In the Amazon Cognito console, navigate to the user pool that you created as part of your AWS CDK deployment.
2. in user tab, select Create user.

3. Enter your username and password.
4. choose Create user.

Access the Streamlit application

To access the Streamlit application, follow these steps:

1. Open a new web browser window or tab and navigate to your CloudFront distribution URL from the AWS CDK deployment output.

If you haven’t written down this URL, you can open the AWS CloudFormation console and find it in the stack’s output.

2. Log in to your Streamlit application using the Amazon Cognito user credentials you created in the previous step.

You can now access and work with Streamlit applications that are deployed and run on AWS using the provided AWS CDK templates.

This deployment is intended as a starting point and demonstration. Before using this application in production, you should thoroughly review and implement appropriate security measures, such as configuring HTTPS on your load balancer and following AWS best practices for securing your resources. For more information, see the README.md file in the GitHub repository.

Customize the application

of aws-samples/deploy-streamlit-app GitHub repositories provide a solid foundation for building and deploying generative AI applications, while also being highly customizable and extensible.

Let’s take a look at how you can customize your Streamlit application. Because the application is written in Python, you can modify it to integrate with different generative AI models, add new functionality, and change the UI to suit your application’s requirements.

For example, suppose you want to add a button that calls an LLM answer instead of automatically calling it when the user enters input text. To change the , do the following: docker_app/app.py file:

1. After the definition of input_sent Add text input and Streamlit button.

# Insert this after the line starting with input_sent = …
submit_button = st.button("Get LLM Response")

2. Instead of checking if the button was clicked, change the if condition to check if the button was clicked. input_sent:

# Replace the line `if input_sent:` by the following
if submit_button:

3. Redeploy the application by typing the following in the terminal:

Deployment takes less than 5 minutes. The next section shows you how to test your changes locally before deploying them. This speeds up your development workflow.

4. Once the deployment is complete, refresh the web page in your browser.

The Streamlit application displays buttons with the following labels: Obtaining LLM responses. When the user selects this button, the LLM is called and the output is displayed in the UI.

This is just one example of how you can customize your Streamlit application to suit your specific requirements. You can further modify the code as needed to integrate with different generative AI models, add functionality, and enhance the UI.

Test changes locally before deployment

I deploy the application using cdk deploy You can test your changes in a live AWS environment, but it can be time-consuming, especially during the development and testing stages. Fortunately, you can run and test your application locally before deploying it to AWS.

To test your changes locally, follow these steps:

1. In the terminal, go to docker_app Directory where the Streamlit application is located:

2. Install the Python application dependencies if you haven’t already done so. These dependencies are different from the AWS CDK application dependencies that you previously installed.

pip install -r requirements.txt

3. Start the Streamlit server using the following command:

streamlit run app.py --server.port 8080

This will start the Streamlit application on port 8080.

You can now interact with your locally running Streamlit application and test your changes without having to redeploy your application to AWS.

Remember to stop the Streamlit server ( Ctrl+C (in the terminal) once the test is complete.

Testing your changes locally significantly shortens your development and testing cycles, allowing you to iterate more quickly and spot issues earlier in the process.

cleaning

To avoid incurring additional charges, please clean up the resources created during this demo.

1. Open a terminal in your development environment.
2. Make sure you are in the root directory of your project and that your virtual environment is activated.

cd ~/environment/deploy-streamlit-app
source .venv/bin/activate

3. Destroy the AWS CDK stack.

4. Confirm the deletion by typing yes When prompted.

conclusion

Building and deploying user-friendly generative AI applications no longer requires extensive knowledge of front-end and back-end development frameworks. Using Streamlit and AWS services, data scientists can focus on their core expertise while delivering secure, scalable, and easily accessible applications to business users.

The complete code for the demo is available in the GitHub repository. This provides a valuable starting point for building and deploying generative AI applications, allowing you to quickly set up a working prototype and iterate from there. We encourage you to explore the repository and try the provided solutions to create your own applications.

As the adoption of generative AI continues to grow, the ability to build and deploy user-friendly applications will become increasingly important. By using AWS and Python, data scientists have tools and resources at their fingertips to bridge the gap between technical expertise and the need to introduce models to business users through a secure and accessible UI. You can put it in.

About the author

Riolu Perez is a Principal Solutions Architect for a construction team based in Toulouse, France. He enjoys using big data, machine learning, and generative AI to help solve business challenges and support customers in their digital transformation efforts. He is personally passionate about robotics and IoT, and is always looking for new ways to use technology for innovation.