From b189773de79c141771bc2ef44d36f69535cdae66 Mon Sep 17 00:00:00 2001 From: Maryanne G Date: Sun, 24 Nov 2024 19:25:25 +1300 Subject: [PATCH] fetched relavant data for calculating insurance and posted image to and fetched results from custom vision --- .../cars/insurancepage/InsuranceQuote.jsx | 84 ++++++++++++++++++- .../insurancepage/InsuranceQuote.module.css | 83 +++++++++++++++--- 2 files changed, 155 insertions(+), 12 deletions(-) diff --git a/src/pages/cars/insurancepage/InsuranceQuote.jsx b/src/pages/cars/insurancepage/InsuranceQuote.jsx index 317b522..d867188 100644 --- 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 (
@@ -70,7 +133,26 @@ function InsuranceQuote() {
- This will give breakdown of costs +
+
+
+
+

Prediction Results

+ {results ? ( +
    + {results.map((prediction, index) => ( +
  • +
    {prediction.tagName}
    +
    + {(prediction.probability * 100).toFixed(2)}% +
    +
    • + ))} +
+ ) : ( +

Upload an image to get predictions.

+ )} +
diff --git a/src/pages/cars/insurancepage/InsuranceQuote.module.css b/src/pages/cars/insurancepage/InsuranceQuote.module.css index dcd42df..e6464ef 100644 --- 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; +}