From 84eeeaa692c54082fd192b5404768cae28bfbfa6 Mon Sep 17 00:00:00 2001 From: Omran NAJJAR Date: Wed, 22 Nov 2023 15:23:40 +0100 Subject: [PATCH 1/3] load OSM data so use can conflate data --- .../Layout/Start/Prediction/Prediction.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Layout/Start/Prediction/Prediction.js b/frontend/src/components/Layout/Start/Prediction/Prediction.js index ce7f068c..ce966f3a 100644 --- a/frontend/src/components/Layout/Start/Prediction/Prediction.js +++ b/frontend/src/components/Layout/Start/Prediction/Prediction.js @@ -359,14 +359,23 @@ const Prediction = () => { const osmUrl = new URL("http://127.0.0.1:8111/load_data"); osmUrl.searchParams.set("new_layer", "true"); osmUrl.searchParams.set("data", response.data); - const josmResponse = await fetch(osmUrl); + const Imgurl = new URL("http://127.0.0.1:8111/imagery"); Imgurl.searchParams.set("type", "tms"); Imgurl.searchParams.set("title", imagery.name); Imgurl.searchParams.set("url", dataset.source_imagery); - const imgResponse = await fetch(Imgurl); + // bounds._southWest.lng, + // bounds._southWest.lat, + // bounds._northEast.lng, + // bounds._northEast.lat, + const loadurl = new URL("http://127.0.0.1:8111/load_and_zoom"); + loadurl.searchParams.set("bottom", bounds._southWest.lat); + loadurl.searchParams.set("top", bounds._northEast.lat); + loadurl.searchParams.set("left", bounds._southWest.lng); + loadurl.searchParams.set("right", bounds._northEast.lng); + const loadResponse = await fetch(loadurl); if (!josmResponse.ok) { throw new Error( From c6ffb19076a0339dce16fa2065f0f6ecafaa04b8 Mon Sep 17 00:00:00 2001 From: Omran NAJJAR Date: Mon, 27 Nov 2023 15:54:35 +0100 Subject: [PATCH 2/3] Move to prediction API --- frontend/.env_sample | 3 +- frontend/src/axios-predictor.js | 35 ++++++++++++ frontend/src/axios.js | 57 +++++++------------ .../Layout/Start/Prediction/Prediction.js | 6 +- 4 files changed, 63 insertions(+), 38 deletions(-) create mode 100644 frontend/src/axios-predictor.js diff --git a/frontend/.env_sample b/frontend/.env_sample index c0447728..79ee0133 100644 --- a/frontend/.env_sample +++ b/frontend/.env_sample @@ -1,4 +1,5 @@ REACT_APP_CONNECT_ID= REACT_APP_TM_API=https://tasking-manager-tm4-production-api.hotosm.org/api/v2/projects/PROJECT_ID/tasks/ REACT_APP_ENV=Dev -REACT_APP_API_BASE=http://127.0.0.1:8000/api/v1 \ No newline at end of file +REACT_APP_API_BASE=http://127.0.0.1:8000/api/v1 +REACT_APP_PREDICTOR_API_BASE=http://127.0.0.1:8001 \ No newline at end of file diff --git a/frontend/src/axios-predictor.js b/frontend/src/axios-predictor.js new file mode 100644 index 00000000..4ae5ea7a --- /dev/null +++ b/frontend/src/axios-predictor.js @@ -0,0 +1,35 @@ +import axios from "axios"; + +console.log( + "process.env.REACT_APP_PREDICTOR_API_BASE", + process.env.REACT_APP_PREDICTOR_API_BASE +); + +const instance = axios.create({ + baseURL: process.env.REACT_APP_PREDICTOR_API_BASE, +}); + +instance.interceptors.response.use( + (response) => { + return response; + }, + (error) => { + if (!error.response) { + console.log("set network error"); + } else { + } + + if (error.response.status === 401) console.log("set network error 401"); + + return Promise.resolve({ error }); + } +); + +instance.defaults.headers.common = { + ...instance.defaults.headers.common, + + "Content-Type": "application/json", +}; +instance.defaults.preflightContinue = true; + +export default instance; diff --git a/frontend/src/axios.js b/frontend/src/axios.js index 60e4f7b1..c9fc79b3 100644 --- a/frontend/src/axios.js +++ b/frontend/src/axios.js @@ -1,45 +1,32 @@ -import axios from 'axios'; +import axios from "axios"; -console.log('process.env.REACT_APP_API_BASE',process.env.REACT_APP_API_BASE) +console.log("process.env.REACT_APP_API_BASE", process.env.REACT_APP_API_BASE); -const instance = axios.create( - { - baseURL: process.env.REACT_APP_API_BASE, - +const instance = axios.create({ + baseURL: process.env.REACT_APP_API_BASE, +}); - } -); - - -instance.interceptors.response.use((response) => { - +instance.interceptors.response.use( + (response) => { return response; - }, (error) => { - - - if (!error.response) - { - console.log('set network error') - - } - else - { - + }, + (error) => { + if (!error.response) { + console.log("set network error"); + } else { } - if (error.response.status === 401) - console.log('set network error 401') - + if (error.response.status === 401) console.log("set network error 401"); + return Promise.resolve({ error }); - }); + } +); instance.defaults.headers.common = { - ...instance.defaults.headers.common, - - "Content-Type": 'application/json', - - }; + ...instance.defaults.headers.common, + + "Content-Type": "application/json", +}; instance.defaults.preflightContinue = true; - - -export default instance; \ No newline at end of file + +export default instance; diff --git a/frontend/src/components/Layout/Start/Prediction/Prediction.js b/frontend/src/components/Layout/Start/Prediction/Prediction.js index ce966f3a..f8d76d44 100644 --- a/frontend/src/components/Layout/Start/Prediction/Prediction.js +++ b/frontend/src/components/Layout/Start/Prediction/Prediction.js @@ -30,6 +30,7 @@ import { import { useMutation, useQuery } from "react-query"; import { useNavigate, useParams } from "react-router-dom"; import axios from "../../../../axios"; +import axiosPrediction from "../../../../axios-predictor"; import AuthContext from "../../../../Context/AuthContext"; import Snackbar from "@mui/material/Snackbar"; @@ -250,7 +251,8 @@ const Prediction = () => { bounds._northEast.lng, bounds._northEast.lat, ], - model_id: id, + // model_id: id, // for /prediction + checkpoint: `/mnt/efsmount/data/trainings/dataset_${dataset.id}/output/training_${modelInfo.trainingId}/checkpoint.tflite`, zoom_level: zoom, source: dataset.source_imagery, confidence: confidence, @@ -261,7 +263,7 @@ const Prediction = () => { area_threshold: areaThreshold, }; const startTime = new Date().getTime(); // measure start time - const res = await axios.post(`/prediction/`, body, { headers }); + const res = await axiosPrediction.post(`/predict/`, body, { headers }); const endTime = new Date().getTime(); // measure end time setResponseTime(((endTime - startTime) / 1000).toFixed(0)); // calculate and store response time in seconds setApiCallInProgress(false); From 521e968a8b8b2cb30c5c683fefaaacadb6eed914 Mon Sep 17 00:00:00 2001 From: Omran NAJJAR Date: Tue, 28 Nov 2023 12:02:59 +0100 Subject: [PATCH 3/3] handle prediction API based on env value REACT_APP_PREDICTOR_API_BASE --- .../Layout/Start/Prediction/Prediction.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Layout/Start/Prediction/Prediction.js b/frontend/src/components/Layout/Start/Prediction/Prediction.js index f8d76d44..519c594c 100644 --- a/frontend/src/components/Layout/Start/Prediction/Prediction.js +++ b/frontend/src/components/Layout/Start/Prediction/Prediction.js @@ -45,7 +45,9 @@ const Prediction = () => { const [predictions, setPredictions] = useState(null); const [feedbackSubmittedCount, setFeedbackSubmittedCount] = useState(0); const [addedTiles, setAddedTiles] = useState(new Set()); - + const [PredictionAPI, setPredictionAPI] = useState( + process.env.REACT_APP_PREDICTOR_API_BASE + ); const handleCloseSnackbar = () => { setSnackbarOpen(false); }; @@ -251,8 +253,8 @@ const Prediction = () => { bounds._northEast.lng, bounds._northEast.lat, ], - // model_id: id, // for /prediction - checkpoint: `/mnt/efsmount/data/trainings/dataset_${dataset.id}/output/training_${modelInfo.trainingId}/checkpoint.tflite`, + model_id: id, // this will be used when PredictionAPI is empty and calling same base API + checkpoint: `/mnt/efsmount/data/trainings/dataset_${dataset.id}/output/training_${modelInfo.trainingId}/checkpoint.tflite`, // this will be used when there is PredictionAPI different from the base API zoom_level: zoom, source: dataset.source_imagery, confidence: confidence, @@ -263,7 +265,11 @@ const Prediction = () => { area_threshold: areaThreshold, }; const startTime = new Date().getTime(); // measure start time - const res = await axiosPrediction.post(`/predict/`, body, { headers }); + const res = await (PredictionAPI ? axiosPrediction : axios).post( + `/${PredictionAPI ? "predict" : "prediction"}/`, + body, + { headers } + ); const endTime = new Date().getTime(); // measure end time setResponseTime(((endTime - startTime) / 1000).toFixed(0)); // calculate and store response time in seconds setApiCallInProgress(false);