Flask Archives - Be on the Right Side of Change

I Made a ChatGPT-Powered Logo Generator App Using Python Flask in 7 Steps

Roman Veltman — Mon, 10 Jul 2023 09:45:20 +0000

In this tutorial, I will show you my step-by-step process of creating a ChatGPT-powered Logo Generator App using Python Flask. This simple but powerful logo generator allows users to quickly generate unique and creative logos for their businesses.

Demo Link: https://flask-openai-logo-app.vercel.app/

You can watch my explainer video here as you go through the project:

Prerequisites

This app uses Python, HTML/CSS, Flask, and the OpenAI API capabilities.
This Finxter Academy course inspired this tutorial:

Full Course: ChatGPT at the Heart – Building a Movie Recommendation Python Web App

Step 1 – Creating an OpenAI Account

The first thing I needed to do was to create an OpenAI account. This account allows you to access the OpenAI image-creating API I used to generate logos in my Logo Generator App.

Head over to the OpenAI website and create an account and API key.

You can follow the steps from this great Chris tutorial:

Step 2 – Learning about OpenAI Image Creating API

My next step was to learn to use the OpenAI image-creating API.

Now that you have an OpenAI account and API key let’s look at how to use the image-creating API.

To generate an image, copy&paste the following code and replace your API key:

import os
import openai

# Your API Key Here:
openai.api_key = 'sk-XXXXXXXXXXXXXXXXXXXXXXXXXXX'

# Your Image Generation Prompt Here:
prompt = "A logo for Fast Delivery service company"

response = openai.Image.create(
    prompt=prompt,
    n=1,
    size="256x256",
)

print(response)

Here we set up a request to the OpenAI API and include your API key. The request consists of the word description of the image (prompt), the number of pictures to be generated, and the image size. The OpenAI will use the prompt words to render the images.

The output will be a JSON string like this:

{
  "created": 1686480975,
  "data": [
    {
      "url": "https://oaidalleapiprodscus.blob.core.windows.net/private/org-1ax0neSifMwWgCJ8ttPW44Ya/user-TOM2sMmGh0vhOaHhwF18Nb1z/img-JGkInNPRrvZk6oYQROKchxUw.png?st=2023-06-11T09%3A56%3A15Z&se=2023-06-11T11%3A56%3A15Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-06-10T20%3A42%3A23Z&ske=2023-06-11T20%3A42%3A23Z&sks=b&skv=2021-08-06&sig=SLKkWiM1VjXklnQbABCnVaEtRrUTClH91cfXUpZ50GM%3D"
    }
  ]
}

The URL to download the image: response['data'][0]['url']

I used the size of 256×256 pixels because it cost less and generated faster.

Step 3 – Choosing a Logo Type

Before getting into the nitty-gritty of coding, it is essential to understand the basics of logo design.

A logo is a design that embodies an idea or concept intended to identify a business or product. Logos must convey an emotion or sentiment that the viewer can recognize instantly. The design and styling of a logo must be thoughtful and original. A logo must remain memorable and adaptable for various media.

There are many different types of logos. I decided to focus on creating letter mark logos for my Logo Generator App.

Step 4 – Engineering a Prompt for Logo Generation

A good prompt is critical for the Logo Generator App.

Prompt engineering is creating the right combination of words to generate a desired image. This is a crucial step in making our logo generator app because a good prompt will result in a good logo, and there are some basic rules to follow:

First, the prompt should be as specific as possible so that the AI can generate the desired logo accurately.

For example, if you want to generate a logo for a coffee shop, you should include words like “coffee beans”, “mug”, and “cafe”.

Second, keeping it short and simple is important, as more words will add to the complexity and may result in less accurate results.
Third, you should use descriptive words to create a vivid image.

After trying different prompts, I ended with this prompt:

“A modern, professional-looking, symmetrical, balanced, and centered letter mark logo that incorporates the company name {} in {} color.”

Step 5 – Writing the Python Flask App Code

Now that I have my prompt setup, it’s time to write the code for the Python Flask app.

I assume you have background knowledge of Python and Flask. If not, here is an excellent Chris article about Flask:

We want to have the following folder structure for our project.

We’ll start by creating the project folder, a virtual environment, and then install the necessary dependencies.

mkdir flask-openai-logo-app && cd flask-openai-logo-app

python3 -m venv venv
source venv/bin/activate

pip3 install flask
pip3 install openai
pip3 install urllib3==1.26.6
pip3 install python-dotenv

pip3 freeze > requirements.txt

Next, we create a .env file.

Note: it is important to remember to remove your API key from .env before making your project public!

FLASK_APP=openai-logo-app/app.py
FLASK_DEBUG=1
OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXXXXX

Now it’s time to create the app.py file.

import os
import openai
from flask import Flask, render_template, request


app = Flask(__name__)
openai.api_key = os.getenv("OPENAI_API_KEY")




@app.route("/", methods=("GET", "POST"))
def openai_app():
    if request.method == "POST":
        text = request.form["text"]
        color = request.form["color"]
        number = request.form["number"]
        response = openai.Image.create(
            prompt=generate_prompt(text, color),
            n=min(int(number), 5),
            size="256x256"
        )


        return render_template("index.html", result=response)


    return render_template("index.html")




def generate_prompt(text, color):
    return "Modern, symmetrical, balanced, centered, professional-looking, letter mark logo that incorporates the " \
           "company name: \"{}\", {} color.".format(text, color)




if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5050)

It contains the code that defines the ‘/’ endpoint, makes a request to the OpenAI API, and includes a function that generates the prompt based on the parameters we will get in an HTML form from the user.

Step 6 – Creating a Form (HTML & CSS)

Now, we want to create a simple form so users can customize the logo they want to make.

The form asks the user to fill in 3 fields: Color, Brand Name, and Number of images to be generated and has a “GENERATE LOGO” button to submit the form.

To do this, I created an HTML page with the form.



  OpenAI Logo Maker
  
  
  
  



  
  Generate a Lettermark logo
  
    
    
    
    
  
  {% if result %}
  
    {%for i in result['data']%}
      
    {%endfor%}
  
  {% endif %}

A lot of things are going on here.

First, I use a simple JS script based on the jquery library to show a “Loading…” animation after the user clicks the “GENERATE LOGO” button.

Second, I define the form input fields with placeholders with instructions for the user.

Lastly, the {{ … }} placeholder displays dynamic content in the template file. Flask depends on the Jinja2 template engine, so when render_template() is called, it equally calls the Jinja2 template engine, which substitutes the {{ … }} block with the values provided in the render_template() function.

In addition, I added a basic CSS styling file to make the form look presentable.

Step 7 – Getting and Displaying Images from OpenAI

When a user submits the form, the app requests the OpenAI API to get the selected image. The image is stored on the server, and a URL is generated.

I use Jinja2 support of conditional statements and for–loops inside the {% … %} blocks, and if the result variable is given, we get the created image’s URLs and display them.

Conclusion

Congratulation we have successfully come to the end of the tutorial!

Creating a Logo Generator App with OpenAI’s API and Python Flask was a fun and educational task.

I hope this tutorial was helpful and that you can create a logo generator application of your own.

Feel free to comment below if you have any questions or feedback.

The complete code is available on my GitHub page: https://github.com/rommanve/flask-openai-logo-app

The post I Made a ChatGPT-Powered Logo Generator App Using Python Flask in 7 Steps appeared first on Be on the Right Side of Change.

How I Created a Face-Detection App Using the Flask Framework

Jonathan Okah — Sun, 18 Jun 2023 12:44:09 +0000

Advancement in technology has witnessed the application of artificial intelligence to detect and recognize human faces. This is accomplished using OpenCV, a Python library for computer vision and image processing.

