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

by

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:

💡 Recommended: OpenAI API – or How I Made My Python Code Intelligent

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:

💡 Recommended: Ten Easy Steps to Your First Python Flask App

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.

<!DOCTYPE html>
<head>
  <title>OpenAI Logo Maker</title>
  <link
    rel="shortcut icon"
    href="{{ url_for('static', filename='icon.jpg') }}"
  />
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <script type="text/javascript">
    function loading(){
      $(".loading").show();
    }
  </script>
</head>

<body>
  <img src="{{ url_for('static', filename='icon.jpg') }}" class="icon" />
  <h3>Generate a Lettermark logo</h3>
  <form action="/" method="post">
    <input type="text" name="color" placeholder="Enter the logo color, e.g. dark gold" required />
    <input type="text" name="text" placeholder="Enter the brand name, e.g. Fast Delivery" required />
    <input type="text" name="number" placeholder="How many proposals, e.g. 1,2,...,5" required />
    <input type="submit" value="GENERATE LOGO" onclick="loading();" />
  </form>
  {% if result %}
  <div class="result">
    {%for i in result['data']%}
      <img src={{i['url']}}>
    {%endfor%}
  </div>
  {% endif %}
  <div class="loading">
    <img src="{{ url_for('static', filename='loading.jpg') }}" width="35" height="35">
  </div>
</body>

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