├── .gitignore ├── README.md ├── assets ├── cropPage.png ├── demo.gif ├── demo.mp4 ├── farmers.jpg ├── fertilizerPage.png ├── home.png └── result.png ├── index.html ├── package-lock.json ├── package.json ├── public ├── Model │ ├── license.txt │ ├── scene.bin │ ├── scene.gltf │ ├── scene_1.gif │ ├── textures - Copy │ │ ├── GroundMat_baseColor.jpeg │ │ ├── GroundMat_metallicRoughness.png │ │ ├── GroundMat_normal.png │ │ ├── Maize_2_baseColor.jpeg │ │ ├── Maize_2_metallicRoughness.png │ │ ├── Maize_2_normal.png │ │ ├── Maize_alpha_baseColor.png │ │ ├── Maize_alpha_metallicRoughness.png │ │ ├── Maize_alpha_normal.png │ │ ├── Maize_baseColor.jpeg │ │ ├── Maize_metallicRoughness.png │ │ ├── Maize_normal.png │ │ ├── ScareMat_baseColor.jpeg │ │ ├── ScareMat_metallicRoughness.png │ │ ├── ScareMat_normal.png │ │ ├── TreeMat_baseColor.jpeg │ │ ├── TreeMat_metallicRoughness.png │ │ ├── TreeMat_normal.png │ │ ├── WoodMat_baseColor.jpeg │ │ ├── WoodMat_metallicRoughness.png │ │ └── WoodMat_normal.png │ └── textures │ │ ├── GroundMat_baseColor.jpeg │ │ ├── GroundMat_metallicRoughness.png │ │ ├── GroundMat_normal.png │ │ ├── Maize_2_baseColor.jpeg │ │ ├── Maize_2_metallicRoughness.png │ │ ├── Maize_2_normal.png │ │ ├── Maize_alpha_baseColor.png │ │ ├── Maize_alpha_metallicRoughness.png │ │ ├── Maize_alpha_normal.png │ │ ├── Maize_baseColor.jpeg │ │ ├── Maize_metallicRoughness.png │ │ ├── Maize_normal.png │ │ ├── ScareMat_baseColor.jpeg │ │ ├── ScareMat_metallicRoughness.png │ │ ├── ScareMat_normal.png │ │ ├── TreeMat_baseColor.jpeg │ │ ├── TreeMat_metallicRoughness.png │ │ ├── TreeMat_normal.png │ │ ├── WoodMat_baseColor.jpeg │ │ ├── WoodMat_metallicRoughness.png │ │ └── WoodMat_normal.png ├── icon.svg ├── images │ ├── crops │ │ ├── apple.jpg │ │ ├── banana.jpg │ │ ├── blackgram.jpg │ │ ├── chickpea.jpg │ │ ├── coconut.jpg │ │ ├── coffee.jpg │ │ ├── cotton.jpg │ │ ├── grapes.jpg │ │ ├── jute.jpg │ │ ├── kidneybeans.jpg │ │ ├── lentil.jpg │ │ ├── maize.jpg │ │ ├── mango.jpg │ │ ├── mothbeans.jpg │ │ ├── mungbean.jpg │ │ ├── muskmelon.jpg │ │ ├── orange.jpg │ │ ├── papaya.jpg │ │ ├── pigeonpea.jpg │ │ ├── pomegranate.jpg │ │ ├── rice.jpg │ │ └── watermelon.jpg │ └── fertilizers │ │ ├── DAP.jpg │ │ ├── default.jpg │ │ └── urea.jpg └── robots.txt ├── src ├── App.css ├── App.jsx ├── components │ ├── 3dmodel │ │ ├── Model.css │ │ └── Model.jsx │ ├── crop │ │ ├── CropOutputs.jsx │ │ ├── CropPage.css │ │ └── CropPage.jsx │ ├── fertilizer │ │ ├── FertilizerOutputs.jsx │ │ ├── FertilizerPage.css │ │ └── FertilizerPage.jsx │ ├── header │ │ ├── Header.css │ │ └── Header.jsx │ ├── home │ │ ├── HomePage.css │ │ └── HomePage.jsx │ └── result │ │ ├── CropResult.css │ │ ├── CropResult.jsx │ │ ├── FertilizerResult.css │ │ └── FertilizerResult.jsx ├── index.css └── index.jsx └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

👩‍🌾🌿 CropFusionAI

2 |

🔥 Official Website 👉 https://cropfusionai.vercel.app

