\n {children}\n

\n);\n\nconst CardContent = ({ children, className = \"\" }) => (\n

\n {children}\n

\n);\n\nconst Button = ({\n children,\n onClick,\n disabled = false,\n variant = \"primary\",\n className = \"\",\n}) => {\n const baseStyles =\n \"px-4 py-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2\";\n\n const variants = {\n primary: \"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 disabled:bg-gray-400\",\n outline: \"border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-blue-500 disabled:text-gray-400\",\n secondary: \"bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500\",\n };\n\n return (\n \n {children}\n \n );\n};\n\n/* -------------------------------------------------------------------------\n * Custom Icons\n * -------------------------------------------------------------------------*/\nconst RefreshIcon = ({ className = \"\" }) => (\n \n);\n\nconst BookIcon = ({ className = \"\" }) => (\n \n);\n\nconst StarIcon = ({ className = \"\" }) => (\n \n);\n\nconst LoadingSpinner = ({ className = \"\" }) => (\n \n);\n\n/* -------------------------------------------------------------------------\n * Audience & sample text helpers\n * -------------------------------------------------------------------------*/\nconst audienceOptions = [\n { key: \"kid-2-5\", label: \"Kid (2‑5)\" },\n { key: \"kid-5-7\", label: \"Kid (5‑7)\" },\n { key: \"child-7-10\", label: \"Children (7‑10)\" },\n { key: \"child-10-15\", label: \"Children (10‑15)\" },\n { key: \"child-15-18\", label: \"Children (15‑18)\" },\n { key: \"adult-18+\", label: \"Adult (18+)\" },\n];\n\nconst starterSeeds = {\n \"kid-2-5\": [\n \"A tiny bunny finds a shiny pebble.\",\n \"The sun wakes up a sleepy flower.\",\n \"A giggling cloud paints the sky.\",\n \"A ladybug looks for new friends.\",\n \"A brave kitten explores the garden.\",\n ],\n \"kid-5-7\": [\n \"Milo the mouse builds a cookie spaceship.\",\n \"A rainbow slides into the school playground.\",\n \"Two socks argue about which foot is better.\",\n \"A shy dragon learns to whistle.\",\n \"A talking tree tells a secret.\",\n ],\n \"child-7-10\": [\n \"A girl discovers a doorway in her desk drawer.\",\n \"Three best‑friend robots start a band at recess.\",\n \"A map appears on Leo's toast spelling 'Treasure'.\",\n \"Every book in the library begins to glow.\",\n \"A lost puppy can suddenly read street signs.\",\n ],\n \"child-10-15\": [\n \"An 11‑year‑old gamer wakes up inside their favourite level.\",\n \"The town's clocks all freeze—except yours.\",\n \"A seaside carnival arrives overnight with no workers in sight.\",\n \"You receive an anonymous letter that changes its words daily.\",\n \"Your reflection starts winking back at you.\",\n ],\n \"child-15-18\": [\n \"A group of teens decode messages hidden in local graffiti.\",\n \"An exchange student claims they're from the year 2300.\",\n \"Everyone's dreams sync for one night—and reveal a secret.\",\n \"A stolen lab notebook contains instructions to bend gravity.\",\n \"The school talent show gets hacked by an AI comedian.\",\n ],\n \"adult-18+\": [\n \"A washed‑up magician plans one final spectacular illusion.\",\n \"During a city‑wide blackout, strangers share more than light.\",\n \"A freelance code‑breaker uncovers a 19th‑century conspiracy.\",\n \"A botanist discovers a plant that whispers in forgotten dialects.\",\n \"Two timelines start bleeding into each other during rush hour.\",\n ],\n};\n\nconst nextSeeds = {\n \"kid-2-5\": [\n \"The bunny follows a chirping song into tall grass.\",\n \"The flower joins a dance with buzzing bees.\",\n \"The cloud meets a friendly kite who loves colours.\",\n ],\n \"kid-5-7\": [\n \"Milo presses a button and zooms to the Moon‑Marshmallow.\",\n \"The rainbow invites kids to slide into a candy forest.\",\n \"The dragon's whistle calls a hidden dragon choir.\",\n ],\n \"child-7-10\": [\n \"The desk‑drawer doorway leads to a town made of origami.\",\n \"The robot band's first concert summons lightning.\",\n \"The library books reveal a puzzle only kids can solve.\",\n ],\n \"child-10-15\": [\n \"Inside the game, the player meets an NPC who knows their name.\",\n \"With time frozen, you can explore secrets unnoticed.\",\n \"At dawn, the carnival rides start moving by themselves.\",\n ],\n \"child-15-18\": [\n \"The graffiti points to a hidden subway platform.\",\n \"The futuristic student fixes your phone—with impossible software.\",\n \"Sharing dreams reveals a map to an underground lake.\",\n ],\n \"adult-18+\": [\n \"The magician hires an unlikely accomplice: you.\",\n \"During the blackout, two rivals must cooperate to survive.\",\n \"Decoding the diary links to a government cover‑up.\",\n ],\n};\n\n/* -------------------------------------------------------------------------\n * Mock server helper\n * -------------------------------------------------------------------------*/\nasync function mockServerRequest({ history, audience }) {\n // Simulate network latency\n await new Promise((res) => setTimeout(res, 600));\n\n if (history.length === 0) {\n return {\n options: starterSeeds[audience],\n lang: \"en\",\n audience,\n max_tokens: 100,\n };\n }\n // Cycle suggestions to feel dynamic\n const idx = history.length % nextSeeds[audience].length;\n return {\n options: nextSeeds[audience].slice(idx).concat(nextSeeds[audience].slice(0, idx)),\n lang: \"en\",\n audience,\n max_tokens: 100,\n };\n}\n\nfunction generateWithPollinations(prompt) {\n const encodedPrompt = encodeURIComponent(prompt);\n const imageUrl = `https://image.pollinations.ai/prompt/${encodedPrompt}`;\n\n return imageUrl; // Direct URL to generated image\n}\n\n/* -------------------------------------------------------------------------\n * Main React component\n * -------------------------------------------------------------------------*/\nfunction StoryOptionsApp() {\n const [tags, setTags] = useState(\"\");\n const [lang, setLang] = useState(\"en\");\n const [audience, setAudience] = useState(\"adult-18+\");\n const [history, setHistory] = useState([]);\n const [options, setOptions] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const fetchOptions = async () => {\n setLoading(true);\n setError(null);\n try {\n let data;\n if (MOCK) {\n data = await mockServerRequest({ history, audience });\n } else {\n const res = await fetch(\"https://nmsilva--eae5b0fa58e811f0b62cf69ea79377d9.web.val.run\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-story-lang\": lang,\n },\n body: JSON.stringify({ history, audience, ...(tags ? {tags: tags.split(',') } : {}) }),\n });\n if (!res.ok) throw new Error(`Server responded ${res.status}`);\n data = await res.json();\n }\n setOptions(data.options || []);\n } catch (e) {\n console.error(e);\n setError(e.message || \"Something went wrong\");\n } finally {\n setLoading(false);\n }\n };\n\n const chooseOption = (opt) => {\n setHistory((prev) => [...prev, opt]);\n setOptions([]); // clear suggestions until refreshed\n };\n\n const resetStory = () => {\n setHistory([]);\n setOptions([]);\n setError(null);\n };\n\n return (\n

\n \n

Interactive Story Builder

\n \n

Create amazing stories, one choice at a time

\n\n {/* Controls */}\n \n \n

\n Language (ISO)\n setLang(e.target.value)}\n placeholder=\"e.g., en, es, fr\"\n />\n

\n\n

\n Audience\n setAudience(e.target.value)}\n >\n {audienceOptions.map((opt) => (\n \n ))}\n \n

\n Tags (splitted by comma)\n setTags(e.target.value)}\n placeholder=\"e.g., beach, soccer\"\n />\n

