From 9cf736ba33ff9a11aa2cb36f2d7c419d55cbdc2a Mon Sep 17 00:00:00 2001
From: maxmon <541182180@qq.com>
Date: Thu, 13 Apr 2023 01:51:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0rlhf=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=E7=9A=84=E5=9F=BA=E7=A1=80=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/src/components/NER/index.vue  |  16 +++-
 fe/src/components/NLP/rlhf.vue   | 123 +++++++++++++++++++++++++++++++
 fe/src/components/home/index.vue |   1 +
 3 files changed, 137 insertions(+), 3 deletions(-)
 create mode 100644 fe/src/components/NLP/rlhf.vue

diff --git a/fe/src/components/NER/index.vue b/fe/src/components/NER/index.vue
index f1f8814..c13712c 100644
--- a/fe/src/components/NER/index.vue
+++ b/fe/src/components/NER/index.vue
@@ -109,6 +109,7 @@
             </template>
           </div>
           <CVPoint v-if="projectType === '图片点标注'" :fileContent="nowText" :annoDetails="ners" :nowType="nowType" :types="types" :save="save"></CVPoint>
+          <RLHF v-if="projectType === '人类反馈强化学习'" :fileContent="nowText" :annoDetails="ners" :nowType="nowType" :types="types" :save="save"></RLHF>
         </div>
         <div class="page-btn-box">
           <button class="page-btn" @click="changeIdx(-1, $event)" @mouseover="setFocus('page-up')" @mouseleave="setFocus('')">上一个 {{ fastTypeKey['page-up'] ? `【${fastTypeKey['page-up']}】` : '' }}</button>
@@ -135,6 +136,7 @@
 import { getColor } from '../../js/color.js'
 import { saveAsFile } from '../../js/utils.js'
 import CVPoint from '@/components/CV/point.vue'
+import RLHF from '@/components/NLP/rlhf.vue'
 
 // 是否是单机版
 const isLocal = false
@@ -190,7 +192,8 @@ function updateType2Server (projectName, typeList, types) {
 export default {
   name: 'NER',
   components: {
-    CVPoint
+    CVPoint,
+    RLHF
   },
   data () {
     return {
@@ -433,6 +436,13 @@ export default {
         }
         this.$set(this, 'nowType', type)
         this.save()
+      } else if (this.projectType === '人类反馈强化学习') {
+        console.log(this.nowText === type, type)
+        this.$set(this, 'nowType', type)
+        clearInterval(window.rlhf_inter)
+        window.rlhf_inter = setInterval(() => {
+          this.$set(this, 'nowType', '')
+        }, 200)
       } else {
         console.log(type)
         this.$set(this, 'nowType', type)
@@ -740,8 +750,8 @@ export default {
         return entityType.type
       })
       that.types = types
-      // 除了分类，默认选择第一个标签，防止弹出请选择标签的提示
-      if (that.typeList && that.typeList[0] && projectType.indexOf('分类') === -1) that.nowType = that.typeList[0]
+      // 除了分类、强化学习，默认选择第一个标签，防止弹出请选择标签的提示
+      if (that.typeList && that.typeList[0] && projectType.indexOf('分类') === -1 && projectType.indexOf('强化学习') === -1) that.nowType = that.typeList[0]
       that.getFiles()
     }
     function calcColumnWordCount () {
diff --git a/fe/src/components/NLP/rlhf.vue b/fe/src/components/NLP/rlhf.vue
new file mode 100644
index 0000000..99dd764
--- /dev/null
+++ b/fe/src/components/NLP/rlhf.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="rlhf-box">
+    <div v-for="(line, idx) in fileContent.split('\n')" :key="idx" class="line" @click="clickLine(idx)">
+      <template v-for="(word, idx) in line">
+        <span class="word" v-if="word !== '\n'" :key="idx">{{ word }}</span>
+        <br v-if="word === '\n'" :key="idx"/>
+      </template>
+      <span class="rank" v-if="annoDetails.indexOf(String(idx+1)) !== -1">{{annoDetails.indexOf(String(idx+1)) + 1}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default ({
+  name: 'RLHF',
+  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)
+    },
+    clickLine (idx) {
+      let rank = String(idx + 1)
+      if (this.annoDetails.indexOf(rank) === -1) {
+        this.annoDetails.push(rank)
+      } else {
+        this.annoDetails.splice(this.annoDetails.indexOf(rank), 1)
+      }
+      this.save()
+    }
+  },
+  watch: {
+    annoDetails: {
+      handler (val) {
+        console.log(val)
+      },
+      deep: true
+    },
+    nowType: {
+      handler (val) {
+        if (!val) {
+          return
+        }
+        if (this.annoDetails.indexOf(val) === -1) {
+          this.annoDetails.push(val)
+        } else {
+          this.annoDetails.splice(this.annoDetails.indexOf(val), 1)
+        }
+        this.save()
+      }
+    }
+  }
+})
+</script>
+
+<style scoped>
+.rlhf-box {
+  display: flex;
+  flex-direction: column;
+}
+.line {
+  position: relative;
+  border-bottom: 1px solid;
+  height: 36px;
+}
+.line:hover {
+  background-color: #eee;
+}
+.line>.rank {
+  position: absolute;
+  right: 4px;
+  top: 0;
+  bottom: 0;
+  font-size: 36px;
+  line-height: 36px;
+  margin: auto;
+}
+.word {
+  display: inline-block;
+  position: relative;
+  padding-bottom: 15px;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  vertical-align: bottom;
+  box-sizing: content-box;
+  text-align: center;
+  font-size: 16px;
+  z-index: 4;
+}
+</style>
diff --git a/fe/src/components/home/index.vue b/fe/src/components/home/index.vue
index abacf46..9013f90 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>
           </select>
         </p>
         <div class="title">