DEV Community

Cover image for Fun, Beautiful, Safe, Printable 'Story Cards' for Kids with Cloudflare AI
Merbin J Anselm
Merbin J Anselm

Posted on • Updated on

Fun, Beautiful, Safe, Printable 'Story Cards' for Kids with Cloudflare AI

This is a submission for the Cloudflare AI Challenge.

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

Story Card 2

Story Card 3

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

AI-Powered Story Card Maker - Demo

User Journey 1: Create a 'Story Card'

Create a Story card

User Journey 2: Translate the story

Translate the story

User Journey 3: Re-style the illustration

Re-style the illustration

Other features

a. Surprise Me!

Surprise me

b. Safety Moderation

Content Safety

c. Download Story Card

Download story card

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 application with Typescript. Using Flowbite Svelte 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.

Also, the SvelteKit app is deployed in Cloudflare Pages with Cloudflare R2 (for storing illustrations), Cloudflare KV (for storing story metadata) and Cloudflare 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 logo anselm94 / cf-challenge-ai-storycard

Create Stories in a card with illustrations using AI. Created as part of Cloudflare AI Dev Challenge

AI Story Card (#CloudflareAIDevChallenge)

Create Stories in a card with illustrations using AI. Created as part of Cloudflare AI Dev Challenge.

Demo - https://cf-challenge-ai-storycard.pages.dev

Features

  1. Create a Story Card Create storycard

  2. Translate the Story Translate storycard

  3. Restyle the illustration Restyle storycard

  4. Surprise Me Surprise me

  5. Download Story Card Download storycard

  6. Safe for Kids If any inappropriate content is detected, the story card will be marked as "unsafe" with a blurred preview image Safety Classification

  7. Collaborate with friends The url for a storycard is valid for a day. Comeback, edit and download it anytime within 24 hours.

Cloudflare AI Models used:

  1. Text Generation - mistral-7b-instruct-v0.2
  2. Image Generation - stable-diffusion-xl-base-1.0
  3. Translation - m2m100-1.2b
  4. Image to Text - uform-gen2-qwen-500m
  5. Text Content Moderation - llamaguard-7b-awq

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev
# or start the server and open the app in a new browser
…
Enter fullscreen mode Exit fullscreen mode

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 - Generates the story title and content for the provided theme, genre, character, location etc.

    b. 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 - 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 - Then, then a detailed description of the image is generated.

    e. 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 - For story title and content generation, text-to-image prompt (scene) generation
    2. Image Generation - stable-diffusion-xl-base-1.0 - For illustration generation
    3. Translation - m2m100-1.2b - For translating story title and content into multiple languages
    4. Image to Text - 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 - 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.

Top comments (10)

Collapse
 
ananyapaw profile image
Ananya Paw 🐾

This is top class product, ready to publish with paid plans

Collapse
 
skyloft7 profile image
Mohammed

Wow already commercializing it :)

I just think it's fun for kids

Collapse
 
anselm94 profile image
Merbin J Anselm

Thank you! I'm excited too! Hope you enjoyed it! :)

Collapse
 
anselm94 profile image
Merbin J Anselm

Thank you! I'm excited too about the potential of this idea. Hope you enjoyed it! :)

Collapse
 
arndom profile image
Nabil Alamin

Amazing 💯

Collapse
 
anselm94 profile image
Merbin J Anselm

Thank you! Hope you enjoyed! :)

Collapse
 
yowise profile image
a.infosecflavour

I love it!

Collapse
 
anselm94 profile image
Merbin J Anselm

Thank you! Hope you enjoyed it! :)

Collapse
 
valdecircarvalho profile image
Valdecir Carvalho

Congratulation!!!

Collapse
 
anselm94 profile image
Merbin J Anselm

Thank you! Hope you enjoyed it! :)