DEV Community

Cover image for Cloudflare Challenge
Stewart Schrieffer
Stewart Schrieffer

Posted on

2 1 1 2 2

Cloudflare Challenge

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

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.
Image description

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.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (4)

Collapse
 
saulitis profile image
Peter Saulitis •

Fantastic.

Collapse
 
stewschrieff profile image
Stewart Schrieffer •

Thanks Peter!

Collapse
 
programordie profile image
programORdie •

Nice! Good luck in the contest!

Collapse
 
stewschrieff profile image
Stewart Schrieffer •

Thank you!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay