AI Story Generator

A web application that generates engaging stories with AI-created images and text-to-speech narration.

Features

  • Story Generation: Enter a subject and get a complete 4-chapter story with a happy ending
  • AI Images: Each story and chapter gets a unique AI-generated image
  • Text-to-Speech: Listen to stories with male voice narration
  • Interactive Interface: Clean, user-friendly design with chapter navigation
  • Start Over: Easy reset to create new stories

Project Structure

├── backend/
│   ├── index.ts           # Main Hono server with API routes
│   └── README.md          # Backend documentation
├── frontend/
│   ├── index.html         # Main HTML template
│   ├── index.tsx          # React frontend application
│   ├── components/        # React components
│   │   ├── App.tsx        # Main app component
│   │   ├── StoryForm.tsx  # Subject input form
│   │   ├── StoryDisplay.tsx # Story and chapter display
│   │   └── ChapterCard.tsx # Individual chapter component
│   └── README.md          # Frontend documentation
├── shared/
│   ├── types.ts           # Shared TypeScript types
│   └── README.md          # Shared utilities documentation
└── README.md              # This file

Technology Stack

  • Backend: Hono (TypeScript API framework)
  • Frontend: React with TypeScript
  • Styling: TailwindCSS
  • AI Services: OpenAI for story generation, AI image generation
  • Text-to-Speech: Web Speech API with male voice preference
  • Storage: Val Town Blob storage for caching

Getting Started

  1. The app runs as an HTTP val
  2. Visit the main URL to access the story generator
  3. Enter a subject and click "Generate Story"
  4. Navigate through chapters and use the listen feature
  5. Click "Create New Story" to start over