3 | 4 | An Open source Crop and Fertilizer Recommendation tool for Farmers. Machine Learning enabled system that recommends the best crop to grow from across 22 different classes of crops based on various metrics including soil type, rainfall, humidity, and nutrient levels. 5 | 6 |
7 | 8 |
9 | 10 | ## 🎯 Objective 11 | The objective of this project is to use AI and open source technology to help poor farmers in India grow the best crops and fertilize like a pro. Our tool provides reliable and accessible recommendations based on local soil and weather conditions, helping farmers optimize their crop yields and improve their economic livelihoods. 12 | 13 |
14 | 15 |
16 | 17 | By using open source technologies, we also hope to foster a community of farmers and developers who can collaborate and continuously improve the accuracy and utility of the tool. Let's use the power of AI and open source principles to empower poor farmers in India and beyond! 18 | 19 | ## Project Workflow 20 | Below are some of the stages of this project for sucessfull development and deployment of both frontend and backend services. 21 | 22 | - Data Collection & ML model training 23 | - In this stage we collect the required training/testing datasets for building the crop & fertilizer recommendation models. Find training notebook [here.](https://github.com/deepeshdm/CropFusionAI-Backend/tree/main/notebooks) 24 | - Backend Deployment of ML model API's 25 | - Once we have build the ML models we deploy and expose them as API. In our case, we have opted for FastAPI for building the backend services [here](https://github.com/deepeshdm/CropFusionAI-Backend) 26 | - Frontend Interface with 3D model 27 | - Once the backend has been setup , we create a user friendly frontend application with ReactJS, so that even non-technical people can easily interact with the ML models. 28 | 29 |
30 | 31 |
32 | 33 | ## 👩‍💻To Run (Locally) 34 | 35 | 1. Git clone the project repository on your local system 36 | ```javascipt 37 | git clone https://github.com/deepeshdm/CropFusionAI.git 38 | cd CropFusionAI 39 | ``` 40 | 41 | 2. Install dependencies in package.json 42 | ```javascipt 43 | npm install 44 | ``` 45 | 46 | 3. Deploy project on local server 47 | ```javascipt 48 | npm start 49 | ``` 50 | 51 | 52 | ## Improvements to make 53 | - Optimizing the 3D model to reduce loading time. 54 | - Training the ML models on a larger dataset to provide generalized results. 55 | - Adding cache support to speed up output time. 56 | 57 | 58 | ## Links to Resources 59 | - Backend Code for Rest API's [here](https://github.com/deepeshdm/CropFusionAI-Backend) 60 | - Crop Recommendation Dataset [here](https://www.kaggle.com/datasets/atharvaingle/crop-recommendation-dataset) 61 | - Fertilizer Recommendation Dataset [here](https://www.kaggle.com/datasets/gdabhishek/fertilizer-prediction) 62 | - 3D Model [here](https://sketchfab.com/3d-models/corn-field-scarecrow-af3361986a744421bc93c8a78caf7d89) 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /assets/cropPage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/assets/cropPage.png -------------------------------------------------------------------------------- /assets/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/assets/demo.gif -------------------------------------------------------------------------------- /assets/demo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/assets/demo.mp4 -------------------------------------------------------------------------------- /assets/farmers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/assets/farmers.jpg -------------------------------------------------------------------------------- /assets/fertilizerPage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/assets/fertilizerPage.png -------------------------------------------------------------------------------- /assets/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/assets/home.png -------------------------------------------------------------------------------- /assets/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/assets/result.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CropFusionAI 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cropfusionai", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.10.5", 7 | "@emotion/styled": "^11.10.5", 8 | "@mui/material": "^5.11.1", 9 | "@mui/system": "^5.11.1", 10 | "@react-three/drei": "^9.47.1", 11 | "@react-three/fiber": "^8.9.1", 12 | "@testing-library/jest-dom": "^5.16.5", 13 | "@testing-library/react": "^13.4.0", 14 | "@testing-library/user-event": "^13.5.0", 15 | "node-fetch": "^3.3.0", 16 | "react": "^18.2.0", 17 | "react-dom": "^18.2.0", 18 | "react-lazy-load-image-component": "^1.5.6", 19 | "react-router-dom": "^6.5.0", 20 | "react-spinners": "^0.13.7", 21 | "stats.js": "^0.17.0", 22 | "three": "^0.147.0", 23 | "web-vitals": "^2.1.4" 24 | }, 25 | "scripts": { 26 | "start": "vite", 27 | "build": "vite build" 28 | }, 29 | "eslintConfig": { 30 | "extends": [ 31 | "react-app", 32 | "react-app/jest" 33 | ] 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | }, 47 | "devDependencies": { 48 | "@vitejs/plugin-react": "^3.0.1", 49 | "vite": "^4.0.4", 50 | "vite-plugin-svgr": "^2.4.0", 51 | "vite-tsconfig-paths": "^4.0.3" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /public/Model/license.txt: -------------------------------------------------------------------------------- 1 | Model Information: 2 | * title: Corn field - scarecrow 3 | * source: https://sketchfab.com/3d-models/corn-field-scarecrow-af3361986a744421bc93c8a78caf7d89 4 | * author: gilles.schaeck (https://sketchfab.com/gilles.schaeck) 5 | 6 | Model License: 7 | * license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) 8 | * requirements: Author must be credited. Commercial use is allowed. 9 | 10 | If you use this 3D model in your project be sure to copy paste this credit wherever you share it: 11 | This work is based on "Corn field - scarecrow" (https://sketchfab.com/3d-models/corn-field-scarecrow-af3361986a744421bc93c8a78caf7d89) by gilles.schaeck (https://sketchfab.com/gilles.schaeck) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) -------------------------------------------------------------------------------- /public/Model/scene.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/scene.bin -------------------------------------------------------------------------------- /public/Model/scene_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/scene_1.gif -------------------------------------------------------------------------------- /public/Model/textures - Copy/GroundMat_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/GroundMat_baseColor.jpeg -------------------------------------------------------------------------------- /public/Model/textures - Copy/GroundMat_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/GroundMat_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/GroundMat_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/GroundMat_normal.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/Maize_2_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/Maize_2_baseColor.jpeg -------------------------------------------------------------------------------- /public/Model/textures - Copy/Maize_2_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/Maize_2_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/Maize_2_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/Maize_2_normal.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/Maize_alpha_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/Maize_alpha_baseColor.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/Maize_alpha_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/Maize_alpha_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/Maize_alpha_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/Maize_alpha_normal.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/Maize_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/Maize_baseColor.jpeg -------------------------------------------------------------------------------- /public/Model/textures - Copy/Maize_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/Maize_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/Maize_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/Maize_normal.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/ScareMat_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/ScareMat_baseColor.jpeg -------------------------------------------------------------------------------- /public/Model/textures - Copy/ScareMat_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/ScareMat_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/ScareMat_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/ScareMat_normal.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/TreeMat_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/TreeMat_baseColor.jpeg -------------------------------------------------------------------------------- /public/Model/textures - Copy/TreeMat_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/TreeMat_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/TreeMat_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/TreeMat_normal.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/WoodMat_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/WoodMat_baseColor.jpeg -------------------------------------------------------------------------------- /public/Model/textures - Copy/WoodMat_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/WoodMat_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures - Copy/WoodMat_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures - Copy/WoodMat_normal.png -------------------------------------------------------------------------------- /public/Model/textures/GroundMat_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/GroundMat_baseColor.jpeg -------------------------------------------------------------------------------- /public/Model/textures/GroundMat_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/GroundMat_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures/GroundMat_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/GroundMat_normal.png -------------------------------------------------------------------------------- /public/Model/textures/Maize_2_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/Maize_2_baseColor.jpeg -------------------------------------------------------------------------------- /public/Model/textures/Maize_2_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/Maize_2_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures/Maize_2_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/Maize_2_normal.png -------------------------------------------------------------------------------- /public/Model/textures/Maize_alpha_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/Maize_alpha_baseColor.png -------------------------------------------------------------------------------- /public/Model/textures/Maize_alpha_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/Maize_alpha_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures/Maize_alpha_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/Maize_alpha_normal.png -------------------------------------------------------------------------------- /public/Model/textures/Maize_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/Maize_baseColor.jpeg -------------------------------------------------------------------------------- /public/Model/textures/Maize_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/Maize_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures/Maize_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/Maize_normal.png -------------------------------------------------------------------------------- /public/Model/textures/ScareMat_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/ScareMat_baseColor.jpeg -------------------------------------------------------------------------------- /public/Model/textures/ScareMat_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/ScareMat_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures/ScareMat_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/ScareMat_normal.png -------------------------------------------------------------------------------- /public/Model/textures/TreeMat_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/TreeMat_baseColor.jpeg -------------------------------------------------------------------------------- /public/Model/textures/TreeMat_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/TreeMat_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures/TreeMat_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/TreeMat_normal.png -------------------------------------------------------------------------------- /public/Model/textures/WoodMat_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/WoodMat_baseColor.jpeg -------------------------------------------------------------------------------- /public/Model/textures/WoodMat_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/WoodMat_metallicRoughness.png -------------------------------------------------------------------------------- /public/Model/textures/WoodMat_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/Model/textures/WoodMat_normal.png -------------------------------------------------------------------------------- /public/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /public/images/crops/apple.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/apple.jpg -------------------------------------------------------------------------------- /public/images/crops/banana.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/banana.jpg -------------------------------------------------------------------------------- /public/images/crops/blackgram.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/blackgram.jpg -------------------------------------------------------------------------------- /public/images/crops/chickpea.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/chickpea.jpg -------------------------------------------------------------------------------- /public/images/crops/coconut.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/coconut.jpg -------------------------------------------------------------------------------- /public/images/crops/coffee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/coffee.jpg -------------------------------------------------------------------------------- /public/images/crops/cotton.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/cotton.jpg -------------------------------------------------------------------------------- /public/images/crops/grapes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/grapes.jpg -------------------------------------------------------------------------------- /public/images/crops/jute.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/jute.jpg -------------------------------------------------------------------------------- /public/images/crops/kidneybeans.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/kidneybeans.jpg -------------------------------------------------------------------------------- /public/images/crops/lentil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/lentil.jpg -------------------------------------------------------------------------------- /public/images/crops/maize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/maize.jpg -------------------------------------------------------------------------------- /public/images/crops/mango.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/mango.jpg -------------------------------------------------------------------------------- /public/images/crops/mothbeans.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/mothbeans.jpg -------------------------------------------------------------------------------- /public/images/crops/mungbean.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/mungbean.jpg -------------------------------------------------------------------------------- /public/images/crops/muskmelon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/muskmelon.jpg -------------------------------------------------------------------------------- /public/images/crops/orange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/orange.jpg -------------------------------------------------------------------------------- /public/images/crops/papaya.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/papaya.jpg -------------------------------------------------------------------------------- /public/images/crops/pigeonpea.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/pigeonpea.jpg -------------------------------------------------------------------------------- /public/images/crops/pomegranate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/pomegranate.jpg -------------------------------------------------------------------------------- /public/images/crops/rice.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/rice.jpg -------------------------------------------------------------------------------- /public/images/crops/watermelon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/crops/watermelon.jpg -------------------------------------------------------------------------------- /public/images/fertilizers/DAP.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/fertilizers/DAP.jpg -------------------------------------------------------------------------------- /public/images/fertilizers/default.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/fertilizers/default.jpg -------------------------------------------------------------------------------- /public/images/fertilizers/urea.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepeshdm/CropFusionAI/9089bccf58afa0fb078a4a59519e23f639a95896/public/images/fertilizers/urea.jpg -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | import './App.css'; 3 | import { Route, Routes, Navigate } from 'react-router-dom'; 4 | import { ModelLoader } from './components/home/HomePage.jsx'; 5 | import { CropPage } from './components/crop/CropPage.jsx'; 6 | import { FertilizerPage } from './components/fertilizer/FertilizerPage.jsx'; 7 | import { CropResult } from './components/result/CropResult'; 8 | import { FertilizerResult } from './components/result/FertilizerResult'; 9 | 10 | function NotFound(){ 11 | // Redirect all unknown paths to / 12 | return 13 | } 14 | 15 | function App() { 16 | return ( 17 | 18 | }/> 19 | }/> 20 | }/> 21 | }/> 22 | }/> 23 | } /> 24 | 25 | ); 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /src/components/3dmodel/Model.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .container{ 4 | position: absolute; 5 | z-index: -1; 6 | overflow: hidden; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/3dmodel/Model.jsx: -------------------------------------------------------------------------------- 1 | import "./Model.css" 2 | import { useRef } from 'react'; 3 | import { Canvas, useFrame } from '@react-three/fiber' 4 | import { OrbitControls, PerspectiveCamera, useHelper, Sparkles } from '@react-three/drei'; 5 | import { PointLightHelper } from 'three' 6 | 7 | //------------------------------------------------------------------ 8 | 9 | function Model(props) { 10 | 11 | console.log("Some Model Textures will not be loaded to improve speed.") 12 | 13 | const model = props.model; 14 | 15 | // increase model size 16 | model.scene.scale.set(1, 1, 1) 17 | 18 | // change position of model 19 | model.scene.position.set(-1, 0.1, 4) 20 | 21 | // rotate the model 22 | model.scene.rotation.set(0, 3, 0) 23 | 24 | return 25 | } 26 | 27 | //------------------------------------------------------------------ 28 | 29 | // Add Lights with Helper 30 | 31 | const Light = () => { 32 | const ref = useRef() 33 | // useHelper(ref, PointLightHelper, 0.3) 34 | 35 | useFrame(() => { 36 | const time = window.performance.now() 37 | const radius = 4 38 | const speed = 0.001 39 | const x = radius * Math.cos(time * speed) 40 | ref.current.position.set(x, 4, 0) 41 | }) 42 | 43 | return ( 44 | <> 45 | 46 | 47 | ) 48 | } 49 | 50 | const FarmLight = () => { 51 | const ref = useRef() 52 | // useHelper(ref, PointLightHelper, 0.3) 53 | return ( 54 | <> 55 | 56 | 57 | ) 58 | } 59 | 60 | //------------------------------------------------------------------ 61 | 62 | const alpha = 0 // canvas background opacity 63 | 64 | const ThreeApp = (props) => { 65 | 66 | return ( 67 | state.gl.setClearAlpha(alpha)} > 68 | 69 | {/* */} 70 | 71 | 72 | 73 | 74 | 75 | 76 | ) 77 | } 78 | 79 | const Background3D = (props) => { 80 | const CanvasSize = { height: "100vh", width: "100vw" } 81 | return ( 82 |
83 | 84 |
85 | ) 86 | } 87 | 88 | export default Background3D; -------------------------------------------------------------------------------- /src/components/crop/CropOutputs.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | export const labels = ["rice", "maize", "chickpea", "kidneybeans", "pigeonpeas", 4 | "mothbeans", "mungbean", "blackgram", "lentil", "pomegranate", 5 | "banana", "mango", "grapes", "watermelon", "muskmelon", "apple", 6 | "orange", "papaya", "coconut", "cotton", "jute", "coffee"] 7 | 8 | 9 | // Image paths for each output crop 10 | export const label_image_paths = { 11 | "rice" : "images/crops/rice.jpg", 12 | "maize": "images/crops/maize.jpg", 13 | "chickpea": "images/crops/chickpea.jpg", 14 | "kidneybeans": "images/crops/kidneybeans.jpg", 15 | "pigeonpeas": "images/crops/pigeonpea.jpg", 16 | "mothbeans": "images/crops/mothbeans.jpg", 17 | "mungbean": "images/crops/mungbean.jpg", 18 | "blackgram": "images/crops/blackgram.jpg", 19 | "lentil": "images/crops/lentil.jpg", 20 | "pomegranate": "images/crops/pomegranate.jpg", 21 | "banana": "images/crops/banana.jpg", 22 | "mango": "images/crops/mango.jpg", 23 | "grapes": "images/crops/grapes.jpg", 24 | "watermelon": "images/crops/watermelon.jpg", 25 | "muskmelon": "images/crops/muskmelon.jpg", 26 | "apple": "images/crops/apple.jpg", 27 | "orange": "images/crops/orange.jpg", 28 | "papaya": "images/crops/papaya.jpg", 29 | "coconut": "images/crops/coconut.jpg", 30 | "cotton": "images/crops/cotton.jpg", 31 | "jute": "images/crops/jute.jpg", 32 | "coffee": "images/crops/coffee.jpg", 33 | } 34 | 35 | 36 | // Descriptions for each crop predicted by the ML model. 37 | export const output_descriptions = { 38 | 39 | "rice": `Rice is a highly adaptable crop that can thrive in a wide range of soil types, including those with high levels of nitrogen, phosphorous, and humidity. It is a great crop for farmers who want to make the most of their rainfall, as it is extremely efficient at using water and can yield up to 10 times more grain per unit of water compared to other cereal crops. Rice is also a great choice for farmers who are looking to diversify their crop rotation, as it can help to improve soil health by fixing nitrogen back into the soil. Plus, rice is a staple food for billions of people around the world, so with the right marketing strategy, you could potentially sell your rice for a premium price. And let's be real, who doesn't love a good bowl of rice? It's the perfect blank canvas for any type of dish, and it's super versatile - you can cook it in a rice cooker, on the stovetop, or even in the microwave. So if you're looking to add a tasty and profitable crop to your farm, consider giving rice a try. With the right soil conditions and a little bit of TLC, you could be well on your way to a successful rice harvest.`, 40 | "maize": ` If you're looking to add some diversity to your crop rotation, maize might be the perfect choice for you! Not only is it a highly nutritious and versatile grain, but it's also well-suited to a variety of soil conditions. With its moderate nitrogen requirements and ability to thrive in both high and low phosphorus soils, maize is a reliable choice no matter what your farm's nutrient profile looks like. Plus, with its tolerance for a range of rainfall and humidity levels, you won't have to worry about the weather ruining your harvest. And if you're concerned about pH, maize is a pretty forgiving crop - it can grow in soils with a pH range of 5.5 to 7.5. So why wait? Start planting some maize today and watch your profits grow! `, 41 | "chickpea": ` Chickpeas are a versatile and nutritious crop that can thrive in a variety of soil conditions. In terms of nutrients, they are known to be a good source of nitrogen, phosphorous, and other minerals that can help improve soil health over time. They are also relatively drought-tolerant and can thrive in areas with moderate rainfall, making them a great choice for farmers dealing with unpredictable weather patterns. In terms of pH levels, chickpeas are known to be adaptable and can grow in soil with a wide range of pH levels. This makes them a great choice for farmers who may not have the time or resources to constantly monitor and adjust their soil pH. And let's not forget about the delicious, protein-packed hummus that can be made from chickpeas! So not only are you helping to improve the health of your soil, you're also providing a tasty and healthy food source for your family and community. Plus, with all the chickpea jokes out there (chickpeas are "humor-ous," get it?), you'll have plenty of material for a good laugh while you're out in the fields. `, 42 | "kidneybeans": ` Kidney beans are an excellent choice for farmers looking to add a high-yielding and nutritious crop to their fields. Not only do these beans thrive in well-draining soil with a pH between 6.0 and 6.8, but they also require moderate levels of nitrogen and phosphorous to grow to their full potential. Additionally, kidney beans are well-suited to areas with moderate rainfall and humidity, making them a great option for farmers who may be facing water restrictions or drought conditions. With their high protein content and versatility in the kitchen, kidney beans are sure to be a hit with both farmers and consumers alike. So why not give them a try? Your fields (and taste buds) will thank you! `, 43 | "pigeonpeas": ` Pigeonpeas are a great crop for any farmer looking to diversify their portfolio and bring in some tasty, nutritious legumes. Not only are they packed with protein and other essential nutrients, but they're also relatively easy to grow, especially if you have soil with a moderate pH level and plenty of phosphorous and nitrogen available. Plus, pigeonpeas are known to be quite drought-tolerant, making them a great option for areas with variable rainfall patterns. And let's not forget about the humidity - these little legumes love a good, humid environment, so if your fields tend to get a little steamy, pigeonpeas will thrive. So go ahead and give them a try - your taste buds (and your wallet) will thank you! `, 44 | "mothbeans": ` Mothbeans, also known as matki or dew beans, are a nutritious and drought-resistant legume that are perfect for growing in your farm. With their high levels of protein and low maintenance requirements, they are an excellent choice for any farmer looking to diversify their crop rotation. Plus, they have a unique and delicious flavor that will be sure to impress your customers. When it comes to soil properties, mothbeans are quite adaptable. They can thrive in a variety of soil types, including those with moderate levels of nitrogen and phosphorous. They also prefer a slightly acidic soil pH, so if your farm's soil is on the alkaline side, don't worry - a little bit of lime can go a long way in balancing out the pH. As far as rainfall and humidity go, mothbeans are quite drought-tolerant, but they do prefer a bit of moisture to help them grow. So, if you have a farm with average rainfall and humidity levels, you're in luck - mothbeans will be right at home. Overall, if you're looking to add a tasty and low-maintenance crop to your farm, give mothbeans a try - you won't be disappointed!`, 45 | "mungbean": ` "Mungbeans are a great crop to grow on your farm, especially if you have well-draining soil with a pH between 6.0 and 6.5. These little beans are packed with nitrogen-fixing power, which means they'll help enrich your soil as they grow. Plus, they're relatively drought-tolerant, so you won't have to worry about watering them too often. Just make sure you have enough rainfall (or irrigation) to get them started, and they'll take care of the rest. And if you're looking to add a little variety to your rotation, mungbeans are a great option. They're a great source of protein and can be used in a variety of dishes, from soups and stews to sprouts and salads. Just be sure to give your mungbean plants plenty of sunshine and a little bit of TLC, and you'll be reaping the rewards in no time. So go ahead and give mungbeans a try – your soil (and taste buds) will thank you!" `, 46 | "blackgram": ` Growing blackgram can be a great choice for your farm! Not only is it a highly nutritious pulse crop, but it's also relatively easy to grow. First off, blackgram thrives in well-draining soil with a pH level between 6 and 7.5, and it prefers moderate to high levels of humidity. Luckily, it sounds like you already have the perfect soil conditions for this crop! In terms of nutrients, blackgram is a bit of a hungry plant. It loves nitrogen and phosphorous, so be sure to give it a little extra TLC with some well-balanced fertilizers. And when it comes to rainfall, blackgram is pretty adaptable. It can handle anywhere from 20-100 inches of rain per year, so whether you're dealing with a drought or a deluge, this crop should be able to hold its own. Overall, blackgram is a reliable, high-yield crop that's sure to bring in some tasty profits for your farm. So why not give it a try? You might just find that it's the pulse of the party! `, 47 | "lentil": ` Lentils are an excellent crop to consider growing on your farm, especially if you have soil with a good balance of nutrients and the right amount of rainfall and humidity. They are a legume, which means they have the ability to fix nitrogen from the air and add it to the soil, improving its fertility and helping to reduce the need for synthetic fertilizers. Lentils also have a relatively low requirement for phosphorous, so they can thrive in soil with lower levels of this nutrient. In terms of pH, lentils prefer slightly acidic soil, around a pH of 6.0 to 6.5. So if you've got soil that falls within that range, you're in luck! Additionally, lentils are a hardy crop that can withstand drought conditions better than some other grains, making them a good choice for farmers in areas with variable rainfall. All in all, lentils are a nutritious and profitable crop that can bring a variety of benefits to your farm. Plus, they're delicious in a variety of dishes, so you'll have plenty of tasty meals to enjoy as well! `, 48 | "pomegranate": ` Pomegranates are a great crop to grow for a variety of reasons. For one, they thrive in well-draining soil with a pH level between 6.0 and 7.0, just like the soil you have on your farm! They also prefer a sunny location with moderate humidity, which is perfect for your region. In terms of nutrients, pomegranates love a little bit of nitrogen and phosphorous, both of which are essential for healthy growth. And as an added bonus, pomegranates are drought-tolerant, so they can withstand dry spells without any problems. Plus, who wouldn't want to add a little color and flavor to their farm with these beautiful, juicy fruit? Trust me, your customers will thank you for introducing pomegranates to your crop lineup. `, 49 | "banana": ` If you're a farmer looking to diversify your crops and add some tropical flavor to your farm, consider planting bananas! These delicious and versatile fruits are relatively low maintenance and easy to grow. When it comes to soil, bananas prefer well-draining soil with a pH level between 5.5 and 6.5. As long as you can provide these conditions, you'll be well on your way to a successful banana harvest. One great thing about bananas is that they don't require a lot of fancy nutrients to thrive. In fact, they are known for being able to take care of themselves when it comes to things like Nitrogen and Phosphorous. All they really need is plenty of rainfall and humidity to thrive. So if you've got a humid climate with regular rain, you're in luck! In addition to being easy to grow and delicious, bananas also add a touch of paradise to any farm. With their tropical vibe, they're sure to be a hit with visitors and customers alike. So don't be afraid to give bananas a try - you won't be disappointed! `, 50 | "mango": ` If you're a farmer looking to add some tropical flair to your crop rotation, look no further than mangoes! Not only are they deliciously sweet and versatile in the kitchen, but they're also relatively low maintenance when it comes to soil requirements. Mangoes prefer well-draining soil with a pH between 6 and 7, so if you've got a field that's a bit on the alkaline side, mangoes might be just the crop for you. As for nutrients, mango trees are greedy for nitrogen, so make sure to give them a good dose of compost or organic matter to keep them happy. And when it comes to rainfall, mangoes are quite adaptable and can thrive in both humid and dry climates as long as they get enough water. Just make sure to give them plenty of sun and a little bit of TLC, and you'll be rewarded with a bounty of juicy, mouthwatering mangoes in no time! `, 51 | "grapes": ` Grapes are a great crop to consider for your farm! Not only are they delicious and versatile, but they also have several benefits in terms of soil properties. Firstly, grapes thrive in well-draining soil with a pH level between 6.0 and 6.5. Lucky for you, it sounds like your soil is just the right pH for grape cultivation. Additionally, grapes require moderate amounts of nitrogen and phosphorous to grow, both of which are essential nutrients that your soil is surely providing. With adequate rainfall and humidity, your grapes will be off to a great start. Plus, who wouldn't love having their own homegrown grapes to snack on or turn into a tasty wine? Give grapes a try and you'll be sure to have a crop that's both enjoyable and profitable. `, 52 | "watermelon": ` Watermelon is a delicious and refreshing summer fruit that is easy to grow and requires minimal maintenance. If you have the right soil conditions, watermelon can be a great crop for your farm. The key to growing healthy watermelons is having soil with a pH level between 6.0 and 6.8, as well as adequate levels of nitrogen and phosphorous. Watermelons also need plenty of water, so make sure you have access to irrigation or are located in an area with high humidity or sufficient rainfall. With the right combination of these factors, you'll be on your way to a bountiful harvest of juicy, sweet watermelons that will have your customers coming back for more. Plus, you'll have the added bonus of being able to beat the heat on hot summer days by munching on a few slices of your own homegrown watermelons. So go ahead and give watermelon a try – your taste buds (and wallet) will thank you! `, 53 | "muskmelon": ` If you're a farmer looking to add some variety to your crop lineup, consider giving muskmelon a try! This delicious fruit is perfect for those who have access to well-draining soil with a pH between 6.0 and 6.8. It's a heavy feeder, so be sure to provide it with ample amounts of nitrogen and phosphorous to ensure healthy growth and fruit production. It also thrives in environments with moderate levels of humidity and plenty of sunshine, and needs a consistent supply of water to thrive. Aim for about 1 inch of water per week, either through irrigation or natural rainfall. And with its high demand in the market, you'll be able to turn a tidy profit by growing muskmelon. Plus, who doesn't love a good melon on a hot summer day? Trust me, your customers will be thanking you for bringing this tasty treat to the table `, 54 | "apple": ` If you're looking for a tasty and profitable crop to add to your farm, look no further than apples! These tasty fruits are not only delicious and versatile, but they are also relatively easy to grow and maintain. As long as you have well-draining soil with the right balance of nitrogen, phosphorous, and pH levels, your apple trees will be happy as can be. And don't worry about those pesky rain and humidity levels - apples are resilient little guys and can handle a wide range of weather conditions. Plus, they have a long growing season, which means you'll have plenty of time to enjoy their delicious fruits. And the best part? There are so many ways to enjoy apples. From pies and crisps to cider and caramel apples, the possibilities are endless. So go ahead and give apples a try - your taste buds (and wallet) will thank you. `, 55 | "orange": ` If you're looking to add some zesty flair to your farm, then look no further than the delicious and nutritious orange! Not only do oranges add a pop of color to your fields, but they also require relatively moderate levels of nutrients like nitrogen and phosphorous. Plus, with their love for warm temperatures and moderate humidity, they'll thrive in your farm's climate. And don't worry about needing perfectly balanced soil pH levels - oranges are pretty adaptable and can grow in soil ranging from slightly acidic to slightly alkaline. In addition to being a tasty and healthy addition to any meal, oranges are also a popular commodity in the agricultural market, so you can expect to see a good return on your investment. And with the right amount of rainfall, you'll be harvesting juicy, sun-ripened oranges in no time. So why not give these tasty treats a try and add some diversity to your crop rotation? `, 56 | "papaya": ` Papaya is a tropical fruit that is packed with nutrients and has numerous health benefits. Not only is it a good source of vitamin C and potassium, but it also contains antioxidants and digestive enzymes that can improve digestion and boost the immune system. Papaya is a low maintenance crop that is well-suited to a variety of soil types, as long as the soil is well-draining and has a pH level between 5.5 and 6.5. It also prefers a humid environment with consistent rainfall or irrigation, so if you have a greenhouse or a location on your farm that gets plenty of humidity, papaya may be a great choice for you. In terms of nutrient requirements, papaya plants prefer moderate levels of nitrogen and phosphorous, so you don't have to worry about over-fertilizing. Plus, with its high market demand and versatility in cooking, growing papaya can be a profitable and enjoyable venture for your farm. So don't wait - start planning your papaya patch today! `, 57 | "coconut": ` Coconuts are a tropical crop that thrive in warm, humid environments with plenty of rainfall. They prefer soil with a pH level between 6 and 7, and they require moderate amounts of nitrogen and phosphorous for healthy growth. If you already have these soil conditions in your farm, then you're in luck! Coconuts are a great crop to grow because they are highly drought-resistant and can withstand long periods without water. Plus, they have a host of other benefits. For example, the oil from coconuts has numerous health benefits and can be used in cooking, cosmetics, and even as a natural hair conditioner. The meat of the coconut is also delicious and can be used in a variety of dishes. And let's not forget about the refreshing coconut water, which is a tasty and hydrating drink that is sure to quench your thirst on a hot day. So if you're looking to add a little tropical flair to your farm, consider giving coconuts a try! `, 58 | "cotton": ` Growing cotton can be a great choice for your farm! Not only is it a versatile and valuable crop, but it also has some specific soil requirements that your farm seems to already have in abundance. For example, cotton thrives in well-draining soil with a pH level between 6.0 and 6.8, and it's a good thing your soil has just the right pH! Additionally, cotton plants need plenty of nitrogen to grow strong and healthy, and it looks like your soil has more than enough nitrogen to support a thriving cotton crop. And let's not forget about rainfall and humidity - both of which seem to be perfectly suited for growing cotton on your farm. All in all, it looks like you have all the makings of a successful cotton farmer. Plus, think of all the cute, fluffy bolls you'll be able to pick come harvest time! `, 59 | "jute": ` Jute is a fantastic crop that is not only environmentally friendly, but it also has a variety of uses, from making burlap sacks to creating fabric for clothing and home furnishings. In fact, jute is often referred to as the 'golden fiber' due to its versatility and value. Growing jute is a great way to add some diversity to your crop rotation and potentially increase your profits. It's also a low maintenance crop that thrives in well-draining soil with a pH between 6.0 and 7.0. It requires relatively low levels of Nitrogen and Phosphorous, and it can tolerate moderate levels of rainfall and humidity. If your soil is rich in these nutrients and you get plenty of rainfall and humidity, then jute might just be the perfect crop for you. Give it a try and see how it works out - you might be surprised at how well it grows! Not to mention, you'll be helping to preserve the environment by growing a sustainable and biodegradable crop. `, 60 | "coffee": ` Coffee is a great crop to consider growing! Not only is it a popular and lucrative crop, but it can also thrive in a variety of soil conditions. For starters, coffee plants require well-draining soil with a slightly acidic pH level between 6.0 and 6.5. If your soil is already in this range, you're off to a great start! In terms of nutrients, coffee plants need a moderate amount of nitrogen, phosphorous, and potassium to thrive. If your soil is already rich in these nutrients, your coffee plants will be able to draw on them as needed. As for water, coffee plants prefer a humid climate with regular rainfall. If you already have a humid environment with a consistent source of water, your coffee plants will be able to soak up all the hydration they need. So, if you've got the right soil conditions and a love for a good cup of joe, give coffee a try! `, 61 | } 62 | 63 | -------------------------------------------------------------------------------- /src/components/crop/CropPage.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: white; 3 | } 4 | 5 | 6 | .crop-p { 7 | color: black; 8 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 9 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 10 | font-size: x-large; 11 | margin-left: 23%; 12 | margin-top: 5%; 13 | } 14 | 15 | .predict_crop_btn { 16 | background-color: #10a37f; 17 | border: none; 18 | color: white; 19 | padding: 15px; 20 | text-align: center; 21 | text-decoration: none; 22 | display: inline-block; 23 | font-size: 16px; 24 | font-weight: bold; 25 | border-radius: 5px; 26 | width: 16rem; 27 | } 28 | 29 | .predict_crop_btn:hover { 30 | background-color: #007553; 31 | } 32 | 33 | .predict_crop_btn:active { 34 | transform: scale(0.95, 0.95); 35 | } 36 | 37 | .crop-container { 38 | margin-left: 32%; 39 | display: inline-grid; 40 | grid-template-columns: 250px 250px; 41 | column-gap: 50px; 42 | row-gap: 40px; 43 | } 44 | 45 | /*------------------------------------------------------------------------*/ 46 | 47 | /* CSS for width between 220-780px */ 48 | @media (220px <= width <= 780px) { 49 | .crop-p { 50 | font-size: large; 51 | text-align: center; 52 | width: 83%; 53 | margin: 0; 54 | margin-right: 12%; 55 | margin-left: 10%; 56 | margin-top: 10%; 57 | } 58 | 59 | .crop-container { 60 | display: flex; 61 | flex-direction: column; 62 | column-gap: 10px; 63 | row-gap: 10px; 64 | margin-top: 5%; 65 | margin-bottom: 15%; 66 | margin-right: 21%; 67 | margin-left: 20%; 68 | width: min-content; 69 | } 70 | 71 | .predict_crop_btn { 72 | margin-top: 5%; 73 | } 74 | } 75 | 76 | /*------------------------------------------------------------------------*/ 77 | 78 | /* CSS for width between 415-780px */ 79 | @media (415px <= width <= 780px) { 80 | .crop-p { 81 | font-size: x-large; 82 | margin-left: 22%; 83 | } 84 | 85 | .crop-container { 86 | margin-left: 38%; 87 | max-width: max-content; 88 | } 89 | } 90 | 91 | /* CSS for width between 575-630px */ 92 | @media (575px <= width <= 630px) { 93 | .crop-p { 94 | margin-left: 17%; 95 | } 96 | } 97 | 98 | /* CSS for width between 630-780px */ 99 | @media (630px <= width <= 780px) { 100 | .crop-p { 101 | margin-right: 13%; 102 | margin-left: 13%; 103 | } 104 | 105 | .crop-container { 106 | margin-left: 35%; 107 | } 108 | } 109 | 110 | /*------------------------------------------------------------------------*/ 111 | 112 | /* CSS for width between 780-975px */ 113 | @media (780px <= width <= 975px) { 114 | .crop-p { 115 | margin-right: 10%; 116 | margin-left: 15%; 117 | text-align: center; 118 | } 119 | 120 | .crop-container { 121 | margin: 0; 122 | padding: 0; 123 | margin-left: 18%; 124 | } 125 | } 126 | 127 | /* CSS for width between 910-1250px */ 128 | @media (910px <= width <= 1250px) { 129 | .crop-p { 130 | margin-right: 10%; 131 | margin-left: 15%; 132 | text-align: center; 133 | } 134 | 135 | .crop-container { 136 | margin: 0; 137 | padding: 0; 138 | margin-left: 25%; 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /src/components/crop/CropPage.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import Header from "../header/Header.jsx" 4 | import "./CropPage.css" 5 | import { TextField } from "@mui/material" 6 | import { useNavigate } from "react-router-dom" 7 | import { output_descriptions } from "./CropOutputs" 8 | import LinearProgress from '@mui/material/LinearProgress'; 9 | 10 | //-------------------------------------------------------------------- 11 | 12 | // Focus on Empty Input fields 13 | function focusEmptyFields() { 14 | 15 | // list of all the input elements 16 | const inputElements = [ 17 | document.getElementById('nitrogen-crop-input'), 18 | document.getElementById('temp-crop-input'), 19 | document.getElementById('phosphorous-crop-input'), 20 | document.getElementById('humidity-crop-input'), 21 | document.getElementById('potassium-crop-input'), 22 | document.getElementById('ph-crop-input'), 23 | document.getElementById('rainfall-crop-input'), 24 | ]; 25 | 26 | // Check if any of the input fields is empty & focus on it 27 | for (let i = 0; i < inputElements.length; i++) { 28 | if (inputElements[i].value === '') { 29 | inputElements[i].focus(); 30 | return 0; 31 | } 32 | } 33 | 34 | return 1; 35 | } 36 | 37 | 38 | //-------------------------------------------------------------------- 39 | 40 | const CROP_ENDPOINT = 'https://8080-797137136eb6451193a1f8c64a951490.onpatr.cloud/crop_recommend' 41 | 42 | // Min-Max values of crop inputs 43 | export const crop_value_ranges = { 44 | nitrogen: [0, 150], phosphorous: [5, 145], potassium: [5, 205], temperature: [0, 50], 45 | humidity: [1, 100], ph: [3, 10], rainfall: [20, 300] 46 | } 47 | 48 | 49 | // Called when Button Clicked 50 | function handleClick(navigate) { 51 | 52 | // Continue only if all fields are filled. 53 | const isFieldEmpty = focusEmptyFields(); 54 | if (isFieldEmpty == 0) { 55 | console.log("Some Inputs are empty !") 56 | return; 57 | } 58 | 59 | // Get the values of all input fields 60 | const nitrogenValue = document.getElementById('nitrogen-crop-input').value; 61 | const tempValue = document.getElementById('temp-crop-input').value; 62 | const phosphorousValue = document.getElementById('phosphorous-crop-input').value; 63 | const humidityValue = document.getElementById('humidity-crop-input').value; 64 | const potassiumValue = document.getElementById('potassium-crop-input').value; 65 | const phValue = document.getElementById('ph-crop-input').value; 66 | const rainfallValue = document.getElementById('rainfall-crop-input').value; 67 | 68 | 69 | // Check if the Input values are in required ranges 70 | const min_temp = crop_value_ranges.temperature[0] 71 | const max_temp = crop_value_ranges.temperature[1] 72 | const min_humid = crop_value_ranges.humidity[0] 73 | const max_humid = crop_value_ranges.humidity[1] 74 | if (tempValue < min_temp || tempValue > max_temp) { 75 | window.alert("Temperature must be between 0-50 celcius !"); 76 | return; 77 | } else if (humidityValue < min_humid || humidityValue > max_humid) { 78 | window.alert(" Humidity must be between 1-100 !"); 79 | return; 80 | } 81 | 82 | // Make progressbar visible 83 | const progressBar = document.querySelector('.crop-progress-bar'); 84 | progressBar.style.display = 'block'; 85 | progressBar.style.visibility = 'visible'; 86 | 87 | // JSON payload 88 | const data = { 89 | array: [nitrogenValue, phosphorousValue, potassiumValue, 90 | tempValue, humidityValue, phValue, rainfallValue] 91 | } 92 | 93 | // Send POST request to ML model 94 | fetch(CROP_ENDPOINT, { 95 | method: 'POST', 96 | body: JSON.stringify(data), 97 | headers: { 'Content-Type': 'application/json' } 98 | }) 99 | .then(response => response.json()) 100 | .then(data => { 101 | console.log('Success:', data) 102 | console.log(output_descriptions[data]) 103 | 104 | // Redirect to Result page along with predicted crop 105 | navigate("/crop_result", { state: { predicted_crop: data } }) 106 | 107 | 108 | }).catch(error => { 109 | console.error('Error:', error) 110 | window.alert("Some Error Occured, Try again.") 111 | }); 112 | 113 | } 114 | 115 | //-------------------------------------------------------------------- 116 | 117 | export function CropPage() { 118 | 119 | const navigate = useNavigate(); 120 | 121 | // Called when Enter is pressed 122 | document.addEventListener('keydown', (event) => { 123 | if (event.key === 'Enter') { 124 | handleClick(navigate) 125 | } 126 | }); 127 | 128 | return ( 129 | <> 130 |
131 | 132 |

