diff --git a/package-lock.json b/package-lock.json
index 0fcf956..16cc72a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4580,6 +4580,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
+      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "editorconfig": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -17562,6 +17578,21 @@
         "buffer-crc32": "~0.2.3",
         "fd-slicer": "~1.1.0"
       }
+    },
+    "zrender": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
+      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 5f85017..b7326c5 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "axios": "^0.26.1",
+    "echarts": "^5.5.1",
     "video.js": "^7.19.2",
     "videojs-contrib-hls": "^5.15.0",
     "view-design": "^4.7.0",
diff --git a/src/components/Main.vue b/src/components/Main.vue
index bf7d06c..0378d16 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -80,16 +80,19 @@
             <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">
+        <Menu mode="horizontal" active-name="3" @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] }}
+                    <Icon type="ios-image" size="16" />{{ sub_navi_name[1] }}
                 </Menu-item>
                 <Menu-item name="3">
-                    <Icon type="md-barcode" size="16" />{{ sub_navi_name[2] }}
+                    <Icon type="md-stats" size="16" />{{ sub_navi_name[2] }}
+                </Menu-item>
+                <Menu-item name="4">
+                    <Icon type="md-barcode" size="16" />{{ sub_navi_name[3] }}
                 </Menu-item>
             </div>
         </Menu>
@@ -112,17 +115,17 @@
 import SequenceVisualize from '@/components/content/SeqVisualize.vue'
 import SeqInferenceResultVisualize from '@/components/content/SeqInferenceResultVisualize.vue';
 import OnlineInference  from '@/components/content/OnlineInference.vue';
