From 84520ef56675034b43b64482d12ceea7e144606a Mon Sep 17 00:00:00 2001 From: hofee <64160135+GitHofee@users.noreply.github.com> Date: Thu, 19 Sep 2024 13:12:06 -0500 Subject: [PATCH] add IRV card --- .../content/SeqInferenceResultVisualize.vue | 13 +- .../content/cards/RecProcessCard.vue | 6 +- .../content/cards/RecProcessCard_IRV.vue | 212 +++++++++++ .../content/cards/UploadInferenceCard.vue | 189 ++++++---- .../cards/ViewDistributionCard_IRV.vue | 349 ++++++++++++++++++ .../content/{cards => old}/RecResultCard.vue | 1 + 6 files changed, 691 insertions(+), 79 deletions(-) create mode 100644 src/components/content/cards/RecProcessCard_IRV.vue create mode 100644 src/components/content/cards/ViewDistributionCard_IRV.vue rename src/components/content/{cards => old}/RecResultCard.vue (99%) diff --git a/src/components/content/SeqInferenceResultVisualize.vue b/src/components/content/SeqInferenceResultVisualize.vue index de72de7..5bc8d24 100644 --- a/src/components/content/SeqInferenceResultVisualize.vue +++ b/src/components/content/SeqInferenceResultVisualize.vue @@ -17,12 +17,12 @@ - - import UploadInferenceCard from './cards/UploadInferenceCard.vue'; -import ViewDistributionCard from './cards/ViewDistributionCard.vue'; -import RecProcessCard from './cards/RecProcessCard.vue'; +import ViewDistributionCard_IRV from './cards/ViewDistributionCard_IRV.vue'; +import RecProcessCard_IRV from './cards/RecProcessCard_IRV.vue'; export default { name: "SeqInferenceResultVisualize", components: { UploadInferenceCard, - ViewDistributionCard, - RecProcessCard, + ViewDistributionCard_IRV, + RecProcessCard_IRV, }, watch: { }, @@ -60,7 +60,6 @@ export default { obj_info: null, seq_frame_data: [], model_pts: null, - loading: false, selectedImage: null, diff --git a/src/components/content/cards/RecProcessCard.vue b/src/components/content/cards/RecProcessCard.vue index 60428c8..e7eeab3 100644 --- a/src/components/content/cards/RecProcessCard.vue +++ b/src/components/content/cards/RecProcessCard.vue @@ -40,10 +40,10 @@ +{{ curr_frame_info["delta_CR"] }}% - -

+ +

Depth(L) -

+

+ +

+ + Inference Reconstruction Process +

+ + + +
+ +
+ + + + + + +

+ Current Frame Information +

+ +
+ Step: + {{ curr_frame_info["step"] }} +
+
+ Coverage Rate(CR): + {{ curr_frame_info["coverage_rate"] }}% +
+
+ Delta CR: + +{{ curr_frame_info["delta_CR"] }}% +
+ + +

+ Depth(L) +

+ + Depth Image + + +

+ Mask(L) +

+ + Depth Image + + + + + +

+ Reconstruction Process: [{{ curr_step }}/{{ seqFrameData.length -1 }}] +

+ + + + + + \ No newline at end of file diff --git a/src/components/content/cards/UploadInferenceCard.vue b/src/components/content/cards/UploadInferenceCard.vue index 66b1eb3..70abe3d 100644 --- a/src/components/content/cards/UploadInferenceCard.vue +++ b/src/components/content/cards/UploadInferenceCard.vue @@ -8,64 +8,79 @@ Current Visualization Website is in Demo Version The dataset directory is restricted to the sample dataset. - + -

Input Root Directory:

+

Input Root Directory:

- - - - - - -

Select Inference Result:

- - - + - -
- -

Click or drag inference result here to upload

+ + +

Select Inference Result:

+ + + + + + + +
+ + +

Select or drag the inference result file(.pkl) here to upload +

+
+
+

Waiting for server response...

+
- + - +

Selected Scene: {{ localSceneName }}

-

sequence length: {{ localSeqLen }}

-

max coverage rate: {{ localMaxCoverageRate }}%

-

best sequence length: {{ localBestSeqLen }}

-

best sequence:

- - - -

[{{ index }}]

-

frame id: {{ item['frame'] }}

-

coverage rate: {{ item['coverage_rate'] }}%

- - +

+ sequence length: {{ localSeqLen }} +

+

+ max coverage rate: {{ localMaxCoverageRate + }}% +

+

+ best sequence length: {{ localBestSeqLen }} +

+

+ best sequence: +

+ + + +

[{{ index }}]

+

frame id: {{ item['frame'] }}

+

coverage rate: {{ item['coverage_rate'] }}%

+ + - + - @@ -86,6 +101,8 @@ export default { localBestSeq: null, localDisableBtn: false, sceneNameList: null, + loading: false, + seqFrameData: [] }; }, @@ -96,47 +113,81 @@ export default { }, methods: { getSceneList() { - const params = {dataset_name: this.localDatasetName}; + const params = { dataset_name: this.localDatasetName }; this.$ajax.postjson('/get_scene_list', params) - .then((data) => { - if (data.success == true) { - this.sceneNameList = data.scene_list; - } else { - this.$Message.error("error"); - } - }); - }, + .then((data) => { + if (data.success == true) { + this.sceneNameList = data.scene_list; + } else { + this.$Message.error("error"); + } + }); + }, handleSceneChange(val) { this.localSceneName = val; - const params = {dataset_name: this.localDatasetName, scene_name: val}; + const params = { dataset_name: this.localDatasetName, scene_name: val }; this.$ajax.postjson('/get_scene_info', params) - .then((data) => { - if (data.success == true) { - this.localSeqLen = data.sequence_length; - this.localMaxCoverageRate = data.max_coverage_rate; - this.localBestSeqLen = data.best_sequence_length; - this.localBestSeq = data.best_sequence; - } else { - this.$Message.error("error"); - } - }); + .then((data) => { + if (data.success == true) { + this.localSeqLen = data.sequence_length; + this.localMaxCoverageRate = data.max_coverage_rate; + this.localBestSeqLen = data.best_sequence_length; + this.localBestSeq = data.best_sequence; + } else { + this.$Message.error("error"); + } + }); }, handleLoadSeq() { - const params = {dataset_name: this.localDatasetName, scene_name: this.localSceneName, sequence: this.localBestSeq}; + const params = { dataset_name: this.localDatasetName, scene_name: this.localSceneName, sequence: this.localBestSeq }; this.localDisableBtn = true; this.$emit('set-loading', true); this.$ajax.postjson('/get_frame_data', params) - .then((data) => { - if (data.success == true) { - this.seqFrameData = data.seq_frame_data; - } else { - this.$Message.error("error"); - } - this.localDisableBtn = false; - this.$emit('update-seq', data); - this.$emit('set-loading', false); - }); - + .then((data) => { + if (data.success == true) { + this.seqFrameData = data.seq_frame_data; + } else { + this.$Message.error("error"); + } + this.localDisableBtn = false; + this.$emit('update-seq', data); + this.$emit('set-loading', false); + }); + + }, + beforeUploadInferenceResultFile(file) { + this.loading = true; + const isPkl = file.name.endsWith('.pkl'); + if (!isPkl) { + this.$Notice.warning({ + title: 'File format error', + desc: 'You can only upload a .pkl file' + }); + this.loading = false; + return false; + } + const formData = new FormData(); + formData.append('file', file); + this.$ajax.postfile('/analysis_inference_result', formData) + .then((data) => { + if (data.success == true) { + + this.$Notice.success({ + title: 'Successfully parsed the file', + desc: 'inference results are found in the uploaded file.' + }); + this.loading = false; + } else { + console.log(data.success, data.message) + this.$Notice.error({ + title: 'Failed to parse the file', + desc: 'Error message: ' + data.message + }); + this.loading = false; + } + }); + + return false; }, }, }; diff --git a/src/components/content/cards/ViewDistributionCard_IRV.vue b/src/components/content/cards/ViewDistributionCard_IRV.vue new file mode 100644 index 0000000..b705599 --- /dev/null +++ b/src/components/content/cards/ViewDistributionCard_IRV.vue @@ -0,0 +1,349 @@ + + + + diff --git a/src/components/content/cards/RecResultCard.vue b/src/components/content/old/RecResultCard.vue similarity index 99% rename from src/components/content/cards/RecResultCard.vue rename to src/components/content/old/RecResultCard.vue index 69e36e9..bb29ca4 100644 --- a/src/components/content/cards/RecResultCard.vue +++ b/src/components/content/old/RecResultCard.vue @@ -51,6 +51,7 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; export default { props: { seqFrameData: Array, + hasImg: Boolean, }, data() { return {