bonus-ui/src/views/dataCenter/annotationTask/dialog/aiLabelDialog.vue

<template>
  <el-dialog
    title="启用智能标注"
    :visible.sync="isOpen" width="500px" append-to-body @close="cancel" :close-on-click-modal="false"
  >
    <el-form ref="form" label-position="top" :rules="rules" :model="form" label-width="140px">
      <el-form-item label="智能标注类型" prop="learningType">
        <el-radio-group v-model="form.learningType">
          <el-radio label="active">主动学习</el-radio>
          <el-radio label="pre">预学习</el-radio>
        </el-radio-group>
        <p class="description" v-if="form.learningType === 'active'">
          {{ form.learningType === 'active' ? '系统将自动使用半监督学习，通过深度学习等多种手段进行智能标注，使用人工标注进行优化' : ''}}。
        </p>
      </el-form-item>

      <el-form-item label="算法类型" prop="algorithmType">
        <el-radio-group v-model="form.algorithmType">
          <el-radio label="fast">快速型</el-radio>
          <el-radio label="precise">精准型</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="智能标注服务节点" prop="serviceId">
        <el-select v-model="form.serviceId" placeholder="请选择智能标注服务节点" clearable style="width: 100%">
          <el-option v-for="dict in this.serviceList" :key="dict.serviceId" :label="dict.serviceName"
                     :value="dict.serviceId"
          />
        </el-select>
      </el-form-item>

      <el-alert
        v-if="showWarning"
        type="warning"
        :closable="false"
        show-icon
      >
        启动自动标注时，需数据中存在至少2个种标签，且每种标签的图片不少于5张。
      </el-alert>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { list, listWithNoPage } from '../../../../api/dataCenter/ailabelservice'
import { autoAnnotate } from '../../../../api/dataCenter/ailabelservice'

export default {
  props: {
    open: {
      type: Boolean,
      default: false,
      required: true
    },
    getList: {
      type: Function,
      required: true
    },
    taskId: {
      type: Number,
      default: 0,
      required: true
    }
  },
  computed: {
    isOpen: {
      get() {
        return this.open
      },
      set(value) {
        this.$emit('dialog-cancel') // 通知父组件
      }
    }
  },
  name: 'AILabelDialog',
  data() {
    return {
      visible: false,
      loading: false,
      form: {
        learningType: 'pre',
        algorithmType: 'fast'
      },
      rules: {
        learningType: [{ required: true, message: '请选择智能标注类型', trigger: 'blur' }],
        algorithmType: [{ required: true, message: '请选择算法类型', trigger: 'blur' }],
        serviceId: [{ required: true, message: '请选择智能标注服务节点', trigger: 'blur' }]
      },
      serviceList: [],
      showWarning: true,
      currentRow: null
    }
  },

  watch: {
    isOpen(newVal) {
      if (newVal) {
        this.getServiceList()
      }
    }
  },
  methods: {
    getServiceList() {
      listWithNoPage().then(response => {
        console.log('response' + response.data)
        this.serviceList = response.data
        if (this.serviceList.length > 0) {
          this.form.serviceId = this.serviceList[0].serviceId
        }
      })
    },
    async handleSubmit() {
      try {
        this.loading = true
        const data = { taskId: this.taskId, intelligentAnnotationServiceId: this.form.serviceId }
        await autoAnnotate(data).then(response => {
          console.log('response' + response.data)
          this.serviceList = response.data
          this.$message.success('智能标注成功')
        })
      } catch (error) {
        this.$message.error(error.message || '智能标注失败')
      } finally {
        this.cancel()
        this.getList()
        this.loading = false
      }
    },
    // 取消按钮
    cancel() {
      this.isOpen = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        learningType: 'pre',
        algorithmType: 'fast',
        serviceId: undefined
      } // 清空表单
      this.serviceList = []
    }
  }
}
</script>

<style scoped>
.smart-annotation-dialog {
  max-width: 600px;
}

.annotation-form {
  padding: 20px 0;
}

.form-section {
  margin-bottom: 20px;
}

.form-section h3 {
  font-size: 14px;
  margin-bottom: 10px;
  color: #333;
}

.description {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  line-height: 1.5;
}

.full-width {
  width: 100%;
}
</style>