In the previous tutorials, we use OpenCV to process images and turn them into pencil drawings and cartoons. We will learn how to use the same library to detect human faces on images and render them on a Flask web application.

For our application to be able to detect a human face, it needs to be trained on large amounts of data that contain a sufficient representation of people from different backgrounds. This requires long hours of model training, and we don’t have all day for such a time-consuming task.

Thanks to the OpenCV library that comes with its trained models for face detection. All that we need to do is to use the algorithm to detect faces in our applications.

The Haar-Cascade Algorithm

The Haar-Cascade algorithm is a machine-learning model trained to detect objects in images. It can run in real-time. Haar-Cascade are nothing but XML files used in OpenCV to detect specified objects. It can detect various objects like buildings, eyes, noses, fruits, cars, mouths and bikes.

Depending on the object you want to detect, you first have to load the pre-trained XML files, if, of course, it’s available. To learn more about Haar-Cascades, check this article on Medium.

Using OpenCV for face detection

Let’s see how to use OpenCV for face detection. I will be using a particular picture for this demonstration. Feel free to use any picture of your choice. Create and move into a new folder for this project. Install opencv-python if you haven’t done so.

pip install opencv-python

Import the library and define the path to the image.

import cv2 as cv

image = 'Jonaben.jpg'

Make sure you have this image in your current folder. Let’s read the image using the imread() function.

img = cv.imread(image)

The image is returned as a NumPy array. Let’s see the shape of the image.

img.shape
(2560, 1920, 3)

The image is a three-dimensional array representing the height width and channels respectively. The three channels represent blue, green and red (BGR) colors as used in OpenCV.

Let’s convert the image to grayscale before performing face detection on it.

gray = cv.cvtColor(img, cv.COLOR_BGR2GRAY)

If you check the shape again, you will notice that it is now a 2-dimensional image as the color channel has been removed. Let’s now load call the Haar-Cascade algorithm.

face_classifier = cv.CascadeClassifier(
    cv.data.haarcascades + "haarcascade_frontalface_default.xml"
)

The haarcascade_frontalface_default.xml is a classifier for face detection. For other object detection classifiers, check this repository.We will now perform face detection using the classifier.

face = face_classifier.detectMultiScale(
    gray, scaleFactor=1.1, minNeighbors=5, minSize=(40, 40)
)

The detectMultiscale() method will be used to identify faces of different sizes. The scaleFactor reduces the grayscale to 10% of the original sizes to accommodate faces of different scales. The minNeighbors parameter defines the number of neighbors each rectangle should have.

A higher value will give high quality but few detections. By specifying 5, we try to strike a balance between quality and quantity. The minSize is the minimum size a face should have. Any face less than that is completely ignored.

Now that the face is detected, let’s draw a rectangle over the detected face.

for (x, y, w, h) in face:
    cv.rectangle(img, (x, y), (x + w, y + h), (0, 255, 0), 4)

The face is represented as a tuple consisting of x and y coordinates, width and height. We perform a for loop which iterates over the face and uses the rectangle() function to draw a green rectangle over the face using the coordinates and dimensions of the face. The value (0, 255, 0) is the green color and 4 is the thickness in pixels.

To display the image, we first have to turn it into RGB color format. Then, we use the matplotlib library to display the image

rgb_img = cv.cvtColor(img, cv.COLOR_BGR2RGB)
plt.figure(figsize=(20,10))
plt.imshow(rgb_img)
plt.axis('off')

Integrating Face Detection in Flask Application

We will create a Flask application to display the image faces detected by OpenCV. It will be similar to the sketch-making Flask application we created previously but with a few modifications. Therefore, you are required to go through that tutorial to understand how we created the application.

This is because I don’t want to repeat myself here to avoid bloating this article. I will only show you what to do on the command line.

In your current folder, create two files: a folder (app by name) and a run.py file. Move inside the app folder.

mkdir app && touch run.py
cd app

Inside the app folder, create a file, capture.py (for Linux users, use nano capture.py on the command line) and write the following in it:

import cv2 as cv

def image_capture(img):
    gray = cv.cvtColor(img, cv.COLOR_BGR2GRAY)
    face_classifier = cv.CascadeClassifier(
        cv.data.haarcascades + "haarcascade_frontalface_default.xml"
)
    face = face_classifier.detectMultiScale(
       gray, scaleFactor=1.1, minNeighbors=5, minSize=(40,40)
    )
    for (x, y, w, h) in face:
        cv.rectangle(img, (x, y), (x + w, y + h), (0, 255, 0), 4)

    rgb_img = cv.cvtColor(img, cv.COLOR_BGR2RGB)
    return rgb_img

This is exactly what we just did. It’s now wrapped in a function. Next, create an __init__.py and write the following:

from flask import Flask
from secrets import token_hex


UPLOAD_FOLDER = 'app/static/uploads'
SECRET_KEY = token_hex(16)


app = Flask(__name__)

app.config['SEND_FILE_MAXIMUM_AGE_DEFAULT'] = 0
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['SECRET_KEY'] = SECRET_KEY


from app import main

Go through that article to understand what these configurations mean. Now, create a file.py file, and write the following:

ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg'])


def allowed_file(filename):
    return '.' in filename and filename.rsplit('.')[1] in ALLOWED_EXTENSIONS

Next, the main.py file. Create it inside the app folder. Then, write these:

import cv2
import os
from werkzeug.utils import secure_filename
from flask import request, render_template
from app import app
from app.file import allowed_file
from app.capture import image_capture



UPLOAD_FOLDER = 'app/static/uploads'
CAPTURE_FOLDER = 'app/static/capture'


@app.route('/')
def home():
    return render_template('home.html')


@app.route('/capture', methods=['GET', 'POST'])
def sketch():
    file = request.files['file']
    if file and allowed_file(file.filename):
        filename =secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        img = cv2.imread(UPLOAD_FOLDER+'/'+filename)
        capture_img = image_capture(img)
        capture_img_name = filename.split('.')[0]+'_capture.jpg'
        save = cv2.imwrite(CAPTURE_FOLDER+'/'+capture_img_name, capture_img)
        return render_template('home.html', org_img_name=filename, capture_img_name=capture_img_name)
    return render_template('home.html')

I made some modifications to that project article to correspond with what we are learning in this tutorial. The image, when uploaded, will go to a static folder as static file. Therefore, create the folder and inside the static folder, create two more folders.

mkdir -p static/uploads static/capture static/css

We also create a css folder for CSS files. So, once the uploaded file is received, it will be stored in the uploads folder. Then, we use OpenCV to read it and call the image_capture() for face detection.

The result is now stored in the capture folder and displayed in the Flask application.

On the terminal, create a home.html file. It will be inside the templates folder.

nano templates/home.html

Write the following in it:





    
    
    
    
    
    

    Face Detection




    
        Flask Face Detection App
    

    

        
            
            
        

    

    {% if capture_img_name %}
    
        
            Original Image
        
        
            Captured Image
 
    
    {% endif %}

In your css folder, create a styles.css file:

body {
     font-family: sans-serif;
     margin-top: 40px;
}

   .regform {
     width: 800px;
     margin: auto;
     color: black;
     padding: 10px, 0px, 10px, 0px;
     text-align: center;
     border-radius: 15px, 15px, 0px, 0px;
}


   .main-form {
     width: 800px;
     margin: auto;
     padding-left: 50px;
     padding-right: 50px;
     color: #ffffff;
}

   img {
     max-height: 400px;
     max-width: 500px;
     height: auto;
     width: auto;
}

Finally, in your run.py file, write this:

from app import app


