Create your own DALLE-2 AI Image generating Site with Flask and OpenAI API
A lesson on how to use the OpenAI DALLE-2 API to generate AI images inside of your own Flask application.
This tutorial will cover the following:
- Creating a basic Flask application
- OpenAI DALLE-2 API and documentation
- Generating DALLE-2 prompts and images
For a full video tutorial — check out the YouTube video here:
Creating a basic Python Flask Application
We will use Flask for this tutorial as it is easy to set up, our application is straight-forward, only has one view function and form — both in one html page.
You can git clone this repository: https://github.com/skolo-online/flask-app-template
Run the following command in your terminal:
git clone https://github.com/skolo-online/flask-app-template.gitThe folder structure of the application is as follows:
|
|____ static (add all static content here)
|____ templates
| |
| |_____index.html
|
|___ app.py
|___ config.py Static folder — All the static content (js files, css files, images etc) should go in here. We will be using CDN bootsrap for simplicity so you can ignore this folder.
Templates — there should be a file there called index.html
Add the following in the index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Skolo Online">
<meta name="generator" content="#">
<title>Skolo DALLE2</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container mt-5">
<div class="bg-light p-5 rounded">
<h1>Create a new image</h1>
<p class="lead">
This website uses the latest in DALLE-2 from OpenAI to create new images using Artificial Intelligence.
Enter any prompt to generate your image. You have full legal access to the images generated etc etc.
</p>
<form class="" action="#" method="post">
<div class="mb-3">
<label for="prompt" class="form-label">Enter your Prompt</label>
<input type="text" class="form-control" name="prompt" id="prompt" placeholder="A pencil illustration of a money driving a bicycle" required>
</div>
<button type="submit" class="btn btn-primary">GENERATE IMAGE</button>
</form>
<br>
<br>
<div class="row">
{% for image in images %}
<div class="col-lg-4">
<img src="{{image}}" class="img-fluid" alt="OpenAI DALLE2 Image Generation">
</div>
{% endfor %}
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>Note the following in the file:
- We are using Bootsrap CDN for our website.
- There is a form with one text input — to collect the prompt for the AI. The name and id of the input is both “prompt”.
- There is a row below the form do display the images that are generated.
config.py — Stores all the configuration elements
There are only two variables you need to specify in the config file for now:
- OpenAI API Key
- Flask secret key (a random string)
class Config(object):
DEBUG = True
TESTING = False
class DevelopmentConfig(Config):
SECRET_KEY = 'jhfduhfd8754827ywehujkfh977428T%^#@#TYHGF55t7yhlgjhhsddfda'
OPENAI_KEY = 'sk-get-your-api-key-from-openai-kuhruiyytyir8w750475yturhf'
config = {
'development': DevelopmentConfig,
'testing': DevelopmentConfig,
'production': DevelopmentConfig
}app.py — Main Flask file
The main flask file contains the logic for our view function and the OpenAI API call with DALLE-2. The file should contain:
from flask import Flask, render_template, request
import config
import os
import openai
#creating the 404 page (Optional)
def page_not_found(e):
return render_template('404.html'), 404
##Initialising FLAK
app = Flask(__name__)
app.config.from_object(config.config['development'])
app.register_error_handler(404, page_not_found)
### Initialise the OPENAI library with the key saved in the CONFIG file
openai.api_key = app.config['OPENAI_KEY']
#####----------START FUNCTIONS--------------------------------------------------------------------
def createImageFromPrompt(prompt):
response = openai.Image.create(prompt=prompt, n=3, size="512x512")
return response['data']
#####----------END FUNCTIONS--------------------------------------------------------------------
##View Functions
@app.route('/', methods=["GET", "POST"])
def index():
if request.method == 'POST':
images = []
prompt = request.form['prompt']
res = createImageFromPrompt(prompt)
if len(res) > 0:
for img in res:
images.append(img['url'])
return render_template('index.html', **locals())
#Run Flask
if __name__ == '__main__':
app.run(host='0.0.0.0', port='8000', debug=True)This function 👉🏽 createImageFromPrompt(prompt) calls the OpenAI API and takes in the prompt as an argument. We have requested a “512x512” size image. The following options and prices are available:
OpenAI DALLE-2 API and documentation
Image generation documentation can be found here: https://beta.openai.com/docs/guides/images
In this tutorial we focus only on the create image function seen below:
response = openai.Image.create(
prompt="a high resolution image of a white chihuahua sitting on a couch drinking beer",
n=1,
size="1024x1024")
image_url = response['data'][0]['url']The above prompt will generate:
- One image of 1024x1024 resolution.
You can adjust the number of images that should be returned, and the size of image.
Generating DALLE-2 prompts and images
If you want more accurate images returned, include the type of image you are requesting for in your prompt.
So instead of saying: “a white chihuahua sitting on a couch” rather say “a high resolution picture of a white chihuahua sitting on the couch” or “photorealistic image of a white chihuahua sitting on a couch”.
Try appending the image type before the description of you want returned.
Image types I have tried include:
- High Quality Photo of ….
- An Illustration of ….
- Oil Painting of ….
- 3D Render of ….
- Texture of ….
- Cartoon of ….
- Abstract Painting of ….
- Hand Drawn Sketch of ….
Conclusion — DALLE2 Image Generation API
The API includes: image editing and creating variation functionality that you can add to the application.
Try it out and leave me a comment below.
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.
Interested in scaling your software startup? Check out Circuit.
