From 4d5d3678b1fadae605ee4b8f4fc079ae90c0be98 Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Sun, 9 Oct 2022 19:57:31 +0800
Subject: [PATCH] fix issue

---
 templates/base/head_navbar.tmpl               |   3 +-
 web_src/vuepages/apis/modules/tuomin.js       |  15 --
 web_src/vuepages/langs/config/en-US.js        |  15 ++
 web_src/vuepages/langs/config/zh-CN.js        |  14 ++
 web_src/vuepages/pages/model/tuomin/index.vue | 212 +++++-------------
 5 files changed, 84 insertions(+), 175 deletions(-)
 delete mode 100644 web_src/vuepages/apis/modules/tuomin.js

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 258af3236..b13b3cc93 100755
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -35,7 +35,7 @@
 
 		<a class="item" href="{{AppSubUrl}}/explore/repos">{{.i18n.Tr "custom.head.project"}}</a>
 		<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
-		<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">模型</a>
+		<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">{{.i18n.Tr "repo.model_manager"}}</a>
 		<div class="ui simple dropdown item" id='dropdown_explore'>
 			{{.i18n.Tr "explore"}}
 			<i class="dropdown icon"></i>
@@ -69,6 +69,7 @@
 
 		<a class="item" href="{{AppSubUrl}}/explore/repos">{{.i18n.Tr "custom.head.project"}}</a>
 		<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
+		<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">{{.i18n.Tr "repo.model_manager"}}</a>
 		<div class="ui simple dropdown item" id='dropdown_PageHome'>
 			{{.i18n.Tr "explore"}}
 			<i class="dropdown icon"></i>
diff --git a/web_src/vuepages/apis/modules/tuomin.js b/web_src/vuepages/apis/modules/tuomin.js
deleted file mode 100644
index 8b1c3c7c4..000000000
--- a/web_src/vuepages/apis/modules/tuomin.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import service from '../service';
-
-// 图片脱敏接口
-export const  imageTranform = (data) => { // page pageSize
-  console.log("-=-=-=-=-=",data)
-  return service({
-    url: '/extension/tuomin/upload',
-    method: 'post',
-    headers:{
-        'Content-type':'multipart/form-data'
-    },
-    params: { model: data.model },
-    data: {...data.file},
-  });
-}
diff --git a/web_src/vuepages/langs/config/en-US.js b/web_src/vuepages/langs/config/en-US.js
index c60b90f91..9670a6815 100644
--- a/web_src/vuepages/langs/config/en-US.js
+++ b/web_src/vuepages/langs/config/en-US.js
@@ -176,6 +176,21 @@ const en = {
     Activated: 'Activated',
     notActive: 'Not active',
   },
+  tranformImageFailed:'Picture desensitization failed',
+  originPicture:'Origin picture',
+  desensitizationPicture:'Desensitization picture',
+  desensitizationObject:'Desensitization object',
+  example:'Example',
+  startDesensitization:'Start desensitization',
+  all:'All',
+  onlyFace:'Only face',
+  onlyLicensePlate:'Only license plate',
+  dragThePictureHere:'Drag the picture here',
+  or:'or',
+  clickUpload:'Click upload',
+  dataDesensitizationModelExperience:'Data desensitization model experience',
+  dataDesensitizationModelDesc:'Use AI technology to desensitize the face and license plate number in the picture. For more information about this model, please visit the project',
+
 }
 
 export default en;
diff --git a/web_src/vuepages/langs/config/zh-CN.js b/web_src/vuepages/langs/config/zh-CN.js
index 2b451e2db..88fa043b1 100644
--- a/web_src/vuepages/langs/config/zh-CN.js
+++ b/web_src/vuepages/langs/config/zh-CN.js
@@ -176,6 +176,20 @@ const zh = {
     Activated: '已激活',
     notActive: '未激活',
   },
+  tranformImageFailed:'图片脱敏失败',
+  originPicture:'原始图片',
+  desensitizationPicture:'脱敏图片',
+  desensitizationObject:'脱敏对象',
+  example:'示例',
+  startDesensitization:'开始处理',
+  all:'全部',
+  onlyFace:'仅人脸',
+  onlyLicensePlate:'仅车牌',
+  dragThePictureHere:'拖动图片到这里',
+  or:'或',
+  clickUpload:'点击上传',
+  dataDesensitizationModelExperience:'数据脱敏模型体验',
+  dataDesensitizationModelDesc:'利用人工智能AI技术，把图片中的人脸、车牌号码进行脱敏处理。该模型更多信息请访问项目',
 }
 
 export default zh;
diff --git a/web_src/vuepages/pages/model/tuomin/index.vue b/web_src/vuepages/pages/model/tuomin/index.vue
index 9f201ca32..c00bb536c 100644
--- a/web_src/vuepages/pages/model/tuomin/index.vue
+++ b/web_src/vuepages/pages/model/tuomin/index.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="ui container">
       <div class="tuomin-title">
