111 }
112
113 // Generate main story image
114 const mainImageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(`A beautiful illustration representing the story about ${subject}, artistic and engaging`)}`;
115
116 // Create story object
120 title: chapter.title,
121 content: chapter.content,
122 imageUrl: `https://maxm-imggenurl.web.val.run/${encodeURIComponent(`Illustration for chapter ${index + 1}: ${chapter.title}, related to ${subject}`)}`
123 }));
124
127 subject: subject.trim(),
128 title: parsedStory.title,
129 mainImageUrl,
130 chapters,
131 createdAt: new Date().toISOString()
129 </div>
130
131 {/* Chapter Image */}
132 <div className="text-center mb-8">
133 <img
134 src={chapter.imageUrl}
135 alt={chapter.title}
136 className="chapter-image mx-auto max-w-full h-80 object-cover"
137 />
138 </div>
43 </div>
44
45 {/* Main Story Image */}
46 <div className="p-8 text-center">
47 <img
48 src={story.mainImageUrl}
49 alt={story.title}
50 className="chapter-image mx-auto mb-6 max-w-full h-64 object-cover"
51 />
52
73
74 <div className="mt-6 text-center text-sm text-gray-500">
75 <p>✨ Your story will include 4 chapters with AI-generated images</p>
76 <p>🎧 Each chapter can be read aloud with text-to-speech</p>
77 </div>
50 </h1>
51 <p className="text-xl text-gray-600 max-w-2xl mx-auto">
52 Enter a subject and watch as AI creates a magical 4-chapter story with beautiful images and narration
53 </p>
54 </header>
15 margin: 0 auto;
16 }
17 .chapter-image {
18 border-radius: 12px;
19 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
16- Chapter navigation
17- Loading states and error handling
18- Image display for story and chapters
19
20## Text-to-Speech
6
7- `GET /` - Serves the main application HTML
8- `POST /api/generate-story` - Generates a new story with chapters and images
9- `GET /frontend/*` - Serves frontend static files
10- `GET /shared/*` - Serves shared utility files
13
14- OpenAI integration for story generation
15- AI image generation for story and chapter visuals
16- Blob storage for caching generated content
17- Error handling and validation
5 title: string;
6 content: string;
7 imageUrl: string;
8}
9
12 subject: string;
13 title: string;
14 mainImageUrl: string;
15 chapters: Chapter[];
16 createdAt: string;
1# AI Story Generator
2
3A web application that generates engaging stories with AI-created images and text-to-speech narration.
4
5## Features
6
7- **Story Generation**: Enter a subject and get a complete 4-chapter story with a happy ending
8- **AI Images**: Each story and chapter gets a unique AI-generated image
9- **Text-to-Speech**: Listen to stories with male voice narration
10- **Interactive Interface**: Clean, user-friendly design with chapter navigation
37- **Frontend**: React with TypeScript
38- **Styling**: TailwindCSS
39- **AI Services**: OpenAI for story generation, AI image generation
40- **Text-to-Speech**: Web Speech API with male voice preference
41- **Storage**: Val Town Blob storage for caching