feat(knowledge): 优化文档分段功能

- 添加段落编辑和保存功能
- 新增关键词添加和删除功能
- 优化段落显示样式
- 添加分段标识符和重叠长度设置说明

src/api/generatedApi/index.js

@@ -420,3 +420,11 @@ export function uploadImage(data) {
     data
   })
 }
+
+export function segmentUpdate(data) {
+  return request({
+    url: getUrl(`/datasetDocumentEx/segment/update`),
+    method: 'post',
+    data
+  })
+}

src/assets/sass/renderUi.scss

@@ -231,3 +231,8 @@ body,
       0 0 5px $--color-primary-button-gradient;
   }
 }
+
+.resetHtml {
+  outline: none;
+  border: none;
+}

src/views/knowledge/detail/components/documentDetail/QAModel.vue

@@ -36,6 +36,7 @@
       :before-close="handleClose"
     >
       <div
+        style="height:calc(100% - 32px);overflow-x: hidden;overflow-y: auto"
         v-if="
           activeSegment !== null &&
             descriptions.data &&
@@ -46,11 +47,15 @@
           <div>
             <div>
               <p>QUESTION</p>
-              <p>{{ descriptions.data[activeSegment].content }}</p>
+              <p contenteditable class="resetHtml" ref="content">
+                {{ descriptions.data[activeSegment].content }}
+              </p>
             </div>
             <div>
               <p>ANSWER</p>
-              <p>{{ descriptions.data[activeSegment].answer }}</p>
+              <p contenteditable class="resetHtml" ref="answer">
+                {{ descriptions.data[activeSegment].answer }}
+              </p>
             </div>
           </div>
           <div
@@ -59,30 +64,48 @@
               descriptions.data[activeSegment].keywords &&
                 descriptions.data[activeSegment].keywords.length
             "
-            style="width: max-content"
+            style="flex-wrap: wrap"
           >
             <span>关键词 ：</span>
             <el-tag
               v-for="(item, index) in descriptions.data[activeSegment].keywords"
               :key="index"
               class="mr10"
-              size="mini"
-              type="primary"
+              size="medium"
+              type="info"
+              closable
+              @close="tagClose(item)"
             >
               {{ item }}
             </el-tag>
-          </div>
-        </div>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false" size="medium"
-          >关 闭</el-button
+            <el-input
+              class="input-new-tag"
+              v-if="createdTag"
+              v-model="inputValue"
+              ref="saveTagInput"
+              size="small"
+              @keyup.enter.native="handleInputConfirm"
+            />
+            <el-button
+              v-else
+              size="medium"
+              @click="showInput"
+              class="fs12"
+              style="padding: 7px;border-radius: 4px;font-size: 12px"
+              >添加标签</el-button
             >
-      </span>
+          </div>
+        </div>
+      </div>
+      <div class="dialog-footer text-right">
+        <el-button @click="saveUS" size="medium" type="primary">保存</el-button>
+      </div>
     </el-drawer>
   </div>
 </template>
 <script>
