Feat:Added Plant disease prediction

Frontend/src/pages/UserPanel/Ai.jsx

@@ -1,42 +1,43 @@
 import React, { useState } from "react";
-import Loader from "../../components/Loader";
 
 const Ai = () => {
   const [selectedFile, setSelectedFile] = useState(null);
-  const [result, setResult] = useState("");
+  const [prediction, setPrediction] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
   const handleFileChange = (e) => {
+    if (e.target.files && e.target.files[0]) {
       setSelectedFile(e.target.files[0]);
+    }
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!selectedFile) return;
+
     setLoading(true);
-    setResult("");
+    setPrediction("");
     setError("");
 
     try {
       const formData = new FormData();
       formData.append("image", selectedFile);
 
-      // Update the URL if needed.
-      const response = await fetch("http://localhost:8000/api/v1/vegetable", {
+      const response = await fetch("http://localhost:3000/predict", {
         method: "POST",
         body: formData,
       });
 
       if (!response.ok) {
-        throw new Error("Failed to classify image");
+        throw new Error("Prediction request failed");
       }
 
       const data = await response.json();
-      // Assume the API returns an object with an "output" field.
-      setResult(data.output || "No result provided");
+      // Assuming the API returns a JSON object with an "output" field.
+      setPrediction(data.output || "No prediction returned");
     } catch (err) {
-      console.error("Error:", err);
+      console.error("Error during prediction:", err);
       setError(err.message);
     } finally {
       setLoading(false);
@@ -46,7 +47,7 @@ const Ai = () => {
   return (
     <div className="max-w-md mx-auto p-6 bg-white shadow rounded-lg">
       <h2 className="text-2xl font-bold mb-4 text-center">
-        Vegetable Classifier
+        Plant disease prediction
       </h2>
       <form onSubmit={handleSubmit} className="space-y-4">
         <input
@@ -60,14 +61,14 @@ const Ai = () => {
           disabled={loading || !selectedFile}
           className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
         >
-          {loading ? <Loader> </Loader> : "Upload and Classify"}
+          {loading ? "Predicting..." : "Predict"}
         </button>
       </form>
-      {error && <p className="mt-4 text-red-600 text-center">{error}</p>}
-      {result && (
+      {error && <p className="mt-4 text-center text-red-600">{error}</p>}
+      {prediction && (
         <div className="mt-4 p-4 bg-green-100 border border-green-300 rounded">
-          <h3 className="text-lg font-semibold">Result:</h3>
-          <p>{result}</p>
+          <h3 className="text-lg font-semibold">Prediction:</h3>
+          <p>{prediction}</p>
         </div>
       )}
     </div>