updating nutrient predictor with api

src/components/shared/nutrient-predictor/upload-food-image/upload-image/upload-image.component.jsx

@@ -15,7 +15,8 @@ import { COLOR_CODES } from "../../../../../utils/constants/shared.constants.js"
 
 const defaultFormFields = {
  mealDescription: "",
- uploadedImage: ""
+ uploadedImage: "",
+ imageUrl: "",
 }
 
 const paperStyles = {
@@ -38,10 +39,16 @@ const UploadImage = () => {
  console.log(formFields.uploadedImage);
 
  if (formFields.mealDescription !== "") {
+ // use the meal description to predict
  await detectNutrients(formFields.mealDescription)
  console.log("meal hit")
  } else {
- await updateImageAndPrediction(formFields.uploadedImage, NUTRIENT_PREDICTOR_ENUMS.image);
+ // 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 !== "") {
+ await updateImageAndPrediction(formFields.imageUrl, NUTRIENT_PREDICTOR_ENUMS.url)
+ }
  }
 
  // displayNutrients(true);
@@ -54,12 +61,17 @@ const UploadImage = () => {
 
  setFormFields({ ...formFields, [name]: value });
 
- if (type === NUTRIENT_PREDICTOR_ENUMS.image) {
- updateImage(event.target.value);
+ if (type === NUTRIENT_PREDICTOR_ENUMS.image || type === NUTRIENT_PREDICTOR_ENUMS.url) {
+ updateImage(event.target.value, type);
 
  const imageEl = document.getElementById('imageOutput');
  if (imageEl !== null) {
- imageEl.src = URL.createObjectURL(event.target.files[0]);
+
+ if (type === NUTRIENT_PREDICTOR_ENUMS.image) {
+ imageEl.src = URL.createObjectURL(event.target.files[0]);
+ } else if (type === NUTRIENT_PREDICTOR_ENUMS.url) {
+ imageEl.src = event.target.value;
+ }
  }
  }
  };
@@ -73,7 +85,10 @@ const UploadImage = () => {
  <FormInput label="Meal description" type="text" onChange={ handleChange }
  name="mealDescription" value={ formFields.mealDescription }></FormInput>
 
- <FormInput type="file" id="uploadedImage" name="uploadedImage" 
+ <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>
 
  <ButtonsContainer>
@@ -84,7 +99,7 @@ const UploadImage = () => {
  </SimplePaper>
 
  <UploadedImage alt="" id="imageOutput" 
- style={{ width: "500px", height: "500px", visibility: `${formFields.uploadedImage === "" ? "hidden" : ""}` }}></UploadedImage>
+ style={{ width: "500px", height: "500px", visibility: `${(formFields.uploadedImage === "" && formFields.imageUrl === "") ? "hidden" : ""}` }}></UploadedImage>
 
  </UploadImageContainer>
  )

src/contexts/shared/nutrient-predictor/nutrient-predictor.context.js

@@ -21,22 +21,22 @@ const updateImageHelper = (imageAndPrediction, imgPath) => {
  };
 };
 
-const updateImageAndPredictionHelper = async (imageAndPrediction, imgPath, img) => {
- console.log(img);
+const updateImageAndPredictionHelper = async (imageAndPrediction, imgPath, imageInputType) => {
+ console.log(imageInputType);
 
  // 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(img);
+ const predictionResponse = await getMealPredictions(imgPath);
 
  console.log(predictionResponse)
 
  return {
  imagePath: String(imgPath),
- image: img,
+ image: imageInputType,
  predictionDescription: predictionResponse
  };
 }
@@ -51,7 +51,7 @@ export const NutrientPredictorContext = createContext({
  // imageAndPrediction structure
  // {
  // imagePath: "path to image",
- // image: "image itself",
+ // image: "image type",
  // predictionDescription: "1 pound of steak with mashed potatoes and a can of sprite"
  // }
 
@@ -95,12 +95,22 @@ export const NutrientPredictorProvider = ({ children }) => {
  setImageAndPrediction(updateImageHelper(imageAndPrediction, imgPath));
  };
 
- const updateImageAndPrediction = async (imgPath, img) => {
- setPredictionInputType(NUTRIENT_PREDICTOR_ENUMS.image)
- const updateImageAndPredictionResponse = await updateImageAndPredictionHelper(imageAndPrediction, imgPath, img)
+ const updateImageAndPrediction = async (imgPath, imageInputType) => {
+ if (imageInputType === NUTRIENT_PREDICTOR_ENUMS.image) {
+ setPredictionInputType(NUTRIENT_PREDICTOR_ENUMS.image)
+ const updateImageAndPredictionResponse = await updateImageAndPredictionHelper(imageAndPrediction, imgPath, imageInputType)
 
- setImageAndPrediction(updateImageAndPredictionResponse);
- await detectNutrients(updateImageAndPredictionResponse.predictionDescription, NUTRIENT_PREDICTOR_ENUMS.image)
+ setImageAndPrediction(updateImageAndPredictionResponse);
+
+ await detectNutrients(updateImageAndPredictionResponse.predictionDescription, NUTRIENT_PREDICTOR_ENUMS.image)
+ } else if (imageInputType === NUTRIENT_PREDICTOR_ENUMS.url) {
+ setPredictionInputType(NUTRIENT_PREDICTOR_ENUMS.url)
+ const updateImageAndPredictionResponse = await updateImageAndPredictionHelper(imageAndPrediction, imgPath, imageInputType)
+
+ setImageAndPrediction(updateImageAndPredictionResponse);
+
+ await detectNutrients(updateImageAndPredictionResponse.predictionDescription, NUTRIENT_PREDICTOR_ENUMS.url)
+ }
  };
 
  const detectNutrients = async (mealDescription, inputType) => {

src/utils/api-requests/nutrient-predictor.requests.js

@@ -26,8 +26,25 @@ const processNutrientPredictions = async (nutrientPredictions) => {
 
 // nutrient predictor api requests
 
-export const getMealPredictions = async (image) => {
- return "1 pound of steak with mashed potatoes and a can of sprite"
+export const getMealPredictions = async (imagePath) => {
+ 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)
+ })
+
+ const { message } = await resNutrientPrediction.json()
+ return message
+ } catch (error) {
+ errorOnGetNutrientPredictions()
+
+ if (error) {
+ return console.error("Request failed: ", error)
+ }
+ }
 };
 
 export const getNutrientPredictions = async (mealDescription) => {

src/utils/constants/nutrient-predictor.constants.js

@@ -9,4 +9,5 @@ export const IMAGE_EXTENSIONS = {
 export const NUTRIENT_PREDICTOR_ENUMS = {
  text: "text",
  image: "image",
+ url: "url",
 }