\n ✨ AI Story Generator ✨\n

\n Enter a subject and watch as AI creates a magical 4-chapter story with beautiful images and narration\n

\n\n {!story ? (\n \n ) : (\n \n )}\n

\n );\n}",[],[190,197,204],{"_103":212,"_95":213,"_152":214,"_154":198,"_155":137,"_156":215,"_158":159,"_105":216,"_100":32,"_161":207,"_163":217,"_164":22,"_165":-5,"_166":218,"_98":219},"b2fea54a-602a-11f0-a150-0224a6c84d84","ChapterCard.tsx","b2fea5d6-602a-11f0-a150-0224a6c84d84",12,["D",1752439695635],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Chapter } from \"/shared/types.ts\";\n\ninterface ChapterCardProps {\n chapter: Chapter;\n}\n\nexport default function ChapterCard({ chapter }: ChapterCardProps) {\n const [isPlaying, setIsPlaying] = useState(false);\n const [speechSupported, setSpeechSupported] = useState(false);\n const [currentUtterance, setCurrentUtterance] = useState(null);\n\n useEffect(() => {\n // Check if speech synthesis is supported\n setSpeechSupported('speechSynthesis' in window);\n \n // Cleanup on unmount\n return () => {\n if (currentUtterance) {\n window.speechSynthesis.cancel();\n }\n };\n }, []);\n\n const getMaleVoice = () => {\n const voices = window.speechSynthesis.getVoices();\n \n // Try to find a male voice (common male voice names/patterns)\n const maleVoicePatterns = [\n /male/i,\n /man/i,\n /david/i,\n /alex/i,\n /daniel/i,\n /fred/i,\n /jorge/i,\n /juan/i,\n /diego/i,\n /carlos/i\n ];\n \n for (const pattern of maleVoicePatterns) {\n const voice = voices.find(v => pattern.test(v.name));\n if (voice) return voice;\n }\n \n // Fallback: try to find voices that are likely male based on language and name\n const likelyMaleVoice = voices.find(v => \n v.lang.startsWith('en') && \n !/(female|woman|girl|zira|hazel|susan|karen|moira|tessa|samantha|victoria|allison|ava|nicky|fiona|kate)/i.test(v.name)\n );\n \n return likelyMaleVoice || voices[0]; // Fallback to first available voice\n };\n\n const handleListen = () => {\n if (!speechSupported) {\n alert('Text-to-speech is not supported in your browser');\n return;\n }\n\n if (isPlaying) {\n // Stop current speech\n window.speechSynthesis.cancel();\n setIsPlaying(false);\n setCurrentUtterance(null);\n return;\n }\n\n // Create new utterance\n const text = `${chapter.title}. ${chapter.content}`;\n const utterance = new SpeechSynthesisUtterance(text);\n \n // Configure voice settings\n const voice = getMaleVoice();\n if (voice) {\n utterance.voice = voice;\n }\n \n utterance.rate = 0.9; // Slightly slower for better comprehension\n utterance.pitch = 0.8; // Lower pitch for more masculine sound\n utterance.volume = 1;\n\n // Event handlers\n utterance.onstart = () => {\n setIsPlaying(true);\n };\n\n utterance.onend = () => {\n setIsPlaying(false);\n setCurrentUtterance(null);\n };\n\n utterance.onerror = () => {\n setIsPlaying(false);\n setCurrentUtterance(null);\n alert('Error occurred during speech synthesis');\n };\n\n // Start speaking\n setCurrentUtterance(utterance);\n window.speechSynthesis.speak(utterance);\n };\n\n return (\n

\n {/* Chapter Header */}\n

{chapter.title}

\n Chapter {chapter.id}\n {speechSupported && (\n \n \n {isPlaying ? '⏹️' : '🎧'}\n \n {isPlaying ? 'Stop Listening' : 'Listen'}\n \n )}\n

\n\n {/* Chapter Image */}\n

\n ${chapter.title}\n$ \n

\n\n {/* Chapter Content */}\n