Enter soil characteristics to find the best CROP to grow on your farm 👩‍🌾🌽🚜

133 |
134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 |
143 | 144 | ) 145 | } 146 | 147 | -------------------------------------------------------------------------------- /src/components/fertilizer/FertilizerOutputs.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | export const labels = ["Urea","DAP","14-35-14","28-28","17-17-17","20-20","10-26-26"] 5 | 6 | // Image paths for each output fertilizer 7 | export const label_image_paths = { 8 | "Urea":"images/fertilizers/urea.jpg", 9 | "DAP": "images/fertilizers/DAP.jpg", 10 | "14-35-14": "images/fertilizers/default.jpg", 11 | "28-28":"images/fertilizers/default.jpg", 12 | "17-17-17": "images/fertilizers/default.jpg", 13 | "20-20":"images/fertilizers/default.jpg", 14 | "10-26-26": "images/fertilizers/default.jpg", 15 | } 16 | 17 | // Descriptions for each fertilizer predicted by the ML model. 18 | export const output_descriptions = { 19 | 20 | "Urea":` Urea is a type of fertilizer that is made from synthetic nitrogen. It is widely used in agriculture to provide crops with the nitrogen they need to grow and thrive. With a high nitrogen content, urea is an excellent choice for boosting the growth and yield of your crops. Additionally, urea is highly effective in a range of soil types and temperatures, making it a versatile option for any farmer. In terms of phosphorous and humidity, urea is also a top performer, helping to promote strong root growth and overall plant health. So, whether you're growing corn, wheat, soybeans, or even fruit trees, urea is sure to give you the results you're looking for. Plus, with a little bit of humor, let's just say that your crops will be "urea" happy with the added nutrients! `, 21 | "DAP":` DAP, or diammonium phosphate, is a type of fertilizer that is commonly used in agriculture to supply plants with essential nutrients, including nitrogen and phosphorous. One of the main reasons to use DAP is that it is highly effective at increasing the nitrogen content in the soil, which is essential for plant growth. Nitrogen is an essential component of chlorophyll, the molecule that allows plants to photosynthesize and convert sunlight into energy. Without enough nitrogen, your plants will be unable to fully utilize the sunlight they receive, resulting in poor growth and reduced yields. Another benefit of DAP is that it can help to improve the soil's structure and texture, making it easier for roots to grow and absorb nutrients. This is especially important in soils that are heavy or compacted, as it can help to loosen the soil and allow water and nutrients to reach the plant's roots more easily. Overall, DAP is a fantastic choice for any farmer looking to improve the health and productivity of their crops. It is suitable for a wide range of crops, including fruit trees, vegetables, and grains, and can be easily applied using a fertilizer spreader or by hand. So why wait? Start using DAP today and watch your crops flourish! `, 22 | "14-35-14":` The 14-35-14 is a balanced fertilizer that contains 14% nitrogen, 35% phosphorous, and 14% potassium (also known as "potash"). Phosphorous is necessary for root growth and fruiting, and the 35% phosphorous content in 14-35-14 will help your crops develop strong, healthy roots and produce plenty of fruit. This is especially important for warm-season crops like tomatoes, peppers, and squash. Potassium, or potash, is important for overall plant health and helps plants resist disease. The 14% potash content in 14-35-14 will help keep your crops strong and healthy throughout the growing season. 14-35-14 is a versatile fertilizer that can be used in a wide range of temperatures and humidity levels, so you don't have to worry about those factors. As for soil type, 14-35-14 is suitable for use in most types of soil, including sandy, loamy, and clay soils. It provides the right mix of nutrients for healthy plant growth, and it can be used in a wide range of temperatures, humidity levels, and soil types. And with the right combination of nitrogen, phosphorous, and potash, you can grow a wide range of crops, including leafy greens, tomatoes, peppers, squash, and more. Plus, it's always good to have a little bit of humor on the farm, right `, 23 | "28-28":` 28-28 fertilizer is a type of balanced fertilizer that contains equal amounts of nitrogen and phosphorus, both of which are essential nutrients for plant growth. As a farmer, you'll be happy to know that using 28-28 fertilizer can help improve the nutrient content of your soil, providing your crops with the nourishment they need to thrive. Nitrogen is important for promoting leafy growth, while phosphorus is necessary for root development and fruit production. But that's not all! 28-28 fertilizer is also great for a wide range of soil types and climates, making it a versatile choice for any farmer. Whether you're dealing with sandy soil, clay soil, or something in between, 28-28 can help give your crops the boost they need. And because it's balanced, you won't have to worry about overloading your soil with excess nutrients, which can lead to nutrient imbalances and reduced crop yields. It's a great choice for a wide range of crops, including fruits, vegetables, grains, and more. Just remember to follow the recommended application rates and always use protective equipment when handling fertilizers. Happy farming! `, 24 | "17-17-17":` 17-17-17 is a balanced fertilizer, meaning it contains equal amounts of the three primary macronutrients: nitrogen, phosphorous, and potassium. These nutrients are essential for plant growth and development, and they work together to support healthy plants. Now, as a farmer, you already have the ideal soil conditions and crop type in mind, and 17-17-17 fertilizer is the perfect match for you. The balanced nutrient ratio ensures that your crops will have access to the exact nutrients they need at the right stages of growth. Plus, the added humidity-regulating properties of 17-17-17 will help your plants thrive in any weather conditions. Not to mention, this fertilizer is extremely versatile and can be used on a wide range of crops, from leafy greens to fruiting vegetables and even fruit trees. So whether you're looking to grow some juicy watermelons or a field of fragrant lavender, 17-17-17 has you covered. `, 25 | "20-20":` 20-20 fertilizer is a balanced fertilizer that contains equal parts of nitrogen, phosphorous, and potassium, also known as NPK. The numbers 20-20 refer to the percentage of these three nutrients that are present in the fertilizer. If you have a soil with a pH level that falls within the neutral range, around 6.5 to 7.5, 20-20 fertilizer will be highly effective at providing the nutrients your crops need to thrive. Additionally, if you have a soil type that is rich in organic matter, the 20-20 fertilizer will work even better, as the nutrients in the fertilizer will be able to easily interact with the organic matter in the soil. Another great reason to use 20-20 fertilizer is that it is highly versatile and can be used on a wide variety of crops and fruit trees. Some examples of crops that do well with 20-20 fertilizer include tomatoes, peppers, squash, and melons. Fruit trees such as apples, pears, and cherries also benefit from the balanced nutrition provided by 20-20 fertilizer. So, in short, if you have a neutral pH soil and a good amount of organic matter, 20-20 fertilizer is a fantastic choice for providing your crops and fruit trees with the nutrients they need to thrive. Plus, with its versatility, you'll be able to use it on a variety of different crops and fruit trees. So why not give it a try and see the amazing results for yourself? Happy farming! `, 26 | "10-26-26":` 10-26-26 is a balanced blend of macronutrients, including 10% nitrogen, 26% phosphorus, and 26% potassium. These nutrients are essential for healthy plant growth and development. The nitrogen in 10-26-26 will help to promote strong stem and leaf growth, ensuring that your plants are able to photosynthesize efficiently and produce a good yield. The phosphorus in the fertilizer will support root development and help your plants to absorb essential minerals from the soil. Finally, the potassium will help to improve the overall health and hardiness of your crops, making them more resistant to stress and pests. But it's not just about the nutrients! The 10-26-26 formula is also specially formulated to be effective in a variety of soil types and climates. So whether you're growing in sandy soil, clay soil, or somewhere in between, this fertilizer will provide your crops with the nutrients they need to thrive. And with a little bit of TLC and some proper watering and weeding, you'll be well on your way to a bumper crop of delicious fruits and vegetables. So go ahead, give 10-26-26 a try on your farm. Your crops (and taste buds) will thank you! ` 27 | 28 | } 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/components/fertilizer/FertilizerPage.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: white; 3 | } 4 | 5 | .fertilizer-p { 6 | color: black; 7 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 8 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 9 | font-size: x-large; 10 | margin-left: 16%; 11 | margin-top: 5%; 12 | } 13 | 14 | .predict_fertilizer_btn { 15 | background-color: #10a37f; 16 | border: none; 17 | color: white; 18 | padding: 18px; 19 | text-align: center; 20 | text-decoration: none; 21 | display: inline-block; 22 | font-size: 16px; 23 | font-weight: bold; 24 | border-radius: 5px; 25 | width: 13rem; 26 | margin-left: 70%; 27 | } 28 | 29 | .predict_fertilizer_btn:hover { 30 | background-color: #007553; 31 | } 32 | 33 | .predict_fertilizer_btn:active { 34 | transform: scale(0.95, 0.95); 35 | } 36 | 37 | .fertilizer-container { 38 | margin-left: 32%; 39 | display: inline-grid; 40 | grid-template-columns: 250px 250px; 41 | column-gap: 50px; 42 | row-gap: 40px; 43 | } 44 | 45 | /*---------------------------------------------------------------------------------*/ 46 | 47 | /* CSS for width between 220-415px */ 48 | @media (220px <= width <= 415px) { 49 | .fertilizer-p { 50 | font-size: large; 51 | text-align: center; 52 | width: 86%; 53 | margin: 0; 54 | margin-right: 15%; 55 | margin-left: 12%; 56 | margin-top: 10%; 57 | } 58 | 59 | .fertilizer-container { 60 | display: flex; 61 | flex-direction: column; 62 | column-gap: 10px; 63 | row-gap: 10px; 64 | margin-top: 5%; 65 | margin-bottom: 30%; 66 | margin-right: 0%; 67 | margin-left: 26%; 68 | width: min-content; 69 | } 70 | 71 | .predict_fertilizer_btn { 72 | margin: 0; 73 | margin-top: 5%; 74 | } 75 | } 76 | 77 | /*---------------------------------------------------------------------------------*/ 78 | 79 | /* CSS for width between 415-650px */ 80 | @media (415px <= width <= 650px) { 81 | .fertilizer-p { 82 | font-size: x-large; 83 | text-align: center; 84 | width: 90%; 85 | margin: 0; 86 | margin-right: 15%; 87 | margin-left: 15%; 88 | margin-top: 10%; 89 | } 90 | 91 | .fertilizer-container { 92 | display: flex; 93 | flex-direction: column; 94 | column-gap: 10px; 95 | row-gap: 10px; 96 | margin-top: 5%; 97 | margin-bottom: 15%; 98 | margin-right: 21%; 99 | margin-left: 40%; 100 | width: min-content; 101 | } 102 | 103 | .predict_fertilizer_btn { 104 | margin: 0; 105 | margin-top: 5%; 106 | } 107 | } 108 | 109 | /*---------------------------------------------------------------------------------*/ 110 | 111 | /* CSS for width between 650-850px */ 112 | @media (650px <= width <= 850px) { 113 | .fertilizer-p { 114 | font-size: x-large; 115 | text-align: center; 116 | width: 80%; 117 | margin: 0; 118 | margin-left: 14%; 119 | margin-top: 5%; 120 | margin-bottom: 5%; 121 | } 122 | 123 | .fertilizer-container { 124 | margin-left: 17%; 125 | } 126 | } 127 | 128 | /* CSS for width between 850-950px */ 129 | @media (850px <= width <= 950px) { 130 | .fertilizer-p { 131 | font-size: x-large; 132 | text-align: center; 133 | width: 80%; 134 | margin: 0; 135 | margin-left: 12%; 136 | margin-top: 5%; 137 | margin-bottom: 5%; 138 | } 139 | 140 | .fertilizer-container { 141 | margin-left: 20%; 142 | } 143 | } 144 | 145 | /* CSS for width between 950-1020px */ 146 | @media (950px <= width <= 1020px) { 147 | .fertilizer-p { 148 | font-size: x-large; 149 | text-align: center; 150 | width: 80%; 151 | margin: 0; 152 | margin-left: 12%; 153 | margin-top: 5%; 154 | margin-bottom: 5%; 155 | } 156 | 157 | .fertilizer-container { 158 | margin-left: 23%; 159 | } 160 | } 161 | 162 | /* CSS for width between 1020-1250px */ 163 | @media (1020px <= width <= 1250px) { 164 | .fertilizer-p { 165 | font-size: x-large; 166 | text-align: center; 167 | width: 80%; 168 | margin: 0; 169 | margin-left: 12%; 170 | margin-top: 5%; 171 | margin-bottom: 5%; 172 | } 173 | 174 | .fertilizer-container { 175 | margin-left: 28%; 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /src/components/fertilizer/FertilizerPage.jsx: -------------------------------------------------------------------------------- 1 | 2 | import Header from "../header/Header.jsx" 3 | import "./FertilizerPage.css" 4 | import { TextField } from "@mui/material" 5 | import * as React from 'react'; 6 | import Box from '@mui/material/Box'; 7 | import InputLabel from '@mui/material/InputLabel'; 8 | import MenuItem from '@mui/material/MenuItem'; 9 | import FormControl from '@mui/material/FormControl'; 10 | import Select from '@mui/material/Select'; 11 | import { output_descriptions } from "./FertilizerOutputs.jsx"; 12 | import { useNavigate } from "react-router-dom"; 13 | import { crop_value_ranges } from "../crop/CropPage.jsx"; 14 | import LinearProgress from "@mui/material/LinearProgress"; 15 | 16 | var soilTypeVal = "" 17 | var cropTypeVal = "" 18 | //------------------------------------------------------------------------------- 19 | 20 | // Select field for soil types 21 | function SoilTypeSelectField() { 22 | const [soilType, setSoilType] = React.useState(''); 23 | const handleChange = (event) => { 24 | setSoilType(event.target.value); 25 | soilTypeVal = event.target.value; 26 | }; 27 | 28 | return ( 29 | 30 | 31 | Type of Soil 32 | 45 | 46 | 47 | ); 48 | } 49 | 50 | //------------------------------------------------------------------------------- 51 | 52 | // Select field for crop types 53 | function CropTypeSelectField() { 54 | const [cropType, setCropType] = React.useState(''); 55 | const handleChange = (event) => { 56 | setCropType(event.target.value); 57 | cropTypeVal = event.target.value; 58 | }; 59 | 60 | return ( 61 | 62 | 63 | Type of Crop 64 | 84 | 85 | 86 | ); 87 | } 88 | 89 | //-------------------------------------------------------------------- 90 | 91 | // Focus on Empty Input fields 92 | function focusEmptyFields() { 93 | 94 | // list of all the input elements 95 | const inputElements = [ 96 | document.getElementById('nitrogen-fertilizer-input'), 97 | document.getElementById('temp-fertilizer-input'), 98 | document.getElementById('phosphorous-fertilizer-input'), 99 | document.getElementById('humidity-fertilizer-input'), 100 | document.getElementById('potassium-fertilizer-input'), 101 | document.getElementById('moisture-fertilizer-input'), 102 | ]; 103 | 104 | // Check if any of the input fields is empty & focus on it 105 | for (let i = 0; i < inputElements.length; i++) { 106 | if (inputElements[i].value === '') { 107 | inputElements[i].focus(); 108 | return 0; 109 | } 110 | } 111 | 112 | // Check if select fields are empty 113 | if (soilTypeVal == "" || cropTypeVal == "") { 114 | window.alert("Fill all Input fields !") 115 | return 0; 116 | } 117 | 118 | return 1; 119 | 120 | } 121 | 122 | //------------------------------------------------------------------------------- 123 | 124 | // Fertilizer JSON Input - { "array": [Temparature,Humidity,Moisture,Nitrogen,Potassium,Phosphorous,Soil Type,Crop Type] } 125 | 126 | const FERTILIZER_ENDPOINT = 'https://8080-797137136eb6451193a1f8c64a951490.onpatr.cloud/fertilizer_recommend' 127 | 128 | function handleClick(navigate) { 129 | 130 | // Continue only if all fields are non-empty 131 | const isFieldEmpty = focusEmptyFields(); 132 | if (isFieldEmpty == 0) { 133 | console.log("Some Inputs are empty !") 134 | return; 135 | } 136 | 137 | // Get the values of all text fields 138 | const nitrogenValue = document.getElementById('nitrogen-fertilizer-input').value; 139 | const tempValue = document.getElementById('temp-fertilizer-input').value; 140 | const phosphorousValue = document.getElementById('phosphorous-fertilizer-input').value; 141 | const humidityValue = document.getElementById('humidity-fertilizer-input').value; 142 | const potassiumValue = document.getElementById('potassium-fertilizer-input').value; 143 | const moistureValue = document.getElementById('moisture-fertilizer-input').value; 144 | 145 | // Check if the Input values are in required ranges 146 | const min_temp = crop_value_ranges.temperature[0] 147 | const max_temp = crop_value_ranges.temperature[1] 148 | const min_humid = crop_value_ranges.humidity[0] 149 | const max_humid = crop_value_ranges.humidity[1] 150 | if (tempValue < min_temp || tempValue > max_temp) { 151 | window.alert("Temperature must be between 0-50 celcius !"); 152 | return; 153 | } else if (humidityValue < min_humid || humidityValue > max_humid) { 154 | window.alert(" Humidity must be between 1-100 !"); 155 | return; 156 | } 157 | 158 | 159 | // Make progressbar visible 160 | const progressBar = document.querySelector('.fertilizer-progress-bar'); 161 | progressBar.style.display = 'block'; 162 | progressBar.style.visibility = 'visible'; 163 | 164 | 165 | // JSON payload 166 | const data = { 167 | array: [tempValue, humidityValue, moistureValue, nitrogenValue, potassiumValue, 168 | phosphorousValue, soilTypeVal, cropTypeVal] 169 | } 170 | 171 | // Send POST request to ML model 172 | fetch(FERTILIZER_ENDPOINT, { 173 | method: 'POST', 174 | body: JSON.stringify(data), 175 | headers: { 'Content-Type': 'application/json' } 176 | }) 177 | .then(response => response.json()) 178 | .then(data => { 179 | console.log('Success:', data) 180 | console.log(output_descriptions[data]) 181 | 182 | // Redirect to Result page along with predicted fertilizer 183 | navigate("/fertilizer_result", { state: { predicted_fertilizer: data } }) 184 | 185 | }).catch(error => { 186 | console.error('Error:', error) 187 | window.alert("Some Error Occured, Try again.") 188 | }); 189 | 190 | } 191 | 192 | 193 | //------------------------------------------------------------------------------- 194 | 195 | export function FertilizerPage() { 196 | 197 | const navigate = useNavigate(); 198 | 199 | // Called when Enter is pressed 200 | document.addEventListener('keydown', (event) => { 201 | if (event.key === 'Enter') { 202 | handleClick(navigate) 203 | } 204 | }); 205 | 206 | return ( 207 | <> 208 |
209 | 210 |

