I created a Static Website using ChatGPT and Python

Python is a very flexible programming language that allows you to accomplish numerous tasks, and building a website is one of them. Now I am not talking about those magnificent-looking, SEO-optimized websites. But if you have just developed some software and want to make it available to the world, then Python provides you with the right tools. On the other hand, ChatGPT is an AI tool that everyone is familiar with. It generates responses to the queries called prompts that are sent to the tool. So I thought, why not create a small website in Python using ChatGPT?

To build a website, we need an API in Python that allows us to build a website. Flask is one of the open-source libraries for Python that provides you with the tools necessary to build such a website. Together with a small piece of HTML code, Flask allows us to build a static webpage and add our piece of Python function that we want the world to use.

In this article, I am going to demonstrate how to build a very simple, static website that answers to your questions about machine learning. For this, I am going to use ChatGPT API to send requests and receive the response from it. Ultimately, I will display the response on my static webpage. So let’s get started!

Importing the dependencies

Because we are talking about a static website, understandably I started by importing the library flask. Apart from the website functions like accepting user input and generating output, flask would help me create a local server on my laptop that supports the website. Another library that I needed was the openai library that provides the functionality of ChatGPT at your fingertips. However, in order to use that, one needs to create an account on OpenAI website.

All in all, I needed just these two dependencies for my short project:

  • flask
  • openai
from flask import Flask, render_template, request, url_for
import openai

Creating the landing page

I started by creating a landing page that displayed my website name and the purpose of the page. So for that, I wrote a small HTML script.

<!DOCTYPE html>
<html lang="en">

<title>Welcome To Machine Learning Site</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
html,body {font-family:"Verdana",sans-serif}
h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",sans-serif}
</style>

<body style="background-color:#d9e9f9">
<img src="{{url_for('static', filename='logo.png')}}" alt="Machine Learning Site">
<h1>Welcome to Machine Learning Site</h1>
<h2>Ask anything about machine learning.</h2>
<form method="POST" enctype="multipart/form-data" action="/response">
        <label for="text">Enter the topic name:</label>
        <input type="text" id="query" name="query"><br><br>
        <input type="submit" value="Submit">
</form>
</body>
</html>

Basic understanding of HTML would tell you that the script creates a webpage that displays the name “Machine Learning Site” as the main title along with the logo. Another thing to note here is that the page has a text box where the users can fill in their topic of interest and click on the Submit button. That particular input is saved as the variable name “query” which will become useful while creating a prompt for ChatGPT.

Now it is important that the flask Python library recognizes this home page template and is able to find it when I run my Python script. For that, it is important to create a folder called templates and place this HTML script in that. Moreover, I wanted to display my logo on the homepage. Because it is a static image, HTML will look for it in a folder called static. Ultimately, the tree will look like:

  • project_folder
    • static
      • logo.png
    • templates
      • index.html
    • app.py

Ultimately, I created a main() function that would look up for the homepage template index.html.

app = Flask(__name__)

@app.route("/", methods=['GET', 'POST'])
def main():
    return render_template('index.html')

app.run(host='127.0.0.0', port=8888, debug=True)

Writing a function that returns a response from ChatGPT

In the previous part, I explained how I created the landing page by writing an HTML script and calling that via Flask in Python. Now, I want to save the user input in a variable, take that variable, and serve it to the OpenAI API as a prompt.

@app.route("/response", methods=['POST'])
def query():
   #if request.method == 'POST':
    text = request.form['query']
    gpt_response = askGPT(text)
    return render_template('index_response.html', gpt_response=gpt_response)

app.run(host='127.0.0.0', port=8888, debug=True)

The user input can be called using the form method in request constructor of flask. The method takes in the variable name as an argument. Remember from the early section that the user input was saved as the name query.

Further, I passed on this query to another function called askGPT that I had created (not displayed here) . Subsequently, the function returns the text response generated by the ChatGPT engine of OpenAI

Now things got simpler as all I had to do was to display that text back onto a new webpage. For this, I created a new HTML script called index_response.html that contained only the logo of Machine Learning Site and the response from ChatGPT. As seen in the Python code above, I passed on the answer from ChatGPT as the variable name gpt_response to index_response.html. Ultimately, as we know in flask, I initiated the server using app.run() and my website was ON!

However, the project is not public yet as I have not published it to a public server yet (it’s a work in progress), though you can have a look at this video below to see the output.

Conclusion

To conclude, I found this cool that you can combine flask and openai APIs to create something like this. Though the task was simple and was no rocket science, I did have fun accomplishing it.

I encourage you to try this out yourself. If you are interested in the askGPT function or any other part of the code that you did not understand, write me at kolbenkraft.kk@gmail.com. You can also support me by sharing this as much as possible with your friends and interested people. I also did other interesting projects like using Statistics to predict my Instagram reach and Predicting Diabetes using Machine Learning. If you are interested in reading about such projects in Python and Machine Learning, follow me on social media and feel free to join my newsletter.

Leave a Reply