if __name__ == '__main__':
    app.run()

To start the local server, move into your project folder and type flask run in the terminal.

Conclusion

In this project, we have learned how to create a face-detection app using OpenCV and the Flask framework. Use this knowledge to improve your Python skills. Check my GitHub page for the source code.

We can take this app further perhaps, to add real-time face detection. Furthermore, we can create a face recognition app and render it on a Flask application. I may give attention to that in future project tutorials.

Thanks for staying with me throughout this tutorial. Enjoy your day!

The post How I Created a Face-Detection App Using the Flask Framework appeared first on Be on the Right Side of Change.

How I Created an Email Address Verifier Using Flask

Jonathan Okah — Fri, 12 May 2023 07:42:19 +0000

Email addresses are primarily used for communication. They are also used for authentication and authorization. Collecting email addresses is crucial for marketing companies and other businesses. It helps to promote their services and to provide good customer support.

Verification of email addresses involves confirming the authenticity or legitimacy of user’s email address. Integrating email verification in signup forms will ensure businesses have customer email addresses that are valid and reachable.

Notice the expression, ‘valid and reachable.’ This means an email can be valid but not reachable.

How to Verify Email Addresses?

There are several ways to check if an email address is valid and in existence.

Method 1: We can use a Regular Expression. The re Python module has search and match methods that return an object that matches the given pattern.

Regular Expression, though it works in most cases cannot be relied on to verify the authenticity of email addresses. And if you are like me who struggles to understand Regular Expression, you probably won’t consider it an ideal one to use.

What is more, Regular Expression only checks email formats but not their existence. You may want to try other ways of verifying email addresses.

Method 2: Another way to verify an email address is to use a Python package, validate-email-address. It also uses the re module to check if the email address is properly formatted, and a third-party Python package, py3dns to ensure it is active.

Here is a simple way to use the module:

from validate_email_address import validate_email
isValid = validate_email('melancholy@gmail.com', verify=True)
print(isValid)

If that email exists, it will print out True.

Method 3: The best and recommended way to verify an email address is by using an API. Dedicated third-party APIs such as emailvalidation.io provide a secure and reliable way to verify an email address.

In this project tutorial, we are going to implement such a feature in a Flask application. Go to the website, register with your email and password. Log in and you will see your API key. We will use the API key in our Flask application.

Creating a Flask Application

Create and activate a virtual environment in a new folder. Then, install the Flask package. Next, create a templates folder. Inside the folder, create base.html and index.html files.

For the base.html file, write the following:




    
    
    
    Flask Email Verifier
    


    {% block content %}

    {% endblock %}

The index.html will inherit everything in the base.html. Write this inside the file:


{% extends 'base.html' %}
{% block content %}

          
              
                  Email Verifier
                  
                    
                      
                      
                        
                        
                          
                        
                      
                    
                      
                      {% if response %}
                      {{ response }}
                     {% endif %}

{% endblock %}

Let’s write a function that sends a request to the API. Save the following script as email_verifier.py in your project folder:

import requests
from decouple import config

API_KEY = config('secret_key')


def is_valid_email(email):
    url = f"https://api.emailvalidation.io/v1/info?email={email}&apikey={API_KEY}"
    response = requests.get(url)
    if response.status_code == 200:
         json_res = response.json()
         format_valid = json_res['format_valid']
         mx_found = json_res['mx_found']
         smtp_check = json_res['smtp_check']
         state = json_res['state']
         return format_valid and mx_found and smtp_check and state == 'deliverable'
    return False

We import the requests module to be used to make a request to the API. We also import python-decouple module to load environment variables. So, you have to install these modules together with python-dotenv in your virtual environment. Check my GitHub page for the full code.

In your project folder, create a .env file to store your API key. Inside the file write these:

secret_key = 'Your API Key'

We then use the config class to load the API key. This is a safe way to import sensitive information. After sending a GET request to the API, we have the following as the response converted to JSON if the email is valid:

{
   "email":"support@emailvalidation.io",
   "user":"support",
   "tag":"",
   "domain":"emailvalidation.io",
   "smtp_check":true,
   "mx_found":true,
   "did_you_mean":"",
   "role":true,
   "disposable":false,
   "score":0.95,
   "state":"deliverable",
   "reason":"valid_mailbox",
   "free":false,
   "format_valid":true,
   "catch_all":"None"
}

The main fields to watch out for that confirms the authenticity of an email address are, format_valid, mx_found, smtp_check, and state. You can learn about them here.

The is_valid_function() function returns True if all the four fields are True else, it returns False. We will then call this function in our Flask application.

Create an app.py file and write the following:

from flask import Flask, render_template, request
from email_verifier import is_valid_email


app = Flask(__name__)

@app.route('/', methods=['POST', 'GET'])
def index():
    # checking if the method is POST
    if request.method == 'POST':
        # getting the email from the form input
        email = request.form['email-address']
        if is_valid_email(email) == True:
            response = f'Your email, {email} is valid'
            return render_template('index.html', response=response)
        else:
            response = f'Your email, {email} is not valid'
            return render_template('index.html', response=response)
    return render_template('index.html')

You can see we import the is_valid_email() function as well as the Flask class and other important functions we will use. After creating the application object and the routes, we send a POST request to retrieve data from the index.html file. This is the email address the user will input.

We then send it to the is_valid_email() function.

If it returns True, we use the render_template function to display a message stored in the response variable to the index.html file. In the render_template(), the response attribute is from the index.html file, the other response (a variable) is the one with the message.

If the callback function returns False, we display a different message. If the request is not POST, we simply display the empty form on the webpage.

Conclusion

We have learned how to implement an email verifier feature in a Flask application. There are so many ways to create this app as well as other APIs you can use to verify email addresses. You can implement this feature while creating user authentication in your Flask application.

By working on projects such as this, you are improving your skills and gaining confidence as a web developer.

The post How I Created an Email Address Verifier Using Flask appeared first on Be on the Right Side of Change.

How I created a News Application using the Flask Framework

Jonathan Okah — Mon, 01 May 2023 07:08:21 +0000

As part of your journey to becoming a web developer, working on projects is a compulsory requirement. You gain experience, exposure, and the necessary skills to increase your chances of getting a job.

In this tutorial, we will use Flask, one of Python’s web development framework to create a News application. We will make use of an API to fetch the latest news.

Our previous Flask project tutorial that involved using an API was when we created a weather app, it was there we introduced Flask. Feel free to check it out to become more familiar with Flask!

Getting started

Create a folder for this project. Inside the folder, create and activate a virtual environment.

Afterward, install Flask, python-dotenv, python-decouple and the requests module.

Finally, create a requirements.txt file to store the module versions which will be used in case a future version affects the smooth running of this application.

mkdir && cd project
pip -m venv .venv
source .venv/bin/activate
pip install flask python-dotenv python-decouple requests
pip freeze > requirements.txt

We use both python-dotenv and python-decouple to load environment variables. Requests will be used to fetch the latest news headlines.

News API

For this project, we will use News API2 to fetch the latest news. Sign up for a free account to receive your API key. Then create a .env file in the project directory, and store your API key there.

NEWS_API_KEY = 'YOUR_API_KEY'

Then, create a main.py file and add the following script to it:

from flask import Flask, render_template
import requests
from decouple import config


API_KEY = config('NEWS_API_KEY')

app = Flask(__name__)

country = 'us'

@app.route('/')
def news_headlines():
    url = f'https://newsapi.org/v2/top-headlines?country={country}&apiKey={API_KEY}'
    res = requests.get(url).json()
    news_articles = res['articles']
    return render_template('index.html', news_articles=news_articles)

