function MainComponent() { const [file, setFile] = useState(null); const [imagePreview, setImagePreview] = useState(null); const [question, setQuestion] = useState(""); const [analysis, setAnalysis] = useState(null); const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(false); const [isDragging, setIsDragging] = useState(false); const [upload, { loading: uploadLoading }] = useUpload(); const [compressedFile, setCompressedFile] = useState(null); const [compressionStatus, setCompressionStatus] = useState(""); const { data: user, loading: userLoading } = useUser(); const fileInputRef = useRef(null); const handleFileChange = (e)=>{ const selectedFile = e.target.files[0]; if (selectedFile) { processFile(selectedFile); } }; const compressImage = async (imageFile, maxSizeMB = 1)=>{ setCompressionStatus("Compressing image..."); return new Promise((resolve, reject)=>{ const reader = new FileReader(); reader.readAsDataURL(imageFile); reader.onload = (event)=>{ const img = new Image(); img.src = event.target.result; img.onload = ()=>{ const canvas = document.createElement("canvas"); let width = img.width; let height = img.height; const maxDimension = 1200; if (width > height && width > maxDimension) { height = Math.round(height * maxDimension / width); width = maxDimension; } else if (height > maxDimension) { width = Math.round(width * maxDimension / height); height = maxDimension; } canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); let quality = 0.7; const originalSizeMB = imageFile.size / (1024 * 1024); if (originalSizeMB > 5) quality = 0.5; else if (originalSizeMB > 2) quality = 0.6; canvas.toBlob((blob)=>{ if (!blob) { setCompressionStatus(""); reject(new Error("Canvas to Blob conversion failed")); return; } const compressedImageFile = new File([ blob ], imageFile.name, { type: "image/jpeg", lastModified: Date.now() }); setCompressionStatus(`Compressed from ${originalSizeMB.toFixed(2)}MB to ${(compressedImageFile.size / (1024 * 1024)).toFixed(2)}MB`); resolve(compressedImageFile); }, "image/jpeg", quality); }; img.onerror = (error)=>{ setCompressionStatus(""); reject(error); }; }; reader.onerror = (error)=>{ setCompressionStatus(""); reject(error); }; }); }; const processFile = async (selectedFile)=>{ setError(null); if (!selectedFile.type.startsWith("image/")) { setError("Please upload an image file"); return; } setFile(selectedFile); const reader = new FileReader(); reader.onload = (e)=>{ setImagePreview(e.target.result); }; reader.readAsDataURL(selectedFile); try { if (selectedFile.size > 1024 * 1024) { const compressed = await compressImage(selectedFile); setCompressedFile(compressed); console.log(`Original size: ${selectedFile.size / (1024 * 1024)}MB, Compressed size: ${compressed.size / (1024 * 1024)}MB`); } else { setCompressedFile(selectedFile); setCompressionStatus("Image already optimized"); } } catch (err) { console.error("Error compressing image:", err); setCompressedFile(selectedFile); setCompressionStatus("Could not compress image, using original"); } }; const handleDragOver = (e)=>{ e.preventDefault(); setIsDragging(true); }; const handleDragLeave = (e)=>{ e.preventDefault(); setIsDragging(false); }; const handleDrop = (e)=>{ e.preventDefault(); setIsDragging(false); if (e.dataTransfer.files && e.dataTransfer.files[0]) { processFile(e.dataTransfer.files[0]); } }; const handleUploadClick = ()=>{ fileInputRef.current.click(); }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!imagePreview) { setError("Please upload an image first"); return; } setIsLoading(true); setError(null); setAnalysis(null); try { const fileToUpload = compressedFile || file; const { url, error: uploadError } = await upload({ file: fileToUpload }); if (uploadError) { throw new Error(uploadError); } const response = await fetch("/api/analyze-plant-image", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ imageData: url, question: question.trim() || "Please identify this plant and provide detailed information about it." }) }); if (!response.ok) { throw new Error(`Server responded with ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setAnalysis(data); window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }); } catch (err) { console.error("Error analyzing plant:", err); setError(err.message || "Failed to analyze the plant image"); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F5F5F0]", __source: { fileName: "", lineNumber: 207, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#2F5233] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 208, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-leaf text-[#F2D785] mr-2", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "/", className: "font-crimson-text text-xl", __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, "Ecopedia")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 215, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/plant-identifier", className: "text-white hover:text-[#F2D785] transition-colors text-sm font-inter mr-4", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera mr-1", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }), " Plant Identifier"), /*#__PURE__*/ React.createElement("a", { href: "/discover", className: "text-white hover:text-[#F2D785] transition-colors text-sm font-inter mr-4", __source: { fileName: "", lineNumber: 222, columnNumber: 11 }, __self: this }, "Discover"), userLoading ? /*#__PURE__*/ React.createElement("div", { className: "w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin", __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }) : user ? /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "bg-[#F2D785] text-[#2F5233] px-3 py-1 rounded-lg text-sm font-inter hover:bg-[#E5C876] transition-colors", __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, "Sign Out") : /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "bg-[#F2D785] text-[#2F5233] px-3 py-1 rounded-lg text-sm font-inter hover:bg-[#E5C876] transition-colors", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, "Sign In"))), /*#__PURE__*/ React.createElement("div", { className: "relative bg-gradient-to-b from-[#2F5233] to-[#7C9C8B] py-16", __source: { fileName: "", lineNumber: 248, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 text-[#F2D785] opacity-30", __source: { fileName: "", lineNumber: 249, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-leaf text-6xl transform -rotate-45", __source: { fileName: "", lineNumber: 250, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 text-[#F2D785] opacity-30", __source: { fileName: "", lineNumber: 252, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-leaf text-6xl transform rotate-45", __source: { fileName: "", lineNumber: 253, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 255, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 256, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-4xl md:text-5xl text-white mb-4", __source: { fileName: "", lineNumber: 257, columnNumber: 13 }, __self: this }, "Plant Identifier"), /*#__PURE__*/ React.createElement("h2", { className: "font-inter text-xl text-[#F2D785] mb-4", __source: { fileName: "", lineNumber: 260, columnNumber: 13 }, __self: this }, "Upload a plant image and get detailed information"), /*#__PURE__*/ React.createElement("p", { className: "text-white font-inter max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 263, columnNumber: 13 }, __self: this }, "Our AI will analyze your plant photo and provide you with identification, care tips, and growing information.")))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 271, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6 mb-8", __source: { fileName: "", lineNumber: 272, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-inter text-xl text-[#2F5233] mb-6", __source: { fileName: "", lineNumber: 273, columnNumber: 11 }, __self: this }, "Upload Your Plant Image"), /*#__PURE__*/ React.createElement("div", { className: `border-2 border-dashed rounded-lg p-8 mb-6 text-center cursor-pointer transition-colors ${isDragging ? "border-[#2F5233] bg-[#F2D785]/20" : "border-gray-300 hover:border-[#2F5233]"}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleUploadClick, __source: { fileName: "", lineNumber: 277, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", ref: fileInputRef, className: "hidden", accept: "image/*", onChange: handleFileChange, capture: "environment", __source: { fileName: "", lineNumber: 288, columnNumber: 13 }, __self: this }), !imagePreview ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 298, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt text-4xl text-[#2F5233] mb-4", __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-inter text-gray-600 mb-2", __source: { fileName: "", lineNumber: 300, columnNumber: 17 }, __self: this }, "Drag and drop your image here"), /*#__PURE__*/ React.createElement("p", { className: "font-inter text-gray-500 text-sm", __source: { fileName: "", lineNumber: 303, columnNumber: 17 }, __self: this }, "or"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "mt-4 bg-[#2F5233] text-white px-4 py-2 rounded-lg font-inter hover:bg-[#3A6340] transition-colors", __source: { fileName: "", lineNumber: 304, columnNumber: 17 }, __self: this }, "Take Photo / Browse Files")) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 312, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imagePreview, alt: "Plant preview", className: "max-h-64 max-w-full mb-4 rounded-lg", __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-inter text-gray-600", __source: { fileName: "", lineNumber: 318, columnNumber: 17 }, __self: this }, "Click or drag to replace image"), compressionStatus && /*#__PURE__*/ React.createElement("p", { className: "font-inter text-xs text-gray-500 mt-2", __source: { fileName: "", lineNumber: 322, columnNumber: 19 }, __self: this }, compressionStatus))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 330, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 331, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "question", className: "block font-inter text-gray-700 mb-2", __source: { fileName: "", lineNumber: 332, columnNumber: 15 }, __self: this }, "Ask a specific question (optional)"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "question", name: "question", value: question, onChange: (e)=>setQuestion(e.target.value), placeholder: "E.g., How do I care for this plant? Is it toxic to pets?", className: "w-full p-3 border border-gray-300 rounded-lg font-inter focus:outline-none focus:ring-2 focus:ring-[#2F5233]", __source: { fileName: "", lineNumber: 338, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: !imagePreview || isLoading || uploadLoading, className: "w-full bg-[#2F5233] text-white py-3 rounded-lg font-inter hover:bg-[#3A6340] transition-colors disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 349, columnNumber: 13 }, __self: this }, isLoading || uploadLoading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 355, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 356, columnNumber: 19 }, __self: this }), " Analyzing...") : "Identify Plant"), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-3 bg-red-100 text-red-700 rounded-lg font-inter", __source: { fileName: "", lineNumber: 364, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 365, columnNumber: 17 }, __self: this }), error))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center py-12", __source: { fileName: "", lineNumber: 373, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 relative", __source: { fileName: "", lineNumber: 374, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 w-full", __source: { fileName: "", lineNumber: 375, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-seedling text-4xl text-[#2F5233] animate-grow", __source: { fileName: "", lineNumber: 376, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "font-inter text-[#2F5233] mt-4", __source: { fileName: "", lineNumber: 379, columnNumber: 13 }, __self: this }, "Analyzing your plant...")), analysis && !isLoading && /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 386, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-2xl text-[#2F5233] mb-4", __source: { fileName: "", lineNumber: 387, columnNumber: 13 }, __self: this }, "Plant Analysis Results"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6", __source: { fileName: "", lineNumber: 391, columnNumber: 13 }, __self: this }, imagePreview && /*#__PURE__*/ React.createElement("div", { className: "md:w-1/3", __source: { fileName: "", lineNumber: 393, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imagePreview, alt: "Analyzed plant", className: "w-full rounded-lg", __source: { fileName: "", lineNumber: 394, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:w-2/3", __source: { fileName: "", lineNumber: 402, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "prose font-inter text-gray-700 whitespace-pre-line", __source: { fileName: "", lineNumber: 403, columnNumber: 17 }, __self: this }, analysis.analysis), /*#__PURE__*/ React.createElement("div", { className: "mt-6 pt-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 407, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 font-inter", __source: { fileName: "", lineNumber: 408, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot mr-1", __source: { fileName: "", lineNumber: 409, columnNumber: 21 }, __self: this }), "Analysis provided by ", analysis.model || "AI"))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-8", __source: { fileName: "", lineNumber: 418, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center font-inter text-[#2F5233] hover:text-[#3A6340] transition-colors", __source: { fileName: "", lineNumber: 419, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 423, columnNumber: 13 }, __self: this }), "Return to Ecopedia Home"))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#2F5233] text-white py-8 mt-12", __source: { fileName: "", lineNumber: 429, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 430, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center", __source: { fileName: "", lineNumber: 431, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6 md:mb-0", __source: { fileName: "", lineNumber: 432, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-xl mb-2", __source: { fileName: "", lineNumber: 433, columnNumber: 15 }, __self: this }, "Ecopedia"), /*#__PURE__*/ React.createElement("p", { className: "font-inter text-sm text-gray-300", __source: { fileName: "", lineNumber: 434, columnNumber: 15 }, __self: this }, "Your AI-Powered Guide to Nature's Wisdom")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 md:gap-8", __source: { fileName: "", lineNumber: 438, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "font-inter text-sm text-gray-300 hover:text-[#F2D785] transition-colors", __source: { fileName: "", lineNumber: 439, columnNumber: 15 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/plant-identifier", className: "font-inter text-sm text-gray-300 hover:text-[#F2D785] transition-colors", __source: { fileName: "", lineNumber: 445, columnNumber: 15 }, __self: this }, "Plant Identifier"), /*#__PURE__*/ React.createElement("a", { href: "/discover", className: "font-inter text-sm text-gray-300 hover:text-[#F2D785] transition-colors", __source: { fileName: "", lineNumber: 451, columnNumber: 15 }, __self: this }, "Discover"), !user && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "font-inter text-sm text-gray-300 hover:text-[#F2D785] transition-colors", __source: { fileName: "", lineNumber: 459, columnNumber: 19 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "font-inter text-sm text-gray-300 hover:text-[#F2D785] transition-colors", __source: { fileName: "", lineNumber: 465, columnNumber: 19 }, __self: this }, "Sign Up")))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-700 mt-6 pt-6 text-center", __source: { fileName: "", lineNumber: 475, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-inter text-xs text-gray-400", __source: { fileName: "", lineNumber: 476, columnNumber: 13 }, __self: this }, "© 2025 Ecopedia. All rights reserved.")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 483, columnNumber: 7 }, __self: this }, ` @keyframes grow { 0% { transform: scale(0.5) translateY(0); opacity: 0.5; } 100% { transform: scale(1.2) translateY(-20px); opacity: 1; } } .animate-grow { animation: grow 1.5s ease-in-out infinite alternate; } `)); }