init project

src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>

src/components/Main.vue

@@ -0,0 +1,135 @@
+<style scoped>
+.layout {
+    border: 0px solid #d7dde4;
+    background: #f5f7f9;
+    font-family:Verdana
+
+}
+
+.sub_menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.layout-logo {
+    width: auto;
+    height: 30px;
+    border-radius: 3px;
+    float: left;
+    position: relative;
+    top: 15px;
+    left: 5px;
+    right: 15px;
+    font-family: sans-serif;
+    font-size: 22px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    padding: 0 10px;
+}
+
+.layout-nav {
+    width: auto;
+    margin: 0 auto;
+}
+
+.layout-assistant {
+    width: auto;
+    margin: 0 auto;
+    height: inherit;
+}
+
+.layout-breadcrumb {
+    padding: 10px 15px 0;
+}
+
+.layout-content {
+    min-height: 800px;
+    margin: 15px;
+    overflow: hidden;
+    background: #fff;
+    border-radius: 4px;
+}
+
+.layout-content-main {
+    padding: 10px;
+}
+
+.layout-copy {
+    text-align: center;
+    padding: 10px 0 20px;
+    color: #9ea7b4;
+}
+
+.layout-logo svg {
+  width: 50px; /* Adjust the size */
+  height: 50px; /* Adjust the size */
+  stroke: black; /* Adjust the color */
+  stroke-width: 2; /* Adjust the stroke width */
+  margin-right: 10px; /* Adjust the spacing */
+}
+
+</style>
+<template>
+    <div class="layout">
+
+        <Menu mode="horizontal" theme="dark" active-name="1" @on-select="handleMenuSelect">
+            <div class="layout-logo"><img :src="logo" alt="Logo" style="width: 60px; margin-right: 20px;" />{{ project_name }}</div>
+        </Menu>
+        <Menu mode="horizontal" active-name="1" @on-select="handleSubMenuSelect" class="sub_menu">
+            <div class="layout-assistant">
+                <Menu-item name="1">
+                    <Icon type="md-pie" size="16" />{{ sub_navi_name[0] }}
+                </Menu-item>
+            </div>
+        </Menu>
+        <div class="layout-breadcrumb" >
+            <Breadcrumb separator=">">
+                <Breadcrumb-item>{{ project_name }}</Breadcrumb-item>
+                <Breadcrumb-item>{{ sub_navi_name[curr_sub_navi_idx] }}</Breadcrumb-item>
+            </Breadcrumb>
+        </div>
+        <div class="layout-content">
+            <component :is="currentComponent"></component>
+        </div>
+        <div class="layout-copy">
+            2024 &copy; Hofee
+        </div>
+    </div>
+</template>
+<script>
+
+import SequenceVisualize from '@/components/content/SeqVisualize.vue'
+
+export default {
+    data() {
+        return {
+            project_name: "Next Best View for 3D Reconstruction",
+            logo: require('@/assets/white_logo.png'),
+            
+            sub_navi_name: ["Sequence Visualization", ],
+            curr_navi_idx: 0,
+            curr_sub_navi_idx: 0,
+            components: [SequenceVisualize],
+        };
+    },
+    mounted() {
+    },
+    computed: {
+        currentComponent() {
+            return this.components[this.curr_sub_navi_idx];
+        }
+    },
+    methods: {
+        handleMenuSelect(name) {
+            this.curr_navi_idx = parseInt(name) - 1;
+        },
+        handleSubMenuSelect(name) {
+            this.curr_sub_navi_idx = parseInt(name) - 1;
+        },
+    }
+}
+</script>

src/components/Page404.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="page404">
+        <div class="content">
+            <h1>404</h1>
+            <p>Oops! The page you're looking for doesn't exist.</p>
+            <router-link to="/" class="home-link">Go Back Home</router-link>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Page404",
+}
+</script>
+
+<style scoped>
+.page404 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f5f7f9;
+    color: #333;
+    font-family: 'PingFang SC', sans-serif;
+}
+
+.content {
+    text-align: center;
+}
+
+h1 {
+    font-size: 10rem;
+    margin: 0;
+}
+
+p {
+    font-size: 1.5rem;
+}
+
+.home-link {
+    display: inline-block;
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #001529;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    font-size: 1rem;
+    transition: background-color 0.3s;
+}
+
+.home-link:hover {
+    background-color: #1890ff;
+}
+</style>