As usual, we import the Flask app and creates the application object as an instance of the class. The __name__ variable passed to the Flask class is used, among other things, to locate associated resources such as templates.

We follow best practices regarding storing sensitive information such as API key. Instead of exposing our API key, we store it in a .env file. Then use the config class from the python-decouple module to get the values of the environment variable.

We also set the country to United States to get the latest news happening in the country. Of course, you can use any country of your choice. Check the documentation to know the country code.

The news_headlines() function has a @app.route decorator that links the function to the associated URL. The return value of the function will be displayed to the browser when the URL is requested.

Using the requests module, we make a GET request to the URL of the News API. The response is converted into JSON. We save the list containing the news in a variable, and pass it to the render_template() function.

Templates

Flask, by default, searches for template files in the template folder. So, we have to create the folder, and also create an index.html file. Remember, this was passed to the render_template() function.



  
    
    
    
    
    
    Flask Latest News
  
  
    Flask Latest News Headlines
    
      
      
        
          {% for news in news_articles %}
          
            
              
              
                {{ news.title }}
                {{ news.description }}
                Read More
              
            
          
          {% endfor %}

We use Bootstrap to style the website. Each news headline gotten from the News API has an image, a title, description, and a link to read more. So, we use Jinja2 for-loop to iterate over the news_articles.

The urlToImage is the URL for the image of the article.

Conclusion

This is a how we use an API to fetch the current news headlines and have them rendered on our Flask application. It is a very simple project for beginners. No doubt, you have learned a lot from this project tutorial.

In upcoming tutorials, I’m going to demonstrate how to create this application using the Django framework. To run the Flask app, create a .flaskenv file and write the following:

FLASK_APP=main.py

Now that we have taken care that, we will not always have to set the FLASK_APP environment variable whenever we want to run the flask command. Make sure you have installed the python-dotenv package.

We are done. Just type flask run in your terminal, hit the Enter key to start the local server, and get the latest news. The full code is available on my GitHub page. Alright, enjoy your day!

The post How I created a News Application using the Flask Framework appeared first on Be on the Right Side of Change.

How I Deployed a Machine Learning Application Using the Flask Webserver

Jonathan Okah — Fri, 14 Apr 2023 18:42:13 +0000

Deployment of Machine Learning models to make them available to end users is the ultimate goal of data scientists. How can you develop a web application if you have little or no knowledge of web development? As data scientists, you can now see that learning Python for web development cannot be overemphasized.

There are many Python frameworks used in building Machine Learning web applications. A project tutorial showing how to build a Machine Learning web app using the Django web framework has been demonstrated.

In today’s tutorial, we are going to see how this can be done using the Flask web framework.

Flask is a micro framework written in Python for building interactive web pages. It is called a small framework because it is easy to read and understand once you become familiar with it.

Objectives

The objective of this tutorial is to show you the steps I took to deploy a Machine Learning model using Flask. Specifically, you will learn how the Flask framework interacts with our Machine Learning models.

The Model

We start by creating a model.py file in a new directory. Our task is to train a model to classify the gender of an individual based on height, weight and foot size. You can see that this is a classification problem. Hence, we will use Random Forest Classifier algorithm. Download the dataset from my GitHub page.

We keep things simple so we can focus on our objectives, that is, to implement Machine Learning using the Flask framework. The dataset has 155 rows and 4 features, including GENDER, the target feature. In the GENDER column, 1 means male and 2 means female.

import pandas as pd
from sklearn.ensemble import  RandomForestClassifier
from sklearn.model_selection import train_test_split
from sklearn.metrics import accuracy_score
import joblib

df = pd.read_csv('gender_classifier.csv')
X = df.drop(['GENDER'], axis=1)
y = df.GENDER
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=.2, random_state=5)
model = RandomForestClassifier()
model.fit(X_train.values, y_train.values)
preds = model.predict(X_test.values)
accuracy_score(y_test,preds)*100
# 90.32258064516128

We achieved an accuracy score of 90% with this simple way we trained the model. The final thing to do in this file is to pickle the trained model for further use.

joblib.dump(model, 'rf_model.pkl')

If you have been following all along, I expect your folder to have the following files:

gender_classifier.csv model.py rf_model.pkl

Creating a Flask App

If you are new to the Flask framework, this article can set you up for the remaining part of this tutorial. The first step in creating a flask app is to define the application object as an instance of the Flask class. Create a file named flask_app.py.

from flask import Flask, request, render_template
import joblib
import pandas as pd

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        model = joblib.load('rf_model.pkl')

        height = request.form['heit']
        hand_len = request.form['hlen']
        foot_len = request.form['flen']

        mapping = {1: 'Male', 2: 'Female'}

        df = pd.DataFrame([[height, hand_len, foot_len]], columns=['height', 'hand_len', 'foot_len'])
        prediction = model.predict(df.values)[0]
        results = mapping[prediction]

        return render_template('index.html', results=results)
    return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True)

The __name__ variable is Python predefined variable used by Flask to find the location of all the resources necessary for the smooth running of the app.

We create a function known as the view function that handles the application routes. Routes are simply the URLs implemented by the application. The index() function is mapped to the route URL represented as / which means the home page. When a client requests a URL such as the above, Flask executes the view function.

The view function has a Python decorator @app.route. This links the function to the URL passed as an argument. Thus, when a client requests a given URL, Flask will not only execute the function, it will also pass the function’s return value back to the browser as a response.

The route has two methods, GET and POST. They are used to retrieve data from template files. In the template file, we will create a form where users will input their height, hand length and foot length. Are you starting to see the connection? Once the data are retrieved, the trained model is unpickled and used to make prediction based on the data.

All these will execute provided the request method is POST. The request method is used to send data to the server. Check out this article to learn more about them. How will Flask know if the request method is POST? We will find the answer when we create the template file.

Finally, we render the returned value using the render_template() method, which has the HTML file that will be displayed to the user. Notice the arguments passed to render_template() method. The results of the predictions!

Can you see how the Flask framework interacts with our Machine Learning model? Then, to run the Flask webserver, we use the app.run() method.

The Template File

Create a folder named templates. By now, your main folder should have the following files:

__pycache__  flask_app.py  gender_classifier.csv  model.py  rf_model.pkl  templates

Gender Classification

A Machine Learning model to determine the gender of an individual

Inside the template folder, create an index.html file.



  
   Gender Classification
   
     Gender Classification
      A Machine Learning model to determine the gender of an individual
      
        
            
                
                    
                    Height: 
                    
                

                
                    
                    Hand Length: 
                    
                

                
                    
                    Foot Length: 
                    
                
                
                    
                
                {% if results %}
                The individual is a {{ results }}
                {% endif %}

The form element has the request method as POST. The action argument points to the index() view function. Once the submit button is pressed, the data collected through the form will be sent to the index() function. Then, the result will be generated and displayed.

Conclusion

We have created a Machine Learning web application using the Flask framework. Check out my GitHub page for the complete code. Keep practicing project tutorials like this. In no distant time, you will master the Flask framework.

The post How I Deployed a Machine Learning Application Using the Flask Webserver appeared first on Be on the Right Side of Change.

How I Used the Flask Framework to Create an URL Shortener Application

Jonathan Okah — Thu, 13 Apr 2023 16:52:48 +0000

A URL shortener service generates a shorter, more readable version of the URL it was given. Flask, a Python web framework can be used to create a URL shortener app.

So, we will create an application allowing users to enter a URL and shorten it. We will use the SQLite database engine to store application data.
If you prefer to learn how this is done using the Django framework, you are free to read this article.

Set up

Create a new folder for this project. Then, create and activate a virtual environment by running the following commands in your terminal.

python3 -m venv venv
source venv/bin/activate

