\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 HistoryIcon = ({ className = \"\" }) => (\n \n);\n\nconst SaveIcon = ({ className = \"\" }) => (\n \n);\n\nconst TrashIcon = ({ className = \"\" }) => (\n \n);\n\nconst LoadingSpinner = ({ className = \"\" }) => (\n \n);\n\n/* -------------------------------------------------------------------------\n * In-memory storage (replace with localStorage in your environment)\n * -------------------------------------------------------------------------*/\nlet storageData = {\n savedStories: [],\n};\n\nconst saveToStorage = (key, value) => {\n localStorage.setItem(key, JSON.stringify(value));\n // In a real environment, use: localStorage.setItem(key, JSON.stringify(value));\n};\n\nconst getFromStorage = (key) => {\n return JSON.parse(localStorage.getItem(key) || \"[]\");\n // In a real environment, use: JSON.parse(localStorage.getItem(key) || '[]');\n};\n\n/* -------------------------------------------------------------------------\n * Audience options\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\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(\"portugal\");\n const [audience, setAudience] = useState(\"kid-5-7\");\n const [history, setHistory] = useState([]);\n const [summary, setSummary] = useState([]);\n const [options, setOptions] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [savedStories, setSavedStories] = useState([]);\n const [showHistory, setShowHistory] = useState(false);\n const [storyTitle, setStoryTitle] = useState(\"\");\n\n // Load saved stories on component mount\n useEffect(() => {\n const stories = getFromStorage(\"savedStories\");\n setSavedStories(stories);\n }, []);\n\n const fetchOptions = async () => {\n setLoading(true);\n setError(null);\n try {\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 const data = await res.json();\n setOptions(data.options || []);\n setSummary(data.summary || []); // Update summary from server response\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) => {\n return [...prev, summary, opt];\n });\n setOptions([]); // clear suggestions until refreshed\n setSummary([]); // clear summary until refreshed\n };\n\n const resetStory = () => {\n setHistory([]);\n setOptions([]);\n setSummary([]);\n setError(null);\n };\n\n const saveCurrentStory = () => {\n if (history.length === 0) {\n setError(\"No story to save\");\n return;\n }\n\n const title = storyTitle.trim() || `Story ${new Date().toLocaleDateString()}`;\n const newStory = {\n id: Date.now(),\n title,\n content: history,\n tags,\n language: lang,\n audience,\n createdAt: new Date().toISOString(),\n };\n\n const updatedStories = [newStory, ...savedStories];\n setSavedStories(updatedStories);\n saveToStorage(\"savedStories\", updatedStories);\n setStoryTitle(\"\");\n setError(null);\n };\n\n const loadStory = (story) => {\n setHistory([...story.content]);\n setTags(story.tags || \"\");\n setLang(story.language || \"portugal\");\n setAudience(story.audience || \"kid-5-7\");\n setOptions([]);\n setSummary([]);\n setShowHistory(false);\n setError(null);\n };\n\n const deleteStory = (storyId) => {\n const updatedStories = savedStories.filter(story => story.id !== storyId);\n setSavedStories(updatedStories);\n saveToStorage(\"savedStories\", updatedStories);\n };\n\n const clearAllStories = () => {\n setSavedStories([]);\n saveToStorage(\"savedStories\", []);\n };\n\n return (\n

\n \n

Interactive Story Builder

\n \n

Create amazing stories, one choice at a time

\n\n {/* Navigation */}\n

\n setShowHistory(false)}\n >\n Current Story\n \n setShowHistory(true)}\n >\n \n Story History ({savedStories.length})\n \n

