add duplicated and error view

src/components/content/SeqInferenceResultVisualize.vue

@@ -20,6 +20,8 @@
                 <ViewDistributionCard_IRV
                     :seqFrameData="seq_frame_data"
                     :objInfo="obj_info"
+                    :duplicatedFrame="duplicated_frame"
+                    :errorFrame="error_frame"
                     @show-img="showImage"
                     />
                 <RecProcessCard_IRV
@@ -59,6 +61,8 @@ export default {
         return {
             obj_info: null,
             seq_frame_data: [],
+            duplicated_frame: [],
+            error_frame: [],
             model_pts: null,
             loading: false,
 
@@ -88,6 +92,9 @@ export default {
                 "mtl_path": seqData.mtl_path,
             }
             this.seq_frame_data = seqData.seq_frame_data;
+            this.duplicated_frame = seqData.retry_duplication_pose;
+            this.error_frame = seqData.retry_no_pts_pose;
+
             //this.model_pts = seqData.model_pts;
         },
         

src/components/content/cards/RecProcessCard_IRV.vue

@@ -6,59 +6,29 @@
             Inference Reconstruction Process
         </p>
         <Row style="height: 100%;">
-            <Col span="18" style="height: 100%;">
+            <Col span="24" style="height: 100%;">
                 <Card
                     style="position: relative; height: 100%; "
                     dis-hover>
+                    <Card style="margin-top: 5px; margin-bottom: 5px; width: 100%;">
+                        <div >
+                            Step:
+                            <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["step"] }}</span>
+                        </div>
+                        <div >
+                            Coverage Rate(CR):
+                            <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["coverage_rate"] }}%</span>
+                        </div>
+                        <div >
+                            Delta CR:
+                            <span style="color: green; font-size: 14px;font-weight: bold;">+{{ curr_frame_info["delta_CR"] }}%</span>
+                        </div>
+                    </Card>
                     <div style="width: 100%; height: 100%;">
                         <canvas ref="threeCanvas_pts" style="width: 100%; height: 600px;"></canvas>
                     </div>
                 </Card>
             </Col>
-            <Col span="1" style="display: flex; align-items: center; justify-content: center;">
-                <Divider type="vertical" style="height: 100%;" />
-            </Col>
-            <Col span="5">
-                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
-                    Current Frame Information
-                </p>
-                <Card style="margin-top: 5px; margin-bottom: 5px; width: 100%;">
-                    <div >
-                        Step:
-                        <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["step"] }}</span>
-                    </div>
-                    <div >
-                        Coverage Rate(CR):
-                        <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["coverage_rate"] }}%</span>
-                    </div>
-                    <div >
-                        Delta CR:
-                        <span style="color: green; font-size: 14px;font-weight: bold;">+{{ curr_frame_info["delta_CR"] }}%</span>
-                    </div>
-                </Card>
-                <Divider v-if="hasImg"/>
-                <p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
-                    Depth(L)
-                </p >
-                <Card :style="{
-                    marginTop: '5px', 
-                    marginBottom: '5px', 
-                    paddingBottom: rpCurrDepth ? '0' : '62.5%'
-                }" v-if="hasImg">
-                <img :src="`data:image/png;base64,${rpCurrDepth}`" alt="Depth Image" style="width: 100%;" v-if="rpCurrDepth" @click="showImage(`data:image/png;base64,${rpCurrDepth}`)"/>
-                </Card>
-                <Divider v-if="hasImg" />
-                <p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
-                    Mask(L)
-                </p>
-                <Card :style="{
-                    marginTop: '5px', 
-                    marginBottom: '5px', 
-                    paddingBottom: rpCurrMask ? '0' : '62.5%'
-                }" v-if="hasImg">
-                <img :src="`data:image/png;base64,${rpCurrMask}`" alt="Depth Image" style="width: 100%;" v-if="rpCurrMask" @click="showImage(`data:image/png;base64,${rpCurrMask}`)"/>
-                </Card>
-            </Col>
         </Row>
         <Divider/>
         <Row>