-        <h2>数据脱敏模型体验</h2>
-        <p>利用人工智能AI技术，把图片中的人脸、车牌号码进行脱敏处理。该模型更多信息请访问项目 &nbsp;<a href="">tengxiao / tuomin</a></p>
+        <h2>{{$t('dataDesensitizationModelExperience')}}</h2>
+        <p>{{$t('dataDesensitizationModelDesc')}} &nbsp;<a href="">tengxiao / tuomin</a></p>
       </div>
       <el-row :gutter="12" style="margin-top: 33px;">
-        <el-col :span="12">
+        <el-col :xs="24" :span="12">
           <div class="tuomin-content-image">
               <div class="tuomin-icon">
                 <i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i>
@@ -22,58 +22,71 @@
                   :style="{display:(ImageUrl ? 'none':'block')}"
                   :auto-upload="false"
                   >
-                    <div class="el-upload__text">拖动图片到这里 <span style="color: rgba(136, 136, 136, 0.87);">或</span>  点击上传</div>
+                    <div class="el-upload__text">{{$t('dragThePictureHere')}}<span style="color: rgba(136, 136, 136, 0.87);">{{$t('or')}}</span>{{$t('clickUpload')}}</div>
                 </el-upload>
 
                 <img class="preview-image" v-if="ImageUrl" :src="ImageUrl" alt="">
               </div>
               <div>
                   <div class="tuomin-radio-model">
-                    <label class="radio-label">脱敏对象：</label>
+                    <label class="radio-label">{{$t('desensitizationObject')}}：</label>
                     <div>
                       <el-radio-group v-model="radio">
-                        <el-radio :label="2">全部</el-radio>
-                        <el-radio :label="1">仅人脸</el-radio>
-                        <el-radio :label="0">仅车牌</el-radio>
+                        <el-radio :label="2">{{$t('all')}}</el-radio>
+                        <el-radio :label="1">{{$t('onlyFace')}}</el-radio>
+                        <el-radio :label="0">{{$t('onlyLicensePlate')}}</el-radio>
                       </el-radio-group>
                     </div>
                     
                   </div>
                   <div class="tuomin-button-model">
-                    <el-button @click="cancelUpload">取消</el-button>
-                    <el-button @click="startTranform" type="primary">开始处理</el-button>
+                    <el-button @click="cancelUpload">{{$t('cancel')}}</el-button>
+                    <el-button @click="startTranform" type="primary">{{$t('startDesensitization')}}</el-button>
                   </div>
               </div>
           </div>
         </el-col>
-        <el-col :span="12">
-          <div class="tuomin-content-image">
+        <el-col :xs="24" :span="12">
+          <div class="tuomin-content-image" v-loading="tranformImageLoading">
             <div class="tuomin-icon">
               <i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i>
               <span style="font-size: 12px;">output</span>
             </div>
-            
+            <div style="height: 358px;">
+              <el-image 
+                 style="height: 100%;width: 100%;"
+                :src="resultImgSrc" 
+                :preview-src-list="[resultImgSrc]">
+                <div slot="error" class="image-slot">
+                  <i style="font-size: 0;" class="el-icon-picture-outline"></i>
+                </div>
+              </el-image>
+              
+            </div>
           </div>
         </el-col>
       </el-row>
       
+      <div style="margin: 39px 0 21px 0;">
+        <span>{{$t('example')}}：</span>
+      </div>
       
       <div class="table-container">
         <div>
-          <el-table border  style="width:100%">
-            <el-table-column  :label="$t('user.invitedFriends')"  header-align="center">
+          <el-table border  :data="tableData1" style="width:100%">
+            <el-table-column :label="$t('originPicture')" align="center">
               <template slot-scope="scope">
-                <div style="display:flex;align-items:center;padding-left:20px;">
-                  <img :src="scope.row.avatarSrc" alt="" style="height:45px;width:45px;margin-right:10px;" />
-                </div>
+                <img :src="scope.row.imgSrc1" alt="">
+                <span style="margin-left: 10px">{{ scope.row.imgSrc1}}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="statusStr" :label="$t('status')" align="center" header-align="center">
+            <el-table-column :label="$t('desensitizationPicture')" align="center">
               <template slot-scope="scope">
-                <span :style="{ color: scope.row.statusColor }">{{ scope.row.statusStr }}</span>
+                <img :src="scope.row.imgSrc2" alt="">
+                <span style="margin-left: 10px">{{ scope.row.imgSrc1}}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="regTime" :label="$t('user.registrationTime')" align="center" header-align="center">
+            <el-table-column prop="mode" :label="$t('desensitizationObject')" align="center" header-align="center">
             </el-table-column>
 
           </el-table>
@@ -84,45 +97,25 @@
   </template>
   
   <script>