-
+import InferenceResultAnalysis from '@/components/content/InferenceResultAnalysis.vue';
 export default {
     data() {
         return {
             project_name: "Next Best View for 3D Reconstruction",
             logo: require('@/assets/white_logo.png'),
             
-            sub_navi_name: ["Sequence Visualization", "Inference Result Visualization", "Online Inference"],
+            sub_navi_name: ["Sequence Visualization", "Inference Result Visualization", "Inference Result Analysis","Online Inference"],
             curr_navi_idx: 0,
-            curr_sub_navi_idx: 0,
-            components: [SequenceVisualize, SeqInferenceResultVisualize, OnlineInference],
+            curr_sub_navi_idx: 2,
+            components: [SequenceVisualize, SeqInferenceResultVisualize, InferenceResultAnalysis, OnlineInference],
         };
     },
     mounted() {
diff --git a/src/components/content/InferenceResultAnalysis.vue b/src/components/content/InferenceResultAnalysis.vue
new file mode 100644
index 0000000..3d27f01
--- /dev/null
+++ b/src/components/content/InferenceResultAnalysis.vue
@@ -0,0 +1,108 @@
+<template>
+    <div style="padding: 40px;">
+        <div style="display: flex; justify-content: center;">
+            <h1>Inference Result Analysis</h1>
+        </div>
+        <Divider />
+
+        <StatResultAnalysis
+            v-for="(result, name) in results"
+            :key="name"
+            :result="result"
+            :name="name"
+        />
+        <Divider/>
+        <Upload multiple type="drag" action="" accept=".json" :before-upload="beforeUploadInferenceResultFile"
+        style="width: 100%; position: relative; margin-top:10px">
+            <div style="padding: 20px 0">
+                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff" v-if="!loading">
+                </Icon>
+                <p v-if="!loading">Select or drag the inference statistical result file(.json) here to upload
+                </p>
+                <div class="demo-spin-container" v-if="loading">
+                <Spin fix size="large"></Spin>
+                </div>
+                <p v-if="loading">Waiting for server response...</p>
+            </div>
+        </Upload>
+        
+    </div>
+
+</template>
+
+<script>
+import StatResultAnalysis from './cards/StatResultAnalysis.vue';
+
+export default {
+    name: "InferenceResultAnalysis",
+    components: {
+        StatResultAnalysis
+        
+    },
+    watch: {
+    },
+    computed: {
+
+    },
+    data() {
+        return {
+            results: {},
+            loading: false,
+
+        };
+    },
+    mounted() {
+    },
+
+    methods: {
+        beforeUploadInferenceResultFile(file) {
+            this.loading = true;
+            const isJson = file.name.endsWith('.json');
+            var result_name = file.name;
+            if (!isJson) {
+                this.$Notice.warning({
+                title: 'File format error',
+                desc: 'You can only upload a .json file, current file: ' + file.name
+                });
+                this.loading = false;
+                return false;
+            }
+
+            const reader = new FileReader();
+        
+            reader.onload = (event) => {
+                try {
+                    const jsonObject = JSON.parse(event.target.result);
+                    var repeat = 0;
+                    while (this.results[result_name]) {
+                        result_name = file.name + `(${repeat})`;
+                        repeat++;
+                    }
+                    this.results[result_name] = jsonObject;
+                    console.log(this.results);
+                } catch (error) {
+                    console.log(error)
+                    this.$Notice.error({
+                        title: 'File parse error',
+                        desc: `The JSON file(${file.name}) could not be parsed.`
+                    });
+                } finally {
+                    this.loading = false;
+                }
+            };
+            
+            reader.readAsText(file);
+            
+            
+
+            return false;
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/content/cards/StatResultAnalysis.vue b/src/components/content/cards/StatResultAnalysis.vue
new file mode 100644
index 0000000..631bbf4
--- /dev/null
+++ b/src/components/content/cards/StatResultAnalysis.vue
@@ -0,0 +1,384 @@
+<template>
+    <Card style="width: 100%;">
+        <p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
+            <Icon type="md-stats" size="20" style="color: #464c5b;" />
+            Inference Result: <span style="color: green;">{{ name }}</span>
+        </p>
+        <Alert show-icon><span style="font-weight: bold;">Success Rate(SR)</span> = Predicted Final Coverage Rate / Max
+            GT Final Coverage Rate</Alert>
+        <Row>
+            <!-- 左侧展示条形图 -->
+            <Col span="12">
+            <Card>
+                <p slot="title" style="font-size: 16px; font-weight: bold;">Success Rate Histogram</p>
+                <div ref="histogramChart" style="height: 600px; width: 100%;"></div>
+            </Card>
+            </Col>
+            <!-- 右侧展示饼状图 -->
+            <Col span="12">
+            <Card>
+                <p slot="title" style="font-size: 16px; font-weight: bold;">Success Rate Pie Chart</p>
+                <div ref="pieChart" style="height: 600px; width: 100%;"></div>
+            </Card>
+            </Col>
+        </Row>
+        <Row style="margin-top: 10px;">
+            <Card style="width: 100%; height: 600px;">
+                <p slot="title" style="font-size: 16px; font-weight: bold;">Single Object Analysis</p>
+                <Row>
+                    <Col span="8">
+                    <Row style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
+                        <Col span="8">
+                        <p style="font-size: 16px; color: #464c5b; font-weight: bold;">Select Scene:</p>
+                        </Col>
+                        <Col span="14">
+                        <Select v-model="sceneName" style="width: 100%;" @on-change="handleSceneChange"
+                            placeholder="please select..." filterable>
+                            <Option v-for="(value, key) in result" :value="key" :key="key" :label="key"><span>{{ key
+                                    }}</span>
+                                <span style="float:right;color:#ccc">(SR=<span
+                                        :style="{ color: getSuccessRateColor(result[key]['success_rate']) }">{{
+                                            (result[key]["success_rate"] * 100).toFixed(2) }}%</span>)</span>
+                            </Option>
+                        </Select>
+                        </Col>
+                    </Row>
+                    </Col>
+                    <Col span="1">
+                    <Divider type="vertical" style="height: 100%;" />
+                    </Col>
+                    <Col span="14">
+
+                    <span style="font-weight: bold;">Max Coverage Rate: <span style="color: green;">{{ result[sceneName]
+                        ? (result[sceneName]["max_coverage_rate"] * 100).toFixed(2) : 0 }}%</span></span>
+                    <Divider type="vertical" style="height: 100%;" />
+                    <span style="font-weight: bold;">Pred Coverage Rate: <span style="color: green;">{{
+                        result[sceneName]
+                            ? (result[sceneName]["pred_max_coverage_rate"]*100).toFixed(2) : 0 }}%</span></span>
+                    <Divider type="vertical" style="height: 100%;" />
+                    <span style="font-weight: bold;">Success Rate: <span style="color: green;">{{ result[sceneName] ?
+                        (result[sceneName]["success_rate"] * 100).toFixed(2) : 0 }}%</span></span>
+                    <Divider type="vertical" style="height: 100%;" />
+                    <span style="font-weight: bold;">Pred Length/GT Length:
+                        <span style="color: red;">{{ result[sceneName] ? (result[sceneName]["pred_seq_len"]) : 0
+                            }}</span>/<span style="color: green;">?</span>
+                    </span>
+
+                    </Col>
+                </Row>
+                <Divider />
+                <Row>
+                    <Card style="height: 400px; width: 100%;">
+                        <p slot="title" style="font-size: 16px; font-weight: bold;">Prediction Curve</p>
+                        <div ref="predictionCurve" style="height: 350px; width: 100%;"></div>
+                    </Card>
+                </Row>
+            </Card>
+        </Row>
+    </Card>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { Divider } from 'view-design';
+
+export default {
+    name: "StatResultAnalysis",
+    props: {
+        result: Object,
+        name: String,
+    },
+    mounted() {
+        console.log(this.result);
+        this.drawCharts();
+    },
+    data() {
+        return {
+            sceneName: null,
+
+        };
+    },
+    methods: {
+        getSuccessRateColor(rate) {
+            if (rate >= 0.7) {
+                return 'green';
+            } else if (rate >= 0.4) {
+                return 'orange';
+            } else {
+                return 'red';
+            }
+        },
+        handleSceneChange(val) {
+            if (val) {
+                this.sceneName = val;
+                console.log("Selected scene name:", this.sceneName);
+                this.drawLines(); // 选择场景后绘制折线图
+            }
+        },
+        drawLines() {
+            if (!this.sceneName || !this.result[this.sceneName]) return;
+
+            const coverageRateSeq = this.result[this.sceneName]["coverage_rate_seq"];
+            const maxCoverageRate = this.result[this.sceneName]["max_coverage_rate"];
+            const successRateSeq = coverageRateSeq.map(rate => (rate * 100 / maxCoverageRate).toFixed(2)); // 计算成功率序列
+
+            // 初始化折线图
+            const predictionCurve = echarts.init(this.$refs.predictionCurve);
+            const lineOption = {
+                tooltip: {
+                    trigger: 'axis',
+                    formatter: (params) => {
+                        let tooltip = params[0].name + '<br>';
+                        params.forEach(item => {
+                            tooltip += `${item.seriesName}: ${item.data}%<br>`;
+                        });
+                        return tooltip;
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: coverageRateSeq.map((_, index) => `${index + 1}`), // x轴标签
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Coverage Rate',
+                    axisLabel: {
+                        formatter: '{value}%'
+                    }
+                },
+                series: [
+                    {
+                        name: 'Coverage Rate',
+                        type: 'line',
+                        data: coverageRateSeq.map(rate => (rate * 100).toFixed(2)),
+                        itemStyle: {
+                            color: '#3399ff'
+                        },
+                        smooth: false // 曲线平滑
+                    },
+                    {
+                        name: 'Success Rate',
+                        type: 'line',
+                        data: successRateSeq,
+                        itemStyle: {
+                            color: '#ff5733' // 另一种颜色
+                        },
+                        smooth: false // 曲线平滑
+                    },
+                    {
+                        name: 'Max Coverage Rate',
+                        type: 'line',
+
+                        lineStyle: {
+                            type: 'dashed' // 设置为虚线
+                        },
+                        markLine: {
+                            data: [
+                                {
+                                    name: 'GT Max Coverage Rate',
+                                    yAxis: (maxCoverageRate * 100).toFixed(2),
+                                    label: {
+                                        formatter: '{c}%' // 在标记线上显示百分号
+                                    }
+                                }
+                            ],
+
+                        },
+                    }
+
+                ]
+            };
+            predictionCurve.setOption(lineOption);
+        },
+        drawCharts() {
+            // 提取成功率数据
+            const successRates = Object.values(this.result).map(item => item.success_rate);
+
+            // 计算平均数
+            const avgSuccessRate = parseFloat((successRates.reduce((sum, rate) => sum + rate, 0) / successRates.length).toFixed(4));
+            console.log("avg", avgSuccessRate);
+
+            // 计算中位数
+            const sortedRates = [...successRates].sort((a, b) => a - b);
+            const mid = Math.floor(sortedRates.length / 2);
+            const medianSuccessRate = parseFloat((sortedRates.length % 2 !== 0 ? sortedRates[mid] : ((sortedRates[mid - 1] + sortedRates[mid]) / 2)).toFixed(4));
+
+            // 定义区间
+            const intervals = ['0-10%', '10-20%', '20-30%', '30-40%', '40-50%', '50-60%', '60-70%', '70-80%', '80-90%', '90-100%', '>=100%'];
+            const intervalCounts = new Array(intervals.length).fill(0);
+
+            // 将成功率分类到对应的区间
+            successRates.forEach(rate => {
+                let index = Math.min(Math.floor(rate * 10), 10); // 大于100%的情况归类为最后一项
+                intervalCounts[index]++;
+            });
+
+            // 生成条形图数据
+            const histogramData = intervalCounts.map((count, index) => ({
+                name: intervals[index],
+                value: count
+            }));
+
+            const histogramChart = echarts.init(this.$refs.histogramChart);
+            const seriesData = [
+                {
+                    name: 'Number of Objects',
+                    type: 'bar',
+                    data: histogramData.map(item => item.value),
+                    itemStyle: {
+                        color: '#3399ff'
+                    },
+                    markPoint: {
+                        data: [
+                            {
+                                name: 'Median',
+                                coord: [medianSuccessRate * 10 - 1, histogramData[Math.floor(medianSuccessRate * 10)].value],
+                                label: {
+                                    formatter: `Median: \n${(medianSuccessRate * 100).toFixed(2)}%`,
+                                    position: 'top'
+                                },
+                                itemStyle: {
+                                    color: 'green'
+                                }
+                            },
+                            {
+                                name: 'Avg',
+                                coord: [avgSuccessRate * 10 - 1, histogramData[Math.floor(avgSuccessRate * 10)].value],
+                                label: {
+                                    formatter: `Average: \n${(avgSuccessRate * 100).toFixed(2)}%`,
+                                    position: 'top'
+                                },
+                                itemStyle: {
+                                    color: 'orange'
+                                }
+                            },
+                        ]
+                    }
+                }
+            ];
+
+            const histogramOption = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: intervals,
+                    name: 'SR (%)'
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Number of Objects'
+                },
+                series: seriesData
+            };
+            histogramChart.setOption(histogramOption);
+
+            const pieIntervals = ['0-40%', '40-70%', '70-100%', '>=100%'];
+            const pieIntervalCounts = new Array(intervals.length).fill(0);
+
+            successRates.forEach(rate => {
+                if (rate <= 0.4) {
+                    pieIntervalCounts[0]++;
+                } else if (rate <= 0.7) {
+                    pieIntervalCounts[1]++;
+                } else if (rate < 1.0) {
+                    pieIntervalCounts[2]++;
+                } else {
+                    pieIntervalCounts[3]++;
+                }
+            });
+
+            // 生成内环饼图数据
+            const innerPieData = pieIntervals.map((interval, index) => ({
+                name: interval,
+                value: pieIntervalCounts[index]
+            }));
+
+            // 生成外环饼图数据
+            const outerPieData = histogramData.map(item => ({
+                name: item.name,
+                value: item.value
+            }));
+
+            // 初始化饼状图
+            const pieChart = echarts.init(this.$refs.pieChart);
+            const pieOption = {
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{a} <br/>{b}: {c} ({d}%)'
+                },
+                legend: {
+                    data: outerPieData.map(item => item.name) // 使用内环数据的名称
+                },
+                series: [
+                    {
+                        name: 'Success Rate',
+                        type: 'pie',
+                        selectedMode: 'single',
+                        radius: [0, '30%'],
+                        label: {
+                            position: 'inner',
+                            fontSize: 14
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: innerPieData // 内环数据
+                    },
+                    {
+                        name: 'Success Rate',
+                        type: 'pie',
+                        radius: ['45%', '60%'],
+                        labelLine: {
+                            length: 30
+                        },
+                        label: {
+                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
+                            backgroundColor: '#F6F8FC',
+                            borderColor: '#8C8D8E',
+                            borderWidth: 1,
+                            borderRadius: 4,
+                            rich: {
+                                a: {
+                                    color: '#6E7079',
+                                    lineHeight: 22,
+                                    align: 'center'
+                                },
+                                hr: {
+                                    borderColor: '#8C8D8E',
+                                    width: '100%',
+                                    borderWidth: 1,
+                                    height: 0
+                                },
+                                b: {
+                                    color: '#4C5058',
+                                    fontSize: 14,
+                                    fontWeight: 'bold',
+                                    lineHeight: 33
+                                },
+                                per: {
+                                    color: '#fff',
+                                    backgroundColor: '#4C5058',
+                                    padding: [3, 4],
+                                    borderRadius: 4
+                                }
+                            }
+                        },
+                        data: outerPieData // 外环数据
+                    }
+                ]
+            };
+
+            pieChart.setOption(pieOption);
+        }
+    }
+};
+</script>
+
+<style scoped>
+/* 添加必要的样式 */
+</style>