Generate Code for a Webpage

Generate Code for a Webpage


The marketing team is struggling to manage a web server for sharing content with external clients, as updates to web content and code are time-consuming and resource-heavy. They're looking for a more efficient, user-friendly solution, ideally using Generative AI, that enables staff with little AWS experience to handle updates with ease.


Solution

This solution provides seamless integration between Amazon Bedrock generative AI capabilities and traditional Amazon EC2 website hosting services. The practical approach creates and updates web content by combining AI-generated content with a conventional hosting infrastructure.


Step 1: This solution provides seamless integration between the generative AI capabilities of Amazon Bedrock and the traditional website hosting services on Amazon Elastic Compute Cloud (Amazon EC2).


Step 2: Enable access to an AI model through the Amazon Bedrock console.


Step 3: Create static website content by using the Amazon Bedrock chat/text playground to generate HTML and text elements.


Step 4:  Use EC2 Instance Connect to update the generated index.html file with the static website content on an EC2 instance.


Step 5:  Users can view the static website by entering the EC2 instance's public IP address in their web browser


Step 6: To test the system, use the Amazon Bedrock chat/text playground to create HTML content for a tic-tac-toe game. Then update the tictactoe.html file on the EC2 instance with the generated code.


Practice

  • Enable models on the Amazon Bedrock console.
  • Search and click on Bedrock
  • Scrow down and click on Model access
  • Click on Amazon and Nova Lite
  • Use a prompt to generate an index.html file in the Amazon Bedrock chat/text playground.
  • Update a deployed application on an Amazon EC2 instance.
  • Test the updated application by using the DNS address of the EC2 instance.


Step 1:

1. Review the practice lab objectives in the Concept section.

2. Click Start Lab or Open AWS Console to begin.

3. Follow the lab instructions carefully, and use the arrows to navigate between steps.


AWS services not used in this lab are disabled in the lab environment. In addition, the capabilities of the services used in this lab are limited to what the lab requires.


Step 2:

1. In the top navigation bar search box, type:

bedrock

2. In the search results, under Services, click Amazon Bedrock.

3. Go to the next step.


Step 3:

1. Review the Amazon Bedrock Overview page.

2. In the left navigation pane, scroll down to the Bedrock configurations section.

3. Go to the next step.


Step 4:

1. At the bottom of the left navigation pane, under Bedrock configurations, click Model access.

2. In the Base models section, review the displayed models.

3. Above that section, click Enable specific models.

4. Go to the next step.


Step 5:

1. If needed, click to expand Amazon.

2. Choose Nova Lite.

3. Go to the next step.


Step 6:

1. If needed, click to expand Amazon.

2. Choose Nova Lite.

3. Go to the next step.


Step 7:

1. Click Next.

2. Go to the next step.


Step 8:

1. In the Review and submit step, in the Model access modifications section, review the displayed model.

2. At the bottom of the page, click Submit.

3. Go to the next step.


Step 9:

1. Review the alert message.

2. In the Base models section, scroll down to the Amazon models.

3. Go to the next step.


Step 10:

1. Review the model that was granted access.

2. In the left navigation pane, under Playgrounds, click Chat / Text.

3. Go to the next step.


Step 11:

1. On the Chat / Text playground page, for Mode, click the arrow to expand the dropdown list.

- Be sure to review the available modes.

2. Choose Chat.

3. Go to the next step.


Step 12:

1. Click Select model.

2. Go to the next step.


Step 13:

1. In the pop-up box, for Model providers, choose Amazon.

2. For Models with access, choose Nova Lite.

3. For Inference, choose On demand.

4. Click Apply.

5. Go to the next step.


Step 14:

1. In the Configurations window, under Randomness and diversity, for Temperature, move the slider to 0.

- Temperature controls the randomness of the model's responses.

- Top P (Nucleus Sampling) controls the cumulative probability threshold for token selection.

2. Under Length, for Response length, move the slider to 5120.

- Length parameters control how much text the model generates in its responses.

3. In the right pane prompt box, type:

Generate a static webpage for AnyCompany marketing agency without any explanation.

4. Click Run.

5. Go to the next step.


Step 15:

1. Review the generated response.

2. Click the copy icon to copy the generated response, and then paste it in the text editor of your choice on your device. - You use this response in a later step.

3. Go to the next step.


Step 16:

1. In the top navigation bar search box, type: ec2

2. In the search results, under Services, click EC2.

3. Go to the next step.


Step 17:

1. On the Dashboard, in the Resources section, click Instances (running).

2. Go to the next step.


Step 18:

1. In the Instances section, review the details of the available EC2 instance, app-server.

2. Choose app-server.

3. On the Details tab, under Public IPV4 address, click the copy icon to copy the IP address for the app-server instance, and then paste it in the copy editor of your choice on your device.

4. Go to the next step.


Step 19:

1. In a new browser tab (or window) address bar, type: http:// and then, paste the IP address that you just copied, and then press Enter. - Your IP address will differ from what is displayed in the screenshot example.

2. Review the Hello World message.

- This message is from the index.html file that was created on the EC2 instance during the lab's prebuild process.

3. Go to the next step.


Step 20:

1. Return to the Amazon EC2 browser tab.

2. In the Instances section, click Connect.

3. Go to the next step.


Step 21

1. Click the EC2 Instance Connect tab.

2. Click Connect.

3. Go to the next step.


Step 22