\n {chapter.content.split('\\n\\n').map((paragraph, index) => (\n

\n {paragraph}\n

\n ))}\n

\n\n {/* Audio Status */}\n {isPlaying && (\n

🎵

\n Currently reading chapter aloud...\n

\n )}\n\n {!speechSupported && (\n

\n ⚠️\n Text-to-speech is not supported in your browser\n

\n )}\n

\n );\n}",[],[190,197,213],{"_103":221,"_95":222,"_152":223,"_154":198,"_155":137,"_156":224,"_158":159,"_105":225,"_100":32,"_161":207,"_163":226,"_164":22,"_165":-5,"_166":227,"_98":228},"a2f41874-602a-11f0-bc17-0224a6c84d84","StoryDisplay.tsx","a2f41946-602a-11f0-bc17-0224a6c84d84",11,["D",1752439668723],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Story } from \"/shared/types.ts\";\nimport ChapterCard from \"/frontend/components/ChapterCard.tsx\";\n\ninterface StoryDisplayProps {\n story: Story;\n onStartOver: () => void;\n}\n\nexport default function StoryDisplay({ story, onStartOver }: StoryDisplayProps) {\n const [currentChapter, setCurrentChapter] = useState(0);\n const [showOverview, setShowOverview] = useState(true);\n\n const handleNextChapter = () => {\n if (currentChapter < story.chapters.length - 1) {\n setCurrentChapter(currentChapter + 1);\n setShowOverview(false);\n }\n };\n\n const handlePrevChapter = () => {\n if (currentChapter > 0) {\n setCurrentChapter(currentChapter - 1);\n } else {\n setShowOverview(true);\n }\n };\n\n const handleChapterSelect = (index: number) => {\n setCurrentChapter(index);\n setShowOverview(false);\n };\n\n if (showOverview) {\n return (\n

\n {/* Story Header */}\n

{story.title}

A story about: {story.subject}

\n\n {/* Main Story Image */}\n

\n ${story.title}\n$ \n \n

📖 Story Chapters

\n {story.chapters.map((chapter, index) => (\n handleChapterSelect(index)}\n className=\"bg-gray-50 hover:bg-gray-100 p-4 rounded-lg text-left transition-colors border border-gray-200 hover:border-purple-300\"\n >\n

\n Chapter {chapter.id}\n

{chapter.title}

\n \n ))}\n

\n\n

\n handleChapterSelect(0)}\n className=\"btn-primary text-white font-semibold py-3 px-6 rounded-lg flex items-center\"\n >\n 📖\n Start Reading\n \n \n \n ✨\n Create New Story\n \n

\n );\n }\n\n const chapter = story.chapters[currentChapter];\n const isLastChapter = currentChapter === story.chapters.length - 1;\n\n return (\n

\n {/* Navigation Header */}\n

\n setShowOverview(true)}\n className=\"flex items-center text-purple-100 hover:text-white transition-colors\"\n >\n ←\n Back to Overview\n \n \n

Chapter {currentChapter + 1} of {story.chapters.length}

{story.title}

\n \n

\n {Math.round(((currentChapter + 1) / story.chapters.length) * 100)}% Complete\n

\n\n {/* Chapter Content */}\n \n\n {/* Navigation Footer */}\n

\n \n ←\n Previous\n \n\n

\n {story.chapters.map((_, index) => (\n handleChapterSelect(index)}\n className={`w-3 h-3 rounded-full transition-colors ${\n index === currentChapter \n ? 'bg-purple-600' \n : index < currentChapter \n ? 'bg-purple-300' \n : 'bg-gray-300'\n }`}\n />\n ))}\n

\n\n {isLastChapter ? (\n \n ✨\n Create New Story\n \n ) : (\n \n Next\n →\n \n )}\n

