Children's Book Creator

\n \n\n`;\n\n// Style prompts for different illustration styles\nconst stylePrompts: Record = {\n watercolor: \"soft watercolor illustration style, gentle brushstrokes, dreamy and ethereal, children's book art\",\n cartoon: \"fun cartoon illustration style, bold outlines, expressive characters, vibrant and playful, children's book art\",\n storybook: \"classic storybook illustration style, detailed and warm, reminiscent of golden age children's books\",\n whimsical: \"whimsical fantasy illustration style, magical and enchanting, sparkles and wonder, children's book art\",\n pastel: \"soft pastel illustration style, gentle colors, soothing and calming, children's book art\"\n};\n\n// Generate image using Google Gemini Imagen 3\nasync function generateImageWithGemini(prompt: string, style: string): Promise {\n const apiKey = Deno.env.get(\"GOOGLE_AI_API_KEY\");\n if (!apiKey) {\n throw new Error(\"GOOGLE_AI_API_KEY not configured. Please add it to your environment variables.\");\n }\n\n const styleDescription = stylePrompts[style] || stylePrompts.watercolor;\n const fullPrompt = `${prompt}. Style: ${styleDescription}. Child-friendly, no scary elements, warm and inviting, suitable for a children's book illustration.`;\n\n // Use Imagen 3 for image generation\n const response = await fetch(\n `https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n instances: [\n {\n prompt: fullPrompt\n }\n ],\n parameters: {\n sampleCount: 1,\n aspectRatio: \"1:1\",\n safetyFilterLevel: \"block_low_and_above\",\n personGeneration: \"allow_adult\"\n }\n })\n }\n );\n\n if (!response.ok) {\n const errorText = await response.text();\n console.error(\"Imagen API error:\", errorText);\n \n // Try fallback to Gemini 2.0 Flash with image generation\n return await generateImageWithGeminiFlash(fullPrompt, apiKey);\n }\n\n const data = await response.json();\n \n // Extract the image from Imagen response\n if (data.predictions && data.predictions.length > 0) {\n const prediction = data.predictions[0];\n if (prediction.bytesBase64Encoded) {\n return prediction.bytesBase64Encoded;\n }\n }\n\n throw new Error(\"No image generated from Imagen API\");\n}\n\n// Fallback: Generate image using Gemini 2.0 Flash experimental\nasync function generateImageWithGeminiFlash(prompt: string, apiKey: string): Promise {\n console.log(\"Using Gemini Flash fallback for image generation\");\n \n const response = await fetch(\n `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-exp-image-generation:generateContent?key=${apiKey}`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n contents: [{\n parts: [{\n text: `Generate an illustration: ${prompt}`\n }]\n }],\n generationConfig: {\n responseModalities: [\"TEXT\", \"IMAGE\"]\n }\n })\n }\n );\n\n if (!response.ok) {\n const errorText = await response.text();\n console.error(\"Gemini Flash API error:\", errorText);\n throw new Error(`Gemini Flash API error: ${response.status}`);\n }\n\n const data = await response.json();\n \n // Extract image from Gemini Flash response\n const candidates = data.candidates;\n if (!candidates || candidates.length === 0) {\n throw new Error(\"No image generated from Gemini Flash\");\n }\n\n const parts = candidates[0].content?.parts;\n if (!parts) {\n throw new Error(\"No content in Gemini Flash response\");\n }\n\n // Find the image part\n for (const part of parts) {\n if (part.inlineData && part.inlineData.mimeType?.startsWith(\"image/\")) {\n return part.inlineData.data; // base64 encoded image\n }\n }\n\n throw new Error(\"No image found in Gemini Flash response\");\n}\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n\n // CORS headers for all responses\n const corsHeaders = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type\"\n };\n\n // Handle CORS preflight\n if (req.method === \"OPTIONS\") {\n return new Response(null, { headers: corsHeaders });\n }\n\n // API endpoint for generating images (server-side proxy to secure API key)\n if (url.pathname === '/api/generate-image' && req.method === 'POST') {\n try {\n const body = await req.json();\n const { prompt, type, style } = body;\n\n if (!prompt) {\n return Response.json({ error: 'Prompt is required' }, { \n status: 400,\n headers: corsHeaders \n });\n }\n\n console.log(`Generating ${type} image with style: ${style}`);\n console.log(`Prompt: ${prompt.substring(0, 100)}...`);\n\n const imageBase64 = await generateImageWithGemini(prompt, style || 'watercolor');\n \n return Response.json({ imageBase64 }, { headers: corsHeaders });\n } catch (error) {\n console.error('Error generating image:', error);\n return Response.json({ \n error: error.message || 'An error occurred while generating the image' \n }, { \n status: 500,\n headers: corsHeaders \n });\n }\n }\n\n // API endpoint for generating chapters\n if (url.pathname === '/api/generate-chapter' && req.method === 'POST') {\n try {\n const body = await req.json();\n const { bookTitle, bookDescription, targetAge, chapterNumber, totalChapters, previousChapters } = body;\n\n // Build context from previous chapters\n const previousContext = previousChapters.length > 0\n ? `\\n\\nPrevious chapters summary:\\n${previousChapters.map((ch: any, i: number) => \n `Chapter ${i + 1} - \"${ch.title}\": ${ch.content.substring(0, 200)}...`\n ).join('\\n')}`\n : '';\n\n const ageGuidelines = {\n '3-5': 'Use very simple words (1-2 syllables mostly), short sentences (5-8 words), lots of repetition, and focus on basic emotions and concepts. Include sound words (onomatopoeia) and rhythmic language.',\n '5-8': 'Use simple but varied vocabulary, sentences of 8-12 words, introduce some new words in context. Include dialogue and simple plot developments. Keep paragraphs short.',\n '8-12': 'Use rich vocabulary appropriate for early readers, longer sentences with some complexity. Include character development, subplots, and more sophisticated themes while remaining age-appropriate.'\n };\n\n const chapterPosition = chapterNumber === 1 ? 'opening' : \n chapterNumber === totalChapters ? 'final' : 'middle';\n \n const positionGuidance = {\n opening: 'This is the first chapter - introduce the main character(s), setting, and hint at the adventure/problem to come. Hook the reader with something interesting.',\n middle: 'This is a middle chapter - continue developing the story, add new challenges or discoveries, build tension or relationships. Keep the story moving forward.',\n final: 'This is the final chapter - resolve the main conflict, provide a satisfying ending, and include a gentle lesson or moral that feels natural to the story.'\n };\n\n const systemPrompt = `You are a talented children's book author. You write engaging, age-appropriate stories that capture children's imagination while being educational and heartwarming.\n\nGuidelines for this book:\n- Target age: ${targetAge} years old\n- ${ageGuidelines[targetAge as keyof typeof ageGuidelines]}\n- Create vivid but simple descriptions\n- Include moments of wonder, humor, or gentle excitement\n- Ensure content is appropriate and positive\n- Each chapter should be 300-500 words depending on age group\n\n${positionGuidance[chapterPosition]}`;\n\n const userPrompt = `Write Chapter ${chapterNumber} of ${totalChapters} for a children's book.\n\nBook Title: \"${bookTitle}\"\nStory Description: ${bookDescription}\n${previousContext}\n\nPlease write this chapter with:\n1. A creative chapter title\n2. Engaging content appropriate for ${targetAge} year olds\n3. Natural story progression that connects to previous chapters (if any)\n\nRespond in this exact JSON format:\n{\n \"title\": \"Chapter Title Here\",\n \"content\": \"The chapter content here with proper paragraphs separated by double newlines.\"\n}`;\n\n // Use Val Town's OpenAI integration\n const openai = new OpenAI();\n \n const response = await openai.chat.completions.create({\n model: 'gpt-4o-mini',\n messages: [\n { role: 'system', content: systemPrompt },\n { role: 'user', content: userPrompt }\n ],\n temperature: 0.8,\n max_tokens: 1500\n });\n\n const content = response.choices[0].message.content;\n\n // Parse the JSON response\n let chapter;\n try {\n // Try to extract JSON from the response (handles markdown code blocks)\n const jsonMatch = content.match(/\\{[\\s\\S]*\\}/);\n if (jsonMatch) {\n chapter = JSON.parse(jsonMatch[0]);\n } else {\n throw new Error('No JSON found in response');\n }\n } catch (parseError) {\n console.error('Failed to parse chapter JSON:', content);\n // Fallback: create chapter from raw content\n chapter = {\n title: `Chapter ${chapterNumber}`,\n content: content\n };\n }\n\n return Response.json(chapter, { headers: corsHeaders });\n } catch (error) {\n console.error('Error generating chapter:', error);\n return Response.json({ \n error: error.message || 'An error occurred while generating the chapter' \n }, { \n status: 500,\n headers: corsHeaders \n });\n }\n }\n\n // Serve main HTML\n return new Response(HTML, {\n headers: { \n 'Content-Type': 'text/html',\n ...corsHeaders\n }\n });\n}","deleted","label",[100],"permalink","https://www.val.town/x/c15r/untitled-5504/code/main.tsx","extension","actionData","errors"]