src/components/content/SeqVisualize.vue

@@ -0,0 +1,102 @@
+<template>
+    <div style="padding: 40px;">
+        <div style="display: flex; justify-content: center;">
+            <h1>Sequence Visualization</h1>
+        </div>
+        <Divider />
+        <Row>
+            <Col span="8">
+                <Affix :offset-top="30">
+                    <SelectSeqCard
+                        @update-seq="updateSeqData"
+                        @set-loading="setLoading"
+                    />
+                </Affix>
+            </Col>
+            <Col span="16" style="padding-left: 10px;">
+
+                <ViewDistributionCard
+                    :seqFrameData="seq_frame_data"
+                    :objInfo="obj_info"
+                    @show-img="showImage"
+                    />
+                <RecProcessCard
+                    :seqFrameData="seq_frame_data"
+                    :modelPts="model_pts"
+                    @show-img="showImage"
+                    />
+            </Col>
+        </Row>
+        <Modal v-model="modalVisible" title="Image Detail" width="800">
+            <img :src="selectedImage" alt="Selected Image" style="width: 100%;" />
+        </Modal>
+    </div>
+
+</template>
+
+<script>
+
+import SelectSeqCard from './cards/SelectSeqCard.vue';
+import ViewDistributionCard from './cards/ViewDistributionCard.vue';
+import RecProcessCard from './cards/RecProcessCard.vue';
+
+
+export default {
+    name: "SequenceVisualize",
+    components: {
+        SelectSeqCard,
+        ViewDistributionCard,
+        RecProcessCard,
+    },
+    watch: {
+    },
+    computed: {
+
+    },
+    data() {
+        return {
+            obj_info: null,
+            seq_frame_data: [],
+            model_pts: null,
+
+            loading: false,
+
+            selectedImage: null,
+            modalVisible: false,
+
+        };
+    },
+    mounted() {
+    },
+
+    methods: {
+
+
+        showImage(imageUrl) {
+            this.selectedImage = imageUrl;
+            this.modalVisible = true;
+        },
+
+        setLoading(loading) {
+            this.loading = loading;
+        },
+        
+        updateSeqData(seqData) {
+            this.obj_info = {
+                "obj_path": seqData.obj_path,
+                "mtl_path": seqData.mtl_path,
+            }
+            this.seq_frame_data = seqData.seq_frame_data;
+            this.model_pts = seqData.model_pts;
+        },
+        
+        
+
+    }
+}
+</script>
+
+<style scoped>
+
+
+</style>

src/components/content/cards/RecProcessCard.vue