\n );\n}",[],[190,197,222],{"_103":230,"_95":231,"_152":232,"_154":198,"_155":137,"_156":233,"_158":159,"_105":234,"_100":32,"_161":207,"_163":235,"_164":22,"_165":-5,"_166":236,"_98":237},"9321f484-602a-11f0-a544-0224a6c84d84","StoryForm.tsx","9321f592-602a-11f0-a544-0224a6c84d84",10,["D",1752439642182],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface StoryFormProps {\n onSubmit: (subject: string) => void;\n loading: boolean;\n error: string | null;\n}\n\nexport default function StoryForm({ onSubmit, loading, error }: StoryFormProps) {\n const [subject, setSubject] = useState('');\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (subject.trim()) {\n onSubmit(subject.trim());\n }\n };\n\n return (\n

📚

Create Your Story

What would you like your story to be about?

\n\n

\n \n Story Subject\n \n setSubject(e.target.value)}\n placeholder=\"e.g., A brave dragon, Space adventure, Magic forest...\"\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none transition-all\"\n disabled={loading}\n required\n />\n

\n\n {error && (\n

\n ⚠️\n {error}\n

\n )}\n\n \n {loading ? (\n <>\n

\n Creating Your Story...\n \n ) : (\n <>\n 🎭\n Generate Story\n \n )}\n \n \n\n

✨ Your story will include 4 chapters with AI-generated images

🎧 Each chapter can be read aloud with text-to-speech

\n );\n}",[],[190,197,231],[190,197],{"_103":240,"_95":170,"_152":241,"_154":191,"_155":137,"_156":192,"_158":159,"_105":242,"_100":32,"_161":173,"_163":243,"_164":22,"_165":-5,"_166":244,"_98":245},"7a69aed2-602a-11f0-b2d0-0224a6c84d84","7a69afae-602a-11f0-b2d0-0224a6c84d84",["D",1752439600704],"# Frontend Application\n\nReact-based frontend for the AI Story Generator.\n\n## Components\n\n- `App.tsx` - Main application component with state management\n- `StoryForm.tsx` - Input form for story subject\n- `StoryDisplay.tsx` - Main story display with navigation\n- `ChapterCard.tsx` - Individual chapter component with text-to-speech\n\n## Features\n\n- Responsive design with TailwindCSS\n- Text-to-speech with male voice preference\n- Chapter navigation\n- Loading states and error handling\n- Image display for story and chapters\n\n## Text-to-Speech\n\nUses the Web Speech API with configuration for male voice preference:\n- Tries to find male voices in the system\n- Falls back to default voice if no male voice available\n- Configurable speech rate and pitch",[],[190,170],{"_103":247,"_95":248,"_152":249,"_154":191,"_155":137,"_156":250,"_158":159,"_105":251,"_100":32,"_161":173,"_163":252,"_164":22,"_165":-5,"_166":253,"_98":254},"80de4f8e-602a-11f0-8b98-0224a6c84d84","index.html","80de502e-602a-11f0-8b98-0224a6c84d84",7,["D",1752439611537],"\n\n\n \n \n AI Story Generator\n \n \n \n\n\n

