Integrates Plant.id evaluations

agrilens · Nov 30, 2024 · 594c8c6 · 594c8c6
1 parent 1374d6d
commit 594c8c6
Showing 4 changed files with 235 additions and 123 deletions.
diff --git a/src/chat/Chat.jsx b/src/chat/Chat.jsx
@@ -132,12 +132,11 @@ export const Chat = () => {
                   </div>
                 </Message.CustomContent>
               </Message>
-              {messages.map((message, i) => {
-                // console.log(i, message);
+              {messages?.map((message, i) => {
                 return (
                   <Message key={i} model={message}>
                     <Message.Header
-                      sender={message.sender === "user" ? "ME" : "AGRILENS"}
+                      sender={message?.sender === "user" ? "ME" : "AGRILENS"}
                       sentTime="just now"
                       className="chat-message-header bolder"
                     />
@@ -146,7 +145,7 @@ export const Chat = () => {
                         remarkPlugins={[remarkGfm]}
                         rehypePlugins={[rehypeRaw]}
                       >
-                        {message.message.trim()}
+                        {message?.message?.trim()}
                       </ReactMarkdown>
                     </Message.CustomContent>
                   </Message>

diff --git a/src/homePage/uploadImage/DataTable.jsx b/src/homePage/uploadImage/DataTable.jsx
@@ -30,38 +30,72 @@ const DataTable = ({ selectedEval, id }) => {
   const key = Object?.keys(selectedEval)[0];
   let data = selectedEval[key];
 
-  const evaluationFrame = [
-    {
-      label: "Identification",
-      value: data?.plant_id,
-      isValue: data?.plant_id !== "None detected" ? true : false,
-    },
-    {
-      label: "Health Score",
-      value: data?.health_score,
-      isValue: data?.health_score ? true : false,
-    },
-    {
-      label: "Pest Detected",
-      value: data?.pest_identification,
-      isValue: data?.pest_identification !== "None detected" ? true : false,
-    },
-    {
-      label: "Disease Detected",
-      value: data?.disease_identification,
-      isValue: data?.disease_identification !== "None detected" ? true : false,
-    },
-    {
-      label: "Weed Presence",
-      value: data?.weed_presence,
-      isValue: data?.weed_presence !== "None detected" ? true : false,
-    },
-    {
-      label: "Sustainable Practice Suggestion",
-      value: Array.isArray(data?.recommendations) ? data?.recommendations : [],
-      isValue: data?.recommendations?.length !== 0 ? true : false,
-    },
-  ];
+  let evaluationFrame = [];
+  if (key === "plantid") {
+    evaluationFrame = [
+      {
+        label: "Identification",
+        value: data?.name || "Unknown",
+        isValue: !!data?.name,
+      },
+      {
+        label: "Probability",
+        value: `${(data?.probability * 100).toFixed(2)}%`,
+        isValue: !!data?.probability,
+      },
+      {
+        label: "Common Names",
+        value: data?.details?.common_names?.join(", ") || "None available",
+        isValue: data?.details?.common_names?.length > 0,
+      },
+      {
+        label: "Description",
+        value: data?.details?.description?.value || "Description not available",
+        isValue: !!data?.details?.description?.value,
+      },
+      {
+        label: "Description Citation",
+        value: data?.details?.description?.citation || "Citation not available",
+        isValue: !!data?.details?.description?.citation,
+      },
+    ];
+  } else {
+    evaluationFrame = [
+      {
+        label: "Identification",
+        value: data?.plant_id,
+        isValue: data?.plant_id !== "None detected" ? true : false,
+      },
+      {
+        label: "Health Score",
+        value: data?.health_score,
+        isValue: data?.health_score ? true : false,
+      },
+      {
+        label: "Pest Detected",
+        value: data?.pest_identification,
+        isValue: data?.pest_identification !== "None detected" ? true : false,
+      },
+      {
+        label: "Disease Detected",
+        value: data?.disease_identification,
+        isValue:
+          data?.disease_identification !== "None detected" ? true : false,
+      },
+      {
+        label: "Weed Presence",
+        value: data?.weed_presence,
+        isValue: data?.weed_presence !== "None detected" ? true : false,
+      },
+      {
+        label: "Sustainable Practice Suggestion",
+        value: Array.isArray(data?.recommendations)
+          ? data?.recommendations
+          : [],
+        isValue: data?.recommendations?.length !== 0 ? true : false,
+      },
+    ];
+  }
 
   const score = data?.health_score;
   /* Healthy >= 98 | 98 < Mild Issues >= 80 | 80 < Moderate Issues >= 50 |Severe Issues < 50 */
@@ -92,7 +126,6 @@ const DataTable = ({ selectedEval, id }) => {
           userID: userID,
         },
       };
-      // console.log(">> updateUserAccInfoDB: ", data);
       const response = await axios.put(
         `${url}/users/save-evaluation`,
         { scanId: userLastScanId, evaluation: selectedEval },
@@ -103,7 +136,6 @@ const DataTable = ({ selectedEval, id }) => {
       setSaveBtnTxt("Result Saved");
       setSaveBtnClass("success text-white disabled");
 
-      // console.log("updatedEvaluation: ", updatedEvaluation);
       return updatedEvaluation;
     } catch (err) {
       console.error("handleSaveResult() Error:", err);
@@ -112,11 +144,14 @@ const DataTable = ({ selectedEval, id }) => {
     return;
   };
   const handleChatAboutResult = () => {
-    updateUserLastScanSummary(data?.summary);
-    updateUserSelectedModel(key);
+    updateUserLastScanSummary(() => {
+      return key === "plantid"
+        ? `Plant identification by Plant.id: ${data?.details?.description?.value}`
+        : data?.summary;
+    });
+    updateUserSelectedModel(() => (key === "plantid" ? "qwen" : key));
 
     if (chatBotRef.current) {
-      // console.log(">>>>> chatBotRef?.current: ", chatBotRef.current);
       chatBotRef.current.scrollIntoView({
         behavior: "smooth",
         block: "center",
@@ -134,7 +169,7 @@ const DataTable = ({ selectedEval, id }) => {
       <Card className="dataTable-card ">
         <Card.Header className="p-4  dataTable-card-header d-flex">
           <Card.Title className="fs-4 ps-2 display-3 fw-bold text-white align-left">
-            Overall Health Status:
+            {key !== "plantid" && "Overall Health Status:"}
           </Card.Title>
           <div className={`fs-1 ps-3 fw-bolder align-left text-${statusColor}`}>
             {data?.overall_health_status}
@@ -143,35 +178,53 @@ const DataTable = ({ selectedEval, id }) => {
         <Card.Body className="dataTable-card-body p-4">
           <div className="dataTable-card-text">
             <ul className="dataTableCard-ul list-unstyled text-white p-3 ps-3">
-              {evaluationFrame?.map((item, i) => (
-                <div
-                  className={`dataTableCard-li-wrapper fs-4 ${i < 2 ? "d-flex-row" : ""} fs-5 pb-2 mb-2`}
-                  key={i}
-                >
-                  <div className="d-flex align-items-center">
-                    <i
-                      className={`fa-regular me-2 fa-circle${item?.isValue ? "-check" : "-xmark"}`}
-                    ></i>
-                    <li className="dataTableCard-li">{item?.label}:</li>
-                  </div>
+              {key !== "plantid" &&
+                evaluationFrame?.map((item, i) => (
                   <div
-                    className={`text-start ps-4 fw-bold ${item?.label === "Sustainable Practice Suggestion" ? "d-none" : ""}`}
+                    className={`dataTableCard-li-wrapper fs-4 ${i < 2 ? "d-flex-row" : ""} fs-5 pb-2 mb-2`}
+                    key={i}
                   >
-                    {item?.value}
+                    <div className="d-flex align-items-center">
+                      <i
+                        className={`fa-regular me-2 fa-circle${item?.isValue ? "-check" : "-xmark"}`}
+                      ></i>
+                      <li className="dataTableCard-li">{item?.label}:</li>
+                    </div>
+                    <div
+                      className={`text-start ps-4 fw-bold ${item?.label === "Sustainable Practice Suggestion" ? "d-none" : ""}`}
+                    >
+                      {item?.value}
+                    </div>
+                    <ul
+                      className={`text-start ps-5 fs-4 fw-bold  ${item?.label === "Sustainable Practice Suggestion" ? "d-block" : "d-none"}`}
+                    >
+                      {Array.isArray(item?.value) ? (
+                        item?.value?.map((val, index) => (
+                          <li key={index}>{val}</li>
+                        ))
+                      ) : (
+                        <li>{item?.value}</li> // Fallback when item.value is not a valid array - display it as it is.
+                      )}
+                    </ul>
                   </div>
-                  <ul
-                    className={`text-start ps-5 fs-4 fw-bold  ${item?.label === "Sustainable Practice Suggestion" ? "d-block" : "d-none"}`}
+                ))}
+              {key === "plantid" &&
+                evaluationFrame?.map((item, i) => (
+                  <div
+                    className={`dataTableCard-li-wrapper fs-4 ${i < 2 ? "d-flex-row" : ""} fs-5 pb-2 mb-2`}
+                    key={i}
                   >
-                    {Array.isArray(item?.value) ? (
-                      item?.value?.map((val, index) => (
-                        <li key={index}>{val}</li>
-                      ))
-                    ) : (
-                      <li>{item?.value}</li> // Fallback when item.value is not a valid array - display it as it is.
-                    )}
-                  </ul>
-                </div>
-              ))}
+                    <div className="d-flex align-items-center">
+                      <i
+                        className={`fa-regular me-2 fa-circle${item?.isValue ? "-check" : "-xmark"}`}
+                      ></i>
+                      <li className="dataTableCard-li">{item?.label}:</li>
+                    </div>
+                    <div className={`text-start ps-4 fw-bold`}>
+                      {item?.value}
+                    </div>
+                  </div>
+                ))}
             </ul>
           </div>
           <Button

diff --git a/src/homePage/uploadImage/EvaluationCard.jsx b/src/homePage/uploadImage/EvaluationCard.jsx
@@ -23,6 +23,7 @@ const EvaluationCard = ({ evaluation, id, isSelected, onSelect }) => {
     );
     // eslint-disable-next-line
   }, [evaluation]);
+  useEffect(() => {}, []);
 
   const score = evaluation?.health_score;
   /* Healthy >= 98 | 98 < Mild Issues >= 80 | 80 < Moderate Issues >= 50 |Severe Issues < 50 */
@@ -36,54 +37,90 @@ const EvaluationCard = ({ evaluation, id, isSelected, onSelect }) => {
           ? "warning"
           : "danger";
 
-  const evaluationFrame = [
-    {
-      label: "Identification",
-      value: evaluation?.plant_id,
-      isValue: evaluation?.plant_id !== "None detected" ? true : false,
-    },
-    {
-      label: "Health Status",
-      value: evaluation?.overall_health_status,
-      isValue: evaluation?.overall_health_status ? true : false,
-    },
-    {
-      label: "Health Score",
-      value: evaluation?.health_score,
-      isValue: evaluation?.health_score ? true : false,
-    },
+  let evaluationFrame = [];
+  if (id === "plantid") {
+    evaluationFrame = [
+      {
+        label: "Identification",
+        value: evaluation?.name || "Unknown",
+        isValue: !!evaluation?.name,
+      },
+      {
+        label: "Probability",
+        value: `${(evaluation?.probability * 100).toFixed(2)}%`,
+        isValue: !!evaluation?.probability,
+      },
+      {
+        label: "Common Names",
+        value:
+          evaluation?.details?.common_names?.join(", ") || "None available",
+        isValue: evaluation?.details?.common_names?.length > 0,
+      },
+      {
+        label: "Description",
+        value:
+          evaluation?.details?.description?.value ||
+          "Description not available",
+        isValue: !!evaluation?.details?.description?.value,
+      },
+      {
+        label: "Description Citation",
+        value:
+          evaluation?.details?.description?.citation ||
+          "Citation not available",
+        isValue: !!evaluation?.details?.description?.citation,
+      },
+    ];
+  } else {
+    evaluationFrame = [
+      {
+        label: "Identification",
+        value: evaluation?.plant_id,
+        isValue: evaluation?.plant_id !== "None detected" ? true : false,
+      },
+      {
+        label: "Health Status",
+        value: evaluation?.overall_health_status,
+        isValue: evaluation?.overall_health_status ? true : false,
+      },
+      {
+        label: "Health Score",
+        value: evaluation?.health_score,
+        isValue: evaluation?.health_score ? true : false,
+      },
 
-    {
-      label: "Pest Detected",
-      value: evaluation?.pest_identification,
-      isValue:
-        evaluation?.pest_identification !== "None detected" ? true : false,
-    },
-    {
-      label: "Disease Detected",
-      value: evaluation?.disease_identification,
-      isValue:
-        evaluation?.disease_identification !== "None detected" ? true : false,
-    },
-    {
-      label: "Weed Presence",
-      value: evaluation?.weed_presence,
-      isValue: evaluation?.weed_presence !== "None detected" ? true : false,
-    },
-    {
-      label: "Sustainable Practice Suggestion",
-      value: evaluation?.recommendations,
-      isValue: evaluation?.recommendations?.length !== 0 ? true : false,
-    },
-  ];
+      {
+        label: "Pest Detected",
+        value: evaluation?.pest_identification,
+        isValue:
+          evaluation?.pest_identification !== "None detected" ? true : false,
+      },
+      {
+        label: "Disease Detected",
+        value: evaluation?.disease_identification,
+        isValue:
+          evaluation?.disease_identification !== "None detected" ? true : false,
+      },
+      {
+        label: "Weed Presence",
+        value: evaluation?.weed_presence,
+        isValue: evaluation?.weed_presence !== "None detected" ? true : false,
+      },
+      {
+        label: "Sustainable Practice Suggestion",
+        value: evaluation?.recommendations,
+        isValue: evaluation?.recommendations?.length !== 0 ? true : false,
+      },
+    ];
+  }
 
   return (
     <Col
       lg="4"
       md="6"
       id="evaluationCard"
       onClick={onSelect}
-      className={`mx-auto ${isSelected ? "selected-evaluation" : ""} mt-5`}
+      className={` ${isSelected ? "selected-evaluation" : ""} mx-auto mt-5`}
     >
       <div className="evaluation-card-tag mx-auto fs-5 fw-bold ">
         {id} Evaluation
@@ -102,17 +139,30 @@ const EvaluationCard = ({ evaluation, id, isSelected, onSelect }) => {
         <Card.Body className="evaluation-card-body p-4">
           <div>
             <ul className="evaluationCard-ul list-unstyled text-white p-3">
-              {evaluationFrame?.map((item, i) => (
-                <div
-                  className="evaluationCard-li-wrapper fs-5 pb-2 mb-2"
-                  key={i}
-                >
-                  <i
-                    className={`fa-regular  me-2 fa-circle${item.isValue ? "-check" : "-xmark"}`}
-                  ></i>
-                  <li className="evaluationCard-li ">{item.label}</li>
-                </div>
-              ))}
+              {id !== "plantid" &&
+                evaluationFrame?.map((item, i) => (
+                  <div
+                    className="evaluationCard-li-wrapper fs-5 pb-2 mb-2"
+                    key={i}
+                  >
+                    <i
+                      className={`fa-regular  me-2 fa-circle${item.isValue ? "-check" : "-xmark"}`}
+                    ></i>
+                    <li className="evaluationCard-li ">{item.label}</li>
+                  </div>
+                ))}
+              {id === "plantid" &&
+                evaluationFrame?.map((item, i) => (
+                  <div
+                    className="evaluationCard-li-wrapper fs-5 pb-2 mb-2"
+                    key={i}
+                  >
+                    <i
+                      className={`fa-regular  me-2 fa-circle${item.isValue ? "-check" : "-xmark"}`}
+                    ></i>
+                    <li className="evaluationCard-li ">{item.label}</li>
+                  </div>
+                ))}
             </ul>
           </div>
           <Button

diff --git a/src/homePage/uploadImage/UploadImage.jsx b/src/homePage/uploadImage/UploadImage.jsx
@@ -33,7 +33,7 @@ const url = process.env.REACT_APP_BACKEND_API_URL;
 
 export default function UploadImage() {
   const [selectedInsightIds, setSelectedInsightIds] = useState([]);
-  const [selectedEvaluation, setselectedEvaluation] = useState("");
+  const [selectedEvaluation, setSelectedEvaluation] = useState("");
   const [file, setFile] = useState();
   const [analysisResults, setAnalysisResults] = useState([]);
   const [evaluations, setEvaluations] = useState([]);
@@ -80,7 +80,7 @@ export default function UploadImage() {
     );
   };
   const toggleEvaluateSelection = (id) => {
-    setselectedEvaluation(() => id);
+    setSelectedEvaluation(() => id);
   };
 
   const fetchData = async (url, data) => {
@@ -125,12 +125,23 @@ export default function UploadImage() {
       return;
     }
 
+    let currentInsightIds = selectedInsightIds;
+    if (currentInsightIds.length === 0) {
+      currentInsightIds = [
+        "pestDiagnosis",
+        "sustainablePractices",
+        "identifySpecies",
+        "overallHealth",
+      ];
+      setSelectedInsightIds(currentInsightIds);
+    }
+
     updateSelectedEvaluationDetail(null);
     updateLastConversation([]);
 
     const formData = new FormData();
     formData.append("image", file);
-    selectedInsightIds.forEach((id) => {
+    currentInsightIds.forEach((id) => {
       formData.append("insights[]", id);
     });
 
@@ -254,15 +265,14 @@ export default function UploadImage() {
           </Col>
         </Row>
         {status === 200 && analysisResults?.length !== 0 && (
-          <Row className="text-center pb-5" ref={evaluationCardsRef}>
+          <Row className="text-center pb-5 " ref={evaluationCardsRef}>
             <div className="fw-bold h1 text-primary px-5">
               Select an evaluation below to explore detailed insights, analyzed
               by different models.
             </div>
             {analysisResults?.map((analysisResult, index) => (
               <Col key={index}>
                 {Object?.entries(analysisResult).map(([key, value]) => {
-                  // console.log(`Key: ${key}, Value: ${value}`);
                   return (
                     <EvaluationCard
                       key={key}