function MainComponent() { const [image, setImage] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const [progress, setProgress] = React.useState(0); const [detectedFaces, setDetectedFaces] = React.useState([]); const handleImageChange = (e)=>{ const file = e.target.files[0]; if (file) { showImagePreview(e); setProgress(30); setTimeout(()=>setProgress(70), 500); } }; const detectFaces = async ()=>{ setIsLoading(true); setProgress(100); setTimeout(()=>{ setDetectedFaces([]); setIsLoading(false); }, 1500); }; const renderDetectionResults = ()=>{}; const loadImage = (src)=>{ setIsLoading(true); setProgress(0); const img = new Image(); img.onload = ()=>{ setIsLoading(false); setImage(src); setProgress(100); }; img.src = src; }; const showImagePreview = (e)=>{ const reader = new FileReader(); reader.onload = (event)=>{ loadImage(event.target.result); }; reader.readAsDataURL(e.target.files[0]); }; const progressBarWidth = isLoading ? `${progress}%` : 0; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center justify-center p-4 bg-[#f0f0f0] w-full min-h-screen", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "Photo Face Image Recognition Detector"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex flex-col items-center w-full px-4 md:px-0", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "image-upload", accept: "image/*", className: "mb-4 file:bg-blue-600 file:border-0 file:px-4 file:py-2 file:rounded file:text-white file:font-bold file:text-sm file:cursor-pointer hover:file:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300", onChange: handleImageChange, id: "image-upload", "aria-describedby": "image-upload-description", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "image-upload", id: "image-upload-description", className: "sr-only", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Upload an image file"), /*#__PURE__*/ React.createElement("button", { className: `bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 w-full sm:w-auto outline-none focus:ring focus:ring-offset-2 focus:ring-blue-600 transform duration-150 ease-in-out ${isLoading ? "opacity-50 cursor-not-allowed" : "hover:scale-105 shadow-lg"}`, onClick: detectFaces, type: "button", name: "search-button", disabled: isLoading, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Search"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-300 h-[6px] rounded-full overflow-hidden mt-2", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-full rounded-full transition-all duration-300 ease-in-out", style: { width: progressBarWidth }, __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }))), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-full py-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full", role: "status", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "visually-hidden", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "Loading..."))) : image && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md h-auto max-h-64 bg-gray-200 rounded overflow-hidden mb-4 mx-auto", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "Thumbnail of uploaded image for face detection", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, renderDetectionResults()), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner-border { animation: spin 1s linear infinite; border-color: #007aff transparent #007aff transparent; } .animate-scale { animation: scaleAnimation 0.5s ease-in-out; } @keyframes scaleAnimation { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } `)); }