\n \n\n",[],[190,248],{"_103":256,"_95":257,"_152":258,"_154":191,"_155":137,"_156":259,"_158":159,"_105":260,"_100":32,"_161":207,"_163":261,"_164":22,"_165":-5,"_166":262,"_98":263},"83ac51de-602a-11f0-b318-0224a6c84d84","index.tsx","83ac529c-602a-11f0-b318-0224a6c84d84",8,["D",1752439616242],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"/frontend/components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[190,257],[190],{"_103":266,"_95":267,"_152":268,"_154":-5,"_155":137,"_156":182,"_158":159,"_105":269,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":270,"_98":287},"5fafd080-602a-11f0-ae25-0224a6c84d84","shared","04e7c9cb-7cef-4b70-a5a1-8b20e5b3d4d1",["D",1752439555867],[271,279],{"_103":272,"_95":170,"_152":273,"_154":268,"_155":137,"_156":274,"_158":159,"_105":275,"_100":32,"_161":173,"_163":276,"_164":22,"_165":-5,"_166":277,"_98":278},"63991a30-602a-11f0-94ad-0224a6c84d84","63991ada-602a-11f0-94ad-0224a6c84d84",3,["D",1752439562429],"# Shared Types and Utilities\n\nThis directory contains TypeScript types and utilities shared between the frontend and backend.\n\n## Files\n\n- `types.ts` - TypeScript interfaces for Story, Chapter, and API request/response types\n\n## Usage\n\nImport types in both frontend and backend:\n\n```ts\nimport { Story, Chapter, StoryRequest, StoryResponse } from \"/shared/types.ts\";\n```",[],[267,170],{"_103":280,"_95":281,"_152":282,"_154":268,"_155":137,"_156":182,"_158":159,"_105":283,"_100":32,"_161":207,"_163":284,"_164":22,"_165":-5,"_166":285,"_98":286},"5fafc5d6-602a-11f0-ae25-0224a6c84d84","types.ts","5fafc694-602a-11f0-ae25-0224a6c84d84",["D",1752439555867],"// Shared types for the story generator app\n\nexport interface Chapter {\n id: number;\n title: string;\n content: string;\n imageUrl: string;\n}\n\nexport interface Story {\n id: string;\n subject: string;\n title: string;\n mainImageUrl: string;\n chapters: Chapter[];\n createdAt: string;\n}\n\nexport interface StoryRequest {\n subject: string;\n}\n\nexport interface StoryResponse {\n success: boolean;\n story?: Story;\n error?: string;\n}",[],[267,281],[267],{"_103":289,"_95":170,"_152":290,"_154":-5,"_155":137,"_156":291,"_158":159,"_105":292,"_100":32,"_161":173,"_163":293,"_164":22,"_165":-5,"_166":294,"_98":295},"5d00053a-602a-11f0-af5f-0224a6c84d84","5d000602-602a-11f0-af5f-0224a6c84d84",1,["D",1752439551354],"# AI Story Generator\n\nA web application that generates engaging stories with AI-created images and text-to-speech narration.\n\n## Features\n\n- **Story Generation**: Enter a subject and get a complete 4-chapter story with a happy ending\n- **AI Images**: Each story and chapter gets a unique AI-generated image\n- **Text-to-Speech**: Listen to stories with male voice narration\n- **Interactive Interface**: Clean, user-friendly design with chapter navigation\n- **Start Over**: Easy reset to create new stories\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono server with API routes\n│ └── README.md # Backend documentation\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React frontend application\n│ ├── components/ # React components\n│ │ ├── App.tsx # Main app component\n│ │ ├── StoryForm.tsx # Subject input form\n│ │ ├── StoryDisplay.tsx # Story and chapter display\n│ │ └── ChapterCard.tsx # Individual chapter component\n│ └── README.md # Frontend documentation\n├── shared/\n│ ├── types.ts # Shared TypeScript types\n│ └── README.md # Shared utilities documentation\n└── README.md # This file\n```\n\n## Technology Stack\n\n- **Backend**: Hono (TypeScript API framework)\n- **Frontend**: React with TypeScript\n- **Styling**: TailwindCSS\n- **AI Services**: OpenAI for story generation, AI image generation\n- **Text-to-Speech**: Web Speech API with male voice preference\n- **Storage**: Val Town Blob storage for caching\n\n## Getting Started\n\n1. The app runs as an HTTP val\n2. Visit the main URL to access the story generator\n3. Enter a subject and click \"Generate Story\"\n4. Navigate through chapters and use the listen feature\n5. Click \"Create New Story\" to start over",[],[170],"files",[149,168,177,188,195,202,211,220,229,239,246,255,265,271,279,288],"counts",{"_300":32,"_301":291,"_302":32,"_303":32},"pulls","branches","forks","envVars","contents",[],{"_103":178,"_95":179,"_152":180,"_154":153,"_155":137,"_156":136,"_158":159,"_105":307,"_100":182,"_161":183,"_163":184,"_164":22,"_165":-5,"_98":308},["D",1752439820541],[151,179],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":315,"_147":320,"_296":369,"_173":370,"_304":372,"_373":-5,"_374":22,"_375":-5,"_376":-5,"_377":-5,"_378":379},{"_103":104,"_95":96,"_105":316,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":317,"_131":318,"_134":319,"_146":22},["D",1752439280770],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},[321,330,357,366],{"_103":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_105":160,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":322,"_98":329},[323,326],{"_103":169,"_95":170,"_152":171,"_154":153,"_155":137,"_156":157,"_158":159,"_105":172,"_100":32,"_161":173,"_163":174,"_164":22,"_165":-5,"_166":324,"_98":325},[],[151,170],{"_103":178,"_95":179,"_152":180,"_154":153,"_155":137,"_156":136,"_158":159,"_105":181,"_100":182,"_161":183,"_163":184,"_164":22,"_165":-5,"_166":327,"_98":328},[],[151,179],[151],{"_103":189,"_95":190,"_152":191,"_154":-5,"_155":137,"_156":192,"_158":159,"_105":193,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":331,"_98":356},[332,347,350,353],{"_103":196,"_95":197,"_152":198,"_154":191,"_155":137,"_156":199,"_158":159,"_105":200,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":333,"_98":346},[334,337,340,343],{"_103":203,"_95":204,"_152":205,"_154":198,"_155":137,"_156":199,"_158":159,"_105":206,"_100":32,"_161":207,"_163":208,"_164":22,"_165":-5,"_166":335,"_98":336},[],[190,197,204],{"_103":212,"_95":213,"_152":214,"_154":198,"_155":137,"_156":215,"_158":159,"_105":216,"_100":32,"_161":207,"_163":217,"_164":22,"_165":-5,"_166":338,"_98":339},[],[190,197,213],{"_103":221,"_95":222,"_152":223,"_154":198,"_155":137,"_156":224,"_158":159,"_105":225,"_100":32,"_161":207,"_163":226,"_164":22,"_165":-5,"_166":341,"_98":342},[],[190,197,222],{"_103":230,"_95":231,"_152":232,"_154":198,"_155":137,"_156":233,"_158":159,"_105":234,"_100":32,"_161":207,"_163":235,"_164":22,"_165":-5,"_166":344,"_98":345},[],[190,197,231],[190,197],{"_103":240,"_95":170,"_152":241,"_154":191,"_155":137,"_156":192,"_158":159,"_105":242,"_100":32,"_161":173,"_163":243,"_164":22,"_165":-5,"_166":348,"_98":349},[],[190,170],{"_103":247,"_95":248,"_152":249,"_154":191,"_155":137,"_156":250,"_158":159,"_105":251,"_100":32,"_161":173,"_163":252,"_164":22,"_165":-5,"_166":351,"_98":352},[],[190,248],{"_103":256,"_95":257,"_152":258,"_154":191,"_155":137,"_156":259,"_158":159,"_105":260,"_100":32,"_161":207,"_163":261,"_164":22,"_165":-5,"_166":354,"_98":355},[],[190,257],[190],{"_103":266,"_95":267,"_152":268,"_154":-5,"_155":137,"_156":182,"_158":159,"_105":269,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":358,"_98":365},[359,362],{"_103":272,"_95":170,"_152":273,"_154":268,"_155":137,"_156":274,"_158":159,"_105":275,"_100":32,"_161":173,"_163":276,"_164":22,"_165":-5,"_166":360,"_98":361},[],[267,170],{"_103":280,"_95":281,"_152":282,"_154":268,"_155":137,"_156":182,"_158":159,"_105":283,"_100":32,"_161":207,"_163":284,"_164":22,"_165":-5,"_166":363,"_98":364},[],[267,281],[267],{"_103":289,"_95":170,"_152":290,"_154":-5,"_155":137,"_156":291,"_158":159,"_105":292,"_100":32,"_161":173,"_163":293,"_164":22,"_165":-5,"_166":367,"_98":368},[],[170],[321,323,326,330,332,334,337,340,343,347,350,353,357,359,362,366],{"_103":178,"_95":179,"_152":180,"_154":153,"_155":137,"_156":136,"_158":159,"_105":307,"_100":182,"_161":183,"_163":184,"_164":22,"_165":-5,"_98":371},[151,179],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]