Cloudflare Challenge

#cloudflarechallenge #devchallenge #ai #astro

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.