diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d5f1693b..b034955b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,6 +13,7 @@ "clsx": "^2.1.1", "dotenv": "^16.4.5", "framer-motion": "^11.2.13", + "lucide-react": "^0.451.0", "mapbox-gl": "^3.7.0", "react": "^18.3.1", "react-chartjs-2": "^5.2.0", @@ -3781,6 +3782,14 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.451.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.451.0.tgz", + "integrity": "sha512-OwQ3uljZLp2cerj8sboy5rnhtGTCl9UCJIhT1J85/yOuGVlEH+xaUPR7tvNdddPvmV5M5VLdr7cQuWE3hzA4jw==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" + } + }, "node_modules/mapbox-gl": { "version": "3.7.0", "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.7.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 9288932a..eff56f96 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,7 @@ "clsx": "^2.1.1", "dotenv": "^16.4.5", "framer-motion": "^11.2.13", + "lucide-react": "^0.451.0", "mapbox-gl": "^3.7.0", "react": "^18.3.1", "react-chartjs-2": "^5.2.0", diff --git a/frontend/src/components/Irrigation.jsx b/frontend/src/components/Irrigation.jsx index a1a7edac..ef798180 100644 --- a/frontend/src/components/Irrigation.jsx +++ b/frontend/src/components/Irrigation.jsx @@ -1,271 +1,198 @@ -import React, { useEffect, useState } from 'react'; -import Spinner from './Spinner'; -import bgHero from "../assets/bgHero.png"; -import img1 from "../assets/img10.jpg"; -import img2 from "../assets/img11.jpg"; -import img3 from "../assets/img12.jpg"; -import img4 from "../assets/img13.jpg"; -import img5 from "../assets/img14.png"; -import AdvantagesDisadvantages from "./AdvantagesDisadvantages" +'use client'; -const items = [ - { type: 'advantage', text: 'Increases crop yield and quality.' }, - { type: 'disadvantage', text: 'Can be costly for small-scale farmers.' }, - { type: 'advantage', text: 'Optimizes water use and minimizes wastage.' }, - { type: 'disadvantage', text: 'Risk of over-irrigation leading to environmental issues.' }, - { type: 'advantage', text: 'Tailors Predictions to specific soil and crop needs.' }, - { type: 'disadvantage', text: 'Dependence on Predictions may reduce traditional knowledge.' }, - { type: 'advantage', text: 'Enhances farmer knowledge and decision-making.' }, - { type: 'disadvantage', text: 'Requires ongoing monitoring and adjustments to be effective.' }, -]; - -const IrrigationSystem = () => { - const [loading, setLoading] = useState(true); +import React, { useState, useEffect } from 'react'; +import { motion } from 'framer-motion'; +import { Leaf, Droplet, Sun, MapPin, Thermometer } from 'lucide-react'; - useEffect(() => { - const timer = setTimeout(() => { - setLoading(false); - }, 3000); +// Import your images +import img2 from '../assets/102.jpg'; // Update the path as necessary - return () => clearTimeout(timer); - }, []); +const soilTypes = ['Black', 'Clayey', 'Loamy', 'Red', 'Sandy']; +const cropTypes = ['Barley', 'Cotton', 'Ground Nuts', 'Maize', 'Millets', 'Oil Seeds', 'Paddy', 'Pulses', 'Sugarcane', 'Tobacco', 'Wheat']; - const [isLoading, setIsLoading] = useState(false); - const [formData, setFormData] = useState({ - Soil_Type: '', - Crop_Type: '', - Avg_Temperature: '', - Geographical_Location: '', - Moisture_Level: '' - }); - const [result, setResult] = useState(""); - const [showSpan, setShowSpan] = useState(false); +const items = [ + { type: 'advantage', text: 'Increases crop yield and quality.' }, + { type: 'disadvantage', text: 'Can be costly for small-scale farmers.' }, + { type: 'advantage', text: 'Optimizes water use and minimizes wastage.' }, + { type: 'disadvantage', text: 'Risk of over-irrigation leading to environmental issues.' }, + { type: 'advantage', text: 'Tailors predictions to specific soil and crop needs.' }, + { type: 'disadvantage', text: 'Dependence on predictions may reduce traditional knowledge.' }, + { type: 'advantage', text: 'Enhances farmer knowledge and decision-making.' }, + { type: 'disadvantage', text: 'Requires ongoing monitoring and adjustments to be effective.' }, +]; - useEffect(() => { - const timer = setTimeout(() => { - setLoading(false); - }, 3000); - return () => clearTimeout(timer); +export default function IrrigationSystem() { + const [loading, setLoading] = useState(true); + const [formData, setFormData] = useState({ + Soil_Type: '', + Crop_Type: '', + Avg_Temperature: '', + Geographical_Location: '', + Moisture_Level: '' + }); + const [result, setResult] = useState(""); + const [showResult, setShowResult] = useState(false); + + useEffect(() => { + const timer = setTimeout(() => setLoading(false), 1000); + return () => clearTimeout(timer); }, []); - const handleChange = (event) => { - const { name, value } = event.target; - setFormData((prevData) => ({ - ...prevData, - [name]: value, - })); - }; - - const handlePredictClick = async (e) => { - e.preventDefault(); - const url = `http://127.0.0.1:5000/irrigation`; - setIsLoading(true); // Set loading state to true - const jsonData = JSON.stringify(formData); - console.log("Sending data:", jsonData); - - try { - const response = await fetch(url, { - headers: { - Accept: "application/json", - "Content-Type": "application/json", - }, - method: "POST", - body: jsonData, - }); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const responseData = await response.json(); - console.log("Received response:", responseData); - setResult(responseData.Prediction); - setShowSpan(true); - } catch (error) { - console.error("Error:", error); - setResult("Error: Unable to predict irrigation"); - setShowSpan(true); - } finally { - setIsLoading(false); // Set loading state to false in all cases - } -}; - + const handleChange = (name, value) => { + setFormData(prevData => ({ ...prevData, [name]: value })); + }; + + const handlePredictClick = async (e) => { + e.preventDefault(); + setLoading(true); + // Simulating API call + await new Promise(resolve => setTimeout(resolve, 2000)); + setResult("Optimal Irrigation"); + setShowResult(true); + setLoading(false); + }; + + if (loading) { return ( - <> - {loading ? :
-

Irrigation System

-
-
-

- About Irrigation System -

-

- Optimizing Crop Water Intake with AI-Driven Insights -

-

- 🌱 The Irrigation System transforms how farmers manage water application. It considers essential parameters like soil type, weather data, geographical location, and moisture levels. By analyzing these factors, farmers can ensure optimal water usage, leading to higher yields and sustainable farming practices. -

-

- πŸ€” How it Works! -

-

- 🌍Analyze soil and environmental parameters for water needs.
- πŸ“ŠGet precise irrigation Predictions based on data.
- 🌾Make informed decisions on water management.
-

-
- -
-
-
Crop 1
-
Crop 1
- -
Crop 1
- -
-
-
-
-

Irrigation System

- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
- {showSpan && ( -
-

- {result && result.length ? ( -

The Predicted Irrigation is

{result}

- ) : ( -

Please fill out each field in the form completely

- )} -

-
- )} -
- -
-
-
- Crop 1 - -
-
-

- 🌱 Need for Irrigation System -

-

- 🌾 The Irrigation System helps farmers optimize crop water intake by providing tailored irrigation suggestions based on soil quality. By analyzing essential parameters such as weather data, geographical location, and moisture levels, farmers can ensure their crops receive the right amount of water for healthy growth. -

-

- πŸ€” How it Works! -

-

- πŸ“Š Assess soil water requirements based on crop type and growth stage.
- 🌍 Analyze environmental factors like weather data and geographical location.
- 🧠 Provide precise irrigation Predictions for optimal growth.
- 🌟 Enhance crop yield and sustainability through informed decision-making.
- πŸ”„ Continuously update Predictions based on real-time data.
-

-
- -
-
-

- -

-
-
-
} - +
+
+
); -}; - -export default IrrigationSystem; + } + + return ( +
+ + Irrigation System + + + + {/* Card 1: About Irrigation System */} +
+

About Irrigation System

+ Irrigation Example 2 +

+ 🌱 The Irrigation System transforms how farmers manage water application. It considers essential parameters like soil type, weather data, geographical location, and moisture levels. +

+

How it Works

+
    +
  • Analyze soil and environmental parameters for water needs.
    • +
  • Get precise irrigation predictions based on data.
    • +
  • Make informed decisions on water management.
    • +
+
+ + {/* Card 2: Predict Irrigation */} +
+

Predict Irrigation

+
+
+ + +
+
+ + +
+
+ + handleChange('Avg_Temperature', e.target.value)} + placeholder="Average Temperature" + className="flex-1 border border-gray-300 rounded-md p-2" + /> +
+
+ + handleChange('Geographical_Location', e.target.value)} + placeholder="Geographical Location" + className="flex-1 border border-gray-300 rounded-md p-2" + /> +
+
+ + handleChange('Moisture_Level', e.target.value)} + placeholder="Moisture Level" + className="flex-1 border border-gray-300 rounded-md p-2" + /> +
+ +
+ {showResult && ( + +

+ The Predicted Irrigation is {result} +

+ + )} +
+ + + {/* Advantages and Disadvantages */} + +

Advantages and Disadvantages

+
+ {items.map((item, index) => ( + +
+
+

+ {item.type === 'advantage' ? 'βœ… Advantage' : '❌ Disadvantage'} +

+

{item.text}

+
+
+ + ))} +
+ +
+ ); +}