liudong
2024-08-07 e0219d2121732227922341fb3878e3a4d1b04d9d
src/views/dmx/knowledgeLib/config.vue
@@ -1,7 +1,7 @@
<template>
  <div class="main-container">
    <div style="position: absolute;top: 0;left: 0;width: 100%;padding: 0 20px">
      <h4 style="margin-bottom: 10px">配置</h4>
      <h4 style="margin-bottom: 10px"></h4>
      <div style="color: #666666;">在这里更新您的知识库详细信息,尤其是解析方法。</div>
      <a-divider style="margin-top: 20px" />
    </div>
@@ -60,7 +60,7 @@
            </a-space>
          </a-form-item>
          <a-form-item field="section" label="描述">
            <a-textarea placeholder="" allow-clear />
            <a-textarea placeholder=""  v-model="form.description" allow-clear />
          </a-form-item>
<!--          <a-form-item field="section" label="语言" :rules="[{match:/section one/,message:'请选择'}]">-->
<!--            <a-select v-model="form.section" placeholder="请选择" allow-clear>-->
@@ -68,9 +68,9 @@
<!--              <a-option value="1">英文</a-option>-->
<!--            </a-select>-->
<!--          </a-form-item>-->
          <a-form-item field="section" label="嵌入模型" :rules="[{match:/section one/,message:'请选择'}]">
          <a-form-item field="embd_id" label="嵌入模型">
            <a-space direction="vertical" size="large">
              <a-select :size="'large'" v-model="form.embd_id" :style="{width:'100%'}" placeholder="请选择 ..." disabled allow-clear>
              <a-select :size="'large'" v-model="form.embd_id" :style="{width:'100%'}" placeholder="请选择 ..." :disabled="kbObj.chunk_num==0 && kbObj.token_num==0" allow-clear>
                <a-optgroup  :label="index" v-for="(item,index) in modelList" :key=index>
                  <a-option
                    v-for="(obj) in item"
@@ -83,22 +83,22 @@
              </a-select>
            </a-space>
          </a-form-item>
          <a-form-item field="section" label="解析方法" :rules="[{match:/section one/,message:'请选择'}]">
            <a-select v-model="form.parser_id" placeholder="请选择" disabled allow-clear>
          <a-form-item field="parser_id" label="解析方法">
            <a-select v-model="form.parser_id" placeholder="请选择" :disabled="kbObj.chunk_num==0 && kbObj.token_num==0" allow-clear>
              <a-option v-for="item in parser_ids" :key="item.value" :label="item.name" :value="item.value"></a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="slider" label="块Token数">
            <a-slider v-model="form.chunk_token_num" :max="1000"  show-input />
            <a-slider v-model="form.chunk_token_num" :min="0" :max="2048"  show-input />
          </a-form-item>
          <a-form-item  label="布局识别" >
            <a-space direction="vertical" size="large">
              <a-switch v-model="form.layout_recognize"  />
            <a-space direction="vertical">
              <a-switch v-model="form.layout_recognize" size="small" />
            </a-space>
          </a-form-item>
          <a-form-item field="raptor" label="使用召回增强RAPTOR策略">
            <a-space direction="vertical" size="large">
              <a-switch v-model="form.use_raptor" />
            <a-space direction="vertical" >
              <a-switch v-model="form.use_raptor" size="small" />
            </a-space>
          </a-form-item>
          <div v-if="form.use_raptor">
@@ -107,19 +107,16 @@
                v-model="form.prompt"
                style="height: 10rem;border: 1px solid  var(--color-fill-3);border-radius: 4px" placeholder="请填写提示词"  />
            </a-form-item>
            <a-form-item field="slider" label="最大token数"
                         :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
              <a-slider v-model="form.max_token" :min="1" :max="1000" show-input/>
            <a-form-item field="slider" label="最大token数">
              <a-slider v-model="form.max_token" :min="0" :max="2048" show-input/>
            </a-form-item>
            <a-form-item field="slider" label="阈值" :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
              <a-slider v-model="form.threshold"  show-tooltip show-input/>
            <a-form-item field="slider" label="阈值" >
              <a-slider v-model="form.threshold"  :step="0.01" :min="0" :max="1"  show-input/>
            </a-form-item>
            <a-form-item field="slider" label="最大聚类数"
                         :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
              <a-slider v-model="form.max_cluster" :max="1000" show-input/>
            <a-form-item field="slider" label="最大聚类数">
              <a-slider v-model="form.max_cluster" :min="1" :max="1024" show-input/>
            </a-form-item>
            <a-form-item field="slider" label="随机种子" v-model="form.random_seed"
                         :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
            <a-form-item field="slider" label="随机种子" v-model="form.random_seed">
              <a-input-number v-model="form.random_seed" :style="{width:'300px',marginRight:'1rem',borderRadius:'4px'}"
                              placeholder="请输入" class="input-demo" :min="10" :max="100" />
              <a-button type="primary" @click="randomNumber">
@@ -133,8 +130,8 @@
          <a-form-item>
            <div style="width: 100%;text-align: right">
              <a-space>
                <a-button @click="cancelConfig">取消</a-button>
                <a-button type="primary" html-type="submit">保存</a-button>
                <!--               <a-button @click="$refs.formRef.resetFields()">Reset</a-button>-->
              </a-space>
            </div>
          </a-form-item>
