function MainComponent() { const [photoURL, setPhotoURL] = React.useState(null); const [bio, setBio] = React.useState(null); const [loading, setLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const name = formData.get("name"); const interests = formData.get("interests"); const prompt = `A candid photo of ${name}, showcasing their interest in ${interests}, social media style`; setLoading(true); try { const photoResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const photoData = await photoResponse.json(); setPhotoURL(photoData.data[0]); const bioResponse = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `Write a fun and engaging social media bio for ${name}, who is passionate about ${interests}` } ] }) }); const bioData = await bioResponse.json(); setBio(bioData.choices[0].message.content); } catch (error) { console.error("Failed to fetch data:", error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F5F5F5] flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-6 space-y-8 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold font-crimson-text text-[#333]", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "JournalDate"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666]", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Explore. Connect. Share your stories.")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mt-8 space-y-6", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-md shadow-sm -space-y-px", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "name", type: "text", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-[#DDDDDD] placeholder-[#666] text-[#666] rounded-t-md focus:outline-none focus:ring-[#333] focus:border-[#333] focus:z-10 sm:text-sm", placeholder: "Your Name", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "interests", type: "text", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-[#DDDDDD] placeholder-[#666] text-[#666] rounded-b-md focus:outline-none focus:ring-[#333] focus:border-[#333] focus:z-10 sm:text-sm", placeholder: "Your Interests", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#333] hover:bg-[#555] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#333]", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "absolute left-0 inset-y-0 flex items-center pl-3", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, !loading && "📘", loading && /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 63, columnNumber: 29 }, __self: this })), loading ? 'Crafting Your Story...' : 'Create Your Story'))), photoURL && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: photoURL, alt: "Generated candid photo based on interests", className: "max-w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }), bio && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#666] mt-4", __source: { fileName: "", lineNumber: 72, columnNumber: 21 }, __self: this }, bio)))); }