AI Story Generator

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

• 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

├── 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

• 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

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