Greater than fiction
Tags: cloudflarechallenge, devchallenge, ai, angular
Published: 2024-04-07 03:13:59

*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
[cat-nerd](https://cat-nerd.pages.dev/)

I built an application which given a set of animals, and fictional universes, generates an image.

The functionality is simple, but is split between a Page for the front-end, and a Worker for the AI generated content. 

## Demo
![Initial selection of an animal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmtnmlmsmwdmu1kvjfbg.png)

![Selection of a fictional universe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eszq8ecu93hybh3sx8br.png)

Upon submitting....
The famed, Dune hamster, Sallakis, destroyer of lettuce

![An AI generated image of a hamster, in a Dune style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzilq61dh1y0d5r29ikl.png)

## My Code

<!-- Show us the code! Share a public link to your repo and be sure to include a README file with installation instructions. We also encourage you to add a license for your code.  --> 
[Front-end](https://github.com/patHyatt/cat-nerd)
[Worker](https://github.com/patHyatt/pico)


The main heart of this is the Worker, which is a fancy API wrapping the AI functionality. `POST` the following two [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) parameters to the Worker

1. `animal`, the animal you wish to put in a universe, `cat` lets say
2. `universe`, the fictional body of work's universe name, `star trek` for example

The Worker's response will respond with a PNG image that AI thought was a good fit for your combination.

Give it a try yourself
```bash
 curl -d "animal=rat&universe=dc comics" https://pico.patrickhyatt.workers.dev --output C:\test.png
```

Meet Rex Ratham, DC's newest villain
![Rex Ratham fictional rat character of DC Comic universe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ky2glfhuc6g9812acml.png)


## Journey
I had a few hours after a long day and the announcement of this challenge has stuck in my head for a few days, so I decided to dive in head first, no look, and no 360.

My initial thought was just to create a Worker that took in a Star Trek character, and generated a cat image in that character's style.

However after seeing how limiting that was, it seemed better to take in some input and be a tad more dynamic, thus fictional universes. At that point, why limit it to cats? 

This all required a front end which a Worker is not. So, a Page was also created to handle the display/input to the worker, thus yielding the two repositories listed. 

Future thoughts
I believe I could make a single Page with a Function to accomplish the same behaviors in a single repository, but while the wheels were spinning, I did not want to clog the air intake (or basically slow myself down).

**Multiple Models and/or Triple Task Types**
I had big hopes to incorporate multiple models and/or 3+ task types, but with limited time comes snap decisions. 

<!-- Don't forget to add a cover image or an additional tag to this post (if you want). -->

<!-- Thanks for participating! -->

Edits: Add link to site... Add more details on how Worker serves as AI frontman