🌱 Crop & Weed Detection 🌿

\n Upload a field image to detect crops and weeds\n

\n \n {image && (\n

\n $\"Field$ \n

\n )}\n {prediction && (\n

Detection Results

Crop Detection 🌾

\n {prediction.crops.map((crop, index) => (\n

\n {crop.type}: {(crop.coverage * 100).toFixed(2)}% coverage\n

\n ))}\n

Weed Detection 🌱

\n {prediction.weeds.map((weed, index) => (\n

\n {weed.type}: {(weed.density * 100).toFixed(2)}% density\n

\n ))}\n

Recommended Action 🚜

{prediction.recommendation}

\n \n View Source\n \n

\n )}\n

\n );\n}\n\nconst styles = {\n container: {\n fontFamily: 'Arial, sans-serif',\n maxWidth: '700px',\n margin: '0 auto',\n padding: '20px',\n textAlign: 'center',\n backgroundColor: '#f4f4f4'\n },\n description: {\n color: '#666',\n marginBottom: '20px'\n },\n fileInput: {\n margin: '20px 0',\n padding: '10px',\n backgroundColor: 'white',\n borderRadius: '5px'\n },\n uploadedImage: {\n maxWidth: '100%',\n maxHeight: '400px',\n objectFit: 'contain',\n borderRadius: '10px',\n boxShadow: '0 4px 6px rgba(0,0,0,0.1)'\n },\n predictionResult: {\n marginTop: '20px',\n padding: '20px',\n backgroundColor: 'white',\n borderRadius: '10px',\n boxShadow: '0 4px 6px rgba(0,0,0,0.1)'\n },\n resultGrid: {\n display: 'flex',\n justifyContent: 'space-between',\n marginBottom: '20px'\n },\n resultItem: {\n margin: '10px 0',\n textAlign: 'left'\n },\n coverageBar: {\n height: '10px',\n borderRadius: '5px',\n marginTop: '5px'\n },\n recommendation: {\n backgroundColor: '#e9f5e9',\n padding: '15px',\n borderRadius: '5px',\n marginTop: '20px'\n },\n sourceLink: {\n display: 'block',\n marginTop: '20px',\n color: '#666'\n }\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === 'POST' && request.url.includes('/predict')) {\n try {\n const imageBlob = await request.blob();\n \n // Enhanced mock prediction for crop and weed detection\n const mockPrediction = {\n crops: [\n { \n type: 'Corn', \n coverage: 0.75, \n health: 'healthy' \n },\n { \n type: 'Soybean', \n coverage: 0.20, \n health: 'moderate' \n }\n ],\n weeds: [\n { \n type: 'Pigweed', \n density: 0.15 \n },\n { \n type: 'Lambsquarters', \n density: 0.05 \n }\n ],\n recommendation: 'Targeted herbicide application recommended for pigweed. Consider spot treatment to minimize crop impact.'\n };\n\n return new Response(JSON.stringify(mockPrediction), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n return new Response(`\n \n \n Crop & Weed Detection\n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}","createdAt",["D",1740504499883],"version",1,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","ihbuhs04","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydFhYcnJqS3lzWlhUZ1pwRFNmQkx3TTBnYTkifQ","forkedVal","interval","slug","ihbuhs04/agriculturePlantClassifier","description","Overview This project is a machine learning-based web application designed to detect and classify plants as crops or weeds. The model is built using TensorFlow.js and MobileNet, allowing users to upload images and receive predictions in real time. 🚀 Features Real-time plant classification using MobileNet. User-friendly UI for uploading and analyzing images. Visual feedback indicating whether the uploaded image is a crop or a weed. Deployed at: Crop & Weed Detector 🛠️ Tech Stack Frontend: React 18, HTML, CSS Machine Learning: TensorFlow.js, MobileNet Model Deployment: Val.Town 📥 Installation & Setup To run the project locally, follow these steps: Clone the repository: git clone https://github.com/your-username/crop-weed-detector.git\ncd crop-weed-detector Install dependencies: npm install Start the development server: npm run dev Open the application in your browser at http://localhost:3000 📸 How to Use Click on the Upload Image button. Select an image of a crop or weed. The model will analyze the image and display a prediction with confidence score. The background color will indicate whether the plant is a crop (green) or weed (red). 🔥 Future Improvements Train a custom model for higher accuracy on agriculture datasets. Add batch image processing for multiple uploads. Optimize performance for mobile and low-end devices. Enhance UI with better loading indicators and result visualization. 📝 License This project is open-source and available under the MIT License. 💡 Contributors Shubhi Mishra Feel free to contribute by submitting pull requests!","versions",[141,144],{"_118":119,"_142":-5,"_116":143,"_113":111},"prId",["D",1740504499883],{"_118":31,"_142":-5,"_116":145,"_113":146},["D",1740504408779],"b1ac6866-f39d-11ef-9b44-569c3dd06744","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":154,"_155":156,"_94":157},"single","redirect","/v/ihbuhs04/agriculturePlantClassifier/versions",{"_113":146,"_114":158,"_118":31,"_116":159,"_160":99,"_100":101,"_108":109,"_129":130,"_11":96,"_161":-5,"_162":-5,"_163":-5,"_151":26,"_135":136},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Agriculture-specific pre-trained model for crop/plant detection\n// Using a lightweight, efficient model for web inference\nfunction App() {\n const [image, setImage] = useState(null);\n const [prediction, setPrediction] = useState(null);\n\n const handleImageUpload = async (event) => {\n const file = event.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onloadend = async () => {\n setImage(reader.result);\n try {\n const response = await fetch('/predict', {\n method: 'POST',\n body: file\n });\n const result = await response.json();\n setPrediction(result);\n } catch (error) {\n console.error(\"Prediction error:\", error);\n }\n };\n reader.readAsDataURL(file);\n }\n };\n\n return (\n

🌾 Agricultural Plant Classifier 🌿

\n \n {image && (\n

\n $\"Uploaded\"$ \n

\n )}\n {prediction && (\n

Prediction Results:

{JSON.stringify(prediction, null, 2)}

\n )}\n \n View Source\n \n

\n );\n}\n\nconst styles = {\n container: {\n fontFamily: 'Arial, sans-serif',\n maxWidth: '600px',\n margin: '0 auto',\n padding: '20px',\n textAlign: 'center'\n },\n fileInput: {\n margin: '20px 0'\n },\n uploadedImage: {\n maxWidth: '100%',\n maxHeight: '300px',\n objectFit: 'contain'\n },\n predictionResult: {\n marginTop: '20px',\n padding: '10px',\n backgroundColor: '#f0f0f0',\n borderRadius: '5px'\n },\n sourceLink: {\n marginTop: '20px',\n display: 'block',\n color: '#666'\n }\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === 'POST' && request.url.includes('/predict')) {\n try {\n // In a real-world scenario, you'd use a more sophisticated ML library\n // This is a placeholder for agricultural model inference\n const imageBlob = await request.blob();\n \n // Simulated prediction for demonstration\n const mockPrediction = {\n crop_type: ['Wheat', 'Corn', 'Rice'],\n confidence_scores: [0.75, 0.15, 0.10],\n health_status: 'Healthy',\n growth_stage: 'Mature'\n };\n\n return new Response(JSON.stringify(mockPrediction), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n return new Response(`\n \n \n Agricultural Plant Classifier\n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}",["D",1740504408779],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

agriculturePlantClassifier

Version 0