Install Flask and the hashids library.

pip install flask hashids

The hashids library will be used to generate a unique ID. You will understand this as we proceed.

Creating a Database Engine

Since we will store application data, we must create a database file. Do it and call the file schema.sql. Then, write the following SQL commands.

DROP TABLE IF EXISTS urls;
CREATE TABLE urls(
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  created TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  original_url TEXT NOT NULL,
  clicks INTEGER NOT NULL DEFAULT 0
);

If the above code seems strange, you may want to familiarize yourself with SQL commands.

We want to create a table named urls. As we don’t want to face issues caused by several tables with the same name, we must first delete it. That’s what is meant by ‘DROP TABLE…’

The table is then created with four columns. The id column will contain the unique integer value for each entry. Next is the date the shortened URL was generated. The third column is the original URL. Finally, the number of times the URL was clicked.

The schema.sql file can only be executed with the help of a Python script. So, we create another file called init_db.py

import Sqlite3

connection = Sqlite3.connect('database.db')

with open('schema.sql') as sql:
    connection.executescript(sql.read())

connection.commit()
connection.close()

Once you run the script (with python3 init_db.py), a new file called database.db will be created. This is where all application data will be stored.

The connect() method creates the file. As soon as the file is created, it is then populated with the urls table. This is done by first opening and reading the content from the schema.sql.

It then calls the executescript() method to execute all the SQL commands in the SQL file. After which, we commit and close the file. By now, your folder should contain the following files:

database.db init_db.py schema.sql

Creating the Database Connection

Let us open a connection to the database file. Create a file and name it db_connection.py.

import sqlite3

def get_db_connection():
    conn = sqlite3.connect('database.db')
    conn.row_factory = sqlite3.Row
    return conn

Notice that we set the row-factory attribute to sqlite3.Row. This makes it possible to access values by column name. We then return the connection object, which will be used to access the database.

The Main File

Next, create another file and name it main.py. This will be our main file. In this file, we will import the database connection file.

from db_connection import get_db_connection
from hashids import Hashids
from flask import Flask, flash, render_template, request, url_for, redirect

app = Flask(__name__)
app.config['SECRET_KEY'] = 'Your secret key'

hashids = Hashids(min_length=4, salt=app.config['SECRET_KEY'])

@app.route('/', methods=('GET', 'POST'))
def index():
    conn = get_db_connection()
    if request.method == 'POST':
        url = request.form['url']

        if not url:
            flash('The URL is required!')
            return redirect(url_for('index'))

        url_data = conn.execute('INSERT INTO urls (original_url) VALUES (?)', (url,))
        conn.commit()
        conn.close()

        url_id = url_data.lastrowid
        hashid = hashids.encode(url_id)
        short_url = request.host_url + hashid
        return render_template('index.html', short_run=short_url)
    return render_template('index.html')

We create an instance of the Flask class. The __name__ variable allows Flask to locate other resources, including templates in the current directory. We then create hashids object that will have four characters. (You can choose to have more characters). We use a secret key to specify the salt for the Hashids library.

The index() function is decorated with the @app.route decorator that assigns the URL ('/') to the function, thus turning it into a Flask view function.

In the index() function, we open a database connection. Then, we check if the request method is POST. If so, the code block under it will be executed. If not, we only return an empty web page using the render_template() method.

If the request method is POST, we use request.form['url'] to collect input from the template file (index.html). The output is the URL to shorten. However, if the user gives no URL, we simply flash a message and redirect the user back to the same index.html web page.

If a URL is given, it will be added to the database by executing the command, INSERT INTO …

After closing the database, we select the last row id of the database, which is the current URL added. Remember the AUTOINCREMENT keyword in the id column of the database file. This ensures that the id is incremented with each new entry.

With the last row id selected, we use the hashids.encode() method to generate a unique hash and concatenate it to the URL of the application’s host (indicated with the request.host_url attribute). This becomes the shortened URL that would be displayed to the user.

Please check my GitHub page for the template files. Make sure you create a templates folder to keep the HTML files.

The local server is opened when you run python3 main.py in your terminal. This is possible because of the special name variable and the app.run() method.

Adding Extra Features

Won’t it be nice to know how many times each URL has been clicked and have them displayed on a web page? We are going to add that feature. Update your app.py by adding the following:

@app.route('/stats')
def stats():
    conn = get_db_connection()
    db_urls = conn.execute('SELECT * FROM urls').fetchall()
    conn.close()

    urls = []
    for url in db_urls:
        url = dict(url)
        url['short_url'] = request.host_url + hasids.encode(url['id'])
        urls.append(url)
    return render_template('stats.html', urls=urls)

We again open a database connection, and fetch all the columns in the urls table (indicated by *) and a list of all the rows using the fetchall() method.

After closing the database, we loop through the result. In each iteration, we convert the sqlite3.Row object to a dictionary and repeat the same thing we did previously to encode the id number. This is then concatenated to form a new URL. Finally, we append the result to an empty list and render it to the browser.

Notice we didn’t commit the database as we did previously. This is because we didn’t make changes to the database. We close it after fetching the data we needed.

Your folder should now have the following files:

database.db,
db_connection.py,
init_db.py,
main.py,
schema.sql, templates.

Templates Files

As earlier stated, you should check my GitHub page for the templates files. We created a base.html file inside the templates folder that other files will inherit.

The other two files have certain things that make rendering dynamic content to our Flask web page possible. It is the {% ... %} and { ... } code blocks.

These are Jinja2 templating language that comes together with the Flask library.

The render_templates() method in the stats() function has another argument, urls. This is from the stats.html web page, while the other urls is the variable that will be displayed on the web page.

Conclusion

This is one of the ways to create a URL shortener app using the Flask framework. This project has expose us to how Flask works as well as how it interacts with database. If you struggle to understand some of what we did, that should be expected as a beginner. However, as you keep working on projects, it will become second nature to you.

The post How I Used the Flask Framework to Create an URL Shortener Application appeared first on Be on the Right Side of Change.

How I Built a Weather App Using Python Flask

Jonathan Okah — Thu, 06 Apr 2023 09:18:43 +0000

In the first part of this series tutorial, we learned how to build a weather app using Django, a powerful Python framework for building web applications. Although not a prerequisite to understanding this second part, learning how to design such an application is worth your time.

For the very first time, I will be explaining how I design an application using the Flask framework. Like Django, Flask is a web application framework written in Python. Unlike, Django, it is easy to get started as a beginner. In just seven lines of code, you will write your first introduction to the framework, the 'Hello, World!' code.

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run()

This is all that is required. If you save it in a file called app.py; and run python3 app.py in your terminal, you will see the app running on your local server. Can you see how simple it is? If this was Django, it would require more boilerplate code.

So, in this tutorial, we will learn how to build a weather app using the Flask framework. There is no doubt that building projects using Flask will help you learn and master the framework.

As mentioned in the first part of this series, a weather application is used to get real-time weather information based on cities selected. I assume by now you must have received your API key from OpenWeatherMap. If not, please do well to register on the platform to receive your API key which we will use in this tutorial.

Prerequisites

Although this project tutorial is for beginners, you will benefit greatly if you have basic knowledge of Flask. An excellent resource I recommend if you want to go from a beginner to an advanced Flask developer is The Flask Mega Tutorial by Miguel Grinberg.

Setting up Flask

We will first create and activate a virtual environment, which is considered best practice, before installing Flask.

Create and cd into a new folder

mkdir flask_project && cd flask_project

Create and activate a virtual environment

python3 -m venv venv
source venv/bin/activate

Install Flask

pip install flask

Install the python-dotenv package to register the environment variable

pip install python=dotenv

