function MainComponent() { const [imageURL, setImageURL] = React.useState(null); const [selectedArea, setSelectedArea] = React.useState(null); const canvasRef = React.useRef(null); const [generatedImageURL, setGeneratedImageURL] = React.useState(""); const handleUpload = (event)=>{ const file = event.target.files[0]; const url = URL.createObjectURL(file); setImageURL(url); }; const initializeCanvas = ()=>{ const canvas = canvasRef.current; if (canvas && imageURL) { const ctx = canvas.getContext("2d"); const image = new Image(); image.src = imageURL; image.onload = ()=>{ canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); }; } }; React.useEffect(()=>{ initializeCanvas(); }, [ imageURL ]); const selectArea = ()=>{ const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext("2d"); ctx.strokeStyle = "#FF0000"; ctx.lineWidth = 5; ctx.beginPath(); ctx.arc(150, 150, 100, 0, 2 * Math.PI); ctx.stroke(); setSelectedArea({ x: 150, y: 150, radius: 100 }); } }; const generateImage = ()=>{ const description = document.getElementsByName("description")[0].value; fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(description)}`, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setGeneratedImageURL(data.data[0]); const canvas = canvasRef.current; if (canvas && selectedArea) { const ctx = canvas.getContext("2d"); const image = new Image(); image.src = data.data[0]; image.onload = ()=>{ ctx.drawImage(image, selectedArea.x - selectedArea.radius, selectedArea.y - selectedArea.radius, selectedArea.radius * 2, selectedArea.radius * 2); }; } }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f3f4f6] p-8", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-roboto text-[#2c3e50] text-2xl mb-8", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, "Sleep Configuration Page"), /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto bg-white p-8 shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4 font-roboto text-lg text-[#2c3e50]", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Describe your dream image:"), /*#__PURE__*/ React.createElement("textarea", { name: "description", className: "w-full p-4 h-40 border-2 border-[#dcdde1] rounded-md resize-none font-roboto text-[#2c3e50]", placeholder: "Enter your description here...", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mt-6 mb-2 font-roboto text-lg text-[#2c3e50]", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Upload an image:"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "w-full text-sm text-[#2c3e50] p-2 border border-[#ced6e0] rounded-md", accept: "image/*", onChange: handleUpload, __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("canvas", { className: "mt-4 border border-[#ced6e0]", ref: canvasRef, __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-6", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#3498db] text-white px-6 py-2 rounded-md font-roboto", onClick: selectArea, __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Select Area"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1e90ff] text-white px-6 py-2 rounded-md font-roboto", onClick: generateImage, __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Generate Image")))); }