function MainComponent() { const [inputText, setInputText] = React.useState(''); const [translation, setTranslation] = React.useState(''); const [imageURL, setImageURL] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleTextChange = (e)=>{ setInputText(e.target.value); }; const translateText = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: inputText, target: 'en' }) }); const data = await response.json(); setTranslation(data.data.translations[0].translatedText); setLoading(false); } catch (error) { setLoading(false); } }; const getWeddingImage = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/stable-diffusion/?prompt=wedding+invitation&batch_size=1', { method: 'GET' }); const data = await response.json(); setImageURL(data.data[0]); setLoading(false); } catch (error) { setLoading(false); } }; React.useEffect(()=>{ getWeddingImage(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#f3e5f5]", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white shadow rounded-lg w-full max-w-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold leading-tight text-center font-crimson-text mb-6 text-[#5e35b1]", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Wedding Invitation"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "mb-2 block text-sm font-medium font-roboto text-gray-700", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Your message:"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", rows: "5", className: "block w-full p-2.5 bg-gray-50 rounded border-2 border-[#5e35b1] focus:border-[#7e57c2] font-roboto text-gray-700", onChange: handleTextChange, value: inputText, __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full text-white bg-[#5e35b1] hover:bg-[#512da8] font-semibold py-2 px-4 rounded shadow text-sm font-roboto", disabled: loading, onClick: translateText, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, loading ? "Translating…" : "Translate")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, loading && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#512da8]", __source: { fileName: "", lineNumber: 78, columnNumber: 25 }, __self: this }, "Loading..."), !loading && translation && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-700 bg-gray-50 p-6 rounded border border-gray-300", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "Translation: ", translation)))), imageURL && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageURL, alt: "Wedding invitation visual representation", className: "w-[300px] h-[300px] object-cover rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in; } `)); }