Create a requirements.txt file to store the dependencies used in this project.

pip freeze > requirements.txt

Starting Flask: A Simple Hello World

Consider the 7 lines of code mentioned above. We import the Flask class from the flask package. The app variable creates the application object as an instance of the Flask class. The __name__ variable configures Flask; and helps it know when and where to find template files.

The hello_world() function has a Python decorator @app.route. Remember, a Python decorator modifies a function. Thus, it is used to register and link the URL (/) to the function so that when the URL is requested by a web browser, Flask can easily invoke the function and pass the return value to the browser. Therefore, we can rightly say that a route is the different URLs implemented by the Flask application.

Speaking of templates, they are HTML files written separately and stored in a templates folder. So, instead of directly writing the 'Hello, World!' in the function, we can write it in a template file and renders it to the browser.

To demonstrate what I’m talking about, create a template folder. Inside the folder, create an HTML file with the name index.html, and write the following:


   Hello, World!

Then update the app.py.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

Run python3 app.py to see the "Hello, World!" now rendered from a template file. This was made possible by the render_template() function. This is the process we will follow to create the weather app.

Creating a Form

To start building the weather app, we have to create a form. Update the index.html file with the following HTML code.


  
    Weather App
  
  
    Weather App!
    
      
      
    
    {% if data %}
      You have entered: {{ city }}. Country: {{ data['sys']['country'] }}
      Temperature: {{ data['main']['temp'] }}°C
      Temperature feeling: {{ data['main']['feels_like']°C }}
      Pressure: {{ data['main']['pressure'] }}hPa
      Humidity: {{ data['main']['humidity'] }}
      {% for i in data['weather'] %}
       Description: {{ i['description'] }}
      {% endfor %}
    {% endif %}

A lot of things are going on here. We use the form element to create a form with the method equal to POST. When the submit button is clicked, a request is made with the POST method which makes it possible to collect input values to be accessed in our Python file.

Using the {{ request.form['city'] }} syntax, Flask can easily pick this value in our Python code for further use.

However, all these won’t work without the action property in the form element, that is the get_weather() function.

Getting Weather Data

Update your app.py with the following code to create the get_weather() function.

from flask import Flask, render_template, request
import requests
from openweather import KEY

@app.route('/city', methods=('GET', 'POST'))
def get_weather():
    if request.method == 'POST':
        city = request.form['city']
        url = f'https://api.openweathermap.org/data/2.5/weather?q={city}&units=metric&appid={KEY}'
        res = request.get(url)
        data = res.json()
        return render_template('index.html', city=city, data=data)
    return render_template('index.html')

The function is decorated with @app.route which I have already explained. We set the route to be '/city'. If the request method is POST, the input value will be read and saved to the city variable. Next, we use the requests module to request the URL; and save the response to the res variable. Then we convert the response to a Python dictionary object using res.json(); and save it to the data variable.

Finally, we display the result to our template using the render_template() function. Notice we passed the city and data variables as arguments to render_template.

If the request method is otherwise, we simply display the template containing the empty form. Before I explain other things here, let’s go back to our index.html file.

The {{ … }} placeholder is used to display dynamic content to the template file. Flask as we know, depends on the Jinja2 template engine. When render_template is called, it equally calls the Jinja2 template engine which substitutes the {{ … }} block with the values provided in the render_template() function.

Jinja2 also supports conditional statements and for–loops given inside the {% … %} blocks. In that template file, we say, if the data variable is given, display the contents in the p element. Then, we close the conditional statement and the for loop structure.

The conditional statement is important, without which you will get the following error:

Jinja2.exceptions.UndefinedError:
data is undefined

This error arises when we try to access a key from a non-existing object. So, do not forget the conditional statement.

The API Key

As mentioned earlier, to make an API call to OpenWeatherMap, you need an API key. Having gotten your API key, you have to keep it safe. Notice how we did in the app.py file. First of all, you create a file called openweather.py. Inside the file, make it look like this:

KEY = 'Your API Key'

Replace the text in quotes with your API key. Can you then see how we imported it to the app.py without exposing the key? If you are deploying this app, you may have to create a .gitignore folder where all sensitive data will be kept to avoid exposing them.

Finally, create a file and name it .flaskenv. In this file, we will register the FLASK_APP environment variable so that we will not always have to set the environment variable when we run the flask command. Inside the file, write the following:

FLASK_APP=app.py

That’s all. We are done. Now run the flask command like this to test the app:

flask run

If you go to http://127.0.0.1:5000/city in your browser; and type a city of your choice, you will see something similar to the image below.

Conclusion

Congratulation on creating a weather app using the Flask framework. You have undoubtedly learned something or two you can add to your knowledge as you continue your web development journey.

You will observe that I added only a little CSS styling so we can focus on the major task. The code is available on my GitHub page. In the final part of this series tutorial, we will learn how to create this app using Streamlit.

The post How I Built a Weather App Using Python Flask appeared first on Be on the Right Side of Change.

BrainWaves P2P Social Network – How I Created a Basic Server

Tom Teck — Sun, 26 Feb 2023 17:33:47 +0000

Welcome back to the Brainwaves P2P project, or at least my take on it :-).

The previous article was a theoretical explanation of how I envision this project. It is now time to start laying the groundwork!

I learn as I go…

As some of you might have guessed already, I’m a completely self-taught coder. Because of that, I’m sure many professionals might not agree with how I code.

I accept that and will welcome any constructive criticism. I have been learning non-stop since I started this project. I assume this will not slow down anytime soon. YouTube is my main source of knowledge as I learn best when seeing something done. I am, in other words, a visual learner. I found an article that explains it well here.

Articles on various sites are the other half of how I learn new concepts in coding. That is how I found Finxter :-).

So to sum it up, my code is far from perfect, and I will never claim it is. This is my take on trying to solve this puzzle. I actually look forward to alternative approaches!

You can open issues on my GitHub if you want to address something.

Now that we all know where we stand let us dive right in! How to build a server for our peer-to-peer social network app?

Flask vs FastAPI

In the previous article, I mentioned that I want to use FastAPI to build the relay server, as opposed to Flask. As I have done before and will do again, I asked ChatGPT about the differences between Flask and FastAPI.

 Flask vs FastAPI

Flask is based on the Werkzeug WSGI (Web Server Gateway Interface) toolkit, which is synchronous by default. However, Flask can still be used to build asynchronous applications. You will need to use a third-party library like gevent or asyncio. With these libraries, Flask can use coroutines and event loops to handle I/O operations asynchronously.

FastAPI, on the other hand, is designed to be fully asynchronous from the ground up. It uses the async/await syntax of Python to write asynchronous code. It is based on the ASGI (Asynchronous Server Gateway Interface) specification. FastAPI uses the Starlette framework as its foundation. the framework provides a high-performance event loop and asynchronous request handlers.

Both the speed and the asynchrony determined my choice for FastAPI.

Those of you familiar with Flask will know about its built-in development server. As FastAPI doesn’t have this, we’ll need to install a separate server.

Uvicorn Server

This is where I encountered my first small hiccup. I code on Windows (I know, sue me ), and I wanted to use Uvicorn. As this only runs on Linux, I needed to get it to function in WSL.

I’ll not go into all the details here, but I could write something about it if anyone has an interest in it. Let me know!

After getting Uvicorn to function as it should, we can continue. It is important to remember that the Python interpreter on WSL does not share anything with its Windows counterpart. This means that you either need two separate virtual environments or that you install pip packages for each OS.

Creating Basic FastAPI App

Once all this annoying prep work is done, creating a basic FastAPI app is very easy. We first import FastAPI as below:

from fastapi import FastAPI

