From eafda625ef6de1e73363b3eeec6cd05cd41ed7d1 Mon Sep 17 00:00:00 2001
From: hofee <64160135+GitHofee@users.noreply.github.com>
Date: Thu, 19 Sep 2024 07:21:39 -0500
Subject: [PATCH] add upload_inference_card

---
 .../content/SeqInferenceResultVisualize.vue   |   8 +-
 .../content/cards/UploadInferenceCard.vue     | 143 ++++++++++++++++++
 2 files changed, 148 insertions(+), 3 deletions(-)
 create mode 100644 src/components/content/cards/UploadInferenceCard.vue

diff --git a/src/components/content/SeqInferenceResultVisualize.vue b/src/components/content/SeqInferenceResultVisualize.vue
index e813474..de72de7 100644
--- a/src/components/content/SeqInferenceResultVisualize.vue
+++ b/src/components/content/SeqInferenceResultVisualize.vue
@@ -7,12 +7,14 @@
         <Row>
             <Col span="8">
                 <Affix :offset-top="30">
-                    <SelectSeqCard
+                    <UploadInferenceCard
                         @update-seq="updateSeqData"
                         @set-loading="setLoading"
                     />
                 </Affix>
+                
             </Col>
+            
             <Col span="16" style="padding-left: 10px;">
 
                 <ViewDistributionCard
@@ -36,7 +38,7 @@
 
 <script>
 
-import SelectSeqCard from './cards/SelectSeqCard.vue';
+import UploadInferenceCard from './cards/UploadInferenceCard.vue';
 import ViewDistributionCard from './cards/ViewDistributionCard.vue';
 import RecProcessCard from './cards/RecProcessCard.vue';
 
@@ -44,7 +46,7 @@ import RecProcessCard from './cards/RecProcessCard.vue';
 export default {
     name: "SeqInferenceResultVisualize",
     components: {
-        SelectSeqCard,
+        UploadInferenceCard,
         ViewDistributionCard,
         RecProcessCard,
     },
diff --git a/src/components/content/cards/UploadInferenceCard.vue b/src/components/content/cards/UploadInferenceCard.vue
new file mode 100644
index 0000000..66b1eb3
--- /dev/null
+++ b/src/components/content/cards/UploadInferenceCard.vue
@@ -0,0 +1,143 @@
+<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;" />
+      Upload or Select Inference Result
+    </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;">Input Root Directory:</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 Inference Result:</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>
+
+    <Upload
+        multiple
+        type="drag"
+        action="//jsonplaceholder.typicode.com/posts/">
+        <div style="padding: 20px 0">
+            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
+            <p>Click or drag inference result here to upload</p>
+        </div>
+    </Upload>
+    
+    <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>