@@ -113,8 +83,7 @@ export default {
   watch: {
     seqFrameData(val) {
         if (val.length > 0) {
-            // this.rpCurrDepth = val[0].data.depth;
+
-            // this.rpCurrMask = val[0].data.mask;
             this.curr_step = 0;
             this.curr_frame_info["step"] = 0;
             this.curr_frame_info["frame_id"] = val[0]["frame_id"];
@@ -132,8 +101,7 @@ export default {
         
     },
     curr_step (val) {
-        // this.rpCurrDepth = this.seqFrameData[val]["data"]["depth"];
+
-        // this.rpCurrMask = this.seqFrameData[val]["data"]["mask"];
         this.curr_frame_info["step"] = val;
         this.curr_frame_info["frame_id"] = this.seqFrameData[val]["frame_id"];
         this.curr_frame_info["coverage_rate"] = this.seqFrameData[val]["data"]["coverage_rate"];

src/components/content/cards/SelectSeqCard.vue

@@ -29,12 +29,52 @@
       </Col>
     </Row>
     
-    <Divider v-if="localSceneName" />
+    <Divider v-if="localLabelList" />
     
-    <Card v-if="localSceneName" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
+    <Card v-if="localLabelList" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
       <p slot="title" style="font-size: 16px; color: #464c5b; font-weight: bold;">
         Selected Scene: <span style="color: green;">{{ localSceneName }} </span>
       </p>
+      <Row style="width: 100%;">
+        <Col style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px; width: 100%;">
+          <p><Badge status="success" /><span style="font-weight: bold;">label num</span>: {{ localLabelList.length }}</p>
+          <p><Badge status="success" /><span style="font-weight: bold;">max sequence coverage rate</span>: {{ localTotalMaxCoverageRate }}%</p>
+          <p><Badge status="success" /><span style="font-weight: bold;">min sequence coverage rate</span>: {{ localTotalMinCoverageRate }}%</p>  
+          <p><Badge status="success" /><span style="font-weight: bold;">mean sequence coverage rate</span>: {{ localTotalMeanCoverageRate }}%</p> 
+        </Col>
+      </Row>
+    </Card>
+    <Row style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
+      <Col span="10">
+        <p style="font-size: 16px; color: #464c5b; font-weight: bold;">Select Label:</p>
+      </Col>
+      <Col span="12">
+        <Select v-model="selectedOption" style="width: 100%;" @input="handleLabelChange" placeholder="please select..." :disabled="!localSceneName">
+          <Option v-for="item in localLabelList" :value="item['label_name']" :key="item['label_name']">
+            {{ item["label_name"] }}  | max coverage rate = 
+            <span style="color: green;" v-if="item['max_coverage_rate'] >= localTotalMeanCoverageRate"> 
+              {{ item["max_coverage_rate"] }}% 
+            </span>
+            <span style="color: red;" v-if="item['max_coverage_rate'] < localTotalMeanCoverageRate"> 
+              {{ item["max_coverage_rate"] }}% 
+            </span>
+          </Option>
+        </Select>
+        
+      </Col>
+    </Row>
+    <Divider v-if="localLabelName" />
+    <Card v-if="localLabelName" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
+      <p slot="title" style="font-size: 16px; color: #464c5b; font-weight: bold;">
+        Selected Label: <span style="color: green;">{{ localLabelName }} </span> (
+        <span style="color: green;" v-if="localMaxCoverageRate >= localTotalMeanCoverageRate"> 
+          {{ localMaxCoverageRate}}% 
+        </span>
+        <span style="color: red;" v-if="localMaxCoverageRate < localTotalMeanCoverageRate"> 
+          {{ localMaxCoverageRate }}% 
+        </span>
+        )
+      </p>
       <Row style="width: 100%;">
         <Col style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px; width: 100%;">
           <p><Badge status="success" /><span style="font-weight: bold;">sequence length</span>: {{ localSeqLen }}</p>
@@ -70,11 +110,17 @@ export default {
     return {
       localDatasetName: "sample",
       localSceneName: null,
+      localLabelName: null,
+      selectedOption: null,
       localSeqLen: 0,
       localMaxCoverageRate: 0,
+      localTotalMaxCoverageRate: 0,
+      localTotalMinCoverageRate: 0,
+      localTotalMeanCoverageRate: 0,
       localBestSeqLen: 0,
       localBestSeq: null,
       localDisableBtn: false,
+      localLabelList: null,
       sceneNameList: null,
       seqFrameData: []
     };
@@ -99,6 +145,21 @@ export default {
     handleSceneChange(val) {
       this.localSceneName = val;
       const params = {dataset_name: this.localDatasetName, scene_name: val};
+      this.$ajax.postjson('/get_label_list', params)
+          .then((data) => {
+              if (data.success == true) {
+                  this.localLabelList = data.label_list;
+                  this.localTotalMaxCoverageRate = data.total_max_coverage_rate;
+                  this.localTotalMinCoverageRate = data.total_min_coverage_rate;
+                  this.localTotalMeanCoverageRate = data.total_mean_coverage_rate;
+              } else {
+                  this.$Message.error("error");
+              }
+          });
+    },
+    handleLabelChange(val) {
+      this.localLabelName = val;
+      const params = {dataset_name: this.localDatasetName, scene_name: this.localSceneName, label_name: this.localLabelName};
       this.$ajax.postjson('/get_scene_info', params)
           .then((data) => {
               if (data.success == true) {

src/components/content/cards/ViewDistributionCard_IRV.vue

@@ -6,45 +6,35 @@
             View Distribution
         </p>
         <Row>
-            <Col span="18">
+            <Col span="24">
                 <Card
                     style="position: relative; padding-bottom: 62.5%; min-height: 100px; height: 0; overflow: hidden;"
                     dis-hover>
-                    <canvas ref="threeCanvas_view" style="width: 100%; height:100%"></canvas>
+                    <Row>
-                </Card>
+                        <Col span="8">
-            </Col>
+                            <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
-            <Col span="1" style="display: flex; align-items: center; justify-content: center;">
+                                Current Frame ID:
-                <Divider type="vertical" style="height: 100%;" />
+                            </p>
-            </Col>
+                            <div style="text-align: center;">
-            <Col span="5">
+                                <span style="color: red; font-size: 16px;font-weight: bold;">{{ chosen_frame_id == null?"no camera is selected": chosen_frame_id }}</span>
-                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                            </div>
-                    Current Frame ID:
+                        </Col>
-                </p>
+                        <Col span="1"> 
+                            <Divider type="vertical" style="height: 100%;"/>
+                        </Col>
+                        <Col span="12">
+                            <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                                Label Color: 
                                 
-                <div style="text-align: center;">
+                            </p>
-                    <span style="color: red; font-size: 16px;font-weight: bold;">{{ chosen_frame_id == null?"no camera is selected": chosen_frame_id }}</span>
+                            <Tag type="dot" color="#FF0000">predicted view</Tag>
-                </div>
+                                <Tag type="dot" color="#00FF00">current predicted view</Tag>
-                <Divider/>
+                                <Tag type="dot" color="#6789AB">duplicated view</Tag>
-                <p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
+                                <Tag type="dot" color="#DC1298">error view</Tag>
-                    Depth(L)
+                        </Col>
-                </p>
+                    </Row>
-                <Card :style="{
+                    <Divider/>
-                    marginTop: '5px', 
+                    <canvas ref="threeCanvas_view" style="width: 100%; height:100%"></canvas>
-                    marginBottom: '5px', 
-                    minHeight: '30%'
-                }" v-if="hasImg">
-                    <img :src="`data:image/png;base64,${vdCurrDepth}`" alt="Depth Image" style="width: 100%;" v-if="vdCurrDepth" @click="showImage(`data:image/png;base64,${vdCurrDepth}`)"/>
-                </Card>
-                <Divider v-if="hasImg"/>
-                <p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
-                    Mask(L)
-                </p>
-                <Card :style="{
-                    marginTop: '5px', 
-                    marginBottom: '5px', 
-                    minHeight: '30%'
-                }" v-if="hasImg">
-                    <img :src="`data:image/png;base64,${vdCurrMask}`" alt="Mask Image" style="width: 100%;" v-if="vdCurrMask" @click="showImage(`data:image/png;base64,${vdCurrMask}`)"/>
                 </Card>
             </Col>
             
@@ -70,12 +60,12 @@ import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
 export default {
   props: {
     seqFrameData: Array,
-    objInfo: Object
+    objInfo: Object,
+    duplicatedFrame: Array,
+    errorFrame: Array,
   },
   data() {
     return {
-        vdCurrDepth: null,
-        vdCurrMask: null,
         chosen_frame_id: null,
         selected_idx: 0,
         hasImg: false,
@@ -94,14 +84,18 @@ export default {
         frustums: [], 
         loadedObject: null,
 
+        duplicated_frustums: [],
+        duplicated_view_cam_pose_matrix_list : [],
+
+        error_frustums: [],
+        error_view_cam_pose_matrix_list : [],
+
       
     };
   },
   watch: {
     seqFrameData(val) {
         if (val.length > 0) {
-            // this.vdCurrDepth = val[0].data.depth;
-            // this.vdCurrMask = val[0].data.mask;
             for (let i = 0; i < this.frustums.length; i++) {
                 this.scene.remove(this.frustums[i]);
             }
@@ -117,6 +111,26 @@ export default {
             this.selectCamera(this.selected_idx);
         }
     },
+    duplicatedFrame(val) {
+        
+        for (let i = 0; i < this.duplicated_frustums.length; i++) {
+            this.scene.remove(this.duplicated_frustums[i]);
+        }
+        this.duplicated_frustums = [];
+        this.duplicated_view_cam_pose_matrix_list = [];
+        this.getDuplicatedCameras();
+        
+    },
+    errorFrame(val) {
+       
+        for (let i = 0; i < this.error_frustums.length; i++) {
+            this.scene.remove(this.error_frustums[i]);
+        }
+        this.error_frustums = [];
+        this.error_view_cam_pose_matrix_list = [];
+        this.getErrorCameras();
+       
+    },
     objInfo(val) {
         if (val) {
             const objURL = val.obj_path;
@@ -171,15 +185,11 @@ export default {
         if (index >= 0 && index < this.frustums.length) {
             const frustum = this.frustums[index];
             if (this.selectedFrustum) {
-                this.selectedFrustum.material.color.set(0xff0000); // 恢复之前选中四棱锥的颜色
+                this.selectedFrustum.material.color.set(0xff0000); 
             }
-            frustum.material.color.set(0x00ff00); // 选中的四棱锥颜色
+            frustum.material.color.set(0x00ff00);
             this.selectedFrustum = frustum;
-
-            // 更新 chosen_frame_id 和其他相关信息
             this.chosen_frame_id = this.seqFrameData[index].frame_id;
-            this.vdCurrDepth = this.seqFrameData[index].data.depth;
-            this.vdCurrMask = this.seqFrameData[index].data.mask;
         }
     },
     clearLoadedObject() {
@@ -230,7 +240,52 @@ export default {
         }
 
     },
-    createFrustum(camera) {
+    getDuplicatedCameras(){
+        for (let i = 0; i < this.duplicatedFrame.length; i++) {
+            console.log(this.duplicatedFrame[i])
+            const view_cam_pose = this.duplicatedFrame[i];
+            const camera = new THREE.PerspectiveCamera(45, 1280 / 800, 0.1, 1000);
+
+            const camMatrix = new THREE.Matrix4().fromArray([
+                view_cam_pose[0][0], view_cam_pose[1][0], view_cam_pose[2][0], view_cam_pose[3][0],
+                view_cam_pose[0][1], view_cam_pose[1][1], view_cam_pose[2][1], view_cam_pose[3][1],
+                view_cam_pose[0][2], view_cam_pose[1][2], view_cam_pose[2][2], view_cam_pose[3][2],
+                view_cam_pose[0][3], view_cam_pose[1][3], view_cam_pose[2][3], view_cam_pose[3][3]
+            ]);
+            camera.matrixWorld.copy(camMatrix);
+            //camera.matrixWorldInverse.copy(camMatrix).invert();
+            camera.position.setFromMatrixPosition(camMatrix);
+            camera.rotation.setFromRotationMatrix(camMatrix);
+
+            this.duplicated_view_cam_pose_matrix_list.push(camera.matrixWorld);
+            camera.updateProjectionMatrix();
+            const frustum = this.createFrustum(camera, 0x6789ab);
+            this.duplicated_frustums.push(frustum);
+        }
+    },
+    getErrorCameras(){
+        for (let i = 0; i < this.errorFrame.length; i++) {
+            const view_cam_pose = this.errorFrame[i];
+            const camera = new THREE.PerspectiveCamera(45, 1280 / 800, 0.1, 1000);
+
+            const camMatrix = new THREE.Matrix4().fromArray([
+                view_cam_pose[0][0], view_cam_pose[1][0], view_cam_pose[2][0], view_cam_pose[3][0],
+                view_cam_pose[0][1], view_cam_pose[1][1], view_cam_pose[2][1], view_cam_pose[3][1],
+                view_cam_pose[0][2], view_cam_pose[1][2], view_cam_pose[2][2], view_cam_pose[3][2],
+                view_cam_pose[0][3], view_cam_pose[1][3], view_cam_pose[2][3], view_cam_pose[3][3]
+            ]);
+            camera.matrixWorld.copy(camMatrix);
+            //camera.matrixWorldInverse.copy(camMatrix).invert();
+            camera.position.setFromMatrixPosition(camMatrix);
+            camera.rotation.setFromRotationMatrix(camMatrix);
+
+            this.error_view_cam_pose_matrix_list.push(camera.matrixWorld);
+            camera.updateProjectionMatrix();
+            const frustum = this.createFrustum(camera, 0xdc1298);
+            this.error_frustums.push(frustum);
+        }
+    },
+    createFrustum(camera, frustum_color=0xff0000) {
         const frustumGeometry = new THREE.BufferGeometry();
         const near = camera.near;
         const far = camera.far;
@@ -283,7 +338,7 @@ export default {
         frustumGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
         frustumGeometry.setIndex(index);
 
-        const frustumMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
+        const frustumMaterial = new THREE.MeshBasicMaterial({ color: frustum_color, wireframe: true });
         const frustum = new THREE.Mesh(frustumGeometry, frustumMaterial);
         this.scene.add(frustum);