Hi and welcome to this course on building a fully automated Meme generator using Python. Our meme generator will have a frontend interface where the user can type any subject and at the click of a button memes will come rolling out. The output will be fully created memes with the text already embedded inside the image at the appropriate position and font size.
Besides creating something really cool and fun, and becoming a meme-master, we will also learn a lot of stuff about Python, programmatic image editing, calling ChatGPT in JSON mode and writing good system prompts, Streamlit, and more.
The first part may be a bit dry as we have some project setup work to do but stick with me, as the real fun starts immediately after. 🙂 So without further ado, let’s get started!
I’ll try not to insert too many memes into the course, but it’s hard to resist now that I have an automated generator!
Getting Started
The only things you’ll need to follow along are a code editor and Python installed on your machine. We’ll be using a few libraries, but we’ll install and discuss them as we go along. I’ll be using VSCode, but you can use any editor of your choice. As for Python, any reasonably recent version will work fine.
First get started by creating a project folder anywhere you like, and then open the folder in your code editor of choice. I’ll name my project folder Meme_Gen:
📁 Meme_Gen
The first thing we’ll need in order to be able to generate memes is some meme template images. I’ve gone ahead and selected 11 of the most popular and widely used meme templates for this course, but you will easily be able to add more yourself after the course is done.
So download the provided templates folder and make sure to place it inside your project folder:
📁 Meme_Gen
📁 templates
🖼 But-Thats-None-Of-My-Business.jpg
🖼 Disaster-Girl.jpg
🖼 Distracted-Boyfriend.jpg
🖼 Drake-Hotline-Bling.jpg
🖼 etc...
If you look inside you’ll find the 11 template images without any text on them. You’ll probably recognize most of them!
Preparing the meme data
In order to get this project to work we will need to create an interface that will allow the user to generate memes. In order to do that, we need to have some kind of function that will allow us to embed our meme text into the meme template images. In order to run this function we need to actually have a meme text to embed, which brings us to the first task of this course: preparing the meme data.
We will have to give ChatGPT strict limitations about what it’s supposed to do, which memes it can choose from, and how to use them. We’ll also need to have exact details for our text-into-image embedding function letting it know where the template image is located, what font to use, whether to outline the text, and most importantly exactly where to place which piece of text.
So for each meme, we’ll need an object or some record that holds all this information. I’ve called this the meme data here, and where for a big project we’d use a database for this, I want to keep it simple here, so I have provided a JSON file that contains all the data needed for every single meme template chosen.
As it was quite repetitive and boring to write out all this data and get the appropriate pixel coordinates for each text box on every image, I’ve done it for you. You can find the meme_data.json file in the course materials. Make sure to download it and place it in your project folder (but outside the templates folder):
📁 Meme_Gen
📁 templates
🖼 But-Thats-None-Of-My-Business.jpg
🖼 Disaster-Girl.jpg
🖼 Distracted-Boyfriend.jpg
🖼 Drake-Hotline-Bling.jpg
🖼 etc...
📄 meme_data.json
I created the data for you, but I will explain exactly how I did it for two reasons:
- I hate tutorials that just say “Here, just copy this” without explaining how stuff works, beginners should also be able to follow along and have a good time.
- You may very well want to add your own favorite memes to the generator after the course is done, you’ll know exactly how to do it.
If you open the meme_data.json file you’ll see that it is basically just a list with 11 entries that look like this:
{
"id": 0,
"name": "Drake Hotline Bling Meme",
"alternative_names": ["drakeposting", "drakepost", "drake like dislike"],
"file_path": "Drake-Hotline-Bling.jpg",
"font_path": "impact.ttf",
"text_color": "white",
"text_stroke": true,
"usage_instructions": "The Drake Hotline Bling Meme is used to humorously express preference or approval for one thing over another. It features two panels with rapper Drake. In the first panel, Drake is rejecting something, while in the second panel, he is showing approval for something else. Users overlay text or images to depict contrasting options or decisions. Make sure the first sentence is the thing to be rejected and the second sentence is the thing to be approved.",
"number_of_text_fields": 2,
"text_coordinates_xy_wh": [
[620, 20, 560, 560],
[620, 620, 560, 560]
],
"example_output": ["Monday mornings", "Friday afternoons"]
},
So let’s go over all these key-value pairs:
id: A unique identifier for the meme, we’ll need this for ChatGPT to tell us which meme it wants to use with the text it is providing for us. I simply used increasing numbers from 0 to 10.name: The most well-known name of the meme, for clarity.alternative_names: Other names the meme might be known by, for ChatGPT to recognize it, just to be extra safe.file_path: The exact name of the image file located inside thetemplatesfolder, we’ll need this for the image editing function which overlays the text.font_path: The font file to use for the text to be overlaid. I have chosen three commonly used and easy-to-find meme fonts, “Impact”, “Arial”, and “Comic Sans”. We will download and prepare these fonts in a moment.text_color: The color of the text to be overlaid, as some memes don’t work well with awhitefont, like the popular UNO Draw 25 meme.text_stroke: Whether to outline the text or not, we’ll use an outline for most but not all memes.usage_instructions: A description of the meme and what kind of feeling is generally expressed using the meme. It ends with quite specific instructions of what each sentence should contain and what order the sentences should be in. This is all for ChatGPT as we need to be very, very, clear about everything.- For example, If we generate the Distracted Boyfriend meme but ChatGPT changes the order of the three pieces of text from
"New shiny idea","Me","Current project deadline", to"Me","New shiny idea","Current project deadline", the meme will not make sense as we will be appending the wrong text to the wrong part of the image. number_of_text_fields: The number of text fields that need to be overlaid on the image, both for the image editing function and for ChatGPT to know how many text fields to provide to us. We have memes with 2, 3, and 4 text fields.text_coordinates_xy_wh: The pixel coordinates and width and height of the text boxes on the image. This tells the image editing function exactly where to place the text. The coordinates are in the format[x, y, width, height]and are relative to the top left corner of the image. Each list entry represents one of the text boxes.- I extracted these coordinates using image editing software which showed me the box size as I dragged around a selection box. You can also guess these based on the overall image size. This part is a bit of a pain but with trial-and-error you can find the perfect numbers. A concrete example for clarity:
example_output: This final key is for ChatGPT again, a concrete and exact example of what the output for this particular meme should look like and which order the sentences should have. Make sure that both here and in the earlierusage_instructionsthe sentences are in the same order as the text fields in thetext_coordinates_xy_whlist you created.
Aren’t you glad I did all this image coordinate trial-and-error stuff for you? 😅 For bonus points, add your own favorite meme templates after we finish the course!
Getting our fonts
One last setup thing to do before we can really start coding. Create a folder named fonts