add Seq inference vis
This commit is contained in:
parent
e92486d08d
commit
947c9a198e
@ -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() {
|
||||
|
||||
57
src/components/Unfinished.vue
Normal file
57
src/components/Unfinished.vue
Normal file
@ -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>
|
||||
95
src/components/content/OnlineInference.vue
Normal file
95
src/components/content/OnlineInference.vue
Normal file
@ -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>
|
||||
102
src/components/content/SeqInferenceResultVisualize.vue
Normal file
102
src/components/content/SeqInferenceResultVisualize.vue
Normal file
@ -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>
|
||||
@ -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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user