function MainComponent() { const [nannyInfo, setNannyInfo] = React.useState({ location: '', rates: '' }); const [imageUrl, setImageUrl] = React.useState(''); const [loading, setLoading] = React.useState(false); const [responseMessage, setResponseMessage] = React.useState(''); React.useEffect(()=>{ const getVisualization = async ()=>{ const response = await fetch(`/integrations/stable-diffusion/?prompt=a+map+of+nanny+services+in+${nannyInfo.location}+with+rates+${nannyInfo.rates}`); const data = await response.json(); setImageUrl(data.data[0]); }; if (nannyInfo.location && nannyInfo.rates) { getVisualization(); } }, [ nannyInfo.location, nannyInfo.rates ]); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `Find nanny services in ${nannyInfo.location} with rate ${nannyInfo.rates}` } ], system_prompt: 'Provide information about nanny services based on the provided location and rates.' }) }); const data = await response.json(); setResponseMessage(data.choices[0].message.content); setLoading(false); }; const handleChange = (e)=>{ setNannyInfo({ ...nannyInfo, [e.target.name]: e.target.value }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-transparent opacity-50", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-crimson-text text-[#333] mb-8 shadow-lg p-2 bg-white rounded opacity-50", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "Find Your Nanny on the Map"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg p-4 bg-white rounded-lg shadow opacity-50", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "location", className: "font-roboto text-sm text-[#333] opacity-50", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Location"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", className: "p-2 border rounded opacity-50", placeholder: "Enter your location", value: nannyInfo.location, onChange: handleChange, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "rates", className: "font-roboto text-sm text-[#333] opacity-50", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Rates"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "rates", className: "p-2 border rounded opacity-50", placeholder: "Enter desired rates", value: nannyInfo.rates, onChange: handleChange, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 bg-[#007BFF] text-white rounded opacity-50", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, loading ? 'Loading...' : 'Search on the Map')), responseMessage && /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-sm text-[#333] mt-2 opacity-50", __source: { fileName: "", lineNumber: 60, columnNumber: 30 }, __self: this }, responseMessage)), imageUrl ? /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mt-8 rounded-lg opacity-50", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Map visualization of nanny services based on location and rates", className: "rounded-lg object-cover", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })) : null, /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-sm text-[#333] mt-2 opacity-50", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, "Visualization of nanny services in your area on the map")); }