+import { segmentUpdate } from '@/api/generatedApi'
+
 export default {
   name: 'QAModel',
   props: {
@@ -90,15 +113,85 @@ export default {
     descriptions: {
       type: Object,
       default: () => ({ data: [] })
+    },
+    parentForm: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
     return {
+      createdTag: false,
+      inputValue: '',
       activeSegment: null,
       dialogVisible: false
     }
   },
   methods: {
+    saveUS() {
+      let params = {
+        keywords: this.descriptions.data[this.activeSegment].keywords,
+        content: this.$refs.content.innerHTML,
+        answer: this.$refs.answer.innerHTML
+      }
+      this.saveSegment(params, () => {
+        this.$message.success('保存成功')
+      })
+    },
+
+    showInput() {
+      this.createdTag = true
+    },
+    tagClose() {
+      this.descriptions.data[this.activeSegment].keywords.splice(
+        this.descriptions.data[this.activeSegment].keywords.indexOf(
+          this.inputValue
+        ),
+        1
+      )
+
+      let params = {
+        keywords: this.descriptions.data[this.activeSegment].keywords,
+        content: this.$refs.content.innerHTML,
+        answer: this.$refs.answer.innerHTML
+      }
+      this.saveSegment(params)
+    },
+
+    handleInputConfirm() {
+      let params = {
+        keywords: [
+          ...this.descriptions.data[this.activeSegment].keywords,
+          this.inputValue
+        ],
+        content: this.$refs.content.innerHTML,
+        answer: this.$refs.answer.innerHTML
+      }
+      this.saveSegment(params)
+    },
+
+    saveSegment(params, fun) {
+      params.documentId = this.parentForm.id
+      params.segmentId = this.descriptions.data[this.activeSegment].id
+      segmentUpdate(params).then(res => {
+        if (res) {
+          this.descriptions.data[this.activeSegment] = JSON.parse(
+            JSON.stringify(res.content.content)
+          )
+          // res.content.content.keywords
+          // this.descriptions.data[this.activeSegment].content =
+          //   res.content.content.content
+          // this.descriptions.data[this.activeSegment].answer =
+          //   res.content.content.answer
+          this.createdTag = false
+          this.inputValue = ''
+          if (fun) {
+            fun()
+          }
+        }
+      })
+    },
+
     handleSegmentClick(index) {
       this.activeSegment = index
       this.dialogVisible = true
@@ -164,4 +257,7 @@ export default {
   line-height: 35px;
   color: #666;
 }
+.input-new-tag {
+  width: 100px;
+}
 </style>

src/views/knowledge/detail/components/documentDetail/TextModel.vue

@@ -20,7 +20,7 @@
         <span> {{ 0 }} 次召回次数</span>
         <!--          </el-checkbox>-->
         <div>
-          <p class="context">{{ segment.content.slice(0, 20) + '.....' }}</p>
+          <p class="context">{{ segment.content }}</p>
           <div
             class="segment-keywords flex"
             v-if="segment.keywords && segment.keywords.length"
@@ -47,6 +47,7 @@
       :before-close="handleClose"
     >
       <div
+        style="height:calc(100% - 32px);overflow-x: hidden;overflow-y: auto"
         v-if="
           activeSegment !== null &&
             descriptions.data &&
@@ -54,7 +55,9 @@
         "
       >
         <div class="segment-content">
+          <p contenteditable class="resetHtml" ref="content">
             {{ descriptions.data[activeSegment].content }}
+          </p>
           <div
             class="flex align-items-c mt20"
             v-if="
@@ -68,23 +71,41 @@
               v-for="(item, index) in descriptions.data[activeSegment].keywords"
               :key="index"
               class="mr10 ellipsis"
-              size="mini"
-              type="primary"
+              size="medium"
+              closable
+              type="info"
+              @close="tagClose(item)"
             >
               {{ item }}
             </el-tag>
-          </div>
-        </div>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false" size="medium"
-          >关 闭</el-button
+            <el-input
+              class="input-new-tag"
+              v-if="createdTag"
+              v-model="inputValue"
+              ref="saveTagInput"
+              size="small"
+              @keyup.enter.native="handleInputConfirm"
+            />
+            <el-button
+              v-else
+              size="medium"
+              @click="showInput"
+              class="fs12"
+              style="padding: 7px;border-radius: 4px;font-size: 12px"
+              >添加标签</el-button
             >
-      </span>
+          </div>
+        </div>
+      </div>
+      <div class="text-right">
+        <el-button @click="saveUS" size="medium" type="primary">保存</el-button>
+      </div>
     </el-drawer>
   </div>
 </template>
 <script>
+import { segmentUpdate } from '@/api/generatedApi'
+
 export default {
   name: 'TextModel',
   props: {
@@ -92,16 +113,86 @@ export default {
     descriptions: {
       type: Object,
       default: () => ({ data: [] })
+    },
+    parentForm: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
     return {
+      createdTag: false,
+      inputValue: '',
       activeSegment: null,
       dialogVisible: false,
       selectedSegments: []
     }
   },
   methods: {
+    saveUS() {
+      let params = {
+        keywords: this.descriptions.data[this.activeSegment].keywords,
+        content: this.$refs.content.innerHTML,
+        answer: null
+      }
+      this.saveSegment(params, () => {
+        this.$message.success('保存成功')
+      })
+    },
+
+    showInput() {
+      this.createdTag = true
+    },
+    tagClose() {
+      this.descriptions.data[this.activeSegment].keywords.splice(
+        this.descriptions.data[this.activeSegment].keywords.indexOf(
+          this.inputValue
+        ),
+        1
+      )
+
+      let params = {
+        keywords: this.descriptions.data[this.activeSegment].keywords,
+        content: this.$refs.content.innerHTML,
+        answer: null
+      }
+      this.saveSegment(params)
+    },
+
+    handleInputConfirm() {
+      let params = {
+        keywords: [
+          ...this.descriptions.data[this.activeSegment].keywords,
+          this.inputValue
+        ],
+        content: this.$refs.content.innerHTML,
+        answer: null
+      }
+      this.saveSegment(params)
+    },
+
+    saveSegment(params, fun) {
+      params.documentId = this.parentForm.id
+      params.segmentId = this.descriptions.data[this.activeSegment].id
+      segmentUpdate(params).then(res => {
+        if (res) {
+          this.descriptions.data[this.activeSegment] = JSON.parse(
+            JSON.stringify(res.content.content)
+          )
+          // res.content.content.keywords
+          // this.descriptions.data[this.activeSegment].content =
+          //   res.content.content.content
+          // this.descriptions.data[this.activeSegment].answer =
+          //   res.content.content.answer
+          this.createdTag = false
+          this.inputValue = ''
+          if (fun) {
+            fun()
+          }
+        }
+      })
+    },
+
     handleSegmentClick(index) {
       this.activeSegment = index
       this.dialogVisible = true
@@ -117,6 +208,12 @@ export default {
   display: block;
 }
 .context {
+  width: auto;
+  overflow: hidden;
+  //省略号
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
   color: #3a3f4f;
   font-size: 14px;
 }
@@ -172,4 +269,7 @@ export default {
   line-height: 35px;
   color: #666;
 }
+.input-new-tag {
+  width: 100px;
+}
 </style>

src/views/knowledge/detail/reviewKnowledge.vue

@@ -29,7 +29,25 @@
             <div class="body-content">
               <el-form inline label-position="top" :model="form">
                 <el-form-item label="分段标识符" prop="separator">
-                  <el-input size="mini" v-model="form.separator"></el-input>
+                  <template slot="label">
+                    分段标识符
+                    <el-popover
+                      placement="top"
+                      width="400"
+                      trigger="hover"
+                      content="分隔符是用于分隔文本的字符。\n\n和 \n 是常用于分隔段落和行的分隔符。用逗号连接分隔符(n\n,\n)，当段落超过最大块长度时，会按行进行分割。你也可以使用自定义的特殊分隔符(例如 ***)。"
+                    >
+                      <el-icon
+                        class="el-icon-question"
+                        slot="reference"
+                      ></el-icon>
+                    </el-popover>
+                  </template>
+                  <el-input
+                    size="mini"
+                    v-model="form.separator"
+                    placeholder="\n\n用于分段；\n用于分行"
+                  ></el-input>
                 </el-form-item>
                 <el-form-item label="分段最大长度(tokens)" prop="maxTokens">
                   <el-input-number
@@ -43,6 +61,21 @@
                   ></el-input-number>
                 </el-form-item>
                 <el-form-item label="分段重叠长度(tokens)" prop="chunkOverlap">
+                  <template slot="label">
+                    分段重叠长度(tokens)
+
+                    <el-popover
+                      placement="top"
+                      width="400"
+                      trigger="hover"
+                      content="设置分段之间的重叠长度可以保留分段之间的语义关系，提升召回效果。建议设置为最大分段长度的1096-25%。"
+                    >
+                      <el-icon
+                        class="el-icon-question"
+                        slot="reference"
+                      ></el-icon>
+                    </el-popover>
+                  </template>
                   <el-input-number
                     style="width: 100%"
                     controls-position="right"
@@ -209,7 +242,7 @@ export default {
         mode: 'custom',
         removeExtraSpaces: true,
         removeUrlsEmails: false,
-        separator: '###',
+        separator: '\\n\\n',
         maxTokens: 1000,
         chunkOverlap: 50
       },
@@ -218,7 +251,7 @@ export default {
         mode: 'custom',
         removeExtraSpaces: true,
         removeUrlsEmails: false,
-        separator: '###',
+        separator: '\\n\\n',
         maxTokens: 1000,
         chunkOverlap: 50
       },
@@ -253,7 +286,6 @@ export default {
           api = extractSegmentEstimate
           break
       }
-      console.log(api)
       api({
         documentId,
         segmentConfig: {

src/views/track/views/knowledge-info/Index.vue

@@ -168,10 +168,12 @@ export default {
               <text-model
                 v-if="descriptions.doc_form === 'text_model'"
                 :descriptions="descriptions"
+                :parentForm="form"
               />
               <q-a-model
                 v-else-if="descriptions.doc_form === 'qa_model'"
                 :descriptions="descriptions"
+                :parentForm="form"
               />
             </div>
             <div v-else class="p20 flex align-items-c">