function MainComponent() { const [message, setMessage] = useState(""); const [type, setType] = useState("card"); const [tone, setTone] = useState("romantic"); const [generatedText, setGeneratedText] = useState(""); const [generatedImage, setGeneratedImage] = useState(""); const [loading, setLoading] = useState(false); const [downloadLoading, setDownloadLoading] = useState(false); const [streamingText, setStreamingText] = useState(""); const [fromName, setFromName] = useState(""); const [toName, setToName] = useState(""); const [occasion, setOccasion] = useState("valentine"); const [imageLoaded, setImageLoaded] = useState(false); useEffect(()=>{ const script = document.createElement("script"); script.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js"; script.async = true; document.body.appendChild(script); return ()=>{ document.body.removeChild(script); }; }, []); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingText, onFinish: (message)=>{ setGeneratedText(message); generateImage(message); } }); const generateImage = async (text)=>{ try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(text)}`); const data = await response.json(); if (data.data && data.data[0]) { const img = new Image(); img.crossOrigin = "anonymous"; img.onload = ()=>{ setGeneratedImage(data.data[0].url); setImageLoaded(true); }; img.onerror = ()=>console.error("Failed to load image"); img.src = data.data[0].url; } } catch (error) { console.error("Error generating image:", error); } finally{ setLoading(false); } }; const generateLoveMessage = async ()=>{ if (!message) return; setLoading(true); setStreamingText(""); setGeneratedText(""); setGeneratedImage(""); const nameContext = toName ? `to ${toName}` : ""; const signatureContext = fromName ? `from ${fromName}` : ""; const occasionContext = occasion !== "other" ? `for ${occasion}` : ""; let styleInstruction = ""; if (type === "poem") { styleInstruction = "Write this as a rhyming poem with clear stanzas."; } else if (type === "letter") { styleInstruction = "Write this as a formal letter with proper structure and paragraphs."; } else if (type === "note") { styleInstruction = "Write this as a brief, concise note."; } else if (type === "card") { styleInstruction = "Write this as a card message with a greeting and closing."; } else if (type === "blank") { styleInstruction = "Write this in a free-form style."; } let toneInstruction = ""; if ([ "angry", "disappointed", "sad" ].includes(tone)) { toneInstruction = "Express strong emotions while maintaining respect."; } else if ([ "apologetic", "embarrassed", "forgiving" ].includes(tone)) { toneInstruction = "Show sincerity and genuine feelings."; } else if ([ "romantic", "passionate", "seductive" ].includes(tone)) { toneInstruction = "Use romantic and poetic language."; } else if ([ "friendly", "playful", "sweet" ].includes(tone)) { toneInstruction = "Keep it light and cheerful."; } else if ([ "serious", "loving" ].includes(tone)) { toneInstruction = "Be earnest and heartfelt."; } let occasionInstruction = ""; if (occasion === "valentine") { occasionInstruction = "Focus on romantic love and affection."; } else if (occasion === "anniversary") { occasionInstruction = "Reflect on shared memories and growth together."; } else if (occasion === "birthday") { occasionInstruction = "Celebrate them and your relationship."; } else if (occasion === "proposal") { occasionInstruction = "Express deep commitment and future hopes."; } else if (occasion === "date") { occasionInstruction = "Keep it light and anticipatory."; } const prompt = `Create a ${tone} message ${nameContext} ${occasionContext} based on this description: ${message}. ${styleInstruction} ${toneInstruction} ${occasionInstruction} Keep the length appropriate for a ${type}. ${signatureContext ? `Sign it "${signatureContext}"` : ""}`; try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Error generating text:", error); setLoading(false); } }; const handleDownload = async ()=>{ try { setDownloadLoading(true); if (!imageLoaded) { throw new Error("Please wait for image to load completely"); } const element = document.getElementById("card-preview"); if (!element) { throw new Error("Card preview not found"); } await new Promise((resolve)=>setTimeout(resolve, 100)); const canvas = await html2canvas(element, { useCORS: true, allowTaint: false, logging: true, scale: 2 }); const link = document.createElement("a"); link.download = `love-message-${new Date().getTime()}.png`; link.href = canvas.toDataURL("image/png", 1.0); link.click(); } catch (error) { console.error("Download error:", error); alert(error.message); } finally{ setDownloadLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#ff9ed8] to-[#ff4d7d] p-4 md:p-8", __source: { fileName: "", lineNumber: 160, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "fixed top-4 left-4 z-10 text-[#ff2d55]/80 hover:text-[#ff2d55] flex items-center gap-2 transition-colors bg-white/50 backdrop-blur-sm p-2 rounded-xl", __source: { fileName: "", lineNumber: 161, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left", __source: { fileName: "", lineNumber: 165, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 166, columnNumber: 9 }, __self: this }, "Back")), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white/90 backdrop-blur-sm rounded-3xl shadow-2xl p-4 md:p-10", __source: { fileName: "", lineNumber: 168, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-4 mb-2", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl md:text-5xl", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "👼"), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-playfair text-[#ff2d55]", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, "Cupid AI"), /*#__PURE__*/ React.createElement("span", { className: "text-4xl md:text-5xl", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, "👼")), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl font-crimson-text text-[#ff4d7d] mb-6", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, "Let love's arrows inspire your perfect message"), /*#__PURE__*/ React.createElement("div", { className: "bg-white/80 rounded-xl p-6 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-playfair text-[#ff2d55] mb-3", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, "💘 How It Works"), /*#__PURE__*/ React.createElement("ol", { className: "text-left font-crimson-text space-y-3", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#ff2d55] text-white w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 186, columnNumber: 17 }, __self: this }, "1"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, "Choose your message type and tone - from sweet notes to passionate poems!")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#ff2d55] text-white w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }, "2"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, "Tell AI Cupid about your special someone and your feelings")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#ff2d55] text-white w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, "3"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 206, columnNumber: 17 }, __self: this }, "Watch as AI Cupid crafts a personalized message and creates matching artwork")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#ff2d55] text-white w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, "4"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this }, "Download your love creation or send it directly to your sweetheart!"))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 md:space-y-6", __source: { fileName: "", lineNumber: 224, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 225, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#ff2d55] font-crimson-text text-lg mb-2", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, "Type of Message"), /*#__PURE__*/ React.createElement("select", { value: type, onChange: (e)=>setType(e.target.value), className: "w-full p-3 rounded-xl border-2 border-[#ff9ed8] focus:border-[#ff2d55] outline-none font-crimson-text", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "card", __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this }, "Valentine's Card"), /*#__PURE__*/ React.createElement("option", { value: "note", __source: { fileName: "", lineNumber: 236, columnNumber: 17 }, __self: this }, "Sweet Note"), /*#__PURE__*/ React.createElement("option", { value: "letter", __source: { fileName: "", lineNumber: 237, columnNumber: 17 }, __self: this }, "Love Letter"), /*#__PURE__*/ React.createElement("option", { value: "poem", __source: { fileName: "", lineNumber: 238, columnNumber: 17 }, __self: this }, "Romantic Poem"), /*#__PURE__*/ React.createElement("option", { value: "blank", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, "Blank Canvas"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 242, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#ff2d55] font-crimson-text text-lg mb-2", __source: { fileName: "", lineNumber: 243, columnNumber: 15 }, __self: this }, "Tone"), /*#__PURE__*/ React.createElement("select", { value: tone, onChange: (e)=>setTone(e.target.value), className: "w-full p-3 rounded-xl border-2 border-[#ff9ed8] focus:border-[#ff2d55] outline-none font-crimson-text", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "romantic", __source: { fileName: "", lineNumber: 251, columnNumber: 17 }, __self: this }, "Romantic"), /*#__PURE__*/ React.createElement("option", { value: "serious", __source: { fileName: "", lineNumber: 252, columnNumber: 17 }, __self: this }, "Serious"), /*#__PURE__*/ React.createElement("option", { value: "angry", __source: { fileName: "", lineNumber: 253, columnNumber: 17 }, __self: this }, "Angry"), /*#__PURE__*/ React.createElement("option", { value: "apologetic", __source: { fileName: "", lineNumber: 254, columnNumber: 17 }, __self: this }, "Apologetic"), /*#__PURE__*/ React.createElement("option", { value: "disappointed", __source: { fileName: "", lineNumber: 255, columnNumber: 17 }, __self: this }, "Disappointed"), /*#__PURE__*/ React.createElement("option", { value: "embarrassed", __source: { fileName: "", lineNumber: 256, columnNumber: 17 }, __self: this }, "Embarrassed"), /*#__PURE__*/ React.createElement("option", { value: "loving", __source: { fileName: "", lineNumber: 257, columnNumber: 17 }, __self: this }, "Loving"), /*#__PURE__*/ React.createElement("option", { value: "sad", __source: { fileName: "", lineNumber: 258, columnNumber: 17 }, __self: this }, "Sad"), /*#__PURE__*/ React.createElement("option", { value: "forgiving", __source: { fileName: "", lineNumber: 259, columnNumber: 17 }, __self: this }, "Forgiving"), /*#__PURE__*/ React.createElement("option", { value: "friendly", __source: { fileName: "", lineNumber: 260, columnNumber: 17 }, __self: this }, "Friendly"), /*#__PURE__*/ React.createElement("option", { value: "playful", __source: { fileName: "", lineNumber: 261, columnNumber: 17 }, __self: this }, "Playful"), /*#__PURE__*/ React.createElement("option", { value: "passionate", __source: { fileName: "", lineNumber: 262, columnNumber: 17 }, __self: this }, "Passionate"), /*#__PURE__*/ React.createElement("option", { value: "sweet", __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this }, "Sweet"), /*#__PURE__*/ React.createElement("option", { value: "seductive", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, "Seductive"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#ff2d55] font-crimson-text text-lg mb-2", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this }, "Occasion"), /*#__PURE__*/ React.createElement("select", { value: occasion, onChange: (e)=>setOccasion(e.target.value), className: "w-full p-3 rounded-xl border-2 border-[#ff9ed8] focus:border-[#ff2d55] outline-none font-crimson-text", __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "valentine", __source: { fileName: "", lineNumber: 276, columnNumber: 17 }, __self: this }, "Valentine's Day"), /*#__PURE__*/ React.createElement("option", { value: "anniversary", __source: { fileName: "", lineNumber: 277, columnNumber: 17 }, __self: this }, "Anniversary"), /*#__PURE__*/ React.createElement("option", { value: "birthday", __source: { fileName: "", lineNumber: 278, columnNumber: 17 }, __self: this }, "Birthday"), /*#__PURE__*/ React.createElement("option", { value: "proposal", __source: { fileName: "", lineNumber: 279, columnNumber: 17 }, __self: this }, "Marriage Proposal"), /*#__PURE__*/ React.createElement("option", { value: "date", __source: { fileName: "", lineNumber: 280, columnNumber: 17 }, __self: this }, "Special Date"), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, "Other"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 284, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 285, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#ff2d55] font-crimson-text text-lg mb-2", __source: { fileName: "", lineNumber: 286, columnNumber: 17 }, __self: this }, "To"), /*#__PURE__*/ React.createElement("input", { type: "text", value: toName, onChange: (e)=>setToName(e.target.value), placeholder: "Their name...", className: "w-full p-3 rounded-xl border-2 border-[#ff9ed8] focus:border-[#ff2d55] outline-none font-crimson-text", __source: { fileName: "", lineNumber: 289, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 297, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#ff2d55] font-crimson-text text-lg mb-2", __source: { fileName: "", lineNumber: 298, columnNumber: 17 }, __self: this }, "From"), /*#__PURE__*/ React.createElement("input", { type: "text", value: fromName, onChange: (e)=>setFromName(e.target.value), placeholder: "Your name...", className: "w-full p-3 rounded-xl border-2 border-[#ff9ed8] focus:border-[#ff2d55] outline-none font-crimson-text", __source: { fileName: "", lineNumber: 301, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 311, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#ff2d55] font-crimson-text text-lg mb-2", __source: { fileName: "", lineNumber: 312, columnNumber: 13 }, __self: this }, "Tell me about your love..."), /*#__PURE__*/ React.createElement("textarea", { value: message, onChange: (e)=>setMessage(e.target.value), placeholder: "Describe your feelings, relationship, or what makes them special... The more details you share, the more personal your message will be!", className: "w-full p-4 h-32 rounded-xl border-2 border-[#ff9ed8] focus:border-[#ff2d55] outline-none font-crimson-text resize-none", __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateLoveMessage, disabled: loading || !message, className: "w-full bg-gradient-to-r from-[#ff2d55] to-[#ff4d7d] text-white py-4 px-8 rounded-xl font-crimson-text text-xl hover:from-[#ff4d7d] hover:to-[#ff2d55] transition-all duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 322, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 328, columnNumber: 15 }, __self: this }, "Creating Love Magic...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart", __source: { fileName: "", lineNumber: 331, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 332, columnNumber: 17 }, __self: this }, "Generate Love Message")))), (streamingText || generatedText) && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 339, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "card-preview", className: "relative bg-white rounded-2xl shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 340, columnNumber: 13 }, __self: this }, generatedImage && /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] md:h-[300px] relative", __source: { fileName: "", lineNumber: 345, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "AI generated romantic illustration", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 346, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent to-white/90", __source: { fileName: "", lineNumber: 351, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 md:p-8 relative", __source: { fileName: "", lineNumber: 354, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-playfair text-[#ff2d55] mb-4", __source: { fileName: "", lineNumber: 355, columnNumber: 17 }, __self: this }, toName ? `Dear ${toName}` : "Your Love Message"), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text text-base md:text-lg whitespace-pre-line", __source: { fileName: "", lineNumber: 358, columnNumber: 17 }, __self: this }, streamingText || generatedText), fromName && /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-playfair text-[#ff2d55] text-right", __source: { fileName: "", lineNumber: 362, columnNumber: 19 }, __self: this }, "With love, ", fromName))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 mb-8 flex flex-col md:flex-row gap-4 md:justify-end", __source: { fileName: "", lineNumber: 369, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, disabled: downloadLoading, className: "w-full md:w-auto px-6 py-4 md:py-2 rounded-xl bg-[#ff4d7d] text-white font-crimson-text hover:bg-[#ff2d55] transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 370, columnNumber: 15 }, __self: this }, downloadLoading ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 376, columnNumber: 19 }, __self: this }, "Downloading...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download", __source: { fileName: "", lineNumber: 379, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 380, columnNumber: 21 }, __self: this }, "Download"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ alert("Email feature coming soon! For now, please download and send manually."); }, className: "w-full md:w-auto px-6 py-4 md:py-2 rounded-xl bg-[#ff4d7d] text-white font-crimson-text hover:bg-[#ff2d55] transition-colors flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 384, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope", __source: { fileName: "", lineNumber: 392, columnNumber: 17 }, __self: this }), "Email"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center text-[#ff2d55] font-crimson-text opacity-75", __source: { fileName: "", lineNumber: 399, columnNumber: 9 }, __self: this }, "© 2025 RADIOTOMY"))); }