Skip to content

Latest commit

 

History

History
83 lines (56 loc) · 2.75 KB

README.md

File metadata and controls

83 lines (56 loc) · 2.75 KB
Raw

AI Story Card (#CloudflareAIDevChallenge)

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

Blog Post - https://dev.to/anselm94/fun-beautiful-printable-story-cards-for-kids-with-cloudflare-ai-3fbf

Note

This project won Cloudflare AI Challenge under 'Multiple Models' prize category winner - Dev.to Announcement Post 😉

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 tab
npm run dev -- --open

Note

The AI binding in Wrangler currently doesn't work while working locally

Deploy

Prerequisites

  1. Create a Cloudflare account
  2. Create an application under 'Workers & Pages'
  3. Create a KV namespace
  4. Create an R2 bucket
  5. Update the wrangler.toml file with right KV id and R2 bucket_name
  6. Finally, login Wrangler into Cloudflare account by npx wrangler login

Steps

  1. Build the app
npm run build
  1. Deploy the app
npm run deploy