function MainComponent() { const [selectedType, setSelectedType] = useState(""); const [selectedAudience, setSelectedAudience] = useState(""); const [customPrompt, setCustomPrompt] = useState(""); const [generatedStory, setGeneratedStory] = useState(""); const [isGenerating, setIsGenerating] = useState(false); const [isNarrating, setIsNarrating] = useState(false); const [error, setError] = useState(""); const storyTypes = [ "Novel", "Folk Tale", "Poetry", "Poem", "Love Story", "Horror Story", "Adventure Story", "Novella", "Kids Story", "Bible Story", "Religious Story", "Historical Story", "Traditional Story", "Scientific Story", "Technological Story", "Fantasy Story", "Mystery Story", "Comedy Story", "Drama Story", "Thriller Story" ]; const audiences = [ "Kids (5-12)", "Teens (13-17)", "Adults (18+)", "All Ages" ]; const generateStory = async ()=>{ if (!selectedType || !selectedAudience) { setError("Please select both story type and target audience"); return; } setIsGenerating(true); setError(""); try { const prompt = customPrompt || `Write a ${selectedType.toLowerCase()} suitable for ${selectedAudience.toLowerCase()}. Make it engaging, well-structured, and appropriate for the target audience.`; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `You are Cleopatra, an expert AI story writer. You create captivating stories across all genres and for all audiences. Write complete, engaging stories that are appropriate for the specified audience and genre.` }, { role: "user", content: prompt } ] }) }); if (!response.ok) { throw new Error(`Failed to generate story: ${response.status} ${response.statusText}`); } const data = await response.json(); const story = data.choices[0]?.message?.content || "Sorry, I couldn't generate a story right now."; setGeneratedStory(story); } catch (err) { console.error(err); setError("Failed to generate story. Please try again."); } finally{ setIsGenerating(false); } }; const downloadStory = ()=>{ if (!generatedStory) return; const element = document.createElement("a"); const file = new Blob([ generatedStory ], { type: "text/plain" }); element.href = URL.createObjectURL(file); element.download = `cleopatra-story-${selectedType.toLowerCase().replace(" ", "-")}-${Date.now()}.txt`; document.body.appendChild(element); element.click(); document.body.removeChild(element); }; const narrateStory = ()=>{ if (!generatedStory) return; if (isNarrating) { window.speechSynthesis.cancel(); setIsNarrating(false); return; } const utterance = new SpeechSynthesisUtterance(generatedStory); utterance.rate = 0.8; utterance.pitch = 1.1; utterance.volume = 1; // Try to use a female voice for Cleopatra const voices = window.speechSynthesis.getVoices(); const femaleVoice = voices.find((voice)=>voice.name.toLowerCase().includes("female") || voice.name.toLowerCase().includes("woman") || voice.gender === "female") || voices.find((voice)=>voice.lang.startsWith("en")); if (femaleVoice) { utterance.voice = femaleVoice; } utterance.onstart = ()=>setIsNarrating(true); utterance.onend = ()=>setIsNarrating(false); utterance.onerror = ()=>setIsNarrating(false); window.speechSynthesis.speak(utterance); }; return /*#__PURE__*/ React.createElement("div", { style: { minHeight: "100vh", background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" }, __source: { fileName: "", lineNumber: 140, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 146, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white mb-4 font-serif", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, "✨ Cleopatra ✨"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-white/90 font-light", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, "Your Royal AI Story Writer"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-white/80 mt-2", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, "Crafting tales across all genres and ages")), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-2xl p-6 mb-6 border border-white/20", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-6 text-center", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "📚 Story Settings"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-6 mb-6", __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white font-semibold mb-3", __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, "Story Type"), /*#__PURE__*/ React.createElement("select", { value: selectedType, onChange: (e)=>setSelectedType(e.target.value), className: "w-full p-3 rounded-lg bg-white/20 text-white border border-white/30 focus:border-white/50 focus:outline-none", __source: { fileName: "", lineNumber: 173, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 178, columnNumber: 19 }, __self: this }, "Select Story Type"), storyTypes.map((type)=>/*#__PURE__*/ React.createElement("option", { key: type, value: type, className: "text-gray-800", __source: { fileName: "", lineNumber: 180, columnNumber: 21 }, __self: this }, type)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white font-semibold mb-3", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, "Target Audience"), /*#__PURE__*/ React.createElement("select", { value: selectedAudience, onChange: (e)=>setSelectedAudience(e.target.value), className: "w-full p-3 rounded-lg bg-white/20 text-white border border-white/30 focus:border-white/50 focus:outline-none", __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 197, columnNumber: 19 }, __self: this }, "Select Audience"), audiences.map((audience)=>/*#__PURE__*/ React.createElement("option", { key: audience, value: audience, className: "text-gray-800", __source: { fileName: "", lineNumber: 199, columnNumber: 21 }, __self: this }, audience))))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white font-semibold mb-3", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, "Custom Story Prompt (Optional)"), /*#__PURE__*/ React.createElement("textarea", { value: customPrompt, onChange: (e)=>setCustomPrompt(e.target.value), placeholder: "Describe your story idea... (e.g., 'A brave princess who discovers a magical kingdom')", className: "w-full p-3 rounded-lg bg-white/20 text-white placeholder-white/60 border border-white/30 focus:border-white/50 focus:outline-none resize-none", rows: "3", __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateStory, disabled: isGenerating, className: "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 disabled:opacity-50 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, isGenerating ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 234, columnNumber: 21 }, __self: this }), "Cleopatra is Writing...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic mr-2", __source: { fileName: "", lineNumber: 239, columnNumber: 21 }, __self: this }), "Generate Story"))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-200 text-center", __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }, error)), generatedStory && /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20", __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center mb-6", __source: { fileName: "", lineNumber: 257, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-4 md:mb-0", __source: { fileName: "", lineNumber: 258, columnNumber: 17 }, __self: this }, "📖 Your Story"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 262, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: narrateStory, className: "bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-300 flex items-center", __source: { fileName: "", lineNumber: 263, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isNarrating ? "fa-stop" : "fa-play"} mr-2`, __source: { fileName: "", lineNumber: 267, columnNumber: 21 }, __self: this }), isNarrating ? "Stop Narration" : "Listen to Story"), /*#__PURE__*/ React.createElement("button", { onClick: downloadStory, className: "bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-300 flex items-center", __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 277, columnNumber: 21 }, __self: this }), "Download"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/5 rounded-lg p-6 max-h-96 overflow-y-auto", __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white/90 leading-relaxed whitespace-pre-wrap font-serif text-lg", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, generatedStory)))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-12", __source: { fileName: "", lineNumber: 293, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white/70 text-sm", __source: { fileName: "", lineNumber: 294, columnNumber: 11 }, __self: this }, "✨ Powered by Cleopatra AI • Your stories, your imagination ✨")))); }