Enter soil characteristics & crop you are growing to find best FERTILIZER for your farm 👩‍🌾🌽🚜

211 |
212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 |
222 | 223 | 224 | ) 225 | } 226 | 227 | -------------------------------------------------------------------------------- /src/components/header/Header.css: -------------------------------------------------------------------------------- 1 | .header { 2 | display: flex; 3 | justify-content: flex-end; /* shift the links to the right */ 4 | align-items: center; 5 | background-color: rgb(99, 0, 99); 6 | padding-bottom: 0.07rem; /* height of the header */ 7 | width: 100vw; 8 | } 9 | 10 | .header .logo { 11 | font-weight: 480; 12 | font-size: x-large; 13 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 14 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 15 | margin-right: auto; /* push the logo to the left */ 16 | margin-left: 2rem; 17 | } 18 | 19 | .header ul { 20 | display: flex; 21 | list-style: none; 22 | margin: 0; 23 | margin-right: 5rem; 24 | padding-top: 0.5rem; 25 | padding-bottom: 0.6rem; 26 | } 27 | 28 | .header li { 29 | margin: 0 2.5rem; /* increase the spacing between the links */ 30 | font-weight: 450; 31 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 32 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 33 | text-align: center; 34 | } 35 | 36 | .header a { 37 | color: #fff; 38 | text-decoration: none; 39 | } 40 | 41 | .header a:hover { 42 | font-weight: 600; 43 | } 44 | 45 | /* Don't change logo color on hover */ 46 | .header .logo :hover { 47 | color: #fff; 48 | font-weight: 450; 49 | } 50 | 51 | /*------------------------------------------------------------------------*/ 52 | 53 | /* CSS for width between 220-415px */ 54 | @media (220px <= width <= 415px) { 55 | /* Hide the Project option*/ 56 | .project-header-option { 57 | display: none; 58 | } 59 | 60 | .header { 61 | background-color: rgb(99, 0, 99); 62 | width: min-content; 63 | } 64 | 65 | .header .logo, 66 | .header li { 67 | font-size: small; 68 | font-weight: 450; 69 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 70 | Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", 71 | sans-serif; 72 | text-align: center; 73 | } 74 | 75 | .header .logo, 76 | .header ul, 77 | .header li { 78 | margin: 0; 79 | padding: 0; 80 | font-weight: 450; 81 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 82 | Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", 83 | sans-serif; 84 | } 85 | 86 | .header .logo { 87 | padding-right: 7%; 88 | } 89 | 90 | .header { 91 | padding-left: 8.5%; 92 | padding-right: 24%; 93 | padding-bottom: 3%; 94 | padding-top: 1%; 95 | overflow-x: hidden; 96 | } 97 | 98 | .header li { 99 | padding-left: 10%; 100 | padding-right: 10%; 101 | } 102 | } 103 | 104 | /*------------------------------------------------------------------------*/ 105 | 106 | /* CSS for width between 415px and 760px */ 107 | @media (415px <= width <= 760px) { 108 | /* Hide the Project option*/ 109 | .project-header-option { 110 | display: none; 111 | } 112 | 113 | .header { 114 | background-color: rgb(99, 0, 99); 115 | max-width: max-content; 116 | } 117 | 118 | .header .logo, 119 | .header li { 120 | font-size: larger; 121 | font-weight: 450; 122 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 123 | Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", 124 | sans-serif; 125 | } 126 | 127 | .header .logo, 128 | .header ul, 129 | .header li { 130 | margin: 0; 131 | padding: 0; 132 | font-weight: 450; 133 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 134 | Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", 135 | sans-serif; 136 | text-align: center; 137 | } 138 | 139 | .header .logo { 140 | padding-left: 3%; 141 | padding-right: 5%; 142 | } 143 | 144 | .header { 145 | padding-left: 8.5%; 146 | padding-right: 18%; 147 | padding-bottom: 3%; 148 | padding-top: 1%; 149 | overflow-x: hidden; 150 | } 151 | 152 | .header li { 153 | padding-left: 10%; 154 | padding-right: 10%; 155 | } 156 | 157 | .crop-header-option { 158 | padding: 0; 159 | } 160 | } 161 | 162 | /* CSS for width between 415px and 480px */ 163 | @media (415px <= width <= 480px) { 164 | .header li { 165 | padding-left: 5%; 166 | } 167 | } 168 | 169 | /*------------------------------------------------------------------------*/ 170 | 171 | /* CSS for width between 760-975px */ 172 | @media (760px <= width <= 975px) { 173 | /* Hide the Project option*/ 174 | .project-header-option { 175 | display: none; 176 | } 177 | 178 | .header ul { 179 | padding: 0; 180 | margin: 0; 181 | padding-top: 1%; 182 | padding-bottom: 1%; 183 | } 184 | } 185 | 186 | /* CSS for width between 780-820px */ 187 | @media (780px <= width <= 820px) { 188 | .header { 189 | padding-left: 1%; 190 | } 191 | } 192 | -------------------------------------------------------------------------------- /src/components/header/Header.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { Link } from 'react-router-dom'; 4 | import "./Header.css" 5 | 6 | const Header = () => { 7 | return ( 8 |
9 |
🌿 CropFusionAI
10 |
    11 |
  • 12 | Crop Recommendation 13 |
    • 14 |
  • 15 | Fertilizer Recommendation 16 |
    • 17 |
  • 18 | { window.open('https://8080-797137136eb6451193a1f8c64a951490.onpatr.cloud/docs', '_blank'); }}> 19 | API Docs 20 | 21 |
    • 22 | 23 |
