Cloudflare Challenge
Tags: cloudflarechallenge, devchallenge, ai, astro
Published: 2024-04-14 19:32:41

*This is a submission for the [Cloudflare AI Challenge](https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99).*

## What I Built

I built an [app](https://test-cf-app-6yx.pages.dev/) 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](https://test-cf-app-6yx.pages.dev/)

[Demo Video](https://youtu.be/U1TwbGFUEwg)


## My Code

* Main [repo](https://github.com/StewSchrieff/ai-ad-generator) with Astro site
* R2 Worker [Repo](https://github.com/StewSchrieff/r2-connect-worker)
* AI Worker [Repo](https://github.com/StewSchrieff/worker-billowing-limit-574d)

## 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](https://discord.com/channels/595317990191398933/1226714131776671796) 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. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9e3z8wblyiixlbmedm17.png)



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](https://developers.cloudflare.com/durable-objects/). I thought about trying to keep track of upvotes by using [metadata](https://arc.net/l/quote/hhqeibpd) 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](https://www.cloudflare.com/developer-platform/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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/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.