function MainComponent() { const [picture, setPicture] = React.useState(null); const [video, setVideo] = React.useState(null); const [uploadStatus, setUploadStatus] = React.useState(''); const [processingStatus, setProcessingStatus] = React.useState(''); const [outputVideo, setOutputVideo] = React.useState(null); const handleDragOver = (event)=>{ event.preventDefault(); }; const handleDrop = (event)=>{ event.preventDefault(); const files = event.dataTransfer.files; if (files && files[0]) { setPicture(files[0]); setUploadStatus('Picture ready to be processed.'); setOutputVideo(null); } }; const handlePictureChange = (event)=>{ const file = event.target.files[0]; if (file) { setPicture(file); setUploadStatus('Picture ready to be processed.'); setOutputVideo(null); } }; const handleVideoChange = (event)=>{ const file = event.target.files[0]; if (file) { setVideo(file); setUploadStatus('Video ready to be processed.'); setOutputVideo(null); } }; const handleSubmit = (event)=>{ event.preventDefault(); if (picture && video) { setUploadStatus(''); setProcessingStatus('Processing AI transformation...'); setTimeout(()=>{ setProcessingStatus('AI transformation complete!'); setOutputVideo(URL.createObjectURL(video)); }, 3000); } else { setUploadStatus('Please upload both a picture and a video.'); setProcessingStatus(''); setOutputVideo(null); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-[#6dd5ed] to-[#2193b0] p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onDragOver: handleDragOver, onDrop: handleDrop, className: "flex flex-col items-center space-y-2 border-2 border-dashed border-white p-4 w-full max-w-sm cursor-pointer", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "pictureInput", className: "font-roboto text-white", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Upload a Picture or Drag & Drop"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", name: "picture", id: "pictureInput", onChange: handlePictureChange, className: "hidden", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }), picture && /*#__PURE__*/ React.createElement("img", { src: URL.createObjectURL(picture), alt: "Source imagery for AI transformation", className: "w-[200px] h-[200px] object-cover mt-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "videoInput", className: "font-roboto text-white", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Upload a Video", /*#__PURE__*/ React.createElement("input", { type: "file", accept: "video/*", name: "video", id: "videoInput", onChange: handleVideoChange, className: "mt-2", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this })), video && /*#__PURE__*/ React.createElement("video", { src: URL.createObjectURL(video), alt: "Target video for AI transformation", controls: true, className: "w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#ff416c] text-white font-roboto rounded-md shadow-lg transform hover:scale-105 transition duration-300 ease-in-out flex items-center justify-center", disabled: processingStatus !== '', __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-cogs pr-2", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }), "Start AI Transformation")), uploadStatus && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-white", __source: { fileName: "", lineNumber: 113, columnNumber: 24 }, __self: this }, uploadStatus), processingStatus && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-white animate-pulse", __source: { fileName: "", lineNumber: 114, columnNumber: 28 }, __self: this }, processingStatus), outputVideo && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("video", { src: outputVideo, alt: "Transformed video with CGI background", controls: true, className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }))); }