diff --git a/frontend/server.js b/frontend/server.js new file mode 100644 index 0000000..8886737 --- /dev/null +++ b/frontend/server.js @@ -0,0 +1,11 @@ +const express = require('express'); +const app = express(); +const path = require('path'); +app.use(express.static(path.join(__dirname, 'build'))); +app.get('/', function (req, res) { + res.sendFile(path.join(__dirname, 'build', 'index.html')) +}); +app.listen(3000, () => { + console.log("server is runnig on port 3000"); + console.log("Open your browser and hit url 'localhost:3000'"); +}); \ No newline at end of file diff --git a/frontend/src/App.js b/frontend/src/App.js index fe1a492..a381ead 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -34,6 +34,7 @@ class App extends Component { allFillUpload: false, aiModelActive: false, isLoading: false, + isVisualizing: false, exportOptionsVisible: false, isDownloadModalOpen: false, // 모달 열림/닫힘 상태 추가 bevImageSrc : null, //BEV image 경로 추가 @@ -55,6 +56,7 @@ class App extends Component { syncCompleted: false, preprocessChecked: false, infoAdded: false, + inferenceCompleted: false, }; this.videoRef = React.createRef(); @@ -437,42 +439,6 @@ loadVideo = () => { })); }; - -// captureAndSendFrame = async () => { -// const { lastVideoFilename } = this.state; -// const video = this.videoRef.current; - -// // Capture the current frame of the video -// const canvas = document.createElement('canvas'); -// canvas.width = video.videoWidth; -// canvas.height = video.videoHeight; -// const ctx = canvas.getContext('2d'); -// ctx.drawImage(video, 0, 0, canvas.width, canvas.height); - -// // Convert canvas to Blob -// const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg')); -// const file = new File([blob], `frame-${Date.now()}.jpg`, { type: 'image/jpeg' }); - -// const formData = new FormData(); -// formData.append('file', file); - -// try { -// const response = await axios.post(`http://localhost:8000/bev/${lastVideoFilename}`, formData, { -// headers: { -// 'Content-Type': 'multipart/form-data', -// }, -// }); -// if (response.data && response.data.framePath) { -// const framePath = response.data.framePath.split('/').pop(); -// const getImageUrl = `http://localhost:8000/extracted_frames/${framePath}`; -// console.log(getImageUrl); -// return getImageUrl; -// } -// } catch (error) { -// console.error('Error sending frame for BEV conversion:', error); -// } -// }; - captureAndSendFrame = async () => { const { frameNumber } = this.state; // Assuming frameNumber is stored in state @@ -488,54 +454,6 @@ loadVideo = () => { console.error('Error fetching frame:', error); } }; - - - // toggleBEVView = async () => { - // const { showBEV, frameNumber} = this.state; - // // const parts = videoFileName.split('.'); - - // // Remove the last part (the extension) - // // const fileNameWithoutExtension = parts.slice(0, -1).join('.'); - // // const frameNumberPadded = frameNumber.toString().padStart(5, '0'); // Pad frame number with leading zeros - // // const framePath = `/home/dva4/dva/backend/test/frame_origin/${fileNameWithoutExtension}_${frameNumberPadded}.jpg`; - // // const csvPath = `/home/dva4/dva/backend/test/sync_csv/sync_log.csv`; - // // const dstDir = "api/services/Orthophoto_Maps/Data/result"; // Destination directory - - // const formatObjectsArray = (lastEntry) => { - // if (!lastEntry) return null; - - // const { point1, point2 } = lastEntry; - // return [null, null, null, point1.x, point1.y, point2.x, point2.y, null, -1, -1, -1]; - // }; - - // const lastEntry = this.state.pointDistances[this.state.pointDistances.length - 1]; - // const objects = formatObjectsArray(lastEntry); - - // if (!objects) { - // console.error("No point distances available for BEV conversion"); - // this.setState({ isLoading: false }); - // return; - // } - - // const payload = { - // frame_number: frameNumber, - // point_distances:[ - // { - // point1: {x: this.point1.x, y: this.point1.y}, - // point2: {x: this.point2.x, y: this.point2.y}, - // distance: lastEntry.distance - // } - // ], - // // frame_path: framePath, - // // csv_path: csvPath, - // // objects: objects, - // // realdistance: lastEntry.distance, - // // dst_dir: dstDir, - // } - // console.log(payload); - - - // }; toggleBEVView = async () => { const { showBEV, frameNumber, pointDistances } = this.state; @@ -558,17 +476,40 @@ loadVideo = () => { } ], // Additional data can be included here if necessary - } + }; + + const gsdPayload = { + user_input: "/home/dva4/DVA_LAB/backend/test/input/user_input.txt", + frame_path: "/home/dva4/DVA_LAB/backend/test/frame_origin", + tracking_result: "/home/dva4/DVA_LAB/backend/test/model/tracking/result.txt", + GSD_path: "/home/dva4/DVA_LAB/backend/test/GSD.txt", + GSD_save_path: "/home/dva4/DVA_LAB/backend/test/GSD_total.txt" + }; + console.log(payload); - if (!showBEV && this.state.infoAdded) { + if (this.state.infoAdded) { this.setState({ isLoading: true }); try { const response = await axios.post(`${API_URL}/user_input/`, payload); if (response.status===200) { - console.log('BEV successful') - this.setState({ isLoading: false }); + console.log('BEV1 successful') + try { + const gsdResponse = await axios.post(`${API_URL}/total_gsd`, gsdPayload); + + if (gsdResponse.status === 200) { + console.log('Total GSD calculation successful', gsdResponse.data); + this.setState({ isLoading: false, showBEV: true }); + } else { + console.error("Total GSD calculation failed"); + this.setState({ isLoading: false }); + } + } catch (error) { + console.error("Error during total GSD API call:", error); + this.setState({ isLoading: false }); + } + } else { console.error("BEV conversion failed"); this.setState({ isLoading: false }); @@ -577,16 +518,8 @@ loadVideo = () => { console.error("Error during API call:", error); this.setState({ isLoading: false }); } - } else { - this.setState({ - showBEV: false, - videoSrc: `${API_URL}/video/` - }, () => { - this.loadVideo(); - }); - } + } - // Your existing axios post request and other logic... }; @@ -804,48 +737,106 @@ drawLabel = (startPoint, endPoint, text) => { runAIModel = async () => { this.setState({aiModelActive:true, showProgressBar: true, showControlButtons: true }); - setTimeout(()=>{ - this.setState({ showProgressBar: false }); - }, 30000) + // setTimeout(()=>{ + // this.setState({ showProgressBar: false }); + // }, 30000) // Prepare the payload for the API request const payload = { - frame_path: "/home/dva4/DVA_LAB/backend/test/frame_origin"/* path to the frame images */, - detection_save_path:"/home/dva4/DVA_LAB/backend/test/model/detection/result" /* path where detection results should be saved */, - sliced_path: "/home/dva4/DVA_LAB/backend/test/model/sliced"/* path for sliced images, if applicable */, - output_merge_path: "/home/dva4/DVA_LAB/backend/test/model/merged"/* path for merged output */, - // ... include other necessary fields based on your API's requirements + "img_path": "/home/dva4/DVA_LAB/backend/test/frame_origin", + "csv_path": "/home/dva4/DVA_LAB/backend/test/model/detection/result.csv", + "sliced_path": "/home/dva4/DVA_LAB/backend/test/model/sliced" }; //완성되면 아래 코드로 inference 연결하기! - // try { - // // Make the API call - // const response = await axios.post(`${API_URL}/inference`, payload); - - // if (response.status === 200) { - // // Handle successful response - // console.log("Model inference successful:", response.data); - // this.setState({aiModelActive: false, showResults: true}) - - // // Update your application state as necessary - // // For example, if response contains a path to a result file, update the state to reflect this - // } else { - // // Handle non-successful responses - // console.error("Model inference failed with status:", response.status); - // // Update your application state as necessary - // } - // } catch (error) { - // console.error("Error during model inference:", error); - // // Update your application state to reflect the error - // } finally { - // // Update state to indicate that the AI model has finished running - // this.setState({aiModelActive: false, showProgressBar: false}); - // } + try { + // Make the detection API call + const detQueryParams = `img_path=${encodeURIComponent("/home/dva4/DVA_LAB/backend/test/frame_origin")}&csv_path=${encodeURIComponent("/home/dva4/DVA_LAB/backend/test/model/detection/result.csv")}&sliced_path=${encodeURIComponent("/home/dva4/DVA_LAB/backend/test/model/sliced")}`; + const detResponse = await axios.post(`${API_URL}/inference/detection?${detQueryParams}`); + + if (detResponse.status !== 200) { + throw new Error(`Detection inference failed with status: ${detResponse.status}`); + } else if(detResponse.status===200){ + console.log("Detection inference successful:", detResponse.data); + } + + const anomalyQueryParams = `img_path=${"/home/dva4/DVA_LAB/backend/test/frame_origin/DJI_0149_00900.jpg"}&output_path=${"/home/dva4/DVA_LAB/backend/test/model/segment/DJI_0149_00900.jpg"}&sliced_path=${"/home/dva4/DVA_LAB/backend/test/model/sliced/"} + &patch_size=${1024}&overlap_ratio=${0.2}`; + const anomalyResponse = await axios.post(`${API_URL}/inference/segmentation?${anomalyQueryParams}`); + + if (anomalyResponse.status !== 200) { + throw new Error(`Segmentation inference failed with status: ${anomalyResponse.status}`); + } + + console.log("Segmentation inference successful:", anomalyResponse.data); + + + // MERGE INFERENCE + const mergeQueryParams = + `output_merge_path="/home/dva4/DVA_LAB/backend/test/model/merged" + &csv_path="/home/dva4/DVA_LAB/backend/test/model/detection/result.csv" + &anomaly_detection_output="/home/dva4/DVA_LAB/backend/test/model/detection/result.csv" + &use_anomaly=${false}`; + + const mergeResponse = await axios.post(`${API_URL}/inference/merge?${mergeQueryParams}`); + + + if (mergeResponse.status !== 200) { + throw new Error(`Merging inference failed with status: ${mergeResponse.status}`); + } + + // console.log("Merging inference successful:", mergeResponse.data); + + // TRACK INFERENCE + const trackQueryParams = `detection_path=${encodeURIComponent("/home/dva4/DVA_LAB/backend/test/model/merged/result.txt")}&save_path=${encodeURIComponent("/home/dva4/DVA_LAB/backend/test/model/tracking/result.txt")}`; + const trackResponse = await axios.post(`${API_URL}/inference/tracking?${trackQueryParams}`); + + if (trackResponse.status !== 200) { + throw new Error(`Tracking inference failed with status: ${trackResponse.status}`); + } + + console.log("Tracking inference successful:", trackResponse.data); + + // Set state after successful responses + this.setState({ aiModelActive: false, showProgressBar: false, inferenceCompleted: true, }); + } catch (error) { + console.error("Error during model inference:", error); + // Update your application state to reflect the error + this.setState({ showProgressBar: false }); + } + }; + + handleDownload = () => { + const apiUrl = API_URL + '/export/origin'; // Assuming API_URL is defined elsewhere + + // Fetch the video data + fetch(apiUrl) + .then(response => response.blob()) + .then(blob => { + // Create a URL for the blob object + const blobUrl = window.URL.createObjectURL(blob); + + // Create a temporary link element + const link = document.createElement('a'); + link.href = blobUrl; + link.setAttribute('download', 'video.mp4'); // Set the download file name + + // Append to the document, trigger download, and remove the element + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + + // Revoke the blob URL after the download + window.URL.revokeObjectURL(blobUrl); + }) + .catch(error => console.error('Download failed:', error)); +}; + @@ -937,14 +928,16 @@ drawLabel = (startPoint, endPoint, text) => { seeResults = async () => { + this.setState({isVisualizing: true}) + const formData = { // 서버에 연결할때는 위에꺼 쓰기 - "log_path": "/home/dva4/dva/backend/test/sync_csv", - "input_dir": "/home/dva4/dva/backend/test/frame_origin", - "output_video": "/home/dva4/dva/backend/test/result/result.mp4", - "bbox_path": "/home/dva4/dva/backend/test/model/tracking/result.txt", - "set_merged_dolphin_center": false, - "video_path": "/home/dva4/dva/backend/test/video_origin", + "log_path": "/home/dva4/DVA_LAB/backend/test/sync_csv", + "input_dir": "/home/dva4/DVA_LAB/backend/test/frame_origin", + "output_video": "/home/dva4/DVA_LAB/backend/test/result/result.mp4", + "bbox_path": "/home/dva4/DVA_LAB/backend/test/model/tracking/result.txt", + "set_merged_dolphin_center": true, + "video_path": "/home/dva4/DVA_LAB/backend/test/video_origin", // "log_path": "/Users/dongwookim/DVA_LAB/backend/test/sync_csv", // "input_dir": "/Users/dongwookim/DVA_LAB/backend/test/frame_origin", // "output_video": "/Users/dongwookim/DVA_LAB/backend/test/result/result.mp4", @@ -953,21 +946,24 @@ drawLabel = (startPoint, endPoint, text) => { // "video_path": "/Users/dongwookim/DVA_LAB/backend/test/video_origin" } - // const response = await axios.post(`${API_URL}/visualize/`, formData); - + const response = await axios.post(`${API_URL}/visualize/`, formData); + if(response.status===200){ + console.log(response); + } - // this.setState({ - // showResults: true, - // videoSrc: `${API_URL}/export/origin`, - // },()=>{ - // this.loadVideo(); - // }); - // console.log(this.state.videoSrc) - - this.setState({ - isLoading: true, + this.setState({ + isVisualizing: false, showResults: true, - }); + videoSrc: `${API_URL}/export/origin`, + },()=>{ + this.loadVideo(); + }); + console.log(this.state.videoSrc) + + // this.setState({ + // isLoading: true, + // showResults: true, + // }); try { const response = await axios.get(`${API_URL}/export/origin`, { responseType: 'blob' }); if (response.data) { @@ -1020,8 +1016,9 @@ drawLabel = (startPoint, endPoint, text) => { const canSeeResults = this.state.points.length / 2 === this.state.pointDistances.length && this.state.points.length >= 2; + - const { logFile, srtFile, videoSrc, videoPlaying, frameNumber, addingInfo, isLoading, applyFlag, allFillUpload, aiModelActive, showBEV, showDrawLineButton, points, showResults, uploadStatus, syncCompleted } = this.state; + const { logFile, srtFile, videoSrc, videoPlaying, frameNumber, addingInfo, isLoading, applyFlag, allFillUpload, aiModelActive, showBEV, showDrawLineButton, points, showResults, uploadStatus, syncCompleted, inferenceCompleted } = this.state; if (showResults) { return ( @@ -1041,7 +1038,7 @@ drawLabel = (startPoint, endPoint, text) => { background: 'none' }} > - Drone Video Analysis for MARC + See Sea TV(See Sea Tracker Voyager) @@ -1095,13 +1092,17 @@ drawLabel = (startPoint, endPoint, text) => { + ); @@ -1129,7 +1130,7 @@ drawLabel = (startPoint, endPoint, text) => { background: 'none' }} > - Drone Video Analysis for MARC + See Sea TV(See Sea Tracker Voyager)
@@ -1149,7 +1150,10 @@ drawLabel = (startPoint, endPoint, text) => {
)} - {!showBEV&&(