Children's Book Creator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_194":195,"_196":197},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_63":58,"_16":-7,"_155":-5,"_17":156,"_157":158,"_28":159,"_21":160,"_23":161,"_162":-5,"_163":-5,"_164":-5,"_165":36,"_166":167,"_168":34,"_169":-5,"_170":-5,"_171":172},"routes/_app.x.$handle.$name._index",{"_11":12,"_13":14,"_15":-7,"_16":-7,"_17":18,"_19":20,"_21":22,"_23":24,"_25":-7,"_26":-5,"_27":-5,"_28":29,"_30":-5,"_31":-5,"_32":-5,"_33":34,"_35":36,"_37":34},"handle","c15r","name","untitled-5504","branchName","version","project",{"_41":101,"_13":14,"_52":102,"_103":-5,"_104":36,"_105":106,"_107":106,"_108":-5,"_109":-5,"_110":111,"_112":-5,"_113":36,"_114":-5,"_115":-5,"_116":54,"_117":118,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_132":133,"_134":135,"_136":137,"_138":36},"tags",[],"counts",{"_90":54,"_91":77,"_92":54,"_93":94,"_95":96},"contents",[81,82,83],"readme","upstream","pull","files",[38,39,40],"preview","ahead","behind","showHomeCustomizationHint",true,"showHTTPPreviewSettingsHint",false,"hasHTTPFiles",{"_41":74,"_13":75,"_44":76,"_46":-5,"_47":48,"_49":77,"_51":34,"_52":78,"_16":54,"_55":56,"_57":58,"_59":36,"_60":-5,"_61":79,"_63":80},{"_41":65,"_13":66,"_44":67,"_46":-5,"_47":48,"_49":68,"_51":34,"_52":69,"_16":50,"_55":70,"_57":71,"_59":36,"_60":-5,"_61":72,"_63":73},{"_41":42,"_13":43,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":34,"_52":53,"_16":54,"_55":56,"_57":58,"_59":36,"_60":-5,"_61":62,"_63":64},"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","createdAt",["D",1769126803783],0,"fileType","script","content","","deleted","label","children",[],"path",[43],"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}",[],[66],"44cf202c-f7ec-11f0-af26-42dde27851f2","main.ts","44cf20e0-f7ec-11f0-af26-42dde27851f2",1,["D",1769125458714],[],[75],{"_41":74,"_13":75,"_44":76,"_46":-5,"_47":48,"_49":77,"_51":34,"_52":88,"_16":54,"_55":56,"_57":58,"_59":36,"_60":-5,"_63":89},{"_41":65,"_13":66,"_44":67,"_46":-5,"_47":48,"_49":68,"_51":34,"_52":86,"_16":50,"_55":70,"_57":71,"_59":36,"_60":-5,"_63":87},{"_41":42,"_13":43,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":34,"_52":84,"_16":54,"_55":56,"_57":58,"_59":36,"_60":-5,"_63":85},["D",1769126803783],[43],["D",1769128302682],[66],["D",1769125458714],[75],"pulls","branches","forks","envVars",{"_97":99,"_100":54},"connections",{"_97":54,"_98":54},"count","unfilledCount",2,"emptyCount","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,"_154":150},"org",{"_11":12,"_148":-5,"_149":150,"_110":111,"_151":152,"_153":36},"branch",{"_16":68,"_13":139,"_41":48,"_140":101,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":14,"_147":12},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb2RJNlc1czZ1NlpZRmoxdGJ2eFVNNVhmeTYifQ","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_41":101,"_13":14,"_52":190,"_103":-5,"_104":36,"_105":106,"_107":106,"_108":-5,"_109":-5,"_110":111,"_112":-5,"_113":36,"_114":-5,"_115":-5,"_116":54,"_117":118,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_132":191,"_134":192,"_136":193,"_138":36},"tree",[181,182,183],[181,182,183],{"_90":54,"_91":77,"_92":54,"_93":179,"_95":180},[173,174,175],"file","upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":74,"_13":75,"_44":76,"_46":-5,"_47":48,"_49":77,"_51":34,"_52":88,"_16":54,"_55":56,"_57":58,"_59":36,"_60":-5,"_63":178},{"_41":65,"_13":66,"_44":67,"_46":-5,"_47":48,"_49":68,"_51":34,"_52":86,"_16":50,"_55":70,"_57":71,"_59":36,"_60":-5,"_63":177},{"_41":42,"_13":43,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":34,"_52":84,"_16":54,"_55":56,"_57":58,"_59":36,"_60":-5,"_63":176},[43],[66],[75],{"_97":99,"_100":54},{"_97":54,"_98":54},{"_41":74,"_13":75,"_44":76,"_46":-5,"_47":48,"_49":77,"_51":34,"_52":78,"_16":54,"_55":56,"_57":58,"_59":36,"_60":-5,"_61":188,"_63":189},{"_41":65,"_13":66,"_44":67,"_46":-5,"_47":48,"_49":68,"_51":34,"_52":69,"_16":50,"_55":70,"_57":71,"_59":36,"_60":-5,"_61":186,"_63":187},{"_41":42,"_13":43,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":34,"_52":53,"_16":54,"_55":56,"_57":58,"_59":36,"_60":-5,"_61":184,"_63":185},[],[43],[],[66],[],[75],["D",1769125458696],{"_11":12,"_154":150},{"_11":12,"_148":-5,"_149":150,"_110":111,"_151":152,"_153":36},{"_16":68,"_13":139,"_41":48,"_140":101,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":14,"_147":12},"ctx",{"_132":-5,"_170":227,"_228":229,"_230":231,"_232":36,"_233":36,"_234":36,"_235":34,"_236":-5,"_237":-7,"_238":-7,"_239":54,"_240":36,"_241":36,"_242":-5,"_243":36,"_244":36,"_245":36,"_246":-5},"ENV",{"_198":199,"_200":201,"_202":139,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226},"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"]