@@ -195,14 +192,14 @@
import { onMounted, onBeforeMount, reactive, ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { queryModelList,kbUpdate } from "@/api/kbList";
import message from "@arco-design/web-vue/es/message";
import useLoading from "@/hooks/loading";
const { loading,setLoading } = useLoading(true);
const props =  defineProps(['kbtenantInfo'])
// const emit =  defineEmits(['upTabdateItem'])
const kbtenantInfo = props.kbtenantInfo;
let parser_ids = kbtenantInfo.parser_ids.split(",").map((item) => {
const emit =  defineEmits(['cancleConfig','saveConfig'])
// 解析方法列表
let parser_ids = props.kbtenantInfo.parser_ids.split(",").map((item) => {
  const [value1, value2] = item.split(":");
  return {
    name: value2,
@@ -219,7 +216,7 @@
  threshold: 0.32,
  max_cluster: 233,
  random_seed: 1500,
  chunk_token_num: 128,
  chunk_token_num: 384,
  use_raptor: false,
  pages: {},
  prompt: "请总结以下段落。 小心数字,不要编造。 段落如下:\n" +
@@ -240,11 +237,26 @@
      message:'知识库名称不允许为空',
    },
  ],
  embd_id: [
    {
      required: true,
      message:'请选择',
    },
  ],
  parser_id: [
    {
      required: true,
      message:'请选择',
    },
  ],
  prompt: [
    {
      required: true,
      message:'提示词不允许为空',
    },
  ],
}
let visible = ref(false);
let loading = ref(false);
const formRef = ref(null);
const modelList = ref({});
const file = ref();
@@ -276,7 +288,6 @@
  if (errors){
    return;
  }
  console.log(form);
  let parms = {
      name: form.name,
      avatar: form.avatar,
@@ -291,7 +302,7 @@
      },
      kb_id: kbObj.id,
   }
   if(form.layout_recognize){
   if(form.use_raptor){
     parms.parser_config.raptor = {
       use_raptor: form.use_raptor,
       prompt: form.prompt,
@@ -301,24 +312,29 @@
       random_seed: form.random_seed,
     };
   }
   try {
    const data = await kbUpdate(parms);
    if(data.code == '0'){
      Message.success("配置成功");
      window.location.reload();
      // window.location.reload();
      emit('saveConfig')
    }
    // visible.value = false;
    // emit('upTabdateItem')
  } catch (err) {
    // you can report use errorHandler or other
    Message.error(err.message);
  }
};
const cancelConfig = () => {
    emit('cancleConfig')
}
function randomNumber() {
  // 生成一个介于min和max之间的随机整数(包含min和max)
@@ -327,14 +343,6 @@
  form.random_seed = Math.floor(Math.random() * (max - min + 1)) + min;
}
const onChangeRAPTOR = () => {
  console.log(form);
};
const handleClick = () => {
  visible.value = true;
};
const handleBeforeOk = (done) => {
  formRef.value.validate().then(res => {
    console.log("form:", form);
@@ -346,10 +354,6 @@
    }
  });
};
const handleCancel = () => {
  visible.value = false;
};
const handleOpened =(el) => {
  Object.assign(form,{
@@ -370,6 +374,7 @@
};
const changekbObj = (value) => {
  formRef.value.resetFields();
  kbObj = value;
  console.log(kbObj, 'kbObj');
  // if(kbObj.avatar){
@@ -378,14 +383,13 @@
  let configObj = {
    name: kbObj.name,
    avatar: kbObj.avatar,
    chunk_token_num: kbObj.parser_config ? kbObj.parser_config.chunk_token_num : 128,
    pages:  kbObj.pages,
    pages:  kbObj.parser_config.pages,
    description: kbObj.description,
    language: "English",
    permission: kbObj.permission,
    embd_id: "BAAI/bge-large-zh-v1.5",
    embd_id: props.kbtenantInfo.embd_id || kbObj.embd_id,
    parser_id: kbObj.parser_id,
    layout_recognize: kbObj.parser_config ? kbObj.parser_config.layout_recognize:false,
    layout_recognize: true,
  }
  let raptor = {}
  if(kbObj.parser_config && kbObj.parser_config.raptor){
@@ -393,11 +397,12 @@
    Object.assign(form,{
      ...configObj,
      ...raptor,
      use_raptor: kbObj.parser_config.raptor.use_raptor,
    });
  }else{
    Object.assign(form,configObj);
  }
  console.log(form,'配置页面表单信息');
}
defineExpose({
@@ -432,7 +437,7 @@
  height: 100%;
  overflow: auto;
  //background: #626aea;
  background: #ffffff;
  background: var(--color-bg-2);
  padding-top: 80px;
  &-lf {
@@ -440,7 +445,7 @@
    //height: 100%;
    //border: 1px solid #cccccc;
    border-radius: 10px;
    //border: 1px solid var(--color-fill-3);
    &-top {
      width: 100%;
      height: 60px;
@@ -493,10 +498,10 @@
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
    section {
      width: 100%;
      color: #333333;
      //color: #333333;
      color: var(--color-text-1);
    }
  }
}