Gives error when the model determines if the submitted image is invalid.

agrilens · Nov 23, 2024 · 1df5071 · 1df5071
1 parent de06c20
commit 1df5071
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 deletions.
diff --git a/src/common/ActionErrorPopup.jsx b/src/common/ActionErrorPopup.jsx
@@ -20,9 +20,11 @@ const ActionErrorPopup = ({ errorTitle, errorMessage }) => {
             {modalErrorMessage.errorTitle || "Error"}
           </Modal.Title>
         </Modal.Header>
-        <Modal.Body className="text-primary fs-2">
-          <i className="fa-sharp fa-solid fa-circle-info me-2" />
-          {modalErrorMessage.errorMessage || "Something wrong happened."}
+        <Modal.Body className="d-flex text-primary gap-2 fs-2">
+          <i className="fa-sharp fa-solid fa-circle-info pt-2" />
+          <div>
+            {modalErrorMessage.errorMessage || "Something wrong happened."}
+          </div>
         </Modal.Body>
         <Modal.Footer>
           <Button

diff --git a/src/common/UserErrorPopup.jsx b/src/common/UserErrorPopup.jsx
diff --git a/src/homePage/uploadImage/UploadImage.jsx b/src/homePage/uploadImage/UploadImage.jsx
@@ -39,6 +39,7 @@ export default function UploadImage() {
   const [evaluations, setEvaluations] = useState([]);
   const [loading, setLoading] = useState(false);
   const [status, setStatus] = useState(null);
+  const [isImageValid, setIsImageValid] = useState("");
   const [error, setError] = useState(false);
 
   const { userID, userLastScanSummary } = useAccountContext();
@@ -61,7 +62,16 @@ export default function UploadImage() {
     },
   };
 
-  useEffect(() => {}, [status]);
+  useEffect(() => {
+    if (isImageValid === false) {
+      handleShowErrorModal({
+        errorTitle: "Invalid Image",
+        errorMessage:
+          "The uploaded image doesn't appear to be of a plant. Please upload a clear and valid plant image to proceed with the analysis.",
+      });
+      return;
+    }
+  }, [status, isImageValid]);
 
   const handleImageChange = (event) => {
     const file = event?.target?.files[0];
@@ -88,10 +98,11 @@ export default function UploadImage() {
       const response = await axios.post(url, data, headers);
 
       setStatus(() => response?.status);
+      setIsImageValid(() => response?.data?.isImageValid);
       updateUserLastScanId(() => response?.data?.scanId);
       setAnalysisResults(() => response?.data?.results);
       setEvaluations(() => response?.data?.results);
-      // console.log(">>> 3. analysisResult:", analysisResult);
+      console.log(">>> 3. response?.data: ", response?.data);
     } catch (err) {
       console.error("fetchData() Error:", err);
       setError(err.message);
@@ -108,10 +119,6 @@ export default function UploadImage() {
       });
       return;
     }
-    // if (selectedInsightIds.length === 0) {
-    //   console.log("Please select at least one insight.");
-    //   return;
-    // }
 
     updateSelectedEvaluationDetail(null);
     updateLastConversation([]);
@@ -128,7 +135,7 @@ export default function UploadImage() {
   const evaluationCardsRef = useRef(null);
   const dataTableRef = useRef(null);
   useEffect(() => {
-    if (status === 200 && evaluationCardsRef.current) {
+    if (status === 200 && isImageValid && evaluationCardsRef.current) {
       evaluationCardsRef?.current?.scrollIntoView({
         behavior: "smooth",
         block: "center",