Fun, Beautiful, Safe, Printable 'Story Cards' for Kids with Cloudflare AI
Tags: cloudflarechallenge, devchallenge, ai, generativeai
Published: 2024-04-12 19:40:23

*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

An interactive AI-powered "**Story Cards**" Maker specifically designed for children (we were once a kid too 😉). This fun and user-friendly web app helps kids craft their own narrative adventures in the size of a postcard, complete with beautiful illustrations. The Story Card can be translated, re-styled with illustrations with a variety of children's storybook themes and even can be downloaded and printed. In the age of AI, the safety of generated content is a priority - the illustrations and the story generated are vetted for safety moderation using AI.

### What are 'Story Cards'?

![Story Card 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fs140efj3wygrmctf6a4.png)

![Story Card 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ne6o15dnmtrmro7jf1s.png)

![Story Card 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wxpu2n10xqdfimq6d66.png)

> Story Card = **Story** in a **Post Card**

For my newborn boy, I recently bought illustrated storybooks with 365 stories each. I really loved how the stories were written with a precise theme in a small paragraph with just one illustration. I was wondering at the same time, if I can have each of the stories printed on a card, which I can shuffle later and not read all those stories in order. Thus, the idea of 'Story Card' was born.

Here's how it works:

- 🎒 **Choose Your Adventure**: Kids can select from a range of captivating story elements, including _genre_ (fairy tale, superhero, mystery), _character_ (unicorn, robot, prince), _setting_ (castle, candy land, jungle), _tone_ (funny, adventurous, magical), and _theme_ (friendship, bravery, imagination).
- 🌟 **Surprise Me!**: Click the "Surprise Me" button for a completely random story combination, leading to unexpected and delightful narrative twists!
- 📇 **Bring Your Story to Life**: Once the elements are chosen, the AI conjures up a captivating story title, narrative content, and even an eye-catching illustration that perfectly complements the adventure.
- 🌏 **Translate for the World**: Translate your story title and content into various languages, broadening the child's horizons and sparking an interest in foreign languages.
- 💅 **Style the Adventure**: Restyle the illustrations in a variety of storybook themes. Choose from a variety of options to create a truly personalized story card.
- 🦺 **Safe for Kids**: The illustration and the story content are vetted for safety classification using AI
- 💖 **Download and Share**: Once you're happy with your masterpiece, download the story card as a beautiful postcard-style image, ready to print, share with friends, or treasure forever!

## Demo

