tahmid-saj · tahmid-saj · Jun 16, 2024 · Jun 16, 2024
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />

diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/...nents/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx b/...nents/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx
@@ -15,6 +15,7 @@ import { COLOR_CODES } from "../../../../../utils/constants/shared.constants.js"
 
 const defaultFormFields = {
   mealDescription: "",
+  uploadedImagePath: "",
   uploadedImage: "",
   imageUrl: "",
 }
@@ -36,18 +37,18 @@ const UploadImage = () => {
   const handleSubmit = async (event) => {
     event.preventDefault();
 
-    console.log(formFields.uploadedImage);
+    console.log(formFields.uploadedImagePath);
 
     if (formFields.mealDescription !== "") {
       // use the meal description to predict
       await detectNutrients(formFields.mealDescription)
       console.log("meal hit")
     } else {
       // use the uploaded image to predict
-      if (formFields.uploadedImage && formFields.uploadedImage !== "") {
-        await updateImageAndPrediction(formFields.uploadedImage, NUTRIENT_PREDICTOR_ENUMS.image);
-      } else if (formFields.imageUrl && formFields.imageUrl !== "") {
+      if (formFields.imageUrl && formFields.imageUrl !== "") {
         await updateImageAndPrediction(formFields.imageUrl, NUTRIENT_PREDICTOR_ENUMS.url)
+      } else {
+        await updateImageAndPrediction(formFields.uploadedImagePath, NUTRIENT_PREDICTOR_ENUMS.image, formFields.uploadedImage);
       }
     }
 
@@ -58,17 +59,25 @@ const UploadImage = () => {
   const handleChange = (event, type) => {
     event.preventDefault();
     const { name, value } = event.target
+    console.log(name, value)
 
-    setFormFields({ ...formFields, [name]: value });
+    setFormFields({ 
+      ...formFields,
+      uploadedImage: name === "uploadedImagePath" ? URL.createObjectURL(event.target.files[0]) : "",
+      [name]: value }
+    );
 
     if (type === NUTRIENT_PREDICTOR_ENUMS.image || type === NUTRIENT_PREDICTOR_ENUMS.url) {
-      updateImage(event.target.value, type);
+      // updateImage(event.target.value, type);
 
       const imageEl = document.getElementById('imageOutput');
       if (imageEl !== null) {
 
         if (type === NUTRIENT_PREDICTOR_ENUMS.image) {
           imageEl.src = URL.createObjectURL(event.target.files[0]);
+          // setFormFields({ ...formFields, uploadedImage: URL.createObjectURL(event.target.files[0]) }) set the actual image
+
+          console.log(URL.createObjectURL(event.target.files[0]))
         } else if (type === NUTRIENT_PREDICTOR_ENUMS.url) {
           imageEl.src = event.target.value;
         }
@@ -88,8 +97,8 @@ const UploadImage = () => {
           <FormInput label="Image URL" type="url" id="imageUrl" name="imageUrl" 
                     onChange={ (e) => handleChange(e, NUTRIENT_PREDICTOR_ENUMS.url) } value={ formFields.imageUrl }></FormInput>
 
-          <FormInput disabled type="file" id="uploadedImage" name="uploadedImage" 
-                    onChange={ (e) => handleChange(e, NUTRIENT_PREDICTOR_ENUMS.image) } value={ formFields.uploadedImage } accept="image/*"></FormInput>
+          <FormInput type="file" id="uploadedImagePath" name="uploadedImagePath" 
+                    onChange={ (e) => handleChange(e, NUTRIENT_PREDICTOR_ENUMS.image) } value={ formFields.uploadedImagePath } accept="image/*"></FormInput>
 
           <ButtonsContainer>
             <Button buttonType="regular-button" type="submit">Predict</Button>
@@ -98,8 +107,12 @@ const UploadImage = () => {
         </UploadImageForm>
       </SimplePaper>
 
-        <UploadedImage alt="" id="imageOutput" 
-              style={{ width: "500px", height: "500px", visibility: `${(formFields.uploadedImage === "" && formFields.imageUrl === "") ? "hidden" : ""}` }}></UploadedImage>
+      <UploadedImage alt="" id="imageOutput" 
+            style={{ width: "500px", height: "500px", 
+            visibility: `${(formFields.uploadedImagePath === "" && formFields.imageUrl === "") ? "hidden" : ""}` }}></UploadedImage>
+
+          {/* <UploadedImage alt="" id="imageOutput" 
+                style={{ width: "500px", height: "500px" }}></UploadedImage> */}
 
     </UploadImageContainer>
   )

diff --git a/src/contexts/shared/nutrient-predictor/nutrient-predictor.context.js b/src/contexts/shared/nutrient-predictor/nutrient-predictor.context.js
@@ -1,7 +1,7 @@
 import { createContext, useState, useEffect } from "react";
 
 import { validateImgPath } from "../../../utils/validations/nutrient-predictor.validations";
-import { getMealPredictions, getNutrientPredictions } from "../../../utils/api-requests/nutrient-predictor.requests";
+import { getFoodObjectDetection, getMealPredictions, getNutrientPredictions } from "../../../utils/api-requests/nutrient-predictor.requests";
 
 import { NUTRIENT_PREDICTOR_ENUMS } from "../../../utils/constants/nutrient-predictor.constants"
 
@@ -21,16 +21,22 @@ const updateImageHelper = (imageAndPrediction, imgPath) => {
   };
 };
 
-const updateImageAndPredictionHelper = async (imageAndPrediction, imgPath, imageInputType) => {
-  console.log(imageInputType);
+const updateImageAndPredictionHelper = async (imageAndPrediction, imgPath, imageInputType, uploadedImage) => {
+  console.log(imgPath);
+  console.log(uploadedImage)
 
   // TODO: need validation to check if imgPath and img are valid and an image
   if (validateImgPath(imgPath) === true) {
     return imageAndPrediction
   }
 
   // TODO: need to implement separate prediction function call
-  const predictionResponse = await getMealPredictions(imgPath);
+  let predictionResponse
+  if (imageInputType === NUTRIENT_PREDICTOR_ENUMS.image) {
+    predictionResponse = await getFoodObjectDetection(uploadedImage)
+  } else if (imageInputType === NUTRIENT_PREDICTOR_ENUMS.url) {
+    predictionResponse = await getMealPredictions(imgPath);
+  }
 
   console.log(predictionResponse)
 
@@ -87,18 +93,18 @@ export const NutrientPredictorProvider = ({ children }) => {
   const [imageAndPrediction, setImageAndPrediction] = useState({});
   const [nutrientPredictions, setNutrientPredictions] = useState([])
 
-  useEffect(() => {
-    console.log(imageAndPrediction);
-  }, [imageAndPrediction]);
+  // useEffect(() => {
+  //   console.log(imageAndPrediction);
+  // }, [imageAndPrediction]);
 
   const updateImage = (imgPath) => {
     setImageAndPrediction(updateImageHelper(imageAndPrediction, imgPath));
   };
 
-  const updateImageAndPrediction = async (imgPath, imageInputType) => {
+  const updateImageAndPrediction = async (imgPath, imageInputType, uploadedImage) => {
     if (imageInputType === NUTRIENT_PREDICTOR_ENUMS.image) {
       setPredictionInputType(NUTRIENT_PREDICTOR_ENUMS.image)
-      const updateImageAndPredictionResponse = await updateImageAndPredictionHelper(imageAndPrediction, imgPath, imageInputType)
+      const updateImageAndPredictionResponse = await updateImageAndPredictionHelper(imageAndPrediction, imgPath, imageInputType, uploadedImage)
 
       setImageAndPrediction(updateImageAndPredictionResponse);
 

diff --git a/src/utils/api-requests/nutrient-predictor.requests.js b/src/utils/api-requests/nutrient-predictor.requests.js
@@ -2,14 +2,14 @@ import { errorOnGetNutrientPredictions } from "../errors/nutrient-predictor.erro
 
 // nutrient predictor api requests
 
-export const getMealPredictions = async (imagePath) => {
+export const getMealPredictions = async (imageUrl) => {
   try {
     const resNutrientPrediction = await fetch(`${process.env.REACT_APP_API_URL_NUTRIENT_PREDICTOR}${process.env.REACT_APP_API_URL_NUTRIENT_PREDICTION}`, {
       method: "POST",
       headers: {
         "Content-Type": "text/plain"
       },
-      body: String(imagePath)
+      body: String(imageUrl)
     })
 
     const { message } = await resNutrientPrediction.json()
@@ -40,4 +40,27 @@ export const getNutrientPredictions = async (mealDescription) => {
     console.log(error)
     errorOnGetNutrientPredictions()
   }
+}
+
+export const getFoodObjectDetection = async (uploadedImage) => {
+  try {
+    console.log(uploadedImage)
+    console.log(`${process.env.REACT_APP_API_URL_OBJECT_DETECTOR}${process.env.REACT_APP_API_URL_FOOD_OBJECT_DETECTION}`)
+
+    let formData = new FormData();
+    formData.append('image', uploadedImage);
+
+    const resFoodObjectDetection = await fetch(`${process.env.REACT_APP_API_URL_OBJECT_DETECTOR}${process.env.REACT_APP_API_URL_FOOD_OBJECT_DETECTION}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "multipart/form-data"
+      },
+      body: formData
+    })
+    const { foodObject } = resFoodObjectDetection.json()
+    return foodObject
+  } catch (error) {
+    console.log(error)
+    errorOnGetNutrientPredictions()
+  }
 }
diff --git a/src/utils/constants/nutrient-predictor.constants.js b/src/utils/constants/nutrient-predictor.constants.js
@@ -4,6 +4,9 @@ export const IMAGE_EXTENSIONS = {
   png: "png",
   jpeg: "jpeg",
   jpg: "jpg",
+  PNG: "PNG",
+  JPEG: "JPEG",
+  JPG: "JPG",
 };
 
 export const NUTRIENT_PREDICTOR_ENUMS = {

diff --git a/src/utils/validations/nutrient-predictor.validations.js b/src/utils/validations/nutrient-predictor.validations.js
@@ -21,7 +21,10 @@ export const validateImgPath = (imgPath) => {
 
   if (!(imgPath.split(".")[paths.length - 1] === IMAGE_EXTENSIONS.png || 
     imgPath.split(".")[paths.length - 1] === IMAGE_EXTENSIONS.jpeg ||
-    imgPath.split(".")[paths.length - 1] === IMAGE_EXTENSIONS.jpg)) {
+    imgPath.split(".")[paths.length - 1] === IMAGE_EXTENSIONS.jpg ||
+    imgPath.split(".")[paths.length - 1] === IMAGE_EXTENSIONS.PNG || 
+    imgPath.split(".")[paths.length - 1] === IMAGE_EXTENSIONS.JPEG ||
+    imgPath.split(".")[paths.length - 1] === IMAGE_EXTENSIONS.JPG)) {
 
     errorOnInvalidImageType();