feat: 支持图像分类

README.md

@@ -11,8 +11,9 @@ Datawhale自研数据标注工具
   - [X] 关系标注
 - CV：
   - [X] 关键点
+  - [X] 图像分类
   - [ ] 目标检测
-  - [ ] 语义分割
+  - [ ] 图像分割
 
 ## 快速开始
 

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>

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 = []

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>