{% cta https://cf-challenge-ai-storycard.pages.dev/create %}  AI-Powered Story Card Maker - Demo {% endcta %}

**User Journey 1: Create a 'Story Card'**

![Create a Story card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rspjwkowvw9bkzr6e1gg.gif)

**User Journey 2: Translate the story**

![Translate the story](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwhrc68erx0z2w5675m1.gif)

**User Journey 3: Re-style the illustration**

![Re-style the illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mp7w87od6k0r2rkedxv9.gif)

**Other features**

a. **Surprise Me!**

![Surprise me](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwq3o15p08x2260w3b6w.gif)

b. **Safety Moderation**

![Content Safety](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22e8msi9jtg6sdfcd1ip.png)

c. **Download Story Card**

![Download story card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ihezqk2t6bo6zkd1h87.png)

d. **Link to Story Card**

The story cards once generated, will have a unique link to access and download and will be available for 24 hours.

## My Code

This AI-powered Story Card Maker is built as a [SvelteKit](https://kit.svelte.dev/) application with Typescript. Using [Flowbite Svelte](https://flowbite-svelte.com/) component library, the whole application was laid out. The layout for the Story Card (emulating the size of a postcard - 4" x 3") is created as an HTML Canvas using [Fabric.js](http://fabricjs.com/).

Also, the SvelteKit app is deployed in Cloudflare Pages with [Cloudflare R2](https://developers.cloudflare.com/r2/) (for storing illustrations), [Cloudflare KV](https://developers.cloudflare.com/kv/) (for storing story metadata) and [Cloudflare AI](https://developers.cloudflare.com/workers-ai/) (obvious choice for LLM and other GenAI models)

Finally, this is my first experience building a full web app with SvelteKit and deploying it on Cloudflare Pages

The complete source is available here under the MIT license

{% github anselm94/cf-challenge-ai-storycard %}

## Journey

The Cloudflare Dev AI Challenge sparked a creative fire! Inspired by my child's illustrated storybook, I envisioned a collection of story cards – short, engaging narratives that could be printed, shuffled and read in any order.

Here's how I brought this idea to life:

### Inspiration & Design:

Cloudflare's open AI models, powerful for focused tasks, seemed perfect for crafting short stories. Contrasting them with larger LLMs, I saw their potential for creative writing. Thus, generating short stories with illustrations, presented as printable story cards, became my challenge entry.

First, I sketched the story card layout using Affinity Designer, focusing on child-friendly fonts and a layout reminiscent of a storybook.

### Building the Web App:

SvelteKit, with its smooth developer experience, was a joy to use.  Since I envisioned multiple features, Cloudflare KV and R2 became natural choices for data storage, with SvelteKit's adapters making integration effortless. Finally, Wrangler CLI helped me deploy the application with ease.

### Harnessing AI Power:

The story card maker utilizes five core AI tasks:

- **Text Generation**: The `mistral-7b-instruct-v0.2` LLM model generates the story title, content, and illustration caption.
- **Image Generation**: The `stable-diffusion-xl-base-1.0` model creates illustrations and allows for style variations.
- **Translation**: The `m2m100-1.2b` model translates the story content into various languages (limited to Latin character sets due to font usage constraints).
- **Image to Text**: The `uform-gen2-qwen-500m` model writes a detailed precise description of the generated illustration.
- **Text Content Moderation**: The `llamaguard-7b-awq` model moderates the story content as well as the illustration description, to be 'safe' or 'unsafe' for children.

### Key Takeaways and Future Aspirations:

This challenge was a fantastic learning experience, helping me transform an idea into a working application in a short timeframe.  Looking ahead, I'm excited to expand this project with new features and generate even more story card varieties for my son and others.  On the technical side, I identified limitations with certain models, like character limits for translation. Exploring solutions like breaking down content for translation in chunks could be a future avenue.

### What I'm Proud Of:

Overall, I'm most proud of creating a user-friendly and engaging application that combines the power of AI with the magic of storytelling.

**Multiple Models and/or Triple Task Types**

The application currently fits into both types.

- **Multiple models per task**: The first journey - 'Create a story card' utilises the following 2 models for 3 steps in order

    a. [`mistral-7b-instruct-v0.2`](https://developers.cloudflare.com/workers-ai/models/mistral-7b-instruct-v0.2/) - Generates the story title and content for the provided theme, genre, character, location etc.

    b. [`mistral-7b-instruct-v0.2`](https://developers.cloudflare.com/workers-ai/models/mistral-7b-instruct-v0.2/) (same model) - Based on the generated story, identifies one primary scene, for which the illustration is to be generated. 

    c. [`stable-diffusion-xl-base-1.0`](https://developers.cloudflare.com/workers-ai/models/stable-diffusion-xl-base-1.0/) - Based on the scene description, a text-to-image prompt is constructed to generate the illustration in a particular style.

    d. [`uform-gen2-qwen-500m`](https://developers.cloudflare.com/workers-ai/models/uform-gen2-qwen-500m/) - Then, then a detailed description of the image is generated.

    e. [`llamaguard-7b-awq`](https://developers.cloudflare.com/workers-ai/models/llamaguard-7b-awq/) - Finally, both the story content (title + content) as well as the illustration description are moderated for safety.

- **Triple Task**: The AI models across 5 task types were utilized.
  1. **Text Generation** - [`mistral-7b-instruct-v0.2`](https://developers.cloudflare.com/workers-ai/models/mistral-7b-instruct-v0.2/) - For story title and content generation, text-to-image prompt (scene) generation
  2. **Image Generation** - [`stable-diffusion-xl-base-1.0`](https://developers.cloudflare.com/workers-ai/models/stable-diffusion-xl-base-1.0/) - For illustration generation
  3. **Translation** - [`m2m100-1.2b`](https://developers.cloudflare.com/workers-ai/models/m2m100-1.2b/) - For translating story title and content into multiple languages
  4. **Image to Text** - [`uform-gen2-qwen-500m`](https://developers.cloudflare.com/workers-ai/models/uform-gen2-qwen-500m/) - For understanding the content in the generated illustration, to be vetted by an LLM.
  5. **Text Content Moderation** - [`llamaguard-7b-awq`](https://developers.cloudflare.com/workers-ai/models/llamaguard-7b-awq/) - For moderating the illustration description and the story title & content.

**Edit**:
- Updated `mistral-7b-instruct-v0.1` model to `mistral-7b-instruct-v0.2`, since I was facing issue soon after the post was published
- Added the 'Safety Classification' feature, since this is essential for AI-generated text and image content. Moreover, for an application focussed on generating content for kids, it's an absolute need. Add the usage of `uform-gen2-qwen-500m` & `llamaguard-7b-awq` for content moderation.

<!-- Thanks for participating! -->