@@ -0,0 +1,216 @@
+<template>
+    <Card style="width: 100%; margin-bottom: 10px">
+       
+        <p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
+            <Icon type="md-code-working" size="20" style="color: #464c5b;" />
+            Reconstruction Process
+        </p>
+        <Row style="height: 100%;">
+            <Col span="18" style="height: 100%;">
+                <Card
+                    style="position: relative; height: 100%; "
+                    dis-hover>
+                    <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 >
+                        Frame ID:
+                        <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["frame_id"] }}</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/>
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Depth(L)
+                </p>
+                <Card :style="{
+                    marginTop: '5px', 
+                    marginBottom: '5px', 
+                    paddingBottom: rpCurrDepth ? '0' : '62.5%'
+                }">
+                <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/>
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Mask(L)
+                </p>
+                <Card :style="{
+                    marginTop: '5px', 
+                    marginBottom: '5px', 
+                    paddingBottom: rpCurrMask ? '0' : '62.5%'
+                }">
+                <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>
+            <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Reconstruction Process: [<span style="color: green;">{{ curr_step }}</span>/<span>{{ seqFrameData.length -1 }}</span>]
+            </p>
+            <Slider v-model="curr_step" :step="1" style="width: 100%;" :max="seqFrameData.length-1 >=0 ? seqFrameData.length-1:0"></Slider>
+        </Row>
+    </Card>
+</template>
+
+<script>
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+export default {
+  props: {
+    seqFrameData: Array,
+    modelPts: Array,
+  },
+  data() {
+    return {
+        rpCurrDepth: null,
+        rpCurrMask: null,
+
+        pts_scene: null,
+        pts_camera: null,
+        pts_renderer: null,
+        pts_controls: null,
+
+        curr_step: 0,
+
+        model_pts: null,
+
+        combined_point_cloud: [],
+        new_point_cloud: [],
+
+        best_seq: null,
+
+        curr_frame_info: {
+                "step": 0,
+                "frame_id":0,
+                "coverage_rate": 0,
+                "delta_CR": 0,
+                "combined_points": [],
+                "new_points": [],
+            },
+
+      
+    };
+  },
+  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"];
+            this.curr_frame_info["coverage_rate"] = val[0]["data"]["coverage_rate"];
+            this.curr_frame_info["delta_CR"] = val[0]["data"]["delta_CR"];
+            this.curr_frame_info["combined_point_cloud"] = val[0]["data"]["combined_point_cloud"];
+            this.curr_frame_info["new_point_cloud"] = val[0]["data"]["new_point_cloud"];
+            this.updatePointCloud();
+            this.view_cam_pose_list = [];
+            for (let i = 0; i < val.length; i++) {
+                this.view_cam_pose_list.push(val[i].data.cam_to_world);
+            }
+            
+        }
+        
+    },
+    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"];
+        this.curr_frame_info["delta_CR"] = this.seqFrameData[val]["data"]["delta_CR"];
+        this.curr_frame_info["combined_point_cloud"] = this.seqFrameData[val]["data"]["combined_point_cloud"];
+        this.curr_frame_info["new_point_cloud"] = this.seqFrameData[val]["data"]["new_point_cloud"];
+        this.updatePointCloud();
+    }
+  },
+  mounted() {
+    this.initThreeJS_pts(); 
+    this.animate_pts();
+  },
+  
+  methods: {
+    initThreeJS_pts() {
+        const width = this.$refs.threeCanvas_pts.clientWidth;
+        const height = this.$refs.threeCanvas_pts.clientHeight;
+
+        this.pts_scene = new THREE.Scene();
+
+        this.pts_camera = new THREE.PerspectiveCamera(75, width / height, 0.001, 1000);
+        this.pts_camera.position.z = 2;
+
+        this.pts_renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_pts });
+        this.pts_renderer.setSize(width, height);
+
+        this.pts_controls = new OrbitControls(this.pts_camera, this.pts_renderer.domElement);
+        
+
+        this.pts_scene.rotation.x = -Math.PI / 2;
+        const axesHelper = new THREE.AxesHelper(5);
+        this.pts_scene.add(axesHelper);
+    },
+
+    animate_pts() {
+        requestAnimationFrame(() => this.animate_pts());
+        this.pts_renderer.render(this.pts_scene, this.pts_camera);
+    },
+
+    updatePointCloud() {
+        
+        if (this.combinedPointCloudMesh) {
+            this.pts_scene.remove(this.combinedPointCloudMesh);
+        }
+        if (this.newPointCloudMesh) {
+            this.pts_scene.remove(this.newPointCloudMesh);
+        }
+        this.combinedPointCloudMesh = this.createPointCloud(this.curr_frame_info["combined_point_cloud"], 0x0000ff);
+        this.newPointCloudMesh = this.createPointCloud(this.curr_frame_info["new_point_cloud"], 0xff0000);
+
+        this.pts_scene.add(this.combinedPointCloudMesh);
+        this.pts_scene.add(this.newPointCloudMesh);
+        
+    },
+
+
+    createPointCloud(pointCloudData, color) {
+        const geometry = new THREE.BufferGeometry();
+        const vertices = new Float32Array(pointCloudData.flat());
+
+        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+
+        const material = new THREE.PointsMaterial({
+            size: 0.005,
+            color: color,
+        });
+
+        return new THREE.Points(geometry, material);
+    },
+    showImage(url){
+        this.$emit('show-img', url);
+    }
+  },
+};
+
+</script>

src/components/content/cards/RecResultCard.vue

