/** @jsxImportSource https://esm.sh/react */ import React, { useState, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function LoadingSpinner() { return (

✨ Weaving your magical story... ✨

); } function cleanText(text: string) { return text .replace(/\*+/g, '') .replace(/^Story:\s*/, '') .trim(); } function App() { const [storyParts, setStoryParts] = useState({ title: null, parts: [] }); const [imagePreview, setImagePreview] = useState(null); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const fileInputRef = useRef(null); const handleImageUpload = async (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (file) { const reader = new FileReader(); reader.onloadend = () => { setImagePreview(reader.result as string); }; reader.readAsDataURL(file); setIsLoading(true); setError(null); try { const formData = new FormData(); formData.append('image', file); formData.append('previousStory', JSON.stringify(storyParts.parts)); const response = await fetch('/generate-story', { method: 'POST', body: formData }); const result = await response.json(); if (result.error) { setError(result.error); } else { setStoryParts(prev => ({ title: result.mainTitle || prev.title, parts: [ ...prev.parts, { title: cleanText(result.chapterTitle), content: cleanText(result.story), imageBase64: result.imageBase64 } ] })); setImagePreview(null); } } catch (error) { console.error("Story generation failed", error); setError("Failed to generate story. Please try again."); } finally { setIsLoading(false); } } }; return (

🎨 Story Weaver 📖

Welcome to Story Weaver, where your child's imagination becomes the hero of their own adventure! Upload your drawing and let our magical story weaver turn it into a thrilling one-of-a-kind tale crafted just for them. Spark creativity, inspire storytelling and watch the magic unfold!

{isLoading && } {error && (

🚨 {error}

)} {storyParts.parts.length > 0 && (

🌟 {storyParts.title} 🌟

{storyParts.parts.map((part, index) => (

Chapter {index + 1}: {part.title}

{part.imageBase64 && (

)}

{part.content}

))}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } // Utility function to implement timeout async function withTimeout(promise: Promise, timeoutMs: number): Promise { let timeoutHandle: number; const timeoutPromise = new Promise((_, reject) => { timeoutHandle = setTimeout(() => reject(new Error('Operation timed out')), timeoutMs) as unknown as number; }); try { return await Promise.race([promise, timeoutPromise]); } finally { clearTimeout(timeoutHandle); } } export default async function server(request: Request): Promise { if (request.method === 'POST' && new URL(request.url).pathname === '/generate-story') { const formData = await request.formData(); const imageFile = formData.get('image') as File; const previousStoryStr = formData.get('previousStory') as string || '[]'; const previousStory = JSON.parse(previousStoryStr); if (!imageFile) { return new Response(JSON.stringify({ error: 'No image uploaded' }), { status: 400 }); } const arrayBuffer = await imageFile.arrayBuffer(); const base64Image = btoa( new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '') ); const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); try { const imageAnalysis = await withTimeout(openai.chat.completions.create({ model: "gpt-4o", messages: [ { role: "user", content: [ { type: "text", text: "Describe this image briefly, focusing on the main characters and key elements. Be concise." }, { type: "image_url", image_url: { url: `data:image/jpeg;base64,${base64Image}` } } ] } ], max_tokens: 100 }), 15000); // 15 seconds timeout const imageDescription = imageAnalysis.choices[0].message.content || "A magical drawing"; // Optimize previous story context const previousStoryContext = previousStory.length > 0 ? `Previous story summary: ${previousStory[previousStory.length - 1].content}` : ''; const story = await withTimeout(openai.chat.completions.create({ model: "gpt-4o-mini", messages: [ { role: "system", content: "You are a children's storyteller. Continue the story or start a new one based on the image. Use 3 short, simple sentences. Be exciting and brief. Provide a chapter title." }, { role: "user", content: `Image: ${imageDescription}\n${previousStoryContext}\n\nCreate a chapter title and a 3-sentence story continuation.` } ], max_tokens: 150, temperature: 0.7 }), 15000); // 15 seconds timeout const fullResponse = story.choices[0].message.content || ''; const chapterTitleMatch = fullResponse.match(/Chapter Title:?\s*(.+?)(?:\n|$)/i); const chapterTitle = chapterTitleMatch ? chapterTitleMatch[1].trim() : 'Next Chapter'; const storyMatch = fullResponse.match(/Story:?\s*(.+)$/si); let storyContent = storyMatch ? storyMatch[1].trim() : fullResponse; // Ensure the story content is complete if (!storyContent.endsWith('.') && !storyContent.endsWith('!') && !storyContent.endsWith('?')) { storyContent += '...'; } // Use the existing main title or create a new one for the first chapter const finalMainTitle = previousStory.length > 0 ? previousStory[0].title : 'A Magical Adventure'; return new Response(JSON.stringify({ mainTitle: finalMainTitle, chapterTitle: chapterTitle, story: storyContent, imageBase64: `data:image/jpeg;base64,${base64Image}` }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { console.error('Story generation error:', error); return new Response(JSON.stringify({ error: 'Story generation timed out. Please try again with a simpler image or shorter previous story.' }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } return new Response(` Story Weaver

`, { headers: { 'Content-Type': 'text/html' } }); } const css = ` body { font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; background: linear-gradient(135deg, #fef9e7 0%, #f0f4c3 100%); color: #333; line-height: 1.6; margin: 0; padding: 0; display: flex; justify-content: center; min-height: 100vh; } .container { width: 100%; max-width: 600px; background: white; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-radius: 15px; padding: 30px; margin: 20px; text-align: center; } .loading-spinner { display: flex; flex-direction: column; align-items: center; margin: 20px 0; } .spinner { border: 4px solid #f3f3f3; border-top: 4px solid #ff6b6b; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .story-section { margin-bottom: 30px; text-align: left; } .story-section h3 { color: #4a4a4a; margin-bottom: 15px; font-size: 1.3em; } .story-image { max-width: 100%; margin-bottom: 15px; display: flex; justify-content: center; } .story-image img { max-width: 100%; max-height: 300px; border-radius: 10px; object-fit: contain; } .upload-section { margin-bottom: 20px; } .image-preview { display: none; } `;

Storyweaver