Frontend Application

React-based frontend for the AI Story Generator.

Components

  • App.tsx - Main application component with state management
  • StoryForm.tsx - Input form for story subject
  • StoryDisplay.tsx - Main story display with navigation
  • ChapterCard.tsx - Individual chapter component with text-to-speech

Features

  • Responsive design with TailwindCSS
  • Text-to-speech with male voice preference
  • Chapter navigation
  • Loading states and error handling
  • Image display for story and chapters

Text-to-Speech

Uses the Web Speech API with configuration for male voice preference:

  • Tries to find male voices in the system
  • Falls back to default voice if no male voice available
  • Configurable speech rate and pitch