DEV Community

Cover image for AI collaborative storytelling + Image generator + Translate (English-Spanish)
julianandreszb
julianandreszb

Posted on

15 1 1

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:

  1. Translate between English<->Spanish
  2. Generate text for story parts
  3. Generate images for each story part
Task Type Model
Translate English<->Spanish Translation m2m100-1.2b
Generate story parts Text Generation llama-2-7b-chat-int8
Summarize prompts for image generation Summarization bart-large-cnn
Generate Images Text-to-Image stable-diffusion-xl-lightning

API Trace View

How I Cut 22.3 Seconds Off an API Call with Sentry 👀

Struggling with slow API calls? Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read more →

Top comments (3)

Collapse
 
valdecircarvalho profile image
Valdecir Carvalho

Congratulations!!!

Collapse
 
bunvin profile image
bunvin

This project is PERFECT ! ❤️‍🔥

Collapse
 
markhelbert21 profile image
markhelbert21

Exciting combination! Looking forward to seeing how this blend of AI technologies unfolds copyenglish.com/ .

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay