Merge pull request #3 from MaryanneG3/homepage

API handling in Insurance Quote Page
MaryanneG3 · Nov 24, 2024 · 504d4dc · 504d4dc
2 parents f8d0c09 + b189773
commit 504d4dc
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 12 deletions.
diff --git a/src/pages/cars/insurancepage/InsuranceQuote.jsx b/src/pages/cars/insurancepage/InsuranceQuote.jsx
@@ -6,15 +6,28 @@ import { faCloudArrowDown } from "@fortawesome/free-solid-svg-icons";
 
 function InsuranceQuote() {
   const [image, setImage] = useState(null);
+  const [results, setResults] = useState(null);
+  const [annualPremiums, setAP] = useState(null);
 
+  const predictionEndpoint =
+    "https://turners-vehicle-recognition.cognitiveservices.azure.com/";
+  const predictionKey =
+    "3QwkxGV2tYNHj8nJuWVQp237iUQ4qUai24DW0jNLu4nsMiLZdZcXJQQJ99AKACL93NaXJ3w3AAAIACOGnIcS";
+  const projectId = "09beff9f-ef9e-47d6-a384-83c277fb30e4";
+  const iterationName = "Iteration3";
+  const finalURL = `${predictionEndpoint}/customvision/v3.0/Prediction/${projectId}/classify/iterations/${iterationName}/image`;
+
+  // handle file input
   const handleFileInput = (e) => {
     const file = e.target.files[0];
 
     if (file) {
       setImage(URL.createObjectURL(file));
+      sendToPredictionAPI(file);
     }
   };
 
+  // DRAG and DROP Handling
   const handleDrop = (e) => {
     e.preventDefault();
     const file = e.dataTransfer.files[0];
@@ -28,6 +41,56 @@ function InsuranceQuote() {
     e.preventDefault();
   };
 
+  // send image to api
+  const sendToPredictionAPI = async (file) => {
+    fetchInsurancePremium();
+    try {
+      // const formData = new FormData();
+      // formData.append("file", file);
+
+      // const res = await fetch(
+      //   `${predictionEndpoint}/customvision/v3.0/Prediction/${projectId}/classify/iterations/${iterationName}/image`,
+      //   {
+      //     method: "POST",
+      //     headers: { "Prediction-Key": predictionKey },
+      //     body: formData,
+      //   }
+      // );
+
+      const res = await fetch(finalURL, {
+        method: "POST",
+        headers: {
+          "Prediction-Key": predictionKey,
+          "Content-Type": "application/octet-stream",
+        },
+        body: file,
+      });
+
+      if (!res.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const data = await res.json();
+
+      // process response
+      setResults(data.predictions);
+    } catch (err) {
+      console.error("Error calling Prediction API: ", err);
+      setResults(null);
+    }
+  };
+
+  const fetchInsurancePremium = async () => {
+    try {
+      const res = await fetch("http://localhost:4000/");
+      const data = await res.json();
+      console.log(data);
+      setAP(data);
+    } catch (e) {
+      console.error(`Error fetching Inusrance Premiums: ${e}`);
+    }
+  };
+
   return (
     <BaseLayout>
       <div className={styles.mainContainer}>
@@ -70,7 +133,26 @@ function InsuranceQuote() {
         <hr />
 
         <div className={styles.rightSection}>
-          This will give breakdown of costs
+          <div className={styles.insurancePremiumAmount}>
+            <div className={styles.ipContainer}></div>
+          </div>
+          <div className={styles.predictionResultsCont}>
+            <h3>Prediction Results</h3>
+            {results ? (
+              <ul>
+                {results.map((prediction, index) => (
+                  <li key={index} className={styles.list}>
+                    <h5>{prediction.tagName}</h5>
+                    <h5 className={styles.resultPercentage}>
+                      {(prediction.probability * 100).toFixed(2)}%
+                    </h5>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p>Upload an image to get predictions.</p>
+            )}
+          </div>
         </div>
       </div>
     </BaseLayout>

diff --git a/src/pages/cars/insurancepage/InsuranceQuote.module.css b/src/pages/cars/insurancepage/InsuranceQuote.module.css
@@ -16,25 +16,15 @@
   height: 100%;
 }
 
-.rightSection {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 40%;
-  height: 100%;
-}
-
 .imageContainer {
   display: flex;
   flex-direction: column;
   width: 600px;
   height: 450px;
-  padding: 10px;
   /* background-color: black; */
   align-items: center;
   justify-content: center;
-  padding-inline: 30px;
+  padding: 30px;
   border-radius: 30px;
   border: none;
   box-shadow: 0 0 10px 2px rgba(64, 189, 247, 0.5);
@@ -45,6 +35,7 @@
   width: 100%;
   border-radius: 20px 20px 0 0;
   border-bottom: 1px solid #40bdf7;
+  overflow: hidden;
 }
 
 .uploadImgPrompt {
@@ -84,3 +75,73 @@
   font-weight: 600;
   box-shadow: 0 0 10px 2px rgba(64, 189, 247, 0.5);
 }
+
+/* Right section */
+
+.rightSection {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 40%;
+  height: 100%;
+  /* background-color: aquamarine; */
+}
+
+.predictionResultsCont {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 50%;
+  /* background-color: pink; */
+}
+
+.predictionResultsCont h3 {
+  margin-bottom: 15px;
+}
+
+.list {
+  display: flex;
+  flex-direction: row;
+  width: 350px;
+  padding: 5px;
+  margin: 10px;
+  border-bottom: 1px rgb(63, 63, 173) solid;
+
+  /* background-color: pink; */
+}
+
+.list h5 {
+  width: 50%;
+  /* background-color: #57c6f9; */
+}
+
+.resultPercentage {
+  text-align: right;
+  /* background-color: green; */
+}
+
+.insurancePremiumAmount {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 50%;
+
+  background-color: rgb(85, 237, 107);
+}
+
+.ipContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 80%;
+  border-bottom: 1px rgb(63, 63, 173) solid;
+  height: 100%;
+
+  background-color: aquamarine;
+}