From 3e41a34d8a00ce68a95f05134353de3748c02659 Mon Sep 17 00:00:00 2001
From: maxmon <541182180@qq.com>
Date: Tue, 26 Sep 2023 22:53:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=9B=BE=E5=83=8F?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                        |  3 +-
 fe/src/components/CV/cls.vue     | 84 ++++++++++++++++++++++++++++++++
 fe/src/components/NER/index.vue  | 13 +++--
 fe/src/components/home/index.vue |  1 +
 4 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 fe/src/components/CV/cls.vue

diff --git a/README.md b/README.md
index 7d5b64e..45e77c3 100644
--- a/README.md
+++ b/README.md
@@ -11,8 +11,9 @@ Datawhale自研数据标注工具
   - [X] 关系标注
 - CV：
   - [X] 关键点
+  - [X] 图像分类
   - [ ] 目标检测
-  - [ ] 语义分割
+  - [ ] 图像分割
 
 ## 快速开始
 
diff --git a/fe/src/components/CV/cls.vue b/fe/src/components/CV/cls.vue
new file mode 100644
index 0000000..c3cce4c
--- /dev/null
+++ b/fe/src/components/CV/cls.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="anno-img-box">
+    <div class="cls-box">
+      <img class="anno-img" id="anno-img" :src="`data:image/jpeg;base64,${fileContent}`">
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default ({
+  name: 'CVPoint',
+  props: {
+    fileContent: {
+      type: String,
+      default: '',
+      required: true
+    },
+    annoDetails: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    nowType: {
+      type: String,
+      default: '1234',
+      required: true
+    },
+    types: {
+      type: Object,
+      default: () => {},
+      required: true
+    },
+    save: {
+      type: Function,
+      required: true
+    }
+  },
+  data () {
+    return {
+      points: [],
+      width: 0,
+      height: 0
+    }
+  },
+  methods: {
+    log (...args) {
+      console.log(args)
+    }
+  },
+  watch: {
+    annoDetails: {
+      handler (val) {
+        // const annoImg = document.getElementById('anno-img')
+        // annoImg.src = val
+        // console.log(annoImg.width)
+        // this.width = annoImg.width
+        // this.height = annoImg.height
+        console.log(val)
+      },
+      deep: true
+    }
+  }
+})
+</script>
+
+<style>
+.anno-img-box {
+  position: relative;
+  display: flex;
+  height: 100%;
+  align-content: center;
+  justify-content: center;
+}
+.anno-img {
+  width: 100%;
+  user-select: none;
+}
+.cls-box {
+  max-width: 100%;
+  position: absolute;
+  font-size: 0;
+}
+</style>
diff --git a/fe/src/components/NER/index.vue b/fe/src/components/NER/index.vue
index fb3a53b..33311d9 100644
--- a/fe/src/components/NER/index.vue
+++ b/fe/src/components/NER/index.vue
@@ -110,6 +110,7 @@
             </template>
           </div>
           <CVPoint v-if="projectType === '图片点标注'" :fileContent="nowText" :annoDetails="ners" :nowType="nowType" :types="types" :save="save"></CVPoint>
+          <CVCls v-if="projectType === '图像分类'" :fileContent="nowText" :annoDetails="ners" :nowType="nowType" :types="types" :save="save"></CVCls>
           <RLHF v-if="projectType === '人类反馈强化学习'" :fileContent="nowText" :annoDetails="ners" :nowType="nowType" :types="types" :save="save"></RLHF>
           <Rel v-if="projectType === '关系标注'" :relDetails="relDetails" :nowType="nowType" :types="types" :save="save"></Rel>
         </div>
@@ -137,6 +138,7 @@
 <script>
 import { getColor } from '../../js/color.js'
 import CVPoint from '@/components/CV/point.vue'
+import CVCls from '@/components/CV/cls.vue'
 import RLHF from '@/components/NLP/rlhf.vue'
 import Rel from '@/components/NLP/rel.vue'
 
@@ -195,6 +197,7 @@ export default {
   name: 'NER',
   components: {
     CVPoint,
+    CVCls,
     RLHF,
     Rel
   },
@@ -437,7 +440,7 @@ export default {
       }
       if (this.nerProjectType.indexOf(this.projectType) > -1) {
         this.$set(this, 'nowType', type)
-      } else if (this.projectType === '文本分类') {
+      } else if (['文本分类', '图像分类'].indexOf(this.projectType) > -1) {
         let typeIdx = -1
         this.ners.some((ner, idx) => {
           if (ner.type === type) {
@@ -734,7 +737,7 @@ export default {
     isTypeSelected (type) {
       if (this.nerProjectType.indexOf(this.projectType) > -1) {
         return this.nowType === type
-      } else if (this.projectType === '文本分类') {
+      } else if (['文本分类', '图像分类'].indexOf(this.projectType) > -1) {
         return this.ners.some((ner) => {
           return ner.type === type
         })
@@ -762,10 +765,12 @@ export default {
       // 去掉前缀
       const base64Data = base64.replace(/^data:image\/\w+;base64,/, '')
       // 请求接口
-      const url = 'http://127.0.0.1:5000/detect'
+      // const url = 'http://127.0.0.1:5000/detect'
+      const url = 'http://127.0.0.1:5000/cv_cls'
       post(url, {
         projectName: that.projectName,
-        'image': base64Data
+        'image': base64Data,
+        'types': ['小狗', '小猫']
       }, (info) => {
         // 添加标注
         const _ners = []
diff --git a/fe/src/components/home/index.vue b/fe/src/components/home/index.vue
index 95c522e..d683a4b 100644
--- a/fe/src/components/home/index.vue
+++ b/fe/src/components/home/index.vue
@@ -28,6 +28,7 @@
             <option value ="命名实体识别">命名实体识别</option>
             <option value ="文本分类">文本分类</option>
             <option value ="图片点标注">图片点标注</option>
+            <option value ="图像分类">图像分类</option>
             <option value ="人类反馈强化学习">人类反馈强化学习</option>
             <option value ="关系标注">关系标注</option>
           </select>