-
-
Website overview
The Journey Behind Building an AI-Driven Meme Generator Inspiration 💡 I have always been a person that used memes as means of communication but i have always been constantly frustrated by not finding the write meme to send. Often times, i would find the write picture, but my message gets lots in translation with no caption. I was intrigued by the idea of automating the creative process behind meme-making. What if we could combine the latest advancements in AI and image recognition to generate memes that are not just funny, but contextually accurate? And that's how the concept for my AI-Driven Meme Generator was born.
What I Learned 📚 Front-end Skills: Crafting a user-friendly interface was crucial. This honed my previously non-existing HTML and JavaScript skills. I learned how to use HTML5 Canvas to overlay text on images, make calls to my local Flask server, and download the generated memes. I had many bugs trying to get this to work but I found Stackoverflow to be particularly helpful. Working with AI Models: Implementing MobileNet for image classification was a deep dive into the world of machine learning. Originally, i had planned on using chatgpt to generate the meme text, but i found that it was not possible to do so using the API so using MobileNet was my backup option. API Integration: Incorporating ChatGPT via OpenAI's API helped me understand how to work with external APIs effectively. Back-end Setup: Flask was the backbone that made the integration of all these elements possible. Getting it to work was a struggle but once it was working it worked semlessly (despite a small CORS issues)
How I Built It 🛠️ Frontend: Started off with a minimalistic HTML layout—just an upload button for the image and a "Generate Meme" button. Image Classification: Integrated MobileNet to understand the image context. This is what sets the project apart—the AI gets the image. The Humor Engine: Used ChatGPT to generate the meme text. The API takes the image context and returns a quippy caption. Marrying Image and Text: Used HTML5 Canvas to overlay the generated text onto the image. Sharing is Caring: Added a feature to either download the meme or share it on social media platforms. Challenges Faced 😅 CORS Issues: My frontend and backend were not originally designed to talk to each other. CORS policy was a hurdle. Quality Control: Initially, some generate d memes didn't hit the mark. I refined the interaction between MobileNet and ChatGPT for better results. User Experience: Making the whole process quick yet seamless was challenging but crucial for user engagement. The text overlay on the image was a challenge to get right. I had to make sure the text was readable and not too big or small. It also kept getting out of the image for the longest time until i was able to finally fix it. And there you have it, the story of how I turned an interesting concept into a functional, AI-powered Meme Generator. The road was fraught with challenges, but each one only added a new skill to my arsenal.
Log in or sign up for Devpost to join the conversation.