{
setIsStorybookPage(false);
startTransition(() => setCurrentPage('landing'));
}}
onLibraryClick={handleLibraryClick}
onLogoutClick={handleLogout}
/>
{
setIsStorybookPage(false);
startTransition(() => setCurrentPage('drawing'));
}}
onStoryGenerated={() => {
setIsStorybookPage(true);
startTransition(() => setCurrentPage('storybook'));
}}
/>
);
}
if (currentPage === 'storybook') {
return (
<>
{
setIsStorybookPage(false);
startTransition(() => setCurrentPage('landing'));
}}
onLibraryClick={handleLibraryClick}
onLogoutClick={handleLogout}
/>
{
setIsStorybookPage(false);
startTransition(() => setCurrentPage('drawing'));
}} />
);
}
// Fallback
return (
<>
{
setIsStorybookPage(false);
startTransition(() => setCurrentPage('landing'));
}}
onLibraryClick={handleLibraryClick}
onLogoutClick={handleLogout}
/>
{
setIsStorybookPage(false);
startTransition(() => setCurrentPage('drawing'));
}} />
);
}
```
### frontend/src/app/test/page.tsx
```typescript
'use client';
import { useState } from 'react';
// Test image
const TEST_IMAGE = 'data:image/png;base64,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';
interface StorySegment {
type: 'text' | 'image';
content: string;
}
interface Page {
segments: StorySegment[];
}
interface StoryResponse {
success: boolean;
pages: Page[];
char
[truncated — 7932 more characters]
```
### frontend/src/app/api/health/route.ts
```typescript
import { NextResponse } from 'next/server';
export async function GET() {
return NextResponse.json({
status: 'OK',
message: 'Character Story Generator API is running',
timestamp: new Date().toISOString()
});
}
```
### frontend/src/app/api/session/route.ts
```typescript
import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
// Types for the new backend response format
interface StorySegment {
type: 'text' | 'image';
content: string;
}
interface StoryPage {
segments: StorySegment[];
}
interface StoryData {
success: boolean;
pages: StoryPage[];
character: string;
theme: string;
}
// In-memory session store (for demo - use Redis/DB in production)
const sessions = new Map();
// Clean up old sessions (older than 24 hours)
setInterval(() => {
const now = Date.now();
const oneDayMs = 24 * 60 * 60 * 1000;
for (const [sessionId, session] of sessions.entries()) {
if (now - session.updatedAt > oneDayMs) {
sessions.delete(sessionId);
}
}
}, 60 * 60 * 1000); // Run every hour
async function getSessionId(request: NextRequest): Promise {
const cookieStore = await cookies();
let sessionId = cookieStore.get('session_id')?.value;
if (!sessionId) {
sessionId = crypto.randomUUID();
}
return sessionId;
}
// GET - Retrieve session data
export async function GET(request: NextRequest) {
const sessionId = await getSessionId(request);
const sessionData = sessions.get(sessionId) || {
createdAt: Date.now(),
updatedAt: Date.now(),
};
const response = NextResponse.json(sessionData);
response.cookies.set('session_id', sessionId, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'lax',
maxAge: 60 * 60 * 24, // 24 hours
});
return response;
}
// POST - Create/update session data
export async function POST(request: NextRequest) {
const sessionId = await getSessionId(request);
const body = await request.json();
const existingData = sessions.get(sessionId) || {
createdAt: Date.now(),
updatedAt: Date.now(),
};
const updatedData = {
...existingData,
...body,
updatedAt: Date.now(),
};
sessions.set(sessionId, updatedData);
const response = NextResponse.json(updatedData);
response.cookies.set('session_id', sessionId, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'lax',
maxAge: 60 * 60 * 24, // 24 hours
});
return response;
}
// DELETE - Clear session data
export async function DELETE(request: NextRequest) {
const sessionId = await getSessionId(request);
sessions.delete(sessionId);
const response = NextResponse.json({ success: true });
response.cookies.delete('session_id');
return response;
}
```
### frontend/src/app/api/generate-story/route.ts
```typescript
import { NextRequest, NextResponse } from 'next/server';
import axios from 'axios';
export async function POST(request: NextRequest) {
try {
const { imageData, description } = await request.json();
if (!imageData || !description) {
return NextResponse.json(
{ error: 'Image data and description are required' },
{ status: 400 }
);
}
const OPENROUTER_API_KEY = process.env.OPENROUTER_API_KEY;
// Generate story using OpenRouter with Google Gemini
if (OPENROUTER_API_KEY) {
try {
const prompt = `Create a children's storybook with 6-8 pages about a character based on this description: "${description.trim()}".
Structure the story as follows:
- Page 1: Introduction of the character
- Page 2-3: The character's world and daily life
- Page 4-5: An adventure or challenge begins
- Page 6-7: The character faces obstacles and learns something important
- Page 8: A happy ending with a lesson learned
Each page should be 2-3 sentences long, suitable for children ages 4-8. Make it creative, engaging, and include elements of friendship, courage, or discovery.`;
const response = await axios.post(
'https://openrouter.ai/api/v1/chat/completions',
{
model: 'google/gemini-flash-1.5',
messages: [
{
role: 'user',
content: prompt
}
],
max_tokens: 1000,
temperature: 0.7
},
{
headers: {
'Authorization': `Bearer ${OPENROUTER_API_KEY}`,
'Content-Type': 'application/json',
'HTTP-Referer': 'http://localhost:3000',
'X-Title': 'Character Story Generator'
}
}
);
const story = response.data.choices[0]?.message?.content || 'Unable to generate story at this time.';
// Parse the story into pages
const pages = parseStoryIntoPages(story);
return NextResponse.json({
story: story,
pages: pages,
type: 'storybook'
});
} catch (error) {
console.error('Error calling OpenRouter API:', error);
// Fall back to mock story
}
}
// Fallback mock story if API key is not configured
const mockStory = `Page 1: Once upon a time, there was a wonderful character who embodied the spirit of "${description.trim()}". This character lived in a magical world full of possibilities.
Page 2: Every day, our character would explore their colorful world, meeting new friends and discovering amazing places. They loved to help others and always had a smile on their face.
Page 3: One sunny morning, our character noticed something unusual in their favorite garden. A small, lost creature was crying softly under a big tree.
Page 4: The character approached gently and asked, "Why are you so sad, little friend?" The creature explained they were lost and couldn't find their way home.
Page 5: Our brave character decided to help! They searched through forests, crossed streams, and climbed hills to find the creature's family.
Page 6: Along the way, they met many helpful animals who joined their quest. Together, they formed a wonderful team of friends.
Page 7: Finally, after many adventures, they found the creature's home! The family was overjoyed and thanked our character for their kindness.
Page 8: Our character learned that helping others brings the greatest joy. They returned home with new friends and wonderful memories, knowing that kindness makes the world a better place.`;
const pages = parseStoryIntoPages(mockStory);
return NextResponse.json({
story: mockStory,
pages: pages,
type: 'storybook'
});
} catch (error) {
console.error('Error generating story:', error);
return NextResponse.json(
{ error: 'Failed to generate story' },
{ status: 500 }
);
}
}
function parseStoryIntoPages(story: string): string[] {
const pageRegex = /Page \d+:/g;
const pages = story.split(pageRegex).filter(page => page.trim().length > 0);
return pages.map(page => page.trim()).filter(page => page.length > 0);
}
```
### start.sh
```shell
#!/bin/bash
echo "🎨 Character Story Generator"
echo "=========================="
echo ""
# Check if we're in the right directory
if [ ! -f "frontend/package.json" ]; then
echo "❌ Please run this script from the dootle directory"
exit 1
fi
# Kill any existing processes on port 3000 and 3001
echo "🧹 Cleaning up existing processes..."
lsof -ti:3000 | xargs kill -9 2>/dev/null || true
lsof -ti:3001 | xargs kill -9 2>/dev/null || true
sleep 2
# Check if node_modules exists
if [ ! -d "frontend/node_modules" ]; then
echo "📦 Installing dependencies..."
cd frontend
npm install
cd ..
else
echo "📦 Checking for dependency updates..."
cd frontend
npm update
cd ..
fi
# Check if .env.local exists
if [ ! -f "frontend/.env.local" ]; then
echo "⚠️ Environment file not found!"
echo "📝 Copying environment template..."
cp frontend/env.example frontend/.env.local
echo ""
echo "🔑 Please edit frontend/.env.local and add your API keys:"
echo " - OPENROUTER_API_KEY (required for AI story generation)"
echo " - ELEVENLABS_API_KEY (optional for speech-to-text)"
echo ""
echo "Press Enter when ready to continue..."
read
fi
echo "🚀 Starting the application..."
echo "📍 The app will be available at: http://localhost:3001"
echo ""
cd frontend
PORT=3001 npm run dev
```
[18 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]