AI collaborative storytelling + Image generator + Translate (English-Spanish)

This is a submission for the Cloudflare AI Challenge.

What I Built

I have developed a website that lets AI and the user tell stories together. The first story part is provided by the AI, then you can provide a new part and so on until the story is complete.

During each interaction, the AI will make an image for each story part. In case you decide not to continue, the AI will generate the final part of the story.

Additionally, the website also lets you change the language you see it in. Right now, English and Spanish are available.

Demo

Demo Here!

My Code

https://github.com/julianandreszb/ai-storytelling

Journey

This challenge was a perfect way to explore, learn, and integrate Cloudflare Pages and AI Workers and make them work together.

All the documentation was easy to follow and implement. Also, it helped me a lot the Cloudflare Workers YouTube channel. (Thanks for suggesting “Hono framework”!)

What I learned?

How easy it is to create workers and integrate them with @cloudflare/ai package.
How to deploy the front-end project on “Cloudflare Pages”. I used my favorite front-end framework (Vue.js) easily.
I could explore the different AI Worker Models

What’s next?

Integrate “Automatic Speech Recognition”, so the user can enter text OR talk directly to the AI to generate story parts.
Integrate “Object Detection”, so the user can upload images and create a story part based on objects that are detected.
Refactor the whole project. Due to time constraints, I couldn’t apply the best design patterns.

Multiple Models and/or Triple Task Types

Multiple Models: Image generator. First, it Summarizes the story part prompt, and then it Generates the image. (Multiple model, same task on the worker side)

Triple Task Types:

Translate between English<->Spanish
Generate text for story parts
Generate images for each story part