function MainComponent() { const [capturedImage, setCapturedImage] = useState(null); const [uploadedImage, setUploadedImage] = useState(null); const [isAnalyzing, setIsAnalyzing] = useState(false); const [analysisResult, setAnalysisResult] = useState(null); const [error, setError] = useState(null); const [isCameraActive, setIsCameraActive] = useState(false); const [upload, { loading: uploadLoading }] = useUpload(); const videoRef = useRef(null); const streamRef = useRef(null); const { data: user } = useUser(); const activateCamera = async ()=>{ try { setError(null); const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }); streamRef.current = stream; if (videoRef.current) { videoRef.current.srcObject = stream; } setIsCameraActive(true); } catch (err) { console.error("Error accessing camera:", err); setError("Could not access camera. Please check permissions or try uploading an image instead."); } }; const stopCamera = ()=>{ if (streamRef.current) { streamRef.current.getTracks().forEach((track)=>track.stop()); streamRef.current = null; } if (videoRef.current) { videoRef.current.srcObject = null; } setIsCameraActive(false); }; // Compress image to reduce file size const compressImage = (dataUrl, maxWidth = 800, quality = 0.7)=>{ return new Promise((resolve)=>{ const img = new Image(); img.src = dataUrl; img.onload = ()=>{ const canvas = document.createElement("canvas"); let width = img.width; let height = img.height; // Calculate new dimensions while maintaining aspect ratio if (width > maxWidth) { height = Math.round(height * maxWidth / width); width = maxWidth; } canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); // Convert to JPEG with reduced quality resolve(canvas.toDataURL("image/jpeg", quality)); }; }); }; const captureImage = async ()=>{ if (!videoRef.current) return; const canvas = document.createElement("canvas"); canvas.width = videoRef.current.videoWidth; canvas.height = videoRef.current.videoHeight; const ctx = canvas.getContext("2d"); ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height); const imageDataUrl = canvas.toDataURL("image/jpeg"); // Compress the image before setting it const compressedImage = await compressImage(imageDataUrl); setCapturedImage(compressedImage); setUploadedImage(null); stopCamera(); }; const handleFileUpload = async (e)=>{ const file = e.target.files[0]; if (!file) return; try { setError(null); // Read the file as data URL to compress it const reader = new FileReader(); reader.onload = async (event)=>{ try { // Compress the image const compressedImage = await compressImage(event.target.result); // Convert data URL to Blob for upload const response = await fetch(compressedImage); const blob = await response.blob(); // Create a new file from the blob const compressedFile = new File([ blob ], file.name, { type: "image/jpeg", lastModified: new Date().getTime() }); const { url, error: uploadError } = await upload({ file: compressedFile }); if (uploadError) { setError(uploadError); return; } setUploadedImage(url); setCapturedImage(null); stopCamera(); } catch (err) { console.error("Error compressing image:", err); setError("Failed to process image. Please try again."); } }; reader.readAsDataURL(file); } catch (err) { console.error("Error uploading image:", err); setError("Failed to upload image. Please try again."); } }; const resetImage = ()=>{ setCapturedImage(null); setUploadedImage(null); setAnalysisResult(null); setError(null); }; const analyzeImage = async ()=>{ const imageToAnalyze = capturedImage || uploadedImage; if (!imageToAnalyze) return; setIsAnalyzing(true); setError(null); try { let imageData = imageToAnalyze; if (imageToAnalyze.startsWith("data:image")) { imageData = imageToAnalyze.split(",")[1]; } const response = await fetch("/api/analyze-plant-image", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ imageData }) }); if (!response.ok) { throw new Error(`Failed to analyze image: ${response.status}`); } const result = await response.json(); if (result.error) { throw new Error(result.error); } setAnalysisResult(result); } catch (err) { console.error("Error analyzing image:", err); setError(err.message || "Failed to analyze image. Please try again."); } finally{ setIsAnalyzing(false); } }; useEffect(()=>{ return ()=>{ stopCamera(); }; }, []); const currentImage = capturedImage || uploadedImage; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F5F5F0]", __source: { fileName: "", lineNumber: 195, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#2F5233] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 196, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 197, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-leaf text-[#F2D785] mr-2", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text text-xl", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, "Ecopedia"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 203, 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: 204, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera mr-1", __source: { fileName: "", lineNumber: 208, 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: 210, columnNumber: 11 }, __self: this }, "Discover"), 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: 217, 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: 224, columnNumber: 13 }, __self: this }, "Sign In"))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 234, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 235, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 236, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-3xl text-[#2F5233]", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, "Plant Camera"), /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#2F5233] hover:text-[#F2D785] transition-colors", __source: { fileName: "", lineNumber: 240, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-inter", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }, "Back to Home"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 mb-8", __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 250, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-inter text-xl text-[#2F5233] mb-2", __source: { fileName: "", lineNumber: 251, columnNumber: 15 }, __self: this }, "Identify Your Plant"), /*#__PURE__*/ React.createElement("p", { className: "font-inter text-gray-600", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }, "Take a photo or upload an image of a plant to get detailed information about it")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded", __source: { fileName: "", lineNumber: 261, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 262, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 263, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-inter", __source: { fileName: "", lineNumber: 264, columnNumber: 19 }, __self: this }, error))), !currentImage && !analysisResult && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6 justify-center items-center mb-6", __source: { fileName: "", lineNumber: 270, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: isCameraActive ? stopCamera : activateCamera, className: `flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-inter text-white transition-colors ${isCameraActive ? "bg-red-500 hover:bg-red-600" : "bg-[#2F5233] hover:bg-[#3A6340]"}`, __source: { fileName: "", lineNumber: 271, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isCameraActive ? "fa-times" : "fa-camera"}`, __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }), isCameraActive ? "Stop Camera" : "Take Photo"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 285, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", id: "file-upload", name: "file-upload", accept: "image/*", onChange: handleFileUpload, className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer", disabled: uploadLoading || isCameraActive, __source: { fileName: "", lineNumber: 286, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-inter text-white bg-[#2F5233] hover:bg-[#3A6340] transition-colors ${uploadLoading ? "opacity-70 cursor-not-allowed" : ""}`, disabled: uploadLoading || isCameraActive, __source: { fileName: "", lineNumber: 295, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload", __source: { fileName: "", lineNumber: 301, columnNumber: 21 }, __self: this }), uploadLoading ? "Uploading..." : "Upload Image"))), isCameraActive && /*#__PURE__*/ React.createElement("div", { className: "relative mb-6", __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black rounded-lg overflow-hidden aspect-video", __source: { fileName: "", lineNumber: 310, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef, autoPlay: true, playsInline: true, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 311, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-0 right-0 flex justify-center", __source: { fileName: "", lineNumber: 318, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: captureImage, className: "w-16 h-16 rounded-full bg-white shadow-lg flex items-center justify-center border-4 border-[#2F5233]", __source: { fileName: "", lineNumber: 319, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full bg-[#F2D785]", __source: { fileName: "", lineNumber: 323, columnNumber: 21 }, __self: this })))), currentImage && !analysisResult && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 330, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 331, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentImage, alt: "Captured plant", className: "w-full rounded-lg shadow-md max-h-[500px] object-contain bg-gray-100", __source: { fileName: "", lineNumber: 332, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: resetImage, className: "absolute top-2 right-2 bg-white/80 text-red-500 w-8 h-8 rounded-full flex items-center justify-center hover:bg-white transition-colors", __source: { fileName: "", lineNumber: 337, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 341, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 345, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: analyzeImage, disabled: isAnalyzing, className: `flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-inter text-white bg-[#2F5233] hover:bg-[#3A6340] transition-colors ${isAnalyzing ? "opacity-70 cursor-not-allowed" : ""}`, __source: { fileName: "", lineNumber: 346, columnNumber: 19 }, __self: this }, isAnalyzing ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2", __source: { fileName: "", lineNumber: 355, columnNumber: 25 }, __self: this }), "Analyzing...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 360, columnNumber: 25 }, __self: this }), "Analyze Plant")))), analysisResult && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 370, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 371, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-inter text-lg text-[#2F5233]", __source: { fileName: "", lineNumber: 372, columnNumber: 19 }, __self: this }, "Analysis Results"), /*#__PURE__*/ React.createElement("button", { onClick: resetImage, className: "text-[#2F5233] hover:text-[#F2D785] transition-colors font-inter text-sm flex items-center gap-1", __source: { fileName: "", lineNumber: 375, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo", __source: { fileName: "", lineNumber: 379, columnNumber: 21 }, __self: this }), "Analyze Another Plant")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6", __source: { fileName: "", lineNumber: 384, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:w-1/3", __source: { fileName: "", lineNumber: 385, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentImage, alt: "Analyzed plant", className: "w-full rounded-lg shadow-md object-cover aspect-square", __source: { fileName: "", lineNumber: 386, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:w-2/3 bg-[#F5F5F0] p-4 rounded-lg", __source: { fileName: "", lineNumber: 393, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "prose font-inter text-gray-800", __source: { fileName: "", lineNumber: 394, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 mb-2", __source: { fileName: "", lineNumber: 395, columnNumber: 23 }, __self: this }, "Analyzed with ", analysisResult.model || "AI"), /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-line", __source: { fileName: "", lineNumber: 398, columnNumber: 23 }, __self: this }, analysisResult.analysis)))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#F5F5F0]/70 rounded-lg p-6 border border-[#2F5233]/20", __source: { fileName: "", lineNumber: 408, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-inter text-lg text-[#2F5233] mb-4", __source: { fileName: "", lineNumber: 409, columnNumber: 13 }, __self: this }, "Tips for Better Plant Identification"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 font-inter text-gray-700", __source: { fileName: "", lineNumber: 412, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 413, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-[#2F5233] mt-1 mr-2", __source: { fileName: "", lineNumber: 414, columnNumber: 17 }, __self: this }), "Take clear, well-lit photos of the plant"), /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 417, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-[#2F5233] mt-1 mr-2", __source: { fileName: "", lineNumber: 418, columnNumber: 17 }, __self: this }), "Include flowers or fruit if available, as they help with identification"), /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 422, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-[#2F5233] mt-1 mr-2", __source: { fileName: "", lineNumber: 423, columnNumber: 17 }, __self: this }), "Capture both the overall plant and close-ups of leaves"), /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 426, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-[#2F5233] mt-1 mr-2", __source: { fileName: "", lineNumber: 427, columnNumber: 17 }, __self: this }), "Avoid shadows or glare on the plant"), /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 430, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-[#2F5233] mt-1 mr-2", __source: { fileName: "", lineNumber: 431, columnNumber: 17 }, __self: this }), "Make sure the plant is the main subject in the frame"))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#2F5233] text-white py-8 mt-12", __source: { fileName: "", lineNumber: 439, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 440, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center", __source: { fileName: "", lineNumber: 441, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6 md:mb-0", __source: { fileName: "", lineNumber: 442, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-xl mb-2", __source: { fileName: "", lineNumber: 443, columnNumber: 15 }, __self: this }, "Ecopedia"), /*#__PURE__*/ React.createElement("p", { className: "font-inter text-sm text-gray-300", __source: { fileName: "", lineNumber: 444, 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: 448, 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: 449, 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: 455, 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: 461, 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: 469, 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: 475, 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: 485, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-inter text-xs text-gray-400", __source: { fileName: "", lineNumber: 486, columnNumber: 13 }, __self: this }, "© 2025 Ecopedia. All rights reserved.")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 493, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } `)); }