All you need to do afterward is define the basic app and create an endpoint.

#---APP INIT---#
app = FastAPI()
 
@app.get("/")
async def root():
    return {"message": "Hello World"}

To get this to run, you need to navigate to the working directory of your FastAPI project via WSL. Afterward, you call the Uvicorn server. The command below assumes you called your Python file main.py!

uvicorn main:app --reload

I usually run the Uvicorn server in a separate terminal instance of WSL.

That way, I can leave it on and test any changes I make immediately. Later, when I’ll be working on the client also, I can split the terminal. You can then make API calls through the client terminal window. FastAPI’s response in the server WSL window is then visible immediately.

Receiving “Hello World” from Server

If you now navigate to 127.0.0.1:8000 you should get a JSON response with the "Hello World" we returned in the endpoint above. We will change this endpoints function later, but for now, it works to prove our API is working.

For the API server, I have the following layout in mind. It might change throughout the development process. I currently foresee two endpoints that do not require the user to be logged in with a JWT token. The first will be to get that token, and the second to register a new user. Everything else will require the user to be authenticated.

I stated earlier that I would change the root’s endpoint function. Its new role is now to allow a user to request a JWT token. The token is only granted after providing a correct combination of username and password. This requires a dedicated set of both helper functions and Pydantic models to work.

I will go into this in another article, as it requires much explaining :-). It was something I am still learning myself.

Endpoint Layout

The current layout of my endpoints at a high level is the following:

#---OPEN ENDPOINTS---#


#Root route to get token
@app.post("/", response_model=Token)


#Route to create a new user
@app.post("/api/v1/users")


#---AUTH ENDPOINTS---#


#Route to get all current users and their attributes(development only)
@app.get("/api/v1/users")


#Route to test if the token is valid, used while authenticating
@app.get("/api/v1/token-test")


#Route to get all thoughts/messages created by a certain user
@app.get("/api/v1/thoughts/{username}")


#Route to return all thoughts/messages containing the query string
@app.get("/api/v1/thoughts/{query_str}")


#Route to create a new message/thought
@app.post("/api/v1/thoughts")


#Route to return all info about the current user(like a user profile)
@app.get("/api/v1/me", response_model=User)

The current setup should allow for the barebones functionality of the application. At least from a server point of view. The routes above and/or their function are liable to change during development. I do find it helps to have a visual reminder of what I am working toward. That is why I created the high-level outlay. As you might recall, I am a visual learner .

Database Considerations

I will dedicate the last part of this article to the database part. As we need to store both users, user credentials, and messages/tweets somewhere, a database is a must.

If you have read any of my previous articles, you will know I like Deta a lot.

Their NoSQL databases work great for development. They recently evolved into Deta Space. This change makes their ecosystem even more interesting for developers. The fact that they are free is also important for a single developer coding this app on his own time . Make sure to check them out!

The next article will focus on both the database code and the Pydantic models we will need to get our API to function.

Next Article: My Journey to Help Build a P2P Social Network – Database Code Structure

Join GitHub

As always, feel free to ask me questions or pass suggestions! And check out the GitHub repository for participation!

GitHub: https://github.com/shandralor/PeerBrain

The post BrainWaves P2P Social Network – How I Created a Basic Server appeared first on Be on the Right Side of Change.

I Created a ChatGPT-Powered Website Creator with ChatGPT – Here’s What I Learned

Kevin MacNeel — Fri, 24 Feb 2023 09:17:18 +0000

My goal with this project was to learn how to use the new Large Language Model AI GPT-3 created by OpenAI. I also wanted to know if it could be used in a practical web application.

To learn it, I created a website that uses it in two ways.

I used it to create the web application.
The web application then uses GPT-3 itself to create other simple web pages or one-page web applications.

I also recorded this video that guides you through my learning experience:

A Few Words on ChatGPT

GPT stands for Generative Pre-trained transformer.

I examined its background is clearly explained in depth in its wiki article and why it works is written in a great article by Stephen Wolfram. GPT is a high-powered autocomplete that creates paragraphs and words based on their statistical association. It adds randomness to this selection, so it does not always return the same result given the same prompt.

I witnessed how it can enable great applications in multiple ways.

ChatGPT Usage 1: Text autocompletes can be used superbly to write well-written code.
ChatGPT Usage 2: It can also be used in the application to enable or enhance its functionality.
ChatGPT Usage 3: The coder can also use it to expedite learning and create new code.

In creating the website, I found the latter to be the most useful.

This article guides you through how I used and created a website that can generate a website from a text prompt. Open AI’s GPT Da Vinci powers the site. I used Open AI’s Chat GPT to create much of its code.

I also used GPT-3 based ghostwriter code assistant in the Replit IDE or interactive development environment for auto-completion. I also examine how I used prompt engineering for development, Flask, and JavaScript to create its functionality.

The GPT-3 Website Prototyper Site

Here’s an example of what the site looks like:

Here’s an example of a pong game created with it just from entering the above prompt text:

How the Application Works

Let’s first see what the site does before we look into its code.

Here’s the site https://web-prototyper.kevron.repl.co/. Go to the site and enter a prompt.

Here are some example prompts:

“Create an HTML pong game with javascript and an AI”
“Create an HTML page with street address, zip code, first name, last name, and a date picker for the birthdate.”

Here’s a site that gives you information on prompt engineering from OpenAI. If you want to create a website, you’ll have some keywords like “JavaScript” and “HTML”. In addition, you can add CSS and colors to your site.

Then Click on the Create button that gets the output from the GPT API Davinci. Enter a name. Then save.

You can click on the link to go to the site. You can also click on the code to view the code. You should remember that the code it generates has some randomness to it, and it won’t always return the same result.

If you want to learn more about using ChatGPT as the logic of your own apps, feel free to check out the Finxter premium course here:

How I Created the GPT-3 Website Prototyper Site

I wrote some of this website’s code using Chat-GPT and then manually put the pieces together.

This is a gap in the AIs and where the programmers come in. They can’t see the big picture and put together pieces of code from different sites like

Stack Overflow,
Google,
Finxter, and
Chat GPT.

Chat GPT, on the other hand, can only use code already processed on its site. Throughout the creation of this site, I used these sources to look up how to create this site. I could not just use Chat GPT.

One of the current gaps humans can fill that Chat generators can’t, even though they are impressive, is tying large pieces and concepts together accurately. So I had to manually tie together the front end, backend, and saving functionality.

Here’s the prompt used to create the Flask backend.

This generated back-end Flask python code and JavaScript code, the JavaScript code called the Flask backend.

I modified the code to work with my site, but the basic structure of the code is from what was generated by OpenAI. I was not familiar with Flask. I’m a professional web developer, though. The ChatGPT, the Finxter tutorial, and my experience helped me get up to speed with Flask in minutes.

The code for the application can be found on Replit and Github. I’ll post links to the Replit because I believe it gives you the best ability to run and fork the code.

The communication of the API is the Python code here (Replit):

def gpt3_request():
  data = request.get_json()
  prompt = data['prompt']
  completions = openai.Completion.create(
    engine="text-davinci-002",
    prompt=prompt,
    max_tokens=4000,
    n=1,
    stop=None,
    temperature=0.5,
  )

  message = completions.choices[0].text
  print(message)

  return jsonify({'message': message})

It’s called by the JavaScript code here, which parses the HTML. You can see the code below.

It does this to organize the code into CSS, HTML, and JavaScript. It’ll later be injected back into the DOM of a new page. I did this step because the JavaScript and CSS were not always well-formed, so I wanted to separate them out.

I used Chat GPT and StackOverflow. I used StackOverflow to find a technique to help me determine which one to use. I used Stackoverflow to determine what JavaScript technique I should use to save it in the database.

