update: frontend react

Author: Anotherafael

.gcloudignore

@@ -0,0 +1,17 @@
+# This file specifies files that are *not* uploaded to Google Cloud
+# using gcloud. It follows the same syntax as .gitignore, with the addition of
+# "#!include" directives (which insert the entries of the given .gitignore-style
+# file at that point).
+#
+# For more information, run:
+#   $ gcloud topic gcloudignore
+#
+.gcloudignore
+# If you would like to upload your .git directory, .gitignore file or files
+# from your .gitignore file, remove the corresponding line
+# below:
+.git
+.gitignore
+
+node_modules
+#!include:.gitignore

README.md

@@ -0,0 +1,30 @@
+## Potato Leaf Disease Classification
+
+The goal of this research is to create a convolutional neural network (CNN) that can categorize illnesses of potato leaves. Accurately determining if a potato leaf is healthy, blight-affected early or late is the aim. It consists of a web application for real-time leaf classification and a TensorFlow model trained on the potato leaf disease dataset.
+
+### Project Components
+
+#### Convolutional Neural Network (CNN)
+
+TensorFlow is used in a Jupyter Notebook inside of VSCode to build the CNN model. It learns and divides potato leaf photos into three groups: healthy, early blight, and late blight. It does this by utilizing deep learning algorithms. The notebook contains specifics on the model's construction and training procedure.
+
+#### Web Application
+
+To input photos of potato leaves and get predictions from the trained CNN model, use the web application's intuitive interface. It shows the probability score for each class as well as the expected class (healthy, early blight, or late blight). With this application, users may evaluate the health of potato plants rapidly.
+
+#### Deployment on Google Cloud
+
+For scalability and accessibility, the trained TensorFlow CNN model is hosted on Google Cloud Platform (GCP). Its smooth interaction with the online application is made possible by its storage in a cloud storage bucket. The deployment procedure makes sure that cloud resources are used effectively for jobs involving inference and prediction.
+
+#### API Server
+
+To enable communication between the web application and the TensorFlow model that is installed on GCP, an API server is put into place. This server receives incoming picture requests, runs the CNN model on them, and instantly provides the web application with the classified images. It guarantees the leaf classification system's dependability and seamless operation.
+
+### Technologies Used
+- Python
+- TensorFlow
+- Jupyter Notebook in VS Code
+- Fastapi
+- HTML/CSS/JavaScript
+- Google Cloud Storage
+- Google Cloud Platform (GCP)

frontend/package-lock.json

@@ -14,7 +14,7 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

frontend/package.json

@@ -154,9 +154,14 @@ export const ImageUpload = () => {
       formData.append("file", selectedFile);
       let res = await axios({
         method: "post",
-        url: process.env.REACT_APP_API_URL,
+        url: process.env.REACT_APP_CLOUD_URL,
         data: formData,
+        headers: {
+          "Content-Type": "multipart/form-data",
+          "Access-Control-Allow-Origin": "*",
+        },
       });
+      console.log(res.data);
       if (res.status === 200) {
         setData(res.data);
       }