Children's Book Creator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_184":185,"_186":187},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_137":-5,"_20":138,"_22":139,"_140":141,"_142":143,"_25":144,"_24":-5,"_145":-5,"_146":-5,"_147":54,"_148":149,"_150":46,"_151":-5,"_152":-5,"_153":154},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","c15r","name","untitled-5504","branchName","main","version","path","","project",{"_35":84,"_13":14,"_47":85,"_86":-5,"_87":54,"_88":89,"_90":89,"_91":-5,"_92":-5,"_93":94,"_95":-5,"_96":54,"_97":-5,"_98":-5,"_99":49,"_100":101,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":107,"_108":107,"_109":110,"_111":110,"_112":110,"_113":107,"_114":107,"_115":116,"_117":118,"_119":120,"_121":54},"tree",[71,72,73],"file","contents",[32,33,34],"upstream","pull","ahead","behind","envVars",{"_35":65,"_13":66,"_38":67,"_40":-5,"_41":42,"_43":68,"_45":46,"_47":69,"_17":49,"_50":51,"_52":19,"_53":54,"_55":-5,"_18":70},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":61,"_17":44,"_50":62,"_52":63,"_53":54,"_55":-5,"_18":64},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":19,"_53":54,"_55":-5,"_18":56},"id","6688691e-f7ef-11f0-adf1-42dde27851f2","new-file-3576.ts","fileId","668869e6-f7ef-11f0-adf1-42dde27851f2","parentId","branchId","44cbe25e-f7ec-11f0-af26-42dde27851f2","branchVersion",3,"latest",true,"createdAt",["D",1769126803783],0,"fileType","script","content","deleted",false,"label",[37],"e3f43e84-f7f2-11f0-885a-42dde27851f2","main.tsx","3cc10be0-f7ef-11f0-831d-42dde27851f2",6,["D",1769128302682],"http","/** @jsxImportSource https://esm.sh/react@18 */\nimport { renderToString } from \"https://esm.sh/react-dom@18/server\";\nimport React from \"https://esm.sh/react@18\";\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\n\nconst HTML = `\n\n\n \n \n Children's Book Creator\n \n \n \n\n\n

\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}",[58],"44cf202c-f7ec-11f0-af26-42dde27851f2","main.ts","44cf20e0-f7ec-11f0-af26-42dde27851f2",1,["D",1769125458714],[66],{"_35":65,"_13":66,"_38":67,"_40":-5,"_41":42,"_43":68,"_45":46,"_47":81,"_17":49,"_50":51,"_52":19,"_53":54,"_55":-5,"_75":82,"_18":83},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":78,"_17":44,"_50":62,"_52":63,"_53":54,"_55":-5,"_75":79,"_18":80},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":74,"_17":49,"_50":51,"_52":19,"_53":54,"_55":-5,"_75":76,"_18":77},["D",1769126803783],"children",[],[37],["D",1769128302682],[],[58],["D",1769125458714],[],[66],"44cb7742-f7ec-11f0-af26-42dde27851f2",["D",1769125458696],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","21f2e37e-8066-4730-9dc7-d27cf8d3c9f3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","0630d977-f678-453e-926c-52043293f59f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_136":132},"org",{"_11":12,"_130":-5,"_131":132,"_93":94,"_133":134,"_135":54},"branch",{"_17":60,"_13":16,"_35":42,"_122":84,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":-5,"_128":14,"_129":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb2RJNlc1czZ1NlpZRmoxdGJ2eFVNNVhmeTYifQ","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":84,"_13":14,"_47":180,"_86":-5,"_87":54,"_88":89,"_90":89,"_91":-5,"_92":-5,"_93":94,"_95":-5,"_96":54,"_97":-5,"_98":-5,"_99":49,"_100":101,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":107,"_108":107,"_109":110,"_111":110,"_112":110,"_113":107,"_114":107,"_115":181,"_117":182,"_119":183,"_121":54},[171,172,173],"files",[171,172,173],"counts",{"_161":49,"_162":68,"_163":49,"_31":164,"_165":166},[155,156,157],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":65,"_13":66,"_38":67,"_40":-5,"_41":42,"_43":68,"_45":46,"_47":69,"_17":49,"_50":51,"_52":19,"_53":54,"_55":-5,"_18":160},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":61,"_17":44,"_50":62,"_52":63,"_53":54,"_55":-5,"_18":159},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":19,"_53":54,"_55":-5,"_18":158},[37],[58],[66],"pulls","branches","forks",{"_167":169,"_170":49},"connections",{"_167":49,"_168":49},"count","unfilledCount",2,"emptyCount",{"_35":65,"_13":66,"_38":67,"_40":-5,"_41":42,"_43":68,"_45":46,"_47":81,"_17":49,"_50":51,"_52":19,"_53":54,"_55":-5,"_75":178,"_18":179},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":78,"_17":44,"_50":62,"_52":63,"_53":54,"_55":-5,"_75":176,"_18":177},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":74,"_17":49,"_50":51,"_52":19,"_53":54,"_55":-5,"_75":174,"_18":175},[],[37],[],[58],[],[66],["D",1769125458696],{"_11":12,"_136":132},{"_11":12,"_130":-5,"_131":132,"_93":94,"_133":134,"_135":54},{"_17":60,"_13":16,"_35":42,"_122":84,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":-5,"_128":14,"_129":12},"ctx",{"_115":-5,"_152":217,"_218":219,"_220":221,"_222":54,"_223":54,"_224":54,"_225":46,"_226":-5,"_227":-7,"_228":-7,"_229":49,"_230":54,"_231":54,"_232":-5,"_233":54,"_234":54,"_235":54,"_236":-5},"ENV",{"_188":189,"_190":191,"_192":16,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code