\n\n

\n \n\n {history.length > 0 && (\n \n )}\n

\n\n {error && (\n

{error}

\n )}\n \n \n\n {/* Story so far */}\n \n \n

\n \n

Story so far

\n {history.length === 0\n ? (\n

\n No story yet. Fetch starter prompts to begin your adventure!\n

\n )\n : (\n

\n {line}\n

\n )}\n \n \n\n {/* Options */}\n {options.length > 0 && (\n \n \n

\n \n

Choose the next path

\n {options.map((opt, idx) => (\n chooseOption(opt)}\n >\n

\n \n {idx + 1}\n \n {/*

*/}\n {opt}\n

\n \n ))}\n

\n \n \n )}\n

\n );\n}\n\nfunction App() {\n return (\n <>\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n story builder\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","deleted","label","children",[],[104],{"_108":170,"_100":171,"_151":172,"_153":-5,"_154":139,"_155":173,"_156":157,"_110":174,"_105":175,"_160":161,"_162":176,"_164":27,"_165":-5,"_166":177,"_103":178},"6275bcdc-58fd-11f0-a68e-f69ea79377d9","storyBuilderAPI.tsx","eae5b0fa-58e8-11f0-b62c-f69ea79377d9",32,["D",1751650575021],15,"// /api/story-options.ts – Edge runtime\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\n\nconst openai = new OpenAI();\n\n// Helpers ──────────────────────────────────────────────────────────────────\nconst parseLang = (h: string | null) => h ? h.split(\",\")[0].split(\"-\")[0].trim().toLowerCase() : \"en\";\n\nconst audienceMap: Record = {\n \"kid-2-5\": \"children aged 2–5 (very simple vocabulary, 1–2 short sentences)\",\n \"kid-5-7\": \"children aged 5–7 (simple vocabulary, 2–3 short sentences)\",\n \"child-7-10\": \"children aged 7–10 (short paragraphs, imaginative but clear)\",\n \"child-10-15\": \"children aged 10–15 (middle‑grade style)\",\n \"child-15-18\": \"teens aged 15–18 (YA style, mild themes allowed)\",\n \"adult-18+\": \"adults (mature vocabulary and themes allowed)\",\n};\n\nexport default async function(req: Request): Promise {\n /* ───── Allow POST only ───── */\n if (req.method !== \"POST\") {\n return new Response(\"Method Not Allowed\", { status: 405, headers: { Allow: \"POST\" } });\n }\n\n /* ───── Headers & body ───── */\n const lang = parseLang(\n req.headers.get(\"x-story-lang\") || req.headers.get(\"accept-language\"),\n );\n\n let history: string[] = [];\n // DEFAULT TOKEN LIMIT = 100\n let max_tokens = 150;\n let audienceKey = \"adult-18+\";\n let tags = [];\n\n try {\n const body = await req.json();\n history = Array.isArray(body.history) ? body.history : [];\n // allow an explicit override if caller really wants something else\n if (typeof body.max_tokens === \"number\") max_tokens = body.max_tokens;\n if (typeof body.audience === \"string\" && audienceMap[body.audience]) {\n audienceKey = body.audience;\n }\n if (Array.isArray(body.tags)) tags = body.tags;\n } catch {\n /* invalid or missing body → fall back to defaults */\n }\n\n const audienceLabel = audienceMap[audienceKey];\n\n /* ───── Chat prompt ───── */\n const systemBase = `You are a creative writing assistant. Respond in ${lang}. `\n + `Tailor tone, vocabulary and length for ${audienceLabel}. `\n + `Respond in 3 prompts with maximum of 50 tokens each one.`;\n\n const messages = history.length === 0\n ? [\n { role: \"system\", content: systemBase },\n {\n role: \"user\",\n content: `Give me five different opening prompts for a brand‑new short story appropriate for ${audienceLabel}.`\n + `${tags.length > 0 ? ` Use as reference this subjects to generate the prompts: ${tags.join()}` : \"\"}`,\n },\n ]\n : [\n { role: \"system\", content: systemBase },\n {\n role: \"user\",\n content: `Story so far:\\n${history.map((s, i) => `${i + 1}. ${s}`).join(\"\\n\")}`\n + `\\n\\nPropose three possible next directions (bulleted) that would engage ${audienceLabel}.`,\n },\n ];\n\n /* ───── OpenAI call ───── */\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages,\n max_tokens, // ← now 100 unless caller overrides\n });\n\n /* ───── Response clean‑up ───── */\n const raw = completion.choices[0].message.content.trim();\n const options = raw\n .split(/\\r?\\n/)\n .map((s) => s.replace(/^[\\s*\\-–•\\d\\.]+/, \"\").trim())\n .filter(Boolean)\n .filter(text => text.length >= 40);\n\n return Response.json({ options, lang, audience: audienceKey, max_tokens });\n}",[],[171],"files",[149,169],"counts",{"_183":31,"_184":185,"_186":31,"_187":31},"pulls","branches",1,"forks","envVars","contents",[],"file",{"_108":150,"_100":104,"_151":152,"_153":-5,"_154":139,"_155":138,"_156":157,"_110":192,"_105":159,"_160":161,"_162":163,"_164":27,"_165":-5,"_103":193},["D",1751650736542],[104],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_98":99,"_100":101,"_102":42,"_105":-7,"_103":104,"_106":200,"_147":204,"_179":211,"_190":212,"_188":214,"_215":-5,"_216":27,"_217":-5,"_218":-5,"_219":-5,"_220":221},{"_108":109,"_100":101,"_110":201,"_112":-5,"_113":27,"_114":115,"_116":-5,"_117":-5,"_12":118,"_119":-5,"_120":27,"_121":-5,"_122":31,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_132":27,"_21":202,"_136":203},["D",1751641731942],{"_98":99,"_134":135},{"_105":138,"_100":42,"_108":139,"_140":109,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":101,"_146":99},[205,208],{"_108":150,"_100":104,"_151":152,"_153":-5,"_154":139,"_155":138,"_156":157,"_110":158,"_105":159,"_160":161,"_162":163,"_164":27,"_165":-5,"_166":206,"_103":207},[],[104],{"_108":170,"_100":171,"_151":172,"_153":-5,"_154":139,"_155":173,"_156":157,"_110":174,"_105":175,"_160":161,"_162":176,"_164":27,"_165":-5,"_166":209,"_103":210},[],[171],[205,208],{"_108":150,"_100":104,"_151":152,"_153":-5,"_154":139,"_155":138,"_156":157,"_110":192,"_105":159,"_160":161,"_162":163,"_164":27,"_165":-5,"_103":213},[104],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"routes/_app","actionData","errors"]