How I built a text prompt based webpage generator with ChatGPT Generative AI APIs
I was keen to check the limits of ChatGPT so started experimenting with ChatGPT APIs. So I decided to build an text prompt triggered web page builder using Generative AI.
Now the point was — if we had to prove that AI can generate functional web pages then it had to do it almost from scratch. So I had to ensure I do not write any code apart from some basic parsing logic to filter the responses from the API.
Here is what the solution looks like
So we have a simple python command line app that takes in instructions and prompts OpenAI. The prompts are geared towards getting a response which is basically HTML.
In each iteration the call is made with existing index.html content with a prompt to make a modification as fed by the instruction on the command line.
The app also has a deploy feature to upload to S3 and invalidate CloudFront so the webpage is deployed properly.
The app makes a back up before every iteration so if the user is not happy they can rollback to the previous version.
So the code is very simple. All you need to do is ensure you set up the environment variables for OpenAI API Key, AWS credentials, S3 bucket name and the CloudFront ID.
Install dependencies
pip install openai
pip install boto3Set the following environment variables
export OPENAI_API_KEY=...
export BUCKET=...
export CLOUDFRONT_ID=...
export AWS_ACCESS_KEY_ID=...
export AWS_SECRET_ACCESS_KEY=...
export AWS_REGION=...
export AWS_SESSION_TOKEN=... if applicableThe code is fairly straightforward and a quick unoptimized hack but works.
from openai import OpenAI
import boto3
import os
from time import time
import shutil
client = OpenAI()
# Rollback to previous version
def rollback():
shutil.copy("backup", "index.html")
# back up existing version
def backup():
f = open("index.html", "r")
html = f.read()
f.close()
backup = open("backup", "w")
backup.write(html)
backup.close
return html
# save changes
def save(html):
f = open("index.html", "w")
f.write(html)
f.close()
# deploy to S3 with correct mimetype and invalidate Cloudfront cache
def deploy():
s3 = boto3.client('s3')
# put the object in the place you want. I pointed it to /test/index.html
s3.upload_file('./index.html', os.environ['BUCKET'], 'test/index.html', ExtraArgs={'ContentType': 'text/html'})
cf = boto3.client('cloudfront')
response = cf.create_invalidation(
DistributionId=os.environ["CLOUDFRONT_ID"],
InvalidationBatch={
'Paths': {
'Quantity': 1,
'Items': [
'/*'
],
},
'CallerReference': str(time()).replace(".", "")
}
)
# Start of main
print('Enter instruction: ')
instruction = input()
# keep trying until user inputs "exit"
while instruction != 'exit':
if instruction == 'rollback':
rollback()
elif instruction == 'deploy':
deploy()
else:
html = backup()
completion = client.chat.completions.create(
model="gpt-3.5-turbo",
messages=[
{"role": "system", "content": "You are a web developer."},
{"role": "user", "content": f"```html\n{html}``` {instruction}? Just output the full html code please. No comments or instructions please."}
]
)
save(completion.choices[0].message.content.replace('```html', '').replace('```', ''))
print("Enter instruction: ")
instruction = input()Create a bare minimum html or even a blank one and you can simply start prompting the app to make modifications.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GenAI Text Prompt Web Builder</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
section {
padding: 20px;
}
.products {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.product {
margin: 10px;
padding: 10px;
border: 1px solid #333;
border-radius: 5px;
width: 200px;
background-color: #f4f4f4;
}
.product img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
position: fixed;
bottom: 0;
width: 100%;
}
footer p {
margin: 0;
}
</style>
</head>
<body>
<header>
<h1>GenAI Text Prompt Web Builder</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>Home</h2>
<p>This website is about food. Explore the delicious world of culinary delights with us!</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Reach out to us for any inquiries.</p>
<p>Sid Malani - cloudangle.io</p>
</section>
<footer>
<p>© 2023 GenAI Text Prompt Web Builder. All rights reserved.</p>
</footer>
</body>
</html>Now for the instructions.
Enter instruction:
create a new menu item - "Products" and a corresponding section with 3 products and a bit of description for each. - "pizza", "pasta" and "curry"
Enter instruction:
add "About Us" in the menu and corresponding section.
Enter instruction:
can you make all the product boxes aligned?
....To test locally you can simply open the index.html in a browser and keep refreshing after each change. Enter rollback if you dont like the change and try again with a different prompt.
Here it is in real action
Conclusion
While this illustration is quite rudimentary and lacks practical significance in the real world, it underscores the potential of Generative AI tools. The possibilities for enhancing productivity are virtually limitless. However, on the flip side, there is the risk of significant job displacement. On a positive note, the efficient utilization of GenAI has the capacity to accelerate processes and eliminate numerous routine tasks.