24 |
25 | ); 26 | }; 27 | 28 | export default Header; 29 | -------------------------------------------------------------------------------- /src/components/home/HomePage.css: -------------------------------------------------------------------------------- 1 | .container { 2 | z-index: -1; 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | background-color: rgb(15, 15, 15); 7 | width: 100vw; 8 | } 9 | 10 | .question { 11 | color: rgb(255, 255, 255); 12 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 13 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 14 | font-size: 2rem; 15 | font-weight: 430; 16 | margin-left: 60%; 17 | margin-top: 8%; 18 | } 19 | 20 | .description { 21 | color: rgb(255, 255, 255); 22 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 23 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 24 | font-size: 1.2rem; 25 | font-weight: 320; 26 | margin-left: 55%; 27 | margin-right: 3%; 28 | text-align: center; 29 | } 30 | 31 | .start_btn { 32 | margin-left: 70%; 33 | margin-right: 3%; 34 | margin-top: 1%; 35 | background-color: #10a37f; 36 | border: none; 37 | color: white; 38 | padding: 15px; 39 | text-align: center; 40 | text-decoration: none; 41 | display: inline-block; 42 | font-size: 16px; 43 | font-weight: bold; 44 | border-radius: 5px; 45 | width: 13rem; 46 | } 47 | 48 | .start_btn:hover { 49 | background-color: #007553; 50 | } 51 | 52 | .start_btn:active { 53 | transform: scale(0.95, 0.95); 54 | } 55 | 56 | /*------------------------------------------------------------------------*/ 57 | 58 | /* CSS for width above 830px */ 59 | @media (width < 830px) { 60 | 61 | /* At 830px of Width, Hide the 3D model on smaller screens */ 62 | .container { 63 | display: none; 64 | } 65 | 66 | .description { 67 | color: black; 68 | } 69 | 70 | .question { 71 | color: black; 72 | } 73 | } 74 | 75 | /*------------------------------------------------------------------------*/ 76 | 77 | @media (250px <= width <= 830px) { 78 | .question { 79 | margin: 0; 80 | padding: 0; 81 | font-size: 1.5rem; 82 | margin-left: 15%; 83 | margin-top: 15%; 84 | margin-right: 8%; 85 | text-align: center; 86 | } 87 | 88 | .description { 89 | margin: 0; 90 | padding: 0; 91 | font-size: 1.2rem; 92 | margin-left: 13%; 93 | margin-right: 8%; 94 | margin-top: 7%; 95 | } 96 | 97 | .start_btn { 98 | margin: 0; 99 | margin-top: 10%; 100 | margin-left: 25%; 101 | } 102 | } 103 | 104 | @media (250px <= width <= 350px) { 105 | .description { 106 | font-size: 1rem; 107 | margin-left: 28%; 108 | margin-right: 8%; 109 | margin-top: 7%; 110 | } 111 | 112 | .question { 113 | margin-left: 25%; 114 | margin-right: 8%; 115 | } 116 | } 117 | 118 | @media (415px <= width <= 830px) { 119 | .question { 120 | font-size: 2rem; 121 | margin-left: 28%; 122 | margin-right: 8%; 123 | } 124 | 125 | .description { 126 | font-size: 1.5rem; 127 | margin-left: 25%; 128 | margin-right: 5%; 129 | margin-top: 7%; 130 | } 131 | 132 | .start_btn { 133 | margin: 0; 134 | margin-top: 10%; 135 | margin-left: 38%; 136 | } 137 | } 138 | 139 | @media (680px <= width <= 830px) { 140 | .question { 141 | margin-left: 17%; 142 | } 143 | 144 | .description { 145 | margin-left: 10%; 146 | margin-right: 5%; 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /src/components/home/HomePage.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import Header from "../header/Header.jsx" 4 | import Background3D from "../3dmodel/Model.jsx" 5 | import "./HomePage.css" 6 | import { useNavigate } from "react-router-dom"; 7 | import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; 8 | import { useState, useEffect } from "react"; 9 | import { HashLoader } from "react-spinners"; 10 | import Container from '@mui/material/Container'; 11 | 12 | // path of 3D model from "Public" dir 13 | const model_path = 'Model/scene.gltf' 14 | 15 | //------------------------------------------------------------------------------------------ 16 | 17 | function HomePage(props) { 18 | 19 | const navigate = useNavigate() 20 | 21 | return ( 22 | <> 23 |
24 |
25 |

What Crop to grow this Season ?

26 |

27 | Welcome to CropFusionAI, where we put the "AI" in "farming". 28 | We help farmers make the tough decisions, 29 | like whether to plant corn or lettuce this season. Don't worry, our advanced 30 | machine learning models have got you covered. 31 | Just sit back, relax, and let us do the thinking for you. 32 | And if you're feeling adventurous, our fertilizer recommendation 33 | feature will even help you spice things up in the garden. 34 | Start using CropFusionAI today and let the robots handle the dirty work! 35 |

36 | 37 | 38 |
39 | {props.children} 40 |
41 |
42 | 43 | ) 44 | } 45 | 46 | 47 | //------------------------------------------------------------------------------------------ 48 | 49 | export function ModelLoader() { 50 | 51 | const [isLoading, setIsLoading] = useState(true); 52 | const [bg, setBg] = useState(null); 53 | 54 | useEffect(() => { 55 | const loader = new GLTFLoader(); 56 | // Load 3D model 57 | loader.load(model_path, (model) => { 58 | 59 | const bg = () => { 60 | return ( 61 | <> 62 | 63 | 64 | 65 | 66 | ) 67 | } 68 | 69 | setBg(bg); 70 | setIsLoading(false); 71 | }); 72 | }, []); 73 | 74 | // Show Loading page if model is not loaded. 75 | if (isLoading == true) { 76 | 77 | return ( 78 |
79 |
80 | 81 | 90 | 91 |
92 | ); 93 | } 94 | 95 | // Show Home page if model is loaded. 96 | return ( 97 | <> 98 | {bg} 99 | 100 | ); 101 | } 102 | 103 | -------------------------------------------------------------------------------- /src/components/result/CropResult.css: -------------------------------------------------------------------------------- 1 | 2 | body{ 3 | overflow-x: hidden; /* Hide Scrollbars on X-axis*/ 4 | } 5 | 6 | .crop-result-p { 7 | color: black; 8 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 9 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 10 | font-size: x-large; 11 | margin-left: 5%; 12 | margin-top: 2%; 13 | text-align: center; 14 | } 15 | 16 | .crop-result-description { 17 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 18 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 19 | font-size: 1.2rem; 20 | font-weight: 360; 21 | margin-left: 15%; 22 | margin-right: 15%; 23 | text-align: center; 24 | } 25 | 26 | .crop-try-btn { 27 | background-color: #10a37f; 28 | border: none; 29 | color: white; 30 | padding: 15px; 31 | text-align: center; 32 | text-decoration: none; 33 | display: inline-block; 34 | font-size: 16px; 35 | font-weight: bolder; 36 | border-radius: 3px; 37 | width: 10rem; 38 | margin-left: 45%; 39 | margin-top: 1%; 40 | margin-bottom: 5%; 41 | } 42 | 43 | .crop-try-btn:hover { 44 | background-color: #007553; 45 | } 46 | 47 | .crop-try-btn:active { 48 | transform: scale(0.95, 0.95); 49 | } 50 | 51 | .crop-result-img { 52 | max-width: 23%; 53 | margin-left: 40%; 54 | border-radius: 3px; 55 | } 56 | 57 | /*------------------------------------------------------------------------*/ 58 | 59 | /* CSS for width between 350-415px */ 60 | @media (350px <= width <= 415px) { 61 | .crop-result-p { 62 | font-size: larger; 63 | margin-top: 8%; 64 | margin-left: 10%; 65 | margin-right: 10%; 66 | width: fit-content; 67 | } 68 | 69 | .crop-result-img { 70 | max-width: 80%; 71 | margin-left: 15%; 72 | border-radius: 3px; 73 | } 74 | 75 | .crop-result-description { 76 | font-size: 0.9rem; 77 | max-width: fit-content; 78 | margin-right: 10%; 79 | margin-left: 13%; 80 | } 81 | 82 | .crop-try-btn { 83 | margin-left: 35%; 84 | } 85 | } 86 | 87 | /*------------------------------------------------------------------------*/ 88 | 89 | /* CSS for width between 415-815px */ 90 | @media (415px <= width <= 815px) { 91 | .crop-result-p { 92 | font-size: x-larger; 93 | margin-top: 8%; 94 | margin-left: 25%; 95 | } 96 | 97 | .crop-result-img { 98 | max-width: 80%; 99 | margin-left: 25%; 100 | border-radius: 3px; 101 | } 102 | 103 | .crop-result-description { 104 | font-size: large; 105 | margin: 0%; 106 | margin-left: 24%; 107 | margin-top: 5%; 108 | margin-bottom: 5%; 109 | } 110 | 111 | .crop-try-btn { 112 | margin-left: 45%; 113 | } 114 | } 115 | 116 | /* CSS for width between 560-620px */ 117 | @media (560px <= width <= 620px) { 118 | .crop-result-p { 119 | margin-left: 20%; 120 | } 121 | 122 | .crop-result-img { 123 | max-width: 80%; 124 | margin-left: 23%; 125 | border-radius: 3px; 126 | } 127 | 128 | .crop-result-description { 129 | font-size: large; 130 | margin: 0%; 131 | margin-left: 23%; 132 | margin-top: 5%; 133 | margin-bottom: 5%; 134 | } 135 | 136 | .crop-try-btn { 137 | margin-left: 45%; 138 | } 139 | } 140 | 141 | /*------------------------------------------------------------------------*/ 142 | 143 | /* CSS for width between 620-815 */ 144 | @media (620px <= width <= 815px) { 145 | .crop-result-p { 146 | margin-left: 20%; 147 | } 148 | 149 | .crop-result-img { 150 | max-width: 80%; 151 | margin-left: 20%; 152 | border-radius: 3px; 153 | } 154 | 155 | .crop-result-description { 156 | font-size: large; 157 | margin: 0%; 158 | margin-left: 18%; 159 | margin-top: 5%; 160 | margin-bottom: 5%; 161 | } 162 | 163 | .crop-try-btn { 164 | margin-left: 45%; 165 | } 166 | } 167 | 168 | /* CSS for width between 670-915px */ 169 | @media (670px <= width <= 915px) { 170 | .crop-result-p { 171 | margin-left: 8%; 172 | } 173 | 174 | .crop-result-img { 175 | max-width: 80%; 176 | margin-left: 15%; 177 | border-radius: 3px; 178 | } 179 | 180 | .crop-result-description { 181 | font-size: large; 182 | margin: 0%; 183 | margin-left: 13%; 184 | margin-right: 10%; 185 | margin-top: 5%; 186 | margin-bottom: 5%; 187 | } 188 | 189 | .crop-try-btn { 190 | margin-left: 40%; 191 | } 192 | } 193 | 194 | /* CSS for width between 815px-915px */ 195 | @media (815px <= width <= 915px) { 196 | .crop-result-img { 197 | max-width: 80%; 198 | margin-left: 20%; 199 | border-radius: 3px; 200 | } 201 | } 202 | 203 | /* CSS for width between 915-1200 */ 204 | @media (915px <= width <= 1200px) { 205 | .crop-result-img { 206 | max-width: 90%; 207 | margin-left: 25%; 208 | border-radius: 3px; 209 | } 210 | } 211 | -------------------------------------------------------------------------------- /src/components/result/CropResult.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import Header from '../header/Header'; 3 | import "./CropResult.css" 4 | import { useNavigate, useLocation } from 'react-router-dom'; 5 | import { output_descriptions, label_image_paths } from '../crop/CropOutputs'; 6 | 7 | export function CropResult() { 8 | const navigate = useNavigate(); 9 | const location = useLocation(); 10 | const locationState = location.state; 11 | 12 | console.log("LOCATION : ", location) 13 | console.log("LOCATION STATE : ", locationState) 14 | 15 | // Runs at Initial Render. Redirects if State is null. 16 | useEffect(() => { 17 | if(locationState==null){ 18 | console.log("Redirecting to /crop...") 19 | navigate("/crop") 20 | } 21 | }, [locationState, navigate]); 22 | 23 | if(locationState==null){ 24 | console.log("LocationState is null") 25 | return null; 26 | } 27 | 28 | const predicted_crop = locationState["predicted_crop"]; 29 | const output_image_path = label_image_paths[predicted_crop]; 30 | console.log('Image Path : ', output_image_path) 31 | 32 | return ( 33 | <> 34 |
35 |

