This is a submission for the Cloudflare AI Challenge.

What I Built

I built an app that creates a flyer for your (fictional?) business. Select the best slogan created by various text generation AI models, before selecting a stunning image. Then view your flyer.

Demo

AI-Ad-Generator

Demo Video

My Code

• Main repo with Astro site
• R2 Worker Repo
• AI Worker Repo

Journey

I've always wanted to play with AI tools (and astro... and tailwind), and having a newborn child last month made for a great excuse to stay up late coding this past week.

I wanted to create something simple enough that anyone could understand, even without knowing anything about the AI tech underneath. I tried just about all of the text generation models before jettisoning the ones that didn't make good puns.

I also ran into a frustrating issue where I'd exceed CPU Time limits when calling the AI.run code directly for Text to Image models. I refactored to calling the AI models via API instead, and this resolved that problem. See discord discussion for more information. This would be a good thing for Cloudflare to look into, as the templates really should work consistently out of the box.

In the future, I'd love to implement a social aspect to this project. I'd need to implement something to upvote/downvote, or otherwise compare flyers to determine which flyers are great, and which are garbled messes. I ran out of time to implement this, but that would allow me to dip my toe into using Durable Objects. I thought about trying to keep track of upvotes by using metadata stored on the R2 object, but (AFAIK) there's no way to update metadata without re-uploading the entire object, which would grow to be too expensive.

I'd also like to migrate to using Cloudflare Images to properly create a png file with the slogan as a banner. I ran into some issues attempting to get a worker to run an in-memory image processor, and ultimately scrapped that idea in favor of creating the flyer in browser.

I do keep the slogan stored in the metadata, which means I could potentially batch process all the stored images into proper image files at a later date. This is how the final page renders the slogan. And is also how I learned about the existence of Access-Control-Expose-Headers after trying to figure out why I could see the slogan in the network tab, but not in Javascript. 😅

Multiple Models and/or Triple Task Types

Multiple Text Generation models were used, as well as multiple text to image models.