function ImageCard({ image, isEditing = false, onEdit, onSave, onMetadataChange }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#2d2d2d] rounded-lg p-4 border-2 border-[#ff69b4] shadow-lg hover:shadow-[#ff69b4]/20 transition-shadow duration-300", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.url, alt: image.metadata.title, className: "w-full h-48 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, isEditing ? /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: image.metadata.title, onChange: (e)=>onMetadataChange(image.id, { ...image.metadata, title: e.target.value }), className: "w-full bg-[#1a1a1a] text-[#ff69b4] p-2 rounded border border-[#ff69b4] font-crimson-text", placeholder: "Image title...", name: "title", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { value: image.metadata.description, onChange: (e)=>onMetadataChange(image.id, { ...image.metadata, description: e.target.value }), className: "w-full bg-[#1a1a1a] text-[#ff69b4] p-2 rounded border border-[#ff69b4] font-crimson-text", placeholder: "Image description...", name: "description", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: image.metadata.keywords.join(", "), onChange: (e)=>onMetadataChange(image.id, { ...image.metadata, tags: e.target.value }), placeholder: "Tags (comma separated)", className: "w-full bg-[#1a1a1a] text-[#ff69b4] p-2 rounded border border-[#ff69b4] font-crimson-text", name: "tags", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onSave(image.id), className: "w-full bg-[#ff69b4] text-[#1a1a1a] p-2 rounded-lg hover:bg-[#ff1493] transition-colors duration-300", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-wand-sparkles mr-2", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }), "Save Changes")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#ff69b4] font-crimson-text text-xl", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, image.metadata.title), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onEdit(image.id), className: "text-[#ff69b4] hover:text-[#ff1493] transition-colors duration-300", "aria-label": "Edit", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-[#b3b3b3] font-crimson-text", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, image.metadata.description), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, image.metadata.keywords.map((keyword, idx)=>/*#__PURE__*/ React.createElement("span", { key: idx, className: "px-2 py-1 bg-[#1a1a1a] text-[#ff69b4] rounded-full text-sm font-crimson-text border border-[#ff69b4]", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, keyword)))))); } function ImageCardStory() { const sampleImage = { id: 1, url: "/sample-image.jpg", metadata: { title: "Kawaii Cat", description: "A super cute kawaii cat drawing with sparkles and hearts", keywords: [ "kawaii", "cat", "cute", "pink" ] } }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-[#1a1a1a] space-y-8", __source: { fileName: "", lineNumber: 110, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-sm", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#ff69b4] mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, "Default View"), /*#__PURE__*/ React.createElement(ImageCard, { image: sampleImage, onEdit: ()=>{}, onSave: ()=>{}, onMetadataChange: ()=>{}, __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-sm", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#ff69b4] mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, "Edit Mode"), /*#__PURE__*/ React.createElement(ImageCard, { image: sampleImage, isEditing: true, onEdit: ()=>{}, onSave: ()=>{}, onMetadataChange: ()=>{}, __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-sm", __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#ff69b4] mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, "With Long Content"), /*#__PURE__*/ React.createElement(ImageCard, { image: { ...sampleImage, metadata: { ...sampleImage.metadata, description: "This is a much longer description that shows how the card handles more content. It includes details about the kawaii cat and all its adorable features.", keywords: [ ...sampleImage.metadata.keywords, "sparkles", "hearts", "drawing", "artistic", "pastel" ] } }, onEdit: ()=>{}, onSave: ()=>{}, onMetadataChange: ()=>{}, __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }))); } function FileUploader({ onFilesSelected, accept = "image/*", maxFiles = 5, maxSize = 10 }) { const [dragActive, setDragActive] = useState(false); const [selectedFiles, setSelectedFiles] = useState([]); const [previews, setPreviews] = useState([]); const [uploadProgress, setUploadProgress] = useState({}); const [error, setError] = useState(null); const handleDrag = (e)=>{ e.preventDefault(); e.stopPropagation(); setDragActive(e.type === "dragenter" || e.type === "dragover"); }; const validateFiles = (files)=>{ if (files.length > maxFiles) return `Maximum ${maxFiles} files allowed`; for (const file of files){ if (file.size > maxSize * 1024 * 1024) return `File ${file.name} exceeds ${maxSize}MB`; if (!file.type.match(accept.replace("/*", "/"))) return `${file.name} is not an accepted file type`; } return null; }; const processFiles = (files)=>{ const validationError = validateFiles(files); if (validationError) { setError(validationError); return; } setError(null); setSelectedFiles(files); setPreviews([]); setUploadProgress({}); Array.from(files).forEach((file)=>{ const reader = new FileReader(); reader.onloadend = ()=>{ setPreviews((prev)=>[ ...prev, reader.result ]); }; reader.readAsDataURL(file); }); onFilesSelected && onFilesSelected(files); }; const handleDrop = (e)=>{ e.preventDefault(); e.stopPropagation(); setDragActive(false); const droppedFiles = Array.from(e.dataTransfer.files); processFiles(droppedFiles); }; const handleFileSelect = (e)=>{ if (e.target.files) { processFiles(Array.from(e.target.files)); } }; const handleRemoveFile = (index)=>{ const newFiles = Array.from(selectedFiles); newFiles.splice(index, 1); const newPreviews = [ ...previews ]; newPreviews.splice(index, 1); setSelectedFiles(newFiles); setPreviews(newPreviews); onFilesSelected && onFilesSelected(newFiles); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl mx-auto bg-[#2a2a2a] rounded-xl shadow-[0_0_15px_rgba(255,192,203,0.3)] p-6 border-2 border-pink-400", __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `relative p-8 border-2 border-dashed rounded-lg transition-all duration-300 ${dragActive ? "border-pink-400 bg-pink-400/10 scale-105 transform" : "border-pink-400/50 hover:border-pink-400/80"}`, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", multiple: true, accept: accept, onChange: handleFileSelect, className: "hidden", id: "file-upload", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "file-upload", className: "flex flex-col items-center cursor-pointer", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-6xl mb-4 transition-transform duration-300 ${dragActive ? "scale-125" : ""}`, __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, dragActive ? "🌟" : "👻"), /*#__PURE__*/ React.createElement("p", { className: "text-pink-300 text-lg mb-2 font-roboto text-center", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, dragActive ? "Drop your files here ✨" : "Drop files here or click to upload"), /*#__PURE__*/ React.createElement("p", { className: "text-pink-200/60 text-sm font-roboto text-center", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "Maximum ", maxFiles, " files, up to ", maxSize, "MB each")), dragActive && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 border-4 border-pink-400 rounded-lg animate-pulse pointer-events-none", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-3 bg-[#ff69b4]/10 border border-[#ff69b4] rounded-lg animate-shake", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#ff69b4] text-sm flex items-center", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }), error)), previews.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-pink-300 font-roboto mb-3 flex items-center", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-images mr-2", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }), "Selected Files (", previews.length, "/", maxFiles, ")"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, previews.map((preview, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative aspect-square group hover:scale-105 transition-transform duration-300", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: preview, alt: `Preview ${index + 1}`, className: "w-full h-full object-cover rounded-lg border-2 border-pink-400", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-pink-300 text-sm mb-2", __source: { fileName: "", lineNumber: 149, columnNumber: 19 }, __self: this }, selectedFiles[index].name), /*#__PURE__*/ React.createElement("div", { className: "text-pink-300/80 text-xs", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }, (selectedFiles[index].size / (1024 * 1024)).toFixed(2), "MB"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRemoveFile(index), className: "mt-2 bg-pink-400/20 hover:bg-pink-400/40 text-pink-300 rounded-full p-2 transition-colors duration-300", __source: { fileName: "", lineNumber: 155, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 159, columnNumber: 21 }, __self: this }))), uploadProgress[index] && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-pink-400/20", __source: { fileName: "", lineNumber: 163, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-pink-400 transition-all duration-300", style: { width: `${uploadProgress[index]}%` }, __source: { fileName: "", lineNumber: 164, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 175, columnNumber: 7 }, __self: this }, ` @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .animate-shake { animation: shake 0.5s ease-in-out; } `)); } function FileUploaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1a1a] p-8", __source: { fileName: "", lineNumber: 191, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-12", __source: { fileName: "", lineNumber: 192, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 193, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-pink-300 text-xl mb-4 font-roboto", __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, "Default Image Uploader"), /*#__PURE__*/ React.createElement(FileUploader, { onFilesSelected: (files)=>console.log("Files selected:", files), __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 202, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-pink-300 text-xl mb-4 font-roboto", __source: { fileName: "", lineNumber: 203, columnNumber: 11 }, __self: this }, "Document Uploader"), /*#__PURE__*/ React.createElement(FileUploader, { accept: ".pdf,.doc,.docx", maxFiles: 2, maxSize: 5, onFilesSelected: (files)=>console.log("Documents selected:", files), __source: { fileName: "", lineNumber: 206, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 216, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-pink-300 text-xl mb-4 font-roboto", __source: { fileName: "", lineNumber: 217, columnNumber: 11 }, __self: this }, "Single File Uploader"), /*#__PURE__*/ React.createElement(FileUploader, { maxFiles: 1, maxSize: 2, onFilesSelected: (files)=>console.log("Single file selected:", files), __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this })))); } function ProgressBar({ progress = 0, status = "", showIcon = true, variant = "default", isAnimated = true }) { const themes = { default: { bg: "bg-[#FFE5F1]", fill: "bg-[#FF69B4]", text: "text-[#FF69B4]", border: "border-[#FF69B4]" }, pastel: { bg: "bg-[#E0F4FF]", fill: "bg-[#87CEEB]", text: "text-[#87CEEB]", border: "border-[#87CEEB]" }, dark: { bg: "bg-[#2D2D2D]", fill: "bg-[#FF69B4]", text: "text-[#FF69B4]", border: "border-[#FF69B4]" } }; const theme = themes[variant]; const getIcon = (progress)=>{ if (progress < 33) return "🌱"; if (progress < 66) return "🌸"; if (progress < 100) return "✨"; return "🎉"; }; return /*#__PURE__*/ React.createElement("div", { className: "inline-block min-w-[200px]", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `text-sm font-medium ${theme.text}`, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, status || `${progress}% Complete`), showIcon && /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 22 }, __self: this }, getIcon(progress))), /*#__PURE__*/ React.createElement("div", { className: `h-4 rounded-full ${theme.bg} ${theme.border} border`, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-full rounded-full ${theme.fill} ${isAnimated ? "transition-all duration-500 ease-out" : ""}`, style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, ` @keyframes sparkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .${theme.fill} { ${isAnimated ? "animation: sparkle 2s infinite;" : ""} box-shadow: 0 0 10px ${variant === "dark" ? "#FF69B4" : "#FFB6C1"}; } `)); } function ProgressBarStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8 bg-white dark:bg-[#1A1A1A]", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#FF69B4]", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Default Theme"), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 25, status: "Loading...", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 50, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 75, status: "Almost there!", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 100, status: "Complete!", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#87CEEB]", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "Pastel Theme"), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 30, variant: "pastel", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 60, variant: "pastel", status: "Processing...", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 100, variant: "pastel", status: "Done!", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 bg-[#1A1A1A] p-4 rounded", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#FF69B4]", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "Dark Theme"), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 45, variant: "dark", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 80, variant: "dark", status: "Nearly there~", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 100, variant: "dark", status: "Complete! ✨", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#FF69B4]", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Without Animation"), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 60, isAnimated: false, __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#FF69B4]", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "Without Icons"), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 75, showIcon: false, __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [upload, { loading }] = useUpload(); const [files, setFiles] = useState([]); const [totalSize, setTotalSize] = useState(0); const [error, setError] = useState(null); const [selectedFiles, setSelectedFiles] = useState(null); const [uploadProgress, setUploadProgress] = useState({}); const [processingProgress, setProcessingProgress] = useState(0); const [dragActive, setDragActive] = useState(false); const [previews, setPreviews] = useState([]); const handleDrag = (e)=>{ e.preventDefault(); e.stopPropagation(); if (e.type === "dragenter" || e.type === "dragover") { setDragActive(true); } else if (e.type === "dragleave") { setDragActive(false); } }; const handleDrop = (e)=>{ e.preventDefault(); e.stopPropagation(); setDragActive(false); const droppedFiles = Array.from(e.dataTransfer.files).filter((file)=>file.type.startsWith("image/")).slice(0, 5); if (droppedFiles.length > 0) { setSelectedFiles(droppedFiles); setUploadProgress({}); setProcessingProgress(0); droppedFiles.forEach((file)=>{ const reader = new FileReader(); reader.onloadend = ()=>{ setPreviews((prev)=>[ ...prev, reader.result ]); }; reader.readAsDataURL(file); }); } }; const handleFileSelect = (e)=>{ if (e.target.files) { const files = Array.from(e.target.files); setSelectedFiles(files); setUploadProgress({}); setProcessingProgress(0); setPreviews([]); files.forEach((file)=>{ const reader = new FileReader(); reader.onloadend = ()=>{ setPreviews((prev)=>[ ...prev, reader.result ]); }; reader.readAsDataURL(file); }); } }; const validateFiles = (files)=>{ if (!files) return "Please select files to upload"; if (files.length > 5) return "Maximum 5 files allowed"; const totalSize = files.reduce((sum, file)=>sum + file.size, 0); if (totalSize > 50 * 1024 * 1024) return "Total size exceeds 50MB"; for (const file of files){ if (file.size > 10 * 1024 * 1024) return `${file.name} exceeds 10MB`; if (!file.type.startsWith("image/")) return `${file.name} is not an image`; } return null; }; const handleUpload = async ()=>{ if (!selectedFiles) return; const validationError = validateFiles(selectedFiles); if (validationError) { setError(validationError); return; } const uploadedUrls = []; let currentFileIndex = 0; const totalFiles = selectedFiles.length; for (const file of selectedFiles){ try { const { url, error, progress } = await upload({ file, onProgress: (progress)=>{ setUploadProgress((prev)=>({ ...prev, [file.name]: progress })); } }); if (error) { setError(error); return; } uploadedUrls.push(url); currentFileIndex++; setProcessingProgress(currentFileIndex / totalFiles * 50); } catch (err) { setError("Upload failed"); return; } } if (uploadedUrls.length > 0) { setFiles((prev)=>[ ...prev, ...uploadedUrls.map((url)=>({ name: url.split("/").pop(), status: "processing", progress: 0 })) ]); try { let processedCount = 0; const processResults = await Promise.all(uploadedUrls.map(async (url, index)=>{ const result = await fetch("/api/process-images", { method: "POST", body: JSON.stringify({ url }) }).then((res)=>res.json()); processedCount++; setProcessingProgress(50 + processedCount / uploadedUrls.length * 50); return result; })); setFiles((prev)=>prev.map((file, index)=>({ ...file, status: processResults[index].error ? "error" : "success", progress: 100 }))); if (!processResults.some((result)=>result.error)) { sessionStorage.setItem("uploadedImages", JSON.stringify(uploadedUrls)); window.location.href = "/processing"; } } catch (error) { setFiles((prev)=>prev.map((file)=>({ ...file, status: "error", progress: 0 }))); setError("Processing failed"); } } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#1a1a2e] to-[#16213e] p-8", __source: { fileName: "", lineNumber: 172, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 173, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center space-y-4", __source: { fileName: "", lineNumber: 174, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#ff69b4] font-poppins", __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }, "✨ Kawaii Image Analysis ✨"), /*#__PURE__*/ React.createElement("p", { className: "text-[#e2e8f0] text-xl font-roboto", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, "Let our magical AI discover what's in your images 🌟")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1f1f3a] rounded-xl shadow-lg p-6 space-y-6 border border-[#ff69b4]/20", __source: { fileName: "", lineNumber: 183, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-poppins text-[#ff69b4]", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, "✨ How It Works"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3 text-[#e2e8f0] font-roboto", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart mr-3 text-[#ff69b4]", __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this }), "Upload your favorite images"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star mr-3 text-[#ff69b4]", __source: { fileName: "", lineNumber: 194, columnNumber: 17 }, __self: this }), "Our magical AI analyzes them"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sparkles mr-3 text-[#ff69b4]", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }), "Get enchanted insights"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a4a] p-4 rounded-lg mb-6 border border-[#ff69b4]/20", __source: { fileName: "", lineNumber: 203, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#ff69b4] mb-2 font-poppins", __source: { fileName: "", lineNumber: 204, columnNumber: 13 }, __self: this }, "🎀 File Requirements"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 207, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-2", __source: { fileName: "", lineNumber: 208, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-[#ff69b4] mt-1", __source: { fileName: "", lineNumber: 209, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 210, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-[#e2e8f0]", __source: { fileName: "", lineNumber: 211, columnNumber: 19 }, __self: this }, "Accepted Formats"), /*#__PURE__*/ React.createElement("p", { className: "text-[#a0aec0] text-sm", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }, "JPEG, PNG, WebP"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-2", __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-image text-[#ff69b4] mt-1", __source: { fileName: "", lineNumber: 216, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 217, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-[#e2e8f0]", __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this }, "Max File Size"), /*#__PURE__*/ React.createElement("p", { className: "text-[#a0aec0] text-sm", __source: { fileName: "", lineNumber: 219, columnNumber: 19 }, __self: this }, "10MB per image"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-2", __source: { fileName: "", lineNumber: 222, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-images text-[#ff69b4] mt-1", __source: { fileName: "", lineNumber: 223, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-[#e2e8f0]", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, "Batch Upload"), /*#__PURE__*/ React.createElement("p", { className: "text-[#a0aec0] text-sm", __source: { fileName: "", lineNumber: 226, columnNumber: 19 }, __self: this }, "Up to 5 images at once"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-2", __source: { fileName: "", lineNumber: 231, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-expand text-[#ff69b4] mt-1", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-[#e2e8f0]", __source: { fileName: "", lineNumber: 234, columnNumber: 19 }, __self: this }, "Recommended Size"), /*#__PURE__*/ React.createElement("p", { className: "text-[#a0aec0] text-sm", __source: { fileName: "", lineNumber: 235, columnNumber: 19 }, __self: this }, "At least 800x600 pixels"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a4a] p-6 rounded-lg border border-[#ff69b4]/10", __source: { fileName: "", lineNumber: 243, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4 font-poppins text-[#ff69b4]", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, "🌸 Upload Your Images"), /*#__PURE__*/ React.createElement(FileUploader, { onFilesSelected: (files)=>{ setSelectedFiles(files); setUploadProgress({}); setProcessingProgress(0); setPreviews([]); Array.from(files).forEach((file)=>{ const reader = new FileReader(); reader.onloadend = ()=>{ setPreviews((prev)=>[ ...prev, reader.result ]); }; reader.readAsDataURL(file); }); }, accept: "image/*", maxFiles: 5, maxSize: 10, __source: { fileName: "", lineNumber: 247, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 266, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleUpload, disabled: loading || !selectedFiles, className: "w-full bg-[#ff69b4] text-white py-2 px-4 rounded-md hover:bg-[#ff69b4]/80 disabled:opacity-50", __source: { fileName: "", lineNumber: 267, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 274, columnNumber: 21 }, __self: this }), processingProgress < 50 ? "Uploading..." : "Processing...") : "✨ Upload Images"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/processing", className: "w-full bg-[#9d4edd] text-white py-2 px-4 rounded-md hover:bg-[#9d4edd]/80", __source: { fileName: "", lineNumber: 281, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic mr-2", __source: { fileName: "", lineNumber: 285, columnNumber: 17 }, __self: this }), "Go to Processing")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-3 bg-[#ff69b4]/10 border border-[#ff69b4] rounded-lg", __source: { fileName: "", lineNumber: 290, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-[#ff69b4]", __source: { fileName: "", lineNumber: 291, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 292, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this }, error))), (loading || files.length > 0) && /*#__PURE__*/ React.createElement("div", { className: "mt-6 bg-[#1f1f3a] p-4 rounded-lg border border-[#ff69b4]/20", __source: { fileName: "", lineNumber: 299, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-medium text-[#ff69b4] mb-3", __source: { fileName: "", lineNumber: 300, columnNumber: 17 }, __self: this }, "🎵 Upload Progress"), loading && /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-6", __source: { fileName: "", lineNumber: 304, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 305, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-6xl mb-2", __source: { fileName: "", lineNumber: 306, columnNumber: 23 }, __self: this }, "👻"), /*#__PURE__*/ React.createElement("p", { className: "text-[#ff69b4] font-medium", __source: { fileName: "", lineNumber: 307, columnNumber: 23 }, __self: this }, "Processing your magical images..."))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this }, selectedFiles && Array.from(selectedFiles).map((file, index)=>/*#__PURE__*/ React.createElement("div", { key: file.name, className: "space-y-2", __source: { fileName: "", lineNumber: 316, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm text-[#e2e8f0]", __source: { fileName: "", lineNumber: 317, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 318, columnNumber: 27 }, __self: this }, file.name), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 319, columnNumber: 27 }, __self: this }, uploadProgress[file.name] || 0, "%")), /*#__PURE__*/ React.createElement(ProgressBar, { progress: uploadProgress[file.name] || 0, variant: "dark", showIcon: true, isAnimated: true, __source: { fileName: "", lineNumber: 321, columnNumber: 25 }, __self: this }))), loading && /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 330, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm text-[#e2e8f0]", __source: { fileName: "", lineNumber: 331, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 332, columnNumber: 25 }, __self: this }, "Overall Progress"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 333, columnNumber: 25 }, __self: this }, Math.round(processingProgress), "%")), /*#__PURE__*/ React.createElement(ProgressBar, { progress: processingProgress, variant: "dark", showIcon: true, isAnimated: true, __source: { fileName: "", lineNumber: 335, columnNumber: 23 }, __self: this })))))), /*#__PURE__*/ React.createElement("footer", { className: "text-center space-y-2 text-[#a0aec0] font-roboto", __source: { fileName: "", lineNumber: 349, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 350, columnNumber: 11 }, __self: this }, "Need help? Check our", " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#ff69b4] cursor-pointer hover:text-[#ff69b4]/80", __source: { fileName: "", lineNumber: 352, columnNumber: 13 }, __self: this }, "upload guidelines")), /*#__PURE__*/ React.createElement("p", { className: "text-xs", __source: { fileName: "", lineNumber: 356, columnNumber: 11 }, __self: this }, "✨ © 2024 Kawaii Image Analysis ✨"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 359, columnNumber: 7 }, __self: this }, ` @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } @keyframes glow { 0% { box-shadow: 0 0 5px #ff69b4; } 50% { box-shadow: 0 0 20px #ff69b4; } 100% { box-shadow: 0 0 5px #ff69b4; } } `)); }