function MainComponent() { const [emotionOne, setEmotionOne] = React.useState(''); const [emotionTwo, setEmotionTwo] = React.useState(''); const [imageUrl, setImageUrl] = React.useState(''); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); const fetchEmoji = async ()=>{ if (!emotionOne || !emotionTwo) { setError('Please enter both emotions.'); return; } setLoading(true); setImageUrl(''); try { const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(`emoji of ${emotionOne} and ${emotionTwo}`)}&batch_size=1`, { method: 'GET' }); const data = await response.json(); if (data && data.data) { setImageUrl(data.data[0]); setError(''); } else { setError('Failed to create emoji. Please try different emotions.'); } } catch (e) { setError('Failed to create emoji. Please try again later.'); } setLoading(false); }; const handleSubmit = (event)=>{ event.preventDefault(); fetchEmoji(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f8fafc] py-6 px-4 sm:p-12", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full space-y-8", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "mt-8 space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-md shadow-sm -space-y-px", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "emotion-one", className: "sr-only", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Emotion One"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "emotion-one", id: "emotion-one", className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-[#1d4ed8] focus:border-[#1d4ed8] focus:z-10 sm:text-sm", placeholder: "Enter first emotion", value: emotionOne, onChange: (e)=>setEmotionOne(e.target.value), autoComplete: "off", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "emotion-two", className: "sr-only", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Emotion Two"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "emotion-two", id: "emotion-two", className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-[#1d4ed8] focus:border-[#1d4ed8] focus:z-10 sm:text-sm", placeholder: "Enter second emotion", value: emotionTwo, onChange: (e)=>setEmotionTwo(e.target.value), autoComplete: "off", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, 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-[#1d4ed8] hover:bg-[#2563eb] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#1d4ed8]", disabled: loading, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, loading ? 'Creating...' : 'Create Emoji'))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, error && /*#__PURE__*/ React.createElement("p", { className: "text-[#dc2626] text-sm", __source: { fileName: "", lineNumber: 77, columnNumber: 21 }, __self: this }, error), imageUrl && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Custom emoji based on the emotions provided", className: "mx-auto h-20 w-20", __source: { fileName: "", lineNumber: 78, columnNumber: 24 }, __self: this })))); }