feat: add image-correction preview and download

frontend/src/App.vue

@@ -5,7 +5,7 @@
     </header>
     <div id="content">
       <div id="image-upload">
-        <uploadCard v-on:getDisplayFlag="getDisplayFlag"/>
+        <uploadCard @infor="getInfor"/>
       </div>
       <div id="info-display">
         <displayCard ref="dCard"/>
@@ -35,7 +35,7 @@ export default {
     displayCard
   },
   methods:{
-    getDisplayFlag(){
+    getInfor() {
       this.$refs.dCard.getInfor()
     }
   }

frontend/src/components/display/displayCard.vue

@@ -3,18 +3,76 @@
     <div slot="header" class="clearfix">
       <span>Correction Analysis</span>
     </div>
+    <div id="corrected-image-container">
+      <div class="corrected-image-group">
+        <el-image
+          :src="images['front-correction']"
+          class="corrected-image"
+          id="front-correction"
+        >
+          <div slot="placeholder" class="image-slot">
+            Image is under analysis
+          </div>
+        </el-image>
+        <div class="corrected-text-group">
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-download"
+            class="correction-download"
+            @click="downloadImage('front-correction')"
+            >Download</el-button
+          >
+        </div>
+      </div>
+      <div class="corrected-image-group" style="margin-left: 3%">
+        <el-image
+          :src="images['right-correction']"
+          class="corrected-image"
+          id="right-correction"
+        >
+          <div slot="placeholder" class="image-slot">
+            Image is under analysis
+          </div>
+        </el-image>
+        <div class="corrected-text-group">
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-download"
+            class="correction-download"
+            @click="downloadImage('right-correction')"
+            >Download</el-button
+          >
+        </div>
+      </div>
+    </div>
     <div id="information-container">
+      <div id="level-desc">
+        <p class="level-item" :style="{'background-color':level_color[0]}">Normal</p>
+        <p class="level-item" :style="{'background-color':level_color[1]}">Warning</p>
+        <p class="level-item" :style="{'background-color':level_color[2]}">Danger</p>
+      </div>
       <div v-for="item in information" :key="item.index" class="text-item">
         <div class="item-title">{{ item.title }}</div>
         <div
           v-for="detail in item.detail"
           :key="detail.index"
           class="detail-item"
+          :style="{ 'margin-top': '3%' }"
         >
           <div>
             {{ detail.name }}
           </div>
-          <div>
+          <div
+            class="detail-value"
+            :style="{
+              'background-color': level_color[detail.level],
+              color: 'white',
+              'border-radius': '2px',
+              'padding': '2px 4px 2px 4px'
+            }"
+          >
             {{ detail.value }}
           </div>
         </div>
@@ -45,14 +103,52 @@
   height: 520px;
   overflow: auto;
 }
+#level-desc{
+  display: flex;
+  justify-content: baseline;
+  align-items: center;
+}
+.level-item{
+  color: white;
+  margin-left: 3%;
+  border-radius: 3px;
+  font-size: 14px;
+  padding: 2px 4px 2px 4px;
+}
+#corrected-image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid lightblue;
+  border-radius: 5px;
+  margin-bottom: 5%;
+}
+.corrected-image-group {
+  width: 45%;
+  text-align: center;
+  padding: 8px 10px 5px 10px;
+  
+}
+.corrected-image {
+  height: 200px;
+  text-align: center;
+  width: 100%;
+}
+.corrected-text-group {
+  text-align: center;
+}
+/* .corrected-text-group .correction-download {
+  float: right;
+} */
+
 #information-container {
   overflow: auto;
