From 947c9a198ee45264568c60c61b3929815a91398a Mon Sep 17 00:00:00 2001
From: hofee <lexhofee@gmail.com>
Date: Thu, 19 Sep 2024 14:56:43 +0800
Subject: [PATCH] add Seq inference vis

---
 src/components/Main.vue                       |  15 ++-
 src/components/Unfinished.vue                 |  57 ++++++++++
 src/components/content/OnlineInference.vue    |  95 ++++++++++++++++
 .../content/SeqInferenceResultVisualize.vue   | 102 ++++++++++++++++++
 src/utils/ajax.js                             |   6 +-
 5 files changed, 269 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Unfinished.vue
 create mode 100644 src/components/content/OnlineInference.vue
 create mode 100644 src/components/content/SeqInferenceResultVisualize.vue

diff --git a/src/components/Main.vue b/src/components/Main.vue
index 007d52e..bf7d06c 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -77,13 +77,20 @@
     <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>
+            <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>
+                <Menu-item name="2">
+                    <Icon type="md-stats" size="16" />{{ sub_navi_name[1] }}
+                </Menu-item>
+                <Menu-item name="3">
+                    <Icon type="md-barcode" size="16" />{{ sub_navi_name[2] }}
+                </Menu-item>
             </div>
         </Menu>
         <div class="layout-breadcrumb" >
@@ -103,6 +110,8 @@
 <script>
 
 import SequenceVisualize from '@/components/content/SeqVisualize.vue'
+import SeqInferenceResultVisualize from '@/components/content/SeqInferenceResultVisualize.vue';
+import OnlineInference  from '@/components/content/OnlineInference.vue';
 
 export default {
     data() {
@@ -110,10 +119,10 @@ export default {
             project_name: "Next Best View for 3D Reconstruction",
             logo: require('@/assets/white_logo.png'),
             
-            sub_navi_name: ["Sequence Visualization", ],
+            sub_navi_name: ["Sequence Visualization", "Inference Result Visualization", "Online Inference"],
             curr_navi_idx: 0,
             curr_sub_navi_idx: 0,
-            components: [SequenceVisualize],
+            components: [SequenceVisualize, SeqInferenceResultVisualize, OnlineInference],
         };
     },
     mounted() {
diff --git a/src/components/Unfinished.vue b/src/components/Unfinished.vue
new file mode 100644
index 0000000..1265ca0
--- /dev/null
+++ b/src/components/Unfinished.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="page404">
+        <div class="content">
+            <h1>404</h1>
+            <p>This part hasn't been finished yet.</p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "unfinished",
+}
+</script>
+
+<style scoped>
+.page404 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+    background-color: #f5f7f9;
+    color: #333;
+    font-family: 'PingFang SC', sans-serif;
+}
+
+.content {
+    text-align: center;
+    width: 100%;
+}
+
+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>
\ No newline at end of file
diff --git a/src/components/content/OnlineInference.vue b/src/components/content/OnlineInference.vue
new file mode 100644
index 0000000..bac867b
--- /dev/null
+++ b/src/components/content/OnlineInference.vue
@@ -0,0 +1,95 @@
+<template>
+    <div style="padding: 40px;">
+        <div style="display: flex; justify-content: center;">
+            <h1>Online Inference</h1>
+        </div>
+        <Divider />
+        <Row>
+            <Steps :current="0">
+                <Step title="Set Scene" content="Select or upload(.blend/.json) a target scene."></Step>
+                <Step title="Set Camera" content="Select or input camera parameters."></Step>
+                <Step title="Start Inference" content="The process is shown as below."></Step>
+                <Step title="Result" content="Analysis the inference result"></Step>
+            </Steps>
+            <Divider />
+            <Row style="width: 100%;">
+                <Unfinished />
+            </Row>
+
+        </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';
+import Unfinished from '../Unfinished.vue';
+
+
+
+export default {
+    name: "SeqInferenceResultVisualize",
+    components: {
+        SelectSeqCard,
+        ViewDistributionCard,
+        RecProcessCard,
+        Unfinished
+    },
+    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>
\ No newline at end of file
diff --git a/src/components/content/SeqInferenceResultVisualize.vue b/src/components/content/SeqInferenceResultVisualize.vue
new file mode 100644
index 0000000..e813474
--- /dev/null
+++ b/src/components/content/SeqInferenceResultVisualize.vue
@@ -0,0 +1,102 @@
+<template>
+    <div style="padding: 40px;">
+        <div style="display: flex; justify-content: center;">
+            <h1>Inference Result 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: "SeqInferenceResultVisualize",
+    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>
\ No newline at end of file
diff --git a/src/utils/ajax.js b/src/utils/ajax.js
index 7d2d857..c7e1556 100644
--- a/src/utils/ajax.js
+++ b/src/utils/ajax.js
@@ -3,7 +3,7 @@ import qs from 'qs';
 import axios from 'axios'
 import { Message } from 'view-design'
 
-
+var baseURL = "http://localhost:13333/"
 
 export default {
     post(url, params) {
@@ -13,7 +13,7 @@ export default {
                 return qs.stringify(data)
             }
         ];
-        var res = axios.post(`${url}`, params).then((res) => {
+        var res = axios.post(`${baseURL}${url}`, params).then((res) => {
             console.log("res:", res)
             if (res.status == 200) {
                 if (res.data.exception != undefined && res.data.exception) {
@@ -37,7 +37,7 @@ export default {
                 return JSON.stringify(data)
             }
         ];
-        var res = axios.post(`${url}`, params).then((res) => {
+        var res = axios.post(`${baseURL}${url}`, params).then((res) => {
             console.log("res:", res)
             if (res.status == 200) {
                 if (res.data.exception != undefined && res.data.exception) {