@@ -0,0 +1,173 @@
+<template>
+    <Card style="width: 100%; ">
+        <Spin size="large" fix v-if="disable_btn"></Spin>
+        <p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
+            <Icon type="md-code-working" size="20" style="color: #464c5b;" />
+            Reconstruction Result
+        </p>
+        <Row style="height: 100%;">
+            <Col span="12" style="height: 100%;">
+                <Card
+                    style="position: relative; height: 100%; "
+                    dis-hover>
+                    <p slot="title" style="font-size: 16px; font-weight: bold; color: #464c5b;">
+                        <Icon type="md-code-working" size="18" style="color: #464c5b;" />
+                        Ground Truth
+                    </p>
+                    <div style="width: 100%; height: 100%;">
+                        <canvas ref="threeCanvas_gt" style="width: 100%; height: 500px;"></canvas>
+                    </div>
+                </Card>
+                
+            </Col>
+            <Col span="12" style="height: 100%;">
+            <Card
+                    style="position: relative; height: 100%; "
+                    dis-hover>
+                    <p slot="title" style="font-size: 16px; font-weight: bold; color: #464c5b;">
+                        <Icon type="md-code-working" size="18" style="color: #464c5b;" />
+                        Reconstruction 
+                    </p>
+                    <div style="width: 100%; height: 100%;">
+                        <canvas ref="threeCanvas_pred" style="width: 100%; height: 500px;"></canvas>
+                    </div>
+                </Card>
+            </Col>
+
+        </Row>
+        <Divider/>
+        <Row>
+            <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Reconstruction Process: [<span style="color: green;">{{ curr_step }}</span>/<span>{{ seq_frame_data.length-1 }}</span>]
+            </p>
+            <Slider v-model="curr_step" :step="1" style="width: 100%;" :max="seq_frame_data.length-1 >=0 ? seq_frame_data.length-1:0"></Slider>
+        </Row>
+    </Card>
+</template>
+
+<script>
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+export default {
+  props: {
+    seqFrameData: Array,
+  },
+  data() {
+    return {
+        rpCurrDepth: null,
+        rpCurrMask: null,
+
+        pts_scene: null,
+        pts_camera: null,
+        pts_renderer: null,
+        pts_controls: null,
+
+        curr_step: 0,
+
+        model_pts: null,
+
+        combined_point_cloud: [],
+        new_point_cloud: [],
+
+        best_seq: null,
+
+        curr_frame_info: {
+                "step": 0,
+                "frame_id":0,
+                "coverage_rate": 0,
+                "delta_CR": 0,
+                "combined_points": [],
+                "new_points": [],
+            },
+      
+    };
+  },
+  watch: {
+    seqFrameData(val) {
+        if (val.length > 0) {
+            this.rpCurrDepth = val[0].data.depth;
+            this.rpCurrMask = val[0].data.mask;
+        }
+    },
+    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"];
+        this.curr_frame_info["delta_CR"] = this.seqFrameData[val]["data"]["delta_CR"];
+        this.curr_frame_info["combined_point_cloud"] = this.seqFrameData[val]["data"]["combined_point_cloud"];
+        this.curr_frame_info["new_point_cloud"] = this.seqFrameData[val]["data"]["new_point_cloud"];
+        this.updatePointCloud();
+    }
+  },
+  mounted() {
+    this.initThreeJS_pts(); 
+    this.animate_pts();
+  },
+  
+  methods: {
+    initThreeJS_pts() {
+  
+        const width = this.$refs.threeCanvas_pts.clientWidth;
+        const height = this.$refs.threeCanvas_pts.clientHeight;
+
+        this.pts_scene = new THREE.Scene();
+
+        this.pts_camera = new THREE.PerspectiveCamera(75, width / height, 0.001, 1000);
+        this.pts_camera.position.z = 2;
+
+        this.pts_renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_pts });
+        this.pts_renderer.setSize(width, height);
+
+        this.pts_controls = new OrbitControls(this.pts_camera, this.pts_renderer.domElement);
+        
+
+        this.pts_scene.rotation.x = -Math.PI / 2;
+        const axesHelper = new THREE.AxesHelper(5);
+        this.pts_scene.add(axesHelper);
+    },
+
+    animate_pts() {
+        requestAnimationFrame(() => this.animate_pts());
+        this.pts_renderer.render(this.pts_scene, this.pts_camera);
+    },
+
+    updatePointCloud() {
+        
+        if (this.combinedPointCloudMesh) {
+            this.pts_scene.remove(this.combinedPointCloudMesh);
+        }
+        if (this.newPointCloudMesh) {
+            this.pts_scene.remove(this.newPointCloudMesh);
+        }
+
+        this.combinedPointCloudMesh = this.createPointCloud(this.curr_frame_info["combined_point_cloud"], 0x0000ff);
+        this.newPointCloudMesh = this.createPointCloud(this.curr_frame_info["new_point_cloud"], 0xff0000);
+
+        this.pts_scene.add(this.combinedPointCloudMesh);
+        this.pts_scene.add(this.newPointCloudMesh);
+        
+    },
+
+
+    createPointCloud(pointCloudData, color) {
+        const geometry = new THREE.BufferGeometry();
+        const vertices = new Float32Array(pointCloudData.flat());
+
+        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+
+        const material = new THREE.PointsMaterial({
+            size: 0.005,
+            color: color,
+        });
+
+        return new THREE.Points(geometry, material);
+    },
+    showImage(url){
+        this.$emit('show-img', url);
+    }
+  },
+};
+
+</script>

