function MainComponent({ onSwap, leftSrc, rightSrc }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[300px] h-[400px] bg-gray-300 flex justify-center items-center", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, leftSrc ? /*#__PURE__*/ React.createElement("img", { src: leftSrc, alt: "Uploaded portrait", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, "Upload Your Image")), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[300px] h-[400px] bg-gray-300 flex justify-center items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, rightSrc ? /*#__PURE__*/ React.createElement("img", { src: rightSrc, alt: "Generated image of the uploaded portrait", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "Your image will appear here"))), /*#__PURE__*/ React.createElement("button", { onClick: onSwap, className: "rounded-full bg-purple-800 p-2 text-white fa fa-refresh w-12 h-12", "aria-label": "Swap images", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function StoryComponent() { const [leftSrc, setLeftSrc] = React.useState(''); const [rightSrc, setRightSrc] = React.useState(''); const handleImageUpload = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e)=>{ setLeftSrc(e.target.result); setRightSrc('/placeholder-processed-image.png'); // Placeholder for the generated image route }; reader.readAsDataURL(file); } }; const handleSwapImages = ()=>{ setLeftSrc(rightSrc); setRightSrc(''); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { type: "file", className: "hidden", onChange: handleImageUpload, name: "imageUpload", accept: "image/*", id: "imageUpload", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "imageUpload", className: "cursor-pointer", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onSwap: handleSwapImages, leftSrc: leftSrc, rightSrc: rightSrc, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }))); }