I got a little bored, so I created a simple Image Generating App using OpenAI Dall-E-2 & Python
Image generation is one of the powerful capabilities of OpenAI’s suite of API’s utilising it’s service Dall-E-2.
In this tutorial, I aim to show you that it’s not out of your reach to harness the full capability of this service. It’s pretty simple to get up and running and starting to have a little bit of fun.
I’ve coded this particular project in Flask but, you could use other Frameworks to Integrate the API. I won’t go into every last code block but some of the important key learnings through the process.
Setting up our Flask Project
We First create a virtual environment to setup our project. The below steps.
- Setup a Project Directory in the Git Folder
- Create the Virtual Environment
- Activate the Virtual Environment
PS C:\git> cd .\dalle2\
PS C:\git\dalle2> python -m venv venv
PS C:\git\dalle2> .\venv\Scripts\activate
(venv) PS C:\git\dalle2> Looking at your project structure it should look a little like this when functional.
|
|____ static (add all static content here e.g. assets, css)
|____ templates
| |
| |_____index.html
|
|___ app.py (application file)
|___ .env (configuration and environment file)
Then ensure the flask package is installed by running the following command on the virtual environment.
(venv) PS C:\git\dalle2\venv> pip install flaskWe then need to create a shell of a home app we do this by creating an app.py file in the venv folder and using the following code.
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return 'Hello, World!'If we run it in the terminal, by running the flask run command in the terminal.
(venv) PS C:\git\dalle2\venv> flask run
The app should run on localhost and you can navigate to see the “Hello, World!” Prompt when navigating to the address in the browser.
Creating a Homepage
The next step we need to create a homepage to allow us to request the images to be generated, and overall make things a little more interactive and look a little nicer. Our homepage should have the following elements.
- A means of querying the API for any particular prompts
This is done by implementing a form to allow the user input to be handled.
<!DOCTYPE html>
....
<form action="/" method="post">
<input type="text" name="search_query" placeholder="Enter a search term...">
<input type="submit" value="Generate Image">
</form>
....2. A means of handling the returned Images from the API
<div class="image-container">
{% for image in images %}
<div class="col-lg-4">
<img src="{{image}}" class="img-fluid" alt="OpenAI DALLE2 Image Generation">
</div>
{% endfor %}
</div>Prettify these elements, or not to your desired liking using a css file in the static folder.
Integrating the API
First and foremost you need to sign up for an API Key to allow you to query the OpenAI API. You can do this by logging into OpenAI, Selecting View API keys, generating a key, and saving it for later.
Please be mindful that to use the service it will have realively small costs associated with it. I have attached those current at time of publishing below.
Once you have the API key plug this into the Project’s .env file for config, it should look something a little like this.
export OPENAI_API_KEY = 'sk-mysupersecretkey'
#not an actual key!You will generally be prompted to install the python-dotenv package when running or validating, to enable this to work. You can do this by running the following command.
C:\git\dalle2\venv> pip install python-dotenvOnce we have all this setup it’s time to integrate the functional code here into our App.py file. A few key points.
- We want to set the OpenAI API Key in order so as we can use the API
from flask import Flask, render_template, request
import os
import openai
app = Flask(__name__)
openai.api_key = os.getenv('OPENAI_API_KEY')
2. We want to create a function to handle the image generation
#This function is used to Generate the Image in the OpenAI-API
def generate_image(search_query):
# Query the DALL-E-2 API to generate an image based on the user input
response = openai.Image.create(
prompt=search_query,
n=4,
size="1024x1024"
)
return response['data']3. We want to render our html template each time we have a response from the API, this code should handle this. Taking our input, using our function to generate images, and returning the images generated.
#This function renders (updates or generates) our index.html template (homepage and returns image generated)
@app.route('/', methods=['GET', 'POST'])
def index():
images = []
if request.method == 'POST':
images = []
search_query = request.form['search_query']
image = generate_image(search_query)
if len(image) > 0:
for img in image:
images.append(img['url'])
return render_template('index.html', **locals())Integrate these features into the app.py file, alongside the standard Flask Boilerplate, and you should be ready to flask run.
Validating
As you can see when we query the API, it generates varying results, in order to optimise querying the API I would advise fine tuning prompts to be quite specific as to the ask.
You should end up with something like the below, which, with a little more time on the CSS could look pretty sharp.
Wrap Up and Next Steps
When I get a chance (and if I don’t please remind me), i’ll check the code into the Github for people to share (use at your peril). It’s not the most complex app, but gives a good base to build upon and get hands on with OpenAI’s API
Next steps will be to deploy site onto a dev stack and take it from there.
All the best and Don’t be a stranger, reach out and say Hi 👋