src/components/content/cards/SelectSeqCard.vue

@@ -0,0 +1,133 @@
+<template>
+  <Card style="width: 100%;">
+    <p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
+      <Icon type="md-settings" size="20" style="color: #464c5b;" />
+      Select Sequence
+    </p>
+    <Alert type="warning" show-icon>
+      Current Visualization Website is in Demo Version
+      <span slot="desc">The dataset directory is restricted to the sample dataset.</span>
+    </Alert>
+    
+    <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 Dataset:</p>
+      </Col>
+      <Col span="12">
+        <Input v-model="localDatasetName" style="width: 100%;" disabled />
+      </Col>
+    </Row>
+    
+    <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 Scene:</p>
+      </Col>
+      <Col span="12">
+        <Select v-model="localSceneName" style="width: 100%;" @on-change="handleSceneChange" placeholder="please select..." :disabled="localDisableBtn">
+          <Option v-for="item in sceneNameList" :value="item" :key="item">{{ item }}</Option>
+        </Select>
+      </Col>
+    </Row>
+    
+    <Divider v-if="localSceneName" />
+    
+    <Card v-if="localSceneName" 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;">sequence length</span>: {{ localSeqLen }}</p>
+          <p><Badge status="success" /><span style="font-weight: bold;">max coverage rate</span>: {{ localMaxCoverageRate }}%</p>
+          <p><Badge status="success" /><span style="font-weight: bold;">best sequence length</span>: {{ localBestSeqLen }}</p>
+          <p><Badge status="success" /><span style="font-weight: bold;">best sequence</span>:</p>
+          
+          <Card style="margin:10px;max-height: 200px; overflow-y: auto;">
+            <Row v-for="(item, index) in localBestSeq" :key="item['frame']" style="margin-left: 20px;">
+              <p style="width: 10%;">[<span style="color: red;">{{ index }}</span>]</p>
+              <p style="width: 30%;">frame id: <span style="color: green;">{{ item['frame'] }}</span></p>
+              <p style="width: 40%;">coverage rate: <span style="color: blue;">{{ item['coverage_rate'] }}%</span></p>
+            </Row>
+          </Card>
+        </Col>
+      </Row>
+    </Card>
+    
+    <Divider />
+    <Row type="flex" justify="center">
+      <Button type="success" style="width:60%" :disabled="!localSceneName || localDisableBtn" @click="handleLoadSeq" :loading="localDisableBtn">
+        Load Sequence
+      </Button>
+    </Row>
+  </Card>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+  data() {
+    return {
+      localDatasetName: "sample",
+      localSceneName: null,
+      localSeqLen: 0,
+      localMaxCoverageRate: 0,
+      localBestSeqLen: 0,
+      localBestSeq: null,
+      localDisableBtn: false,
+      sceneNameList: null,
+      seqFrameData: []
+    };
+  },
+  watch: {
+  },
+  mounted() {
+    this.getSceneList();
+  },
+  methods: {
+    getSceneList() {
+      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");
+              }
+          });
+        },
+    handleSceneChange(val) {
+      this.localSceneName = 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");
+              }
+          });
+    },
+    handleLoadSeq() {
+      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);
+          });
+      
+    },
+  },
+};
+</script>

src/components/content/cards/ViewDistributionCard.vue