-}
-.text-item {
   border: 1px solid lightblue;
   border-radius: 5px;
+}
+.text-item {
   margin-bottom: 10px;
-  padding: 5px 5px 5px 5px;
+  padding: 5px 8px 5px 5px;
 }
 .item-title {
   display: block;
@@ -72,8 +168,14 @@ export default {
   data() {
     return {
       information: [
-        
       ],
+      images: {
+        "front-correction":
+          "",
+        "right-correction":
+          "",
+      },
+      level_color: ["#67C23A", "#E6A23C", "#F56C6C"],
     };
   },
   props: {},
@@ -81,10 +183,20 @@ export default {
     getInfor() {
       let _this = this;
       axios.get("http://172.17.244.191:8090/get_result").then((response) => {
-        // console.log(response.data.data);
-        _this.information = JSON.parse(response.data.data);
+        const data = response.data;
+        _this.information = JSON.parse(data.data);
+        _this.images["front-correction"] = "data:image/jpg;base64,"+data.front;
+        _this.images["right-correction"] = "data:image/jpg;base64,"+data.right;
       });
     },
+    downloadImage(name) {
+      // let _this  = this;
+      const url = this.images[name];
+      let a = document.createElement("a");
+      a.download = "";
+      a.href = url;
+      a.click();
+    },
   },
 };
 </script>

frontend/src/components/upload/imageUpload.vue

@@ -1,17 +1,19 @@
 <template>
   <el-upload
     class="upload-demo"
-    action="http://127.0.0.1:8090/send_image"
+    action="http://127.0.0.1:5000/send_form"
     :on-change="handleChange"
     :on-preview="handlePreview"
     :on-remove="handleRemove"
     multiple
+    :auto-upload="false"
     :limit="2"
     :on-exceed="handleExceed"
     :file-list="fileList"
     :data="{filename:filename}"
+    ref="upload"
   >
-    <el-button size="small" type="primary">Click to upload pose</el-button>
+    <el-button size="small" type="primary" icon="el-icon-upload2">Click to upload</el-button>
   </el-upload>
 </template>
 <script>
@@ -40,7 +42,7 @@ export default {
     handleChange(file,fileList){
       this.fileList = fileList
       this.filename = file.name
-      this.$emit('getFileList',this.fileList);
+      this.$emit('fileList',this.fileList);
     }
   },
 };

frontend/src/components/upload/uploadCard.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>Pose Upload</span>
     </div>
-    <uploadForm v-on:getDisplayFlag="getDisplayFlag" />
+    <uploadForm @infor="infor"/>
     <div id="upload-rules">
       <p style="color:deepskyblue;font-weight: bold; font-size: 14px">Upload Rules</p>
       <div v-for="item in rules" :key="item.index" class="rule">
@@ -51,7 +51,7 @@ export default {
       rules: [
         {"index":1,"content":"Image must be png/jpg format."},
         {"index":2,"content":"File name must be front/right, e.g: front.png."},
-        {"index":3,"content":"Height is Interger and measured in centimeter."},
+        {"index":3,"content":"Height is measured in centimeter."},
         {"index":4,"content":"Must upload 2 images (front and right) of only 1 person at a time."}
       ],
     };
@@ -60,9 +60,9 @@ export default {
     uploadForm,
   },
   methods: {
-    getDisplayFlag() {
-      this.$emit("getDisplayFlag");
-    },
+    infor() {
+      this.$emit("infor")
+    }
   },
 };
 </script>

frontend/src/components/upload/uploadForm.vue

@@ -2,7 +2,7 @@
   <el-form ref="form" :model="form" label-width="120px">
     <div id="form-content">
       <el-form-item label="Pose" class="image-container">
-        <imageUpload/>
+        <imageUpload @fileList="getFileList"/>
       </el-form-item>
 
       <el-form-item label="Height" id="height">
@@ -69,18 +69,22 @@ export default {
     getHeight(value) {
       this.height = value;
     },
+    getFileList(fileList) {
+      this.form.fileList = fileList
+    },
     onSubmit() {
-      let _this = this;
-      let data = {
-        height: this.height,
-      };
+      // let _this = this;
+      let data = new FormData()
+      data.append('height',this.height);
+      Object.entries(this.form.fileList).forEach(file=>{
+        data.append('images'+file[1].name,file[1].raw)
+      })
       axios
         .post("http://172.17.244.191:8090/send_form", data)
-        .then(() => {
-          console.log(data)
-          _this.$emit("getDisplayFlag")
+        .then(response => {
+          console.log(response.data)
+          this.$emit("infor")
         });
-      // console.log(this.form.displayFlag)
     },
   },
 };