Children's Book Creator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_165":166,"_167":168},"routes/_app.x.$handle.$name",{"_16":17,"_20":21,"_81":64,"_82":83,"_62":-7,"_84":-5,"_13":85,"_86":87,"_11":88,"_89":90,"_91":92,"_93":-5,"_94":-5,"_95":-5,"_96":26,"_97":98,"_99":100,"_101":-5,"_102":-5,"_103":104},"routes/_app.x.$handle.$name.search.$(branch)",{"_11":12,"_13":14,"_15":-5,"_16":17},"files",[],"project",{"_18":19,"_20":21,"_22":23,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":-5,"_31":-5,"_32":33,"_34":-5,"_35":26,"_36":-5,"_37":-5,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":-5,"_45":-5,"_46":47,"_48":47,"_49":50,"_51":50,"_52":50,"_53":47,"_54":47,"_55":56,"_57":58,"_59":60,"_61":26},"query","handle","c15r","id","44cb7742-f7ec-11f0-af26-42dde27851f2","name","untitled-5504","createdAt",["D",1769125458696],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","imageUrl","userId","21f2e37e-8066-4730-9dc7-d27cf8d3c9f3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","0630d977-f678-453e-926c-52043293f59f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_16":17,"_80":76},"org",{"_16":17,"_74":-5,"_75":76,"_32":33,"_77":78,"_79":26},"branch",{"_62":63,"_20":64,"_18":65,"_66":19,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":21,"_73":17},"isOwned","version",6,"main","44cbe25e-f7ec-11f0-af26-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb2RJNlc1czZ1NlpZRmoxdGJ2eFVNNVhmeTYifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","path","","adoptOrgId",{"_18":19,"_20":21,"_22":161,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":-5,"_31":-5,"_32":33,"_34":-5,"_35":26,"_36":-5,"_37":-5,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":-5,"_45":-5,"_46":47,"_48":47,"_49":50,"_51":50,"_52":50,"_53":47,"_54":47,"_55":162,"_57":163,"_59":164,"_61":26},"tree",[148,149,150],[148,149,150],"counts",{"_137":39,"_138":134,"_139":39,"_140":141,"_142":143},"contents",[105,106,107],"file","upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_18":131,"_20":132,"_110":133,"_112":-5,"_113":65,"_114":134,"_116":100,"_22":135,"_62":39,"_118":119,"_120":83,"_121":26,"_122":-5,"_82":136},{"_18":124,"_20":125,"_110":126,"_112":-5,"_113":65,"_114":63,"_116":100,"_22":127,"_62":115,"_118":128,"_120":129,"_121":26,"_122":-5,"_82":130},{"_18":108,"_20":109,"_110":111,"_112":-5,"_113":65,"_114":115,"_116":100,"_22":117,"_62":39,"_118":119,"_120":83,"_121":26,"_122":-5,"_82":123},"6688691e-f7ef-11f0-adf1-42dde27851f2","new-file-3576.ts","fileId","668869e6-f7ef-11f0-adf1-42dde27851f2","parentId","branchId","branchVersion",3,"latest",["D",1769126803783],"fileType","script","content","deleted","label",[109],"e3f43e84-f7f2-11f0-885a-42dde27851f2","main.tsx","3cc10be0-f7ef-11f0-831d-42dde27851f2",["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}",[125],"44cf202c-f7ec-11f0-af26-42dde27851f2","main.ts","44cf20e0-f7ec-11f0-af26-42dde27851f2",1,["D",1769125458714],[132],"pulls","branches","forks","envVars",{"_144":146,"_147":39},"connections",{"_144":39,"_145":39},"count","unfilledCount",2,"emptyCount",{"_18":131,"_20":132,"_110":133,"_112":-5,"_113":65,"_114":134,"_116":100,"_22":158,"_62":39,"_118":119,"_120":83,"_121":26,"_122":-5,"_152":159,"_82":160},{"_18":124,"_20":125,"_110":126,"_112":-5,"_113":65,"_114":63,"_116":100,"_22":155,"_62":115,"_118":128,"_120":129,"_121":26,"_122":-5,"_152":156,"_82":157},{"_18":108,"_20":109,"_110":111,"_112":-5,"_113":65,"_114":115,"_116":100,"_22":151,"_62":39,"_118":119,"_120":83,"_121":26,"_122":-5,"_152":153,"_82":154},["D",1769126803783],"children",[],[109],["D",1769128302682],[],[125],["D",1769125458714],[],[132],["D",1769125458696],{"_16":17,"_80":76},{"_16":17,"_74":-5,"_75":76,"_32":33,"_77":78,"_79":26},{"_62":63,"_20":64,"_18":65,"_66":19,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":21,"_73":17},"ctx",{"_55":-5,"_102":198,"_199":200,"_201":202,"_203":26,"_204":26,"_205":26,"_206":100,"_207":-5,"_208":-7,"_209":-7,"_210":39,"_211":26,"_212":26,"_213":-5,"_214":26,"_215":26,"_216":26,"_217":-5},"ENV",{"_169":170,"_171":172,"_173":64,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]

Search