@@ -0,0 +1,349 @@
+<template>
+    <Card style="width: 100%; margin-bottom: 10px">
+        
+        <p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
+            <Icon type="ios-image" size="20" style="color: #464c5b;"/>
+            View Distribution
+        </p>
+        <Row>
+            <Col span="18">
+                <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>
+                </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 ID:
+                </p>
+
+                <div style="text-align: center;">
+                    <span style="color: red; font-size: 16px;font-weight: bold;">{{ chosen_frame_id == null?"no camera is selected": chosen_frame_id }}</span>
+                </div>
+                <Divider/>
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Depth(L)
+                </p>
+                <Card :style="{
+                    marginTop: '5px', 
+                    marginBottom: '5px', 
+                    minHeight: '30%'
+                }" >
+                    <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/>
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Mask(L)
+                </p>
+                <Card :style="{
+                    marginTop: '5px', 
+                    marginBottom: '5px', 
+                    minHeight: '30%'
+                }" >
+                    <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>
+            
+        </Row>
+        <Divider/>
+        <Row>
+            <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    NBV Sequence: [<span style="color: green;">{{ selected_idx }}</span>/<span>{{ seqFrameData.length -1 }}</span>]
+            </p>
+            <Slider v-model="selected_idx" :step="1" style="width: 100%;" :max="seqFrameData.length-1 >=0 ? seqFrameData.length-1:0"></Slider>
+        </Row>
+    </Card>
+</template>
+
+
+<script>
+
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
+
+export default {
+  props: {
+    seqFrameData: Array,
+    objInfo: Object
+  },
+  data() {
+    return {
+        vdCurrDepth: null,
+        vdCurrMask: null,
+        chosen_frame_id: null,
+        selected_idx: 0,
+
+        scene: null,
+        camera: null,
+        renderer: null,
+        controls: null,
+        raycaster: new THREE.Raycaster(),
+        mouse: new THREE.Vector2(),
+        selectedFrustum: null, 
+        hoveredFrustum: null, 
+        target: new THREE.Vector3(0, 0, 0.85),
+        view_cam_pose_list: [],
+        view_cam_pose_matrix_list: [],
+        frustums: [], 
+        loadedObject: null,
+
+      
+    };
+  },
+  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]);
+            }
+            this.view_cam_pose_list = [];
+            this.view_cam_pose_matrix_list = [];
+            this.frustums = [];
+            this.selectedFrustum = null;
+            this.selected_idx = 0;
+            for (let i = 0; i < val.length; i++) {
+                this.view_cam_pose_list.push(val[i].data.cam_to_world);
+            }
+            this.getCameras();
+            this.selectCamera(this.selected_idx);
+        }
+    },
+    objInfo(val) {
+        if (val) {
+            const objURL = val.obj_path;
+            const mtlURL = val.mtl_path;
+
+            this.loadMesh(objURL, mtlURL);
+        }
+    },
+    selected_idx(val) {
+        if (val != null) {
+            this.selectCamera(val);
+        }
+    }
+  },
+  mounted() {
+    this.initThreeJS_view();
+    
+    this.animate();
+    window.addEventListener('mousemove', this.onMouseMove, false);
+    window.addEventListener('click', this.onMouseClick, false);
+  },
+  beforeDestroy() {
+        window.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('click', this.onMouseClick);
+},
+  methods: {
+    initThreeJS_view() {
+            
+        this.scene = new THREE.Scene();
+
+        const width = this.$refs.threeCanvas_view.clientWidth;
+        const height = this.$refs.threeCanvas_view.clientHeight;
+
+        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.09, 1000);
+        
+        this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_view });
+        this.renderer.setSize(width, height);
+        this.scene.rotation.x = -Math.PI / 2;
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        const axesHelper = new THREE.AxesHelper(5);
+        this.scene.add(axesHelper);
+        const light = new THREE.AmbientLight(0xffffff, 1);
+        this.scene.add(light);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+        directionalLight.position.set(5, 5, 5).normalize();
+        this.scene.add(directionalLight);
+        this.camera.position.set(0.5, 1.5, 0); 
+        this.camera.lookAt(this.target);
+
+    },
+    selectCamera(index) {
+        if (index >= 0 && index < this.frustums.length) {
+            const frustum = this.frustums[index];
+            if (this.selectedFrustum) {
+                this.selectedFrustum.material.color.set(0xff0000); // 恢复之前选中四棱锥的颜色
+            }
+            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() {
+        if (this.loadedObject) {
+        this.scene.remove(this.loadedObject);
+        this.loadedObject.traverse(child => {
+            if (child.material) child.material.dispose();
+            if (child.geometry) child.geometry.dispose();
+        });
+        this.loadedObject = null;
+        }
+    },
+    
+    loadMesh(objURL, mtlURL) {
+        this.clearLoadedObject();
+        const objLoader = new OBJLoader();
+        const mtlLoader = new MTLLoader();
+
+        mtlLoader.load(mtlURL, materials => {
+            materials.preload();
+            objLoader.setMaterials(materials);
+            objLoader.load(objURL, object => {
+                this.loadedObject = object;
+                this.scene.add(object);
+            });
+        });
+    },
+    getCameras() {
+        for (let i = 0; i < this.view_cam_pose_list.length; i++) {
+            const view_cam_pose = this.view_cam_pose_list[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.view_cam_pose_matrix_list.push(camera.matrixWorld);
+            camera.updateProjectionMatrix();
+            const frustum = this.createFrustum(camera);
+            this.frustums.push(frustum);
+        }
+
+    },
+    createFrustum(camera) {
+        const frustumGeometry = new THREE.BufferGeometry();
+        const near = camera.near;
+        const far = camera.far;
+        const aspect = camera.aspect;
+        const fov = camera.fov * (Math.PI / 180); // 角度转弧度
+
+        // 计算近平面的高度和宽度
+        const hNear = 2 * Math.tan(fov / 2) * near;
+        const wNear = hNear * aspect;
+
+        // 获取相机的世界矩阵和相机方向
+        const worldMatrix = new THREE.Matrix4().makeRotationFromEuler(camera.rotation);
+        const camPos = new THREE.Vector3().copy(camera.position);
+        const camDir = new THREE.Vector3(0, 0, 1).applyMatrix4(worldMatrix).normalize();
+        const camUp = new THREE.Vector3(0, -1, 0).applyMatrix4(worldMatrix).normalize();
+        const camRight = new THREE.Vector3(1, 0, 0).applyMatrix4(worldMatrix).normalize();
+
+        // 计算近平面中心
+        const nearCenter = camPos.clone().add(camDir.clone().multiplyScalar(near));
+
+        // 计算近平面四个角的顶点
+        const nearTopLeft = nearCenter.clone().add(camUp.clone().multiplyScalar(hNear / 2)).sub(camRight.clone().multiplyScalar(wNear / 2));
+        const nearTopRight = nearCenter.clone().add(camUp.clone().multiplyScalar(hNear / 2)).add(camRight.clone().multiplyScalar(wNear / 2));
+        const nearBottomLeft = nearCenter.clone().sub(camUp.clone().multiplyScalar(hNear / 2)).sub(camRight.clone().multiplyScalar(wNear / 2));
+        const nearBottomRight = nearCenter.clone().sub(camUp.clone().multiplyScalar(hNear / 2)).add(camRight.clone().multiplyScalar(wNear / 2));
+
+        const vertices = new Float32Array([
+            // 近平面四个角
+            ...nearTopLeft.toArray(),
+            ...nearTopRight.toArray(),
+            ...nearBottomRight.toArray(),
+            ...nearBottomLeft.toArray(),
+            // 相机位置（四个重复的点）
+            ...camPos.toArray(),
+            ...camPos.toArray(),
+            ...camPos.toArray(),
+            ...camPos.toArray()
+        ]);
+
+        const index = [
+            // 近平面
+            0, 1, 2, 0, 2, 3,
+            // 侧面
+            0, 1, 4,
+            1, 2, 4,
+            2, 3, 4,
+            3, 0, 4
+        ];
+
+        frustumGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+        frustumGeometry.setIndex(index);
+
+        const frustumMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
+        const frustum = new THREE.Mesh(frustumGeometry, frustumMaterial);
+        this.scene.add(frustum);
+
+        return frustum;
+    },
+    onMouseMove(event) {
+        const rect = this.$refs.threeCanvas_view.getBoundingClientRect();
+        this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+        this.raycaster.setFromCamera(this.mouse, this.camera);
+        const intersects = this.raycaster.intersectObjects(this.frustums);
+
+        if (intersects.length > 0) {
+            const frustum = intersects[0].object;
+
+            
+            if (this.hoveredFrustum !== frustum) {
+                if (this.hoveredFrustum) {
+
+                    if (this.hoveredFrustum !== this.selectedFrustum) {
+                        this.hoveredFrustum.material.color.set(0xff0000);
+                    }
+                }
+
+                if (frustum !== this.selectedFrustum) {
+                    frustum.material.color.set(0xffff00);
+                }
+                this.hoveredFrustum = frustum;
+            }
+        } else {
+
+            if (this.hoveredFrustum && this.hoveredFrustum !== this.selectedFrustum) {
+                this.hoveredFrustum.material.color.set(0xff0000);
+                this.hoveredFrustum = null;
+            }
+        }
+    },
+    onMouseClick() {
+
+        this.raycaster.setFromCamera(this.mouse, this.camera);
+        const intersects = this.raycaster.intersectObjects(this.frustums);
+
+        if (intersects.length > 0) {
+            const frustum = intersects[0].object;
+            const index = this.frustums.indexOf(frustum);
+            if (index !== -1) {
+                this.selected_idx = index;
+            }
+        }
+    },
+
+    animate() {
+        requestAnimationFrame(this.animate);
+        this.controls.update();
+        this.renderer.render(this.scene, this.camera);
+    },
+
+    showImage(url){
+        this.$emit('show-img', url);
+    }
+  },
+};
+</script>

src/main.js

@@ -0,0 +1,21 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+//设置iview
+import ViewUI from 'view-design'
+import 'view-design/dist/styles/iview.css'
+Vue.use(ViewUI)
+//设置ajax
+import ajax from '@/utils/ajax'
+Vue.prototype.$ajax=ajax
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

src/router/index.js

@@ -0,0 +1,35 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import ViewUI from 'view-design'
+import 'view-design/dist/styles/iview.css'
+
+import Page404 from '@/components/Page404.vue'
+import Main from '@/components/Main.vue'
+
+
+
+Vue.use(ViewUI)
+//读取EXCEL表格
+import XLSX from 'xlsx'
+Vue.use(XLSX)
+//设置ajax
+import ajax from '@/utils/ajax'
+Vue.prototype.$ajax = ajax
+Vue.config.productionTip = false
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'Main',
+      component: Main
+    },
+    {
+      path: '*',
+      name: 'Page404',
+      component: Page404
+    },
+  ]
+})