I like StackOverflow because there is a human voting mechanism. It also has feedback and different perspectives and opposing sides. This is something that ChatGPT misses. It’s only one source

Here’s the prompt I used on ChatGPT to show me the JavaScript client-side database code

I knew I had to save it for the client. Here’s some of the code to save to the client

You can see the full code here: https://replit.com/@kevron/Web-Prototyper#static/post.js

It is about 75% of the same code as what I got from Chat-GPT-3 .

The technologies used are Replit for the IDE, OpenAI DaVinci, Python and flask for the backend, HTML and javascript, GIT for source control, and Chat-GPT3.

Understanding the Security, Safety Concerns, and Limitations

This a powerful technology, and I think there are both security and safety concerns that I learned about from using GPT 3 and reading articles about it.

The security concern in this app is that I can now generate tons of HTML pages if I want to. What if some of the information on this site is unsafe or inaccurate? The potential for the inaccuracy of the data is mentioned on many sites. This technology needs to be used safely from OpenAI.

Since this is a new powerful and new technology, many other new safety concerns may arise. I think it’ll vary depending on the organizations’ specific use of GPT.

They lack the ability to generalize and see the big picture.

Also, the data is stored in the browser’s database. It should not be modified and open to store the HTML code from the website. It could be an internal company tool, though. It’s ok when it is run on the client, but saving this in the database could be dangerous and open up cross-site scripting concerns.

For example, it could be saved in GitHub or saved in someone else’s database.

My Conclusions

This technology is super exciting and will empower many people to create things from just an idea.

Bill Gates and other large investors have said this technology is transformative. Companies such as Google and Microsoft are investing millions of dollars in it.

Despite the safety concerns of GPT and some of its limitations, I’m very excited about working with this technology and other assistive AI technology in the future.

It helped me immensely in writing this code.

I’m also optimistic that some of its criticisms of accuracy are being worked on and addressed.

I learned through writing this article how powerful and helpful GPT can be as an assistive tool. I also learned firsthand that while GPT is powerful, it does not seem like it will replace a human programmer. It cannot generalize, see the big picture, and fact-check like a human does from multiple sources.

So I hope that in following this article, you’ve developed knowledge about GPT and learned how to use it as a code generation tool too.

The post I Created a ChatGPT-Powered Website Creator with ChatGPT – Here’s What I Learned appeared first on Be on the Right Side of Change.

ChatGPT at the Heart – Building a Movie Recommendation Python Web App in 2023

Rafal Kaluzny — Tue, 14 Feb 2023 16:05:45 +0000

In this article, I will show you how I have built a simple but quite powerful movie recommendation app.

Try It Yourself: You can play with the live demo here.

I built it for two reasons:

(i) to keep educating myself on modern technologies,
(ii) to see which movies can entertain me on a weekend night.

This app uses Python, HTML/CSS, Flask, Vercel, and the OpenAI API capabilities.

Prerequisites

Python with flask and openai libraries
OpenAI secret key from
https://beta.openai.com/account/api-keys
(see a nice Finxter tutorial on how to get it)
Vercel account for cloud deployment
https://vercel.com/
GitHub account for code storage
Feel free to use/fork the below code from the GitHub

Files in this project

Here is the snapshot of my code from GitHub.

The key files are these:

.env
api/index.py
api/templates/index.html

First, I use the .env file and add my secret key.

FLASK_APP=app
FLASK_DEBUG=1
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Then goes the Python file.

import os, openai
from flask import Flask, redirect, render_template, request, url_for


app = Flask(__name__)
openai.api_key = os.getenv("OPENAI_API_KEY")




@app.route("/", methods=("GET", "POST"))
def index():
   if request.method == "POST":
       category = request.form["category"]
       number = request.form["number"]
       response = openai.Completion.create(
           model="text-davinci-003",
           prompt=generate_prompt(number, category),
           temperature=0.5,
           max_tokens=60,
           top_p=1,
           frequency_penalty=0,
           presence_penalty=0
       )


       return redirect(url_for("index", result=response.choices[0].text))


   result = request.args.get("result")
   return render_template("index.html", result=result)




def generate_prompt(number, category):
   return """Recommend the best {} {} movies to watch:""".format(number,
       category.capitalize()
   )






if __name__ == '__main__':
   app.run(host='127.0.0.1', port=5050, debug=True)

The imports I use are the following:

os – to work with the functionality dependent on the operating system
openai – to get the best of OpenAI artificial intelligence
flask – to have a nice-looking frontend framework for Python

Some Flask basics.

@app.route("/", methods=("GET", "POST"))

The first line there is implementing the main route (and the only one in this app). You can think of it as the main URL, whether it is localhost/ or www.mysite.com/.

The following function index() is taking information from the HTML form (see index.html) and preparing the data to be displayed back by the index.html site.

Here’s what happens the moment you hit the “Generate titles” button on your site:

index() function takes the input being “number” and “category” from the form,
feeds it into the generate_prompt() function,
which crafts and passes back a question to be asked,
which then – via the API – is sent to OpenAI to get a “response”,
that is then passed as “result” onto index.html to render on the screen.

Let’s also have a look at the index.html file.



 OpenAI Movies
 
 




 
 Recommend the top movies
 
   
   
   
 
 {% if result %}
 
   {{ result | safe }}
 
 {% endif %}

I will not go over the HTML tags as these should be familiar to you, and if not, you can get yourself up to speed with that using other web sources.

Initially, the file will feel like an ordinary HTML/CSS site, but after a while, you will notice a strange animal. It is placed here at the bottom of the file.

 {% if result %}
 
   {{ result }}
 
 {% endif %}

This is where Python co-exists with HTML and allows the “result” that we generate in our “Python backend” to be passed over to the “Flask frontend”. If it exists, the flask engine will render the website with the results at the bottom.

Run the App Locally

Running an app is simple. I just run the index.py file.

With the “host” and “port” attributes specified in the index.py file, Flask will run a local web server with the site.

This is how it looks in my Visual Studio Code:

And this is the browser view:

Vercel deployment

Alright, the app is built and works fine on my local machine.

Now – let’s get it shipped to the world!

First, I put the whole project into my personal GitHub repo. I am using a public one just so that you and other readers can use it. Yet, if you follow my steps here, I would suggest a private one to you.

Warning: The risk with public repo is that it exposes your OpenAI secret key to the world! That would be identified anyways, and your key would rotate, but why bother?

Now, I log in to the Vercel dashboard and click on “Add New…” and select “Project”.

Selecting GitHub as Git provider.

Selecting the repository and importing it.

Arrived at the “You’re almost done.” page. There is no need to alter any of the default parameters there except adding one important variable. In environment variables, I add my own unique OPENAI_API_KEY.

Making sure this is indeed saved properly.

This is it. Hitting “Deploy” and watching the wheels spin.

Vercel builds it for me and assigns some public domains to the app.

Once I arrive at the final page, I open up the app, test it again and if all works ok, share with the family & friends & Finxter readers!

If you liked this journey, you can give me a star in my GitHub repo or this article

Any doubts or comments, drop me a line.

Try It Yourself: You can play with the live demo here.

Happy coding!

Get Your Personal Certificate Proving Your ChatGPT-Powered Coding Skills

If you’re a premium member, you can also go through this mini-course project on the Finxter Academy and certify your newly-acquired skills.

I’m sure many employers and clients would love to hire coders that can use the latest technological disruptions to build advanced applications (that are also easy to develop).

The post ChatGPT at the Heart – Building a Movie Recommendation Python Web App in 2023 appeared first on Be on the Right Side of Change.