\n\n {showHistory && (\n /* Story History Section */\n \n \n

\n \n

Saved Stories

\n {savedStories.length > 0 && (\n \n Clear All\n \n )}\n

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

\n \n

No saved stories yet.

Create and save your first story to see it here!

\n )\n : (\n

\n {savedStories.map((story) => (\n

{story.title}

\n Language: {story.language}\n Audience: {story.audience}\n Steps: {story.content.length}\n {new Date(story.createdAt).toLocaleDateString()}\n

\n {story.tags && (\n

\n {story.tags.split(\",\").map((tag, idx) => (\n \n {tag.trim()}\n \n ))}\n

\n )}\n

\n {story.content[0] || \"No content\"}\n

\n loadStory(story)}\n className=\"text-sm\"\n >\n Load\n \n deleteStory(story.id)}\n className=\"text-sm text-red-600 hover:text-red-700 hover:bg-red-50\"\n >\n \n \n

\n ))}\n

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

\n Language\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 setStoryTitle(e.target.value)}\n placeholder=\"Story title (optional)\"\n />\n \n

\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 {/* Summary */}\n {summary.length > 0 && (\n \n \n

Story Summary

\n {summary}\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",[],[154],{"_103":174,"_96":175,"_155":115,"_157":-5,"_158":140,"_159":139,"_161":117,"_105":176,"_100":177,"_164":165,"_166":178,"_168":22,"_169":-5,"_170":179,"_99":180},"a80e1520-5d79-11f0-8305-0224a6c84d84","storyBuilderAPI.tsx",["D",1752143754032],26,"// /api/story-options.ts – Edge runtime\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\n\nconst openai = new OpenAI();\n\n// More robust version that handles edge cases\nfunction parseStoryResponseRobust(raw) {\n const lines = raw.split(/\\r?\\n/).filter(line => line.trim() !== \"\");\n\n // More flexible option pattern (handles spacing variations)\n const optionPattern = /^\\s*([ABC])\\)\\s*(.+)$/i;\n\n // Find all option lines\n const optionLines = [];\n const summaryLines = [];\n\n lines.forEach(line => {\n const match = line.match(optionPattern);\n if (match) {\n optionLines.push({\n letter: match[1].toUpperCase(),\n text: match[2].trim(),\n });\n } else {\n // Only add to summary if we haven't started finding options yet\n if (optionLines.length === 0) {\n summaryLines.push(line);\n }\n }\n });\n\n // Sort options by letter to ensure A, B, C order\n const sortedOptions = optionLines\n .sort((a, b) => a.letter.localeCompare(b.letter))\n .map(option => option.text);\n\n return {\n summary: summaryLines.join(\"\\n\").trim(),\n options: sortedOptions,\n };\n}\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 const maxIterations = 10; // Configurable story length limit\n const isNearEnd = history.length >= maxIterations - 2;\n const isAtEnd = history.length >= maxIterations;\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\n const messages = history.length === 0\n ? [\n {\n role: \"system\",\n content: systemBase\n + `Write a substantial opening story segment (100 words) followed by 3 brief continuation options (under 20 characters each). `\n + `Each option must lead to distinctly different story directions - avoid similar themes, actions, or outcomes.`,\n },\n {\n role: \"user\",\n content: `Write an engaging opening for a brand‑new short story appropriate for ${audienceLabel}.`\n + `${tags.length > 0 ? ` Use as reference this subjects: ${tags.join(\", \")}` : \"\"}`\n + `\\n\\nAfter the opening, provide exactly 3 short continuation options (each under 20 characters) that lead to completely different story paths:\n A) [option]\n B) [option] \n C) [option]`,\n },\n ]\n : isAtEnd\n ? [\n {\n role: \"system\",\n content: systemBase + `The story has reached its maximum length. Provide a satisfying conclusion.`,\n },\n {\n role: \"user\",\n content: `Story so far:\\n${history.map((s, i) => `${i + 1}. ${s}`).join(\"\\n\")}`\n + `\\n\\nThis story has reached its end. Write a compelling conclusion that wraps up the narrative for ${audienceLabel}.`,\n },\n ]\n : [\n {\n role: \"system\",\n content: systemBase\n + `Continue the story with a brief segment followed by 3 short options (under 20 characters each). `\n + `CRITICAL: Each option must open completely different narrative paths - avoid repeating previous themes, actions, or similar story directions. `\n + `Create divergent choices that would lead to distinct plot developments, character arcs, or story outcomes. `\n + `Consider different genres, tones, conflicts, or character motivations for each option.${\n isNearEnd ? \" The story should be approaching its conclusion.\" : \"\"\n }`,\n },\n {\n role: \"user\",\n content: `Story so far:\\n${history.map((s, i) => `${i + 1}. ${s}`).join(\"\\n\")}`\n + `\\n\\nContinue the story with a brief segment (100 words) appropriate for ${audienceLabel}.${\n isNearEnd ? \" Begin moving toward a conclusion.\" : \"\"\n }`\n + `\\n\\nThen provide exactly 3 short continuation options (each under 20 characters) that each lead to fundamentally different story directions. `\n + `Ensure no option resembles previous choices or leads to similar outcomes. Consider varying:`\n + `\\n- Character actions/decisions`\n + `\\n- Story conflicts/challenges`\n + `\\n- Emotional tone/mood`\n + `\\n- Plot direction/setting`\n + `\\n\\nFormat as:\n A) [option]\n B) [option]\n C) [option]`,\n },\n ];\n /* ───── OpenAI call ───── */\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\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 result = parseStoryResponseRobust(raw);\n\n return Response.json({ ...result, lang, audience: audienceKey, max_tokens });\n}",[],[175],"files",[152,173],"counts",{"_185":32,"_186":187,"_188":32,"_189":190},"pulls","branches",1,"forks","envVars",{"_191":32,"_192":32},"count","emptyCount","contents",[195,198],{"_103":153,"_96":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":117,"_105":196,"_100":163,"_164":165,"_166":167,"_168":22,"_169":-5,"_99":197},["D",1752070757912],[154],{"_103":174,"_96":175,"_155":115,"_157":-5,"_158":140,"_159":139,"_161":117,"_105":199,"_100":177,"_164":165,"_166":178,"_168":22,"_169":-5,"_99":200},["D",1752143754032],[175],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_94":95,"_96":97,"_98":-7,"_100":-7,"_101":210,"_193":215,"_220":-7,"_221":-5,"_222":-5,"_181":223,"_230":227,"_231":-5,"_232":-5,"_233":22,"_234":22},{"_103":104,"_96":97,"_105":211,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":117,"_119":-5,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":212,"_134":213,"_137":214,"_149":22},["D",1751641731942],{"_94":95,"_132":133},{"_94":95,"_136":133,"_14":113},{"_100":139,"_96":44,"_103":140,"_141":104,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":97,"_148":95},[216,218],{"_103":153,"_96":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":117,"_105":196,"_100":163,"_164":165,"_166":167,"_168":22,"_169":-5,"_99":217},[154],{"_103":174,"_96":175,"_155":115,"_157":-5,"_158":140,"_159":139,"_161":117,"_105":199,"_100":177,"_164":165,"_166":178,"_168":22,"_169":-5,"_99":219},[175],"readme","upstream","pull",[224,227],{"_103":153,"_96":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":117,"_105":162,"_100":163,"_164":165,"_166":167,"_168":22,"_169":-5,"_170":225,"_99":226},[],[154],{"_103":174,"_96":175,"_155":115,"_157":-5,"_158":140,"_159":139,"_161":117,"_105":176,"_100":177,"_164":165,"_166":178,"_168":22,"_169":-5,"_170":228,"_99":229},[],[175],"preview","ahead","behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]