src/utils/ajax.js

@@ -0,0 +1,99 @@
+//设置axios
+import qs from 'qs';
+import axios from 'axios'
+import { Message } from 'view-design'
+
+
+
+export default {
+    post(url, params) {
+        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//配置请求头
+        axios.defaults.transformRequest = [
+            function (data) {
+                return qs.stringify(data)
+            }
+        ];
+        var res = axios.post(`${url}`, params).then((res) => {
+            console.log("res:", res)
+            if (res.status == 200) {
+                if (res.data.exception != undefined && res.data.exception) {
+                    //统一处理异常
+                    Message.error(res.data.msg)
+                    return Promise.reject(res.data)
+                } else {
+                    return res.data;
+                }
+            }
+
+            else
+                Message.error("操作失败，服务端出现异常错误！")
+        })
+        return res;
+    },
+    postjson(url, params) {
+        axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'//配置请求头
+        axios.defaults.transformRequest = [
+            function (data) {
+                return JSON.stringify(data)
+            }
+        ];
+        var res = axios.post(`${url}`, params).then((res) => {
+            console.log("res:", res)
+            if (res.status == 200) {
+                if (res.data.exception != undefined && res.data.exception) {
+                    //统一处理异常
+                    Message.error(res.data.msg)
+                    return Promise.reject(res.data)
+                } else {
+                    return res.data;
+                }
+            }
+            else
+                Message.error("操作失败，服务端出现异常错误！")
+        })
+        return res;
+    },
+    getServerHost() {
+        return serverHost;
+    },
+    postfile(url, params, formData) {
+        console.log("postfile:", url, params)
+        axios.defaults.headers.post['Content-Type'] = 'multipart/form-data;'//配置请求头
+        axios.defaults.transformRequest = [
+            function (data) {
+                return data;
+            }
+        ];
+        var res = axios.post(`${url}`, params).then((res) => {
+            console.log("res:", res)
+            if (res.status == 200) {
+                if (res.data.exception != undefined && res.data.exception) {
+                    //统一处理异常
+                    Message.error(res.data.msg)
+                    return Promise.reject(res.data)
+                } else {
+                    return res.data;
+                }
+            }
+            else
+                Message.error("操作失败，服务端出现异常错误！")
+        })
+        return res;
+    },
+    download(url, fileName) {
+        axios({
+            method: 'get',
+            url: `${url}`,
+            responseType: 'blob'
+        }).then(res => {
+            const blob = new Blob([res.data]);
+            console.log(blob.size)
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = fileName;
+            a.click();
+            window.URL.revokeObjectURL(url);
+        })
+    }
+}