You should grow {predicted_crop.toUpperCase()} in your farm !

36 | 37 |

{output_descriptions[predicted_crop]}

38 | 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /src/components/result/FertilizerResult.css: -------------------------------------------------------------------------------- 1 | 2 | body{ 3 | overflow-x: hidden; /* Hide Scrollbars on X-axis*/ 4 | } 5 | 6 | .fertilizer-result-p { 7 | color: black; 8 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 9 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 10 | font-size: x-large; 11 | margin-left: 5%; 12 | margin-top: 2%; 13 | text-align: center; 14 | } 15 | 16 | .fertilizer-result-description { 17 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 18 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 19 | font-size: 1.2rem; 20 | font-weight: 320; 21 | margin-left: 15%; 22 | margin-right: 15%; 23 | text-align: center; 24 | } 25 | 26 | .fertilizer-try-btn { 27 | background-color: #10a37f; 28 | border: none; 29 | color: white; 30 | padding: 15px; 31 | text-align: center; 32 | text-decoration: none; 33 | display: inline-block; 34 | font-size: 16px; 35 | font-weight: bolder; 36 | border-radius: 3px; 37 | width: 10rem; 38 | margin-left: 45%; 39 | margin-top: 1%; 40 | margin-bottom: 5%; 41 | } 42 | 43 | .fertilizer-try-btn:hover { 44 | background-color: #007553; 45 | } 46 | 47 | .fertilizer-try-btn:active { 48 | transform: scale(0.95, 0.95); 49 | } 50 | 51 | .fertilizer-result-img { 52 | max-width: 20%; 53 | margin-left: 40%; 54 | border-radius: 3px; 55 | } 56 | 57 | /*------------------------------------------------------------------------*/ 58 | 59 | /* CSS for width between 350-415px */ 60 | @media (350px <= width <= 415px) { 61 | .fertilizer-result-p { 62 | font-size: larger; 63 | margin-top: 8%; 64 | margin-left: 10%; 65 | margin-right: 10%; 66 | width: fit-content; 67 | } 68 | 69 | .fertilizer-result-img { 70 | max-width: 80%; 71 | margin-left: 12%; 72 | border-radius: 3px; 73 | } 74 | 75 | .fertilizer-result-description { 76 | font-size: 0.9rem; 77 | max-width: fit-content; 78 | margin-right: 10%; 79 | margin-left: 13%; 80 | } 81 | 82 | .fertilizer-try-btn { 83 | margin-left: 35%; 84 | } 85 | } 86 | 87 | /*------------------------------------------------------------------------*/ 88 | 89 | /* CSS for width between 415-815px */ 90 | @media (415px <= width <= 815px) { 91 | .fertilizer-result-p { 92 | font-size: x-larger; 93 | margin-top: 8%; 94 | margin-left: 25%; 95 | } 96 | 97 | .fertilizer-result-img { 98 | max-width: 80%; 99 | margin-left: 25%; 100 | border-radius: 3px; 101 | } 102 | 103 | .fertilizer-result-description { 104 | font-size: large; 105 | margin: 0%; 106 | margin-left: 24%; 107 | margin-top: 5%; 108 | margin-bottom: 5%; 109 | } 110 | 111 | .fertilizer-try-btn { 112 | margin-left: 45%; 113 | } 114 | } 115 | 116 | /* CSS for width between 560-620px */ 117 | @media (560px <= width <= 620px) { 118 | .fertilizer-result-p { 119 | margin-left: 20%; 120 | } 121 | 122 | .fertilizer-result-img { 123 | max-width: 80%; 124 | margin-left: 23%; 125 | border-radius: 3px; 126 | } 127 | 128 | .fertilizer-result-description { 129 | font-size: large; 130 | margin: 0%; 131 | margin-left: 23%; 132 | margin-top: 5%; 133 | margin-bottom: 5%; 134 | } 135 | 136 | .fertilizer-try-btn { 137 | margin-left: 45%; 138 | } 139 | } 140 | 141 | /*------------------------------------------------------------------------*/ 142 | 143 | /* CSS for width between 620-815 */ 144 | @media (620px <= width <= 815px) { 145 | .fertilizer-result-p { 146 | margin-left: 20%; 147 | } 148 | 149 | .fertilizer-result-img { 150 | max-width: 80%; 151 | margin-left: 20%; 152 | border-radius: 3px; 153 | } 154 | 155 | .fertilizer-result-description { 156 | font-size: large; 157 | margin: 0%; 158 | margin-left: 18%; 159 | margin-top: 5%; 160 | margin-bottom: 5%; 161 | } 162 | 163 | .fertilizer-try-btn { 164 | margin-left: 45%; 165 | } 166 | } 167 | 168 | /* CSS for width between 670-915px */ 169 | @media (670px <= width <= 915px) { 170 | .fertilizer-result-p { 171 | margin-left: 8%; 172 | } 173 | 174 | .fertilizer-result-img { 175 | max-width: 80%; 176 | margin-left: 12%; 177 | border-radius: 3px; 178 | } 179 | 180 | .fertilizer-result-description { 181 | font-size: large; 182 | margin: 0%; 183 | margin-left: 13%; 184 | margin-right: 10%; 185 | margin-top: 5%; 186 | margin-bottom: 5%; 187 | } 188 | 189 | .fertilizer-try-btn { 190 | margin-left: 40%; 191 | } 192 | } 193 | 194 | /* CSS for width between 815px-915px */ 195 | @media (815px <= width <= 915px) { 196 | .fertilizer-result-img { 197 | max-width: 80%; 198 | margin-left: 12%; 199 | border-radius: 3px; 200 | } 201 | } 202 | 203 | /* CSS for width between 915-1200 */ 204 | @media (915px <= width <= 1200px) { 205 | .fertilizer-result-img { 206 | max-width: 70%; 207 | margin-left: 17%; 208 | border-radius: 3px; 209 | } 210 | } 211 | -------------------------------------------------------------------------------- /src/components/result/FertilizerResult.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import Header from '../header/Header'; 3 | import "./FertilizerResult.css" 4 | import { useNavigate, useLocation } from 'react-router-dom'; 5 | import { output_descriptions, label_image_paths } from '../fertilizer/FertilizerOutputs'; 6 | 7 | export function FertilizerResult() { 8 | const navigate = useNavigate(); 9 | const location = useLocation(); 10 | const locationState = location.state; 11 | 12 | console.log("LOCATION : ", location) 13 | console.log("LOCATION STATE : ", locationState) 14 | 15 | // Runs at Initial Render. Redirects if State is null. 16 | useEffect(() => { 17 | if (locationState == null) { 18 | console.log("Redirecting to /fertilizer...") 19 | navigate("/fertilizer") 20 | } 21 | }, [locationState, navigate]); 22 | 23 | if (locationState == null) { 24 | console.log("LocationState is null") 25 | return null; 26 | } 27 | 28 | const predicted_fertilizer = locationState["predicted_fertilizer"]; 29 | const output_image_path = label_image_paths[predicted_fertilizer]; 30 | console.log('Image Path : ', output_image_path) 31 | 32 | return ( 33 | <> 34 |
35 |

You should use {predicted_fertilizer.toUpperCase()} fertilizer in your farm !

36 | 37 |

{output_descriptions[predicted_fertilizer]}

38 | 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import { BrowserRouter as Router } from 'react-router-dom' 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | export default defineConfig({ 5 | plugins: [react()], 6 | }) --------------------------------------------------------------------------------