-  import Clipboard from 'clipboard';
-  import QRCode from 'qrcodejs2';
-  import { formatDate } from 'element-ui/lib/utils/date-util';
-  import { imageTranform } from '~/apis/modules/tuomin';
   import axios from 'axios';
   
   export default {
     data() {
       return {
-        bannerImg: '',
-        bannerTitle: '',
-        pageLink: '',
-        pageLinkDesc: '',
-        invitationLink: window.origin + '/user/sign_up?sharedUser=',
-        invitationCode: '',
-        pageOpeniDesc: '',
-  
-        loading: false,
-        tableData: [],
-        pageInfo: {
-          curpage: 1,
-          pageSize: 10,
-          pageSizes: [10],
-          total: 0,
-        },
-
-        dialogImageUrl: '',
-        dialogVisible: false,
-        disabled: false,
-        form:{},
-
         ImageUrl:'',
         radio:2,
-        file:''
+        file:'',
+        resultImgSrc:'',
+        tranformImageLoading:false,
+        tableData1:[{
+          imgSrc1:'/img/jian.svg',
+          imgSrc2:'/img/jian.svg',
+          mode:'仅车牌'
+        }]
       };
     },
     components: {},
     methods: {
-      
       handleLicensePreview(file) {
         console.log(file)
         this.ImageUrl = URL.createObjectURL(file.raw);
@@ -136,6 +129,7 @@
         let fd = new FormData();
         fd.append('file', this.file.raw);
         console.log(fd.get("file"))
+        this.tranformImageLoading = true
         axios({
           method:'POST',
           url: '/extension/tuomin/upload',
@@ -145,9 +139,12 @@
           data:fd
         }).then(res => {
           console.log(res)
-          
+          const objectURL = URL.createObjectURL(res.data);
+          this.resultImgSrc = objectURL;
+          this.tranformImageLoading = false
         }).catch(err => {
           console.log(err);
+          this.tranformImageLoading = false
           this.$message({
             type: 'error',
             message: this.$t('submittedFailed')
@@ -159,8 +156,6 @@
         console.log("----------")
       },
       
-      
-     
     },
     mounted() {
 
@@ -171,7 +166,6 @@
   </script>
   
   <style scoped lang="less">
-  
   .tuomin-title{
     margin-top: 34px;
     h2 {
@@ -235,105 +229,6 @@
     border-radius: 0;
     min-height: 230px;
   }
-  .title {
-    margin-top: 15px;
-    margin-bottom: 15px;
-  
-    .title-1 {
-      font-weight: 500;
-      font-size: 20px;
-      color: rgba(16, 16, 16, 1);
-      margin-bottom: 10px;
-    }
-  
-    .title-2 {
-      font-weight: 400;
-      font-size: 14px;
-      color: rgba(136, 136, 136, 1);
-    }
-  }
-  
-  .content-1 {
-    margin-bottom: 32px;
-  
-    .img-c {
-      height: 80px;
-      position: relative;
-  
-      .img {
-        width: 100%;
-        height: 100%;
-      }
-  
-      .txt {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        line-height: 80px;
-        padding-left: 25px;
-        font-weight: 500;
-        font-size: 24px;
-        color: rgb(255, 255, 255);
-      }
-    }
-  
-    .descr {
-      font-weight: 300;
-      font-size: 16px;
-      color: rgb(16, 16, 16);
-      padding: 25px;
-      border-left: 1px solid rgba(0, 0, 0, 0.1);
-      border-right: 1px solid rgba(0, 0, 0, 0.1);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      border-radius: 0px 0px 4px 4px;
-    }
-  }
-  
-  .content-2 {
-    display: flex;
-    background-color: rgb(228, 242, 255);
-    border-color: rgb(228, 242, 255);
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 5px;
-    padding: 25px;
-    margin-bottom: 32px;
-  
-    .txt-c {
-      flex: 1;
-      font-weight: 300;
-      font-size: 16px;
-      color: rgb(16, 16, 16);
-  
-      span {
-        line-height: 24px;
-      }
-  
-      div {
-        margin-bottom: 6px;
-      }
-  
-      .txt-3 {
-        margin-bottom: 15px;
-      }
-    }
-  
-    .__copy_link_btn__ {
-      font-size: 14px;
-      padding: 11px 15px;
-      background: rgb(21, 114, 255);
-      border-radius: 0;
-    }
-  
-    .qr-code {
-      width: 150px;
-      display: flex;
-      flex-direction: column;
-      align-items: end;
-    }
-  }
   
   .table-container {
     margin-bottom: 16px;
@@ -353,17 +248,16 @@
       }
     }
   
-    .op-btn {
-      cursor: pointer;
-      font-size: 12px;
-      color: rgb(25, 103, 252);
-      margin: 0 5px;
-    }
   }
-  
   .center {
     display: flex;
     justify-content: center;
   }
+
+  @media screen and (max-width:768px){
+      body{
+          background-color: black
+      }
+  }
   </style>
   
\ No newline at end of file