function MainComponent() { const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [isLoading, setIsLoading] = React.useState(true); const [sendingSizes, setSendingSizes] = React.useState(false); const [imageSrc, setImageSrc] = React.useState(''); const [unit, setUnit] = React.useState('inches'); const [selectedSize, setSelectedSize] = React.useState(''); const fetchData = async ()=>{ setIsLoading(true); try { const response = await fetch('/integrations/stable-diffusion/?prompt=a+non-descript+human+body+with+transparent+background&batch_size=1', { method: 'GET' }); const data = await response.json(); setImageSrc(data.data[0]); } catch (error) { setImageSrc('/error-image-placeholder.png'); } setIsLoading(false); }; React.useEffect(()=>{ fetchData(); }, []); const handleUnitToggle = ()=>{ setUnit((prevUnit)=>prevUnit === 'inches' ? 'centimeters' : 'inches'); }; const handleSizeClick = async (size)=>{ setSendingSizes(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": `Send size of ${size}` } ], system_prompt: 'Send this size to user' }) }); await response.json(); } catch (error) { console.error(error); } setSendingSizes(false); setSelectedSize(size); }; const handleLogin = ()=>{ setIsLoggedIn(true); }; const image = /*#__PURE__*/ React.createElement("img", { src: imageSrc || '/loading-image-placeholder.png', alt: "Non-descript human body outline with transparent background", className: "w-full max-w-md mx-auto", useMap: "#body-map", onError: (e)=>{ setIsLoading(true); fetchData(); }, __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }); const toggleButtons = /*#__PURE__*/ React.createElement("div", { className: "text-center mt-6", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "toggle-inches", className: `mx-2 px-4 py-2 ${unit === 'inches' ? 'bg-[#007AFF] text-white' : 'bg-gray-200'}`, onClick: handleUnitToggle, __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "Inches"), /*#__PURE__*/ React.createElement("button", { name: "toggle-centimeters", className: `mx-2 px-4 py-2 ${unit === 'centimeters' ? 'bg-[#007AFF] text-white' : 'bg-gray-200'}`, onClick: handleUnitToggle, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, "Centimeters")); const loadingIndicator = isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 border-4 border-[#007AFF] border-t-transparent rounded-full animate-spin", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this })); const sendingIndicator = sendingSizes && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 89, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-6 bg-[#007AFF] rounded-full animate-blink", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "ml-4 font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, "Sending sizes...")); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-white", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4 flex justify-between items-center", style: { borderBottom: '4px solid #007AFF' }, __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-pacifico text-[#007AFF]", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "SizeMate"), !isLoggedIn && /*#__PURE__*/ React.createElement("button", { name: "google-login", className: "bg-[#007AFF] text-white px-4 py-2 rounded", onClick: handleLogin, __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Login with Google")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center py-10", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, loadingIndicator, image, !isLoading && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("map", { name: "body-map", __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("area", { shape: "circle", coords: "200,60,40", alt: "Head Size", onClick: ()=>handleSizeClick("Head Size"), __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("area", { shape: "rect", coords: "160,120,240,180", alt: "Chest Size", onClick: ()=>handleSizeClick("Chest Size"), __source: { fileName: "", lineNumber: 120, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("area", { shape: "rect", coords: "170,180,230,400", alt: "Waist Size", onClick: ()=>handleSizeClick("Waist Size"), __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("area", { shape: "rect", coords: "100,400,180,600", alt: "Left Leg Size", onClick: ()=>handleSizeClick("Left Leg Size"), __source: { fileName: "", lineNumber: 122, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("area", { shape: "rect", coords: "210,400,290,600", alt: "Right Leg Size", onClick: ()=>handleSizeClick("Right Leg Size"), __source: { fileName: "", lineNumber: 123, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("area", { shape: "circle", coords: "180,610,30", alt: "Left Foot Size", onClick: ()=>handleSizeClick("Left Foot Size"), __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("area", { shape: "circle", coords: "220,610,30", alt: "Right Foot Size", onClick: ()=>handleSizeClick("Right Foot Size"), __source: { fileName: "", lineNumber: 125, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("area", { shape: "rect", coords: "170,600,230,650", alt: "Secret Sizes", onClick: ()=>handleSizeClick("Secret Sizes"), __source: { fileName: "", lineNumber: 126, columnNumber: 19 }, __self: this })), toggleButtons, sendingIndicator)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 135, columnNumber: 7 }, __self: this }, ` .animate-spin { animation: spin 1s linear infinite; } .animate-blink { animation: blink 1.5s infinite; } .font-roboto { font-family: 'Roboto', sans-serif; } .font-pacifico { font-family: 'Pacifico', cursive; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } `)); }