diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 0000000..7b65cd9 Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 0000000..cdca992 Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..647c5f6 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..c5ae82e Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..04bd3e9 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..786786f 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index c5dc10a..1c89816 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,14 @@ - + + + + + + + + diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 0000000..45dc8a2 --- /dev/null +++ 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"} \ No newline at end of file diff --git a/src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx b/src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx index e67ccba..7714dbe 100644 --- a/src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx +++ b/src/components/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,7 +37,7 @@ 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 @@ -44,10 +45,10 @@ const UploadImage = () => { 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 = () => { handleChange(e, NUTRIENT_PREDICTOR_ENUMS.url) } value={ formFields.imageUrl }> - handleChange(e, NUTRIENT_PREDICTOR_ENUMS.image) } value={ formFields.uploadedImage } accept="image/*"> + handleChange(e, NUTRIENT_PREDICTOR_ENUMS.image) } value={ formFields.uploadedImagePath } accept="image/*"> @@ -98,8 +107,12 @@ const UploadImage = () => { - + + + {/* */} ) diff --git a/src/contexts/shared/nutrient-predictor/nutrient-predictor.context.js b/src/contexts/shared/nutrient-predictor/nutrient-predictor.context.js index e354fee..0ddba37 100644 --- 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,8 +21,9 @@ 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) { @@ -30,7 +31,12 @@ const updateImageAndPredictionHelper = async (imageAndPrediction, imgPath, image } // 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 index d170ccb..5350d79 100644 --- 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() + } } \ No newline at end of file diff --git a/src/utils/constants/nutrient-predictor.constants.js b/src/utils/constants/nutrient-predictor.constants.js index b997b1e..81c0c3d 100644 --- 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 index d956850..d2f6ead 100644 --- 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();