1. In the terminal window, at the command prompt, to change the directory to the nginx html folder, run (type the command and press Enter):

cd /usr/share/nginx/html

2. To list the files in the html folder, run:

ls -ltr

3. Review the two .html files created as part of the prebuild process.

4. To view the contents of the index.html file, run:

nano index.html

- Nano is a basic, user-friendly text editor for Unix-based systems (such as Linux and macOS).

5. To close the instance details tab, click the X.

6. Go to the next step.


Step 23

1. Review the file contents.

2. Review the nano commands listed at the bottom of the terminal window.

- You can always access the help menu within nano by pressing Ctrl+G for a complete list of commands.

3. Delete the file contents.

- You can use the backspace or delete command to delete the file contents.

4. Go to the next step.


Step 24

1. Paste the contents of the static webpage that you copied in an earlier step.

2. At the bottom of the contents, delete the three backquotes.

3. Go to the next step.


Step 25

1. At the top of the terminal window, delete ```html.

- You can use the upward arrow on the keyboard to scroll up to the top of the file.

2. Go to the next step.


Step 26

1. Press Ctrl+X on your keyboard (not shown).

2. For "Save modified buffer?", type:

Y

- If the terminal prompts you to enter the file name, press Enter.

3. Go to the next step.


Step 27

1. In the terminal, run:

ls -ltr

2. Review to confirm that the index.html file is updated.

- To confirm that it's updated, you can check the file timestamp.

3. Go to the next step.


Step 28

1. In a new browser tab (or window) address bar, paste the IP address that you copied and edited in an earlier step, and then press Enter.

2. Review the updated index.html file.

- The contents of the provided file is an example. The contents might differ based on the response provided by the large language model (LLM).

3. Go to the next step.


Step 29

1. Return to the EC2 Instance Connect terminal browser tab.

2. To view the contents of the tictactoe.html file, run:

nano tictactoe.html

3. Go to the next step.


Step 30

1. Review the contents of the file.

- You must update this file in the upcoming DIY section of this solution.

2. Go to the next step.


DIY Goals

  • Use Amazon Bedrock to generate a tic-tac-toe game in an .html file.
  • Update the tictactoe.html file on the EC2 instance by using EC2 Instance Connect.


Hint

  • Navigate to the Amazon Bedrock chat/text playground browser tab.
  • In the prompt text box, type: "Generate an .html file for a tic-tac-toe game without any explanation."
  • Copy the generated content and update the tictactoe.html file on the EC2 instance.
  • Remove the backquotes and save the file.
  • Test the game in a new browser tab by using the URL: http://<ip_address>/tictactoe.htm

Summary

  • Use Amazon Bedrock models and the chat playground to generate your HTML content. Then use EC2 Instance Connect to update the web server.
  • After updating the index.html file through EC2 Instance Connect, the changes are immediately visible to your clients.
  • Enable models on the Amazon Bedrock console.
  • Use the chat playground to generate static content.
  • Use EC2 Instance Connect to update files on Amazon EC2.

Building a Web Site with Flask

By Flaubert Tchouangwa • August 5, 2025
Build a Web Site with Flask Install Flask in a virtual environment and create a simple "Hello World" web app. You’ll learn to modify route definitions, use debug mode, and render HTML pages using Flask routes. You will also work with boilerplate HTML and CSS to customize your site, dynamically generating URLs with url_for , creating and inheriting Jinja templates, and defining multiple routes that link to the same function.

Helpful Conda Commands for Managing Environments and Packages

By Flaubert Tchouangwa • August 1, 2025
When working with Python using Anaconda, managing environments and packages with Conda is essential for keeping your projects organized and conflict-free. Below is a handy table of common Conda commands categorized by functionality:

Install Anaconda

By Flaubert Tchouangwa • August 1, 2025
To easily set up Python and Jupyter Notebook, install the free Anaconda distribution, which includes Python, Jupyter, and essential data science libraries. Download Anaconda from the official website, run the installer, and follow the setup instructions. Once installed, launch Anaconda Navigator or open Jupyter Notebook directly from the Start menu. This all-in-one package simplifies environment management and lets you start coding in Python immediately through an interactive browser-based interface ideal for data analysis, machine learning, and educational projects.

Create an environment for Hugging Face’s Transformers library

By Flaubert Tchouangwa • August 1, 2025
To create an environment for working with Hugging Face’s Transformers library, start by creating a new Conda environment using conda create --name llm_project_env , then activate it with conda activate llm_project_env . Next, install the Transformers library by running conda install transformers . Launch Jupyter Notebook from within this environment using jupyter notebook , and you can begin writing Python code as usual. For example, you can use from transformers import pipeline and create a sentiment analysis pipeline with pipeline("sentiment-analysis") , then test it with a sentence like "I love NLP!" . Once you're done, deactivate the environment with conda deactivate .

Conda Workflow for Working with Environments and Packages

By Flaubert Tchouangwa • August 1, 2025
The Conda workflow for managing environments and packages begins by creating a new environment with conda create --name myenv python=3.10 to isolate dependencies and avoid project conflicts. Activate it using conda activate myenv , then install necessary packages like NumPy, Pandas, or Matplotlib with conda install . You can also use channels like conda-forge for additional packages. Use conda list to view installed packages and conda env export > environment.yml to back up or share your setup. When finished, deactivate the environment with conda deactivate , and optionally remove it using conda remove --name myenv --all . You can also list all environments with conda env list or clone one with conda create --name newenv --clone myenv .