优化知识库页面兼容性

liudong

2024-08-09 1434fe28eb8e43bb8232a1e472404b4354163859

 src/views/dmx/knowledgeLib/config.vue

@@ -14,49 +14,14 @@
          </a-form-item>
          <a-form-item field="section" label="知识库图片">
            <a-space direction="vertical" :style="{ width: '100%' }">
              <a-upload
                :auto-upload="false"
                :fileList="file ? [file] : []"
                :show-file-list="false"
                @change="onChange"
                @progress="onProgress"
              >
                <template #upload-button>
                  <div
                    :class="`arco-upload-list-item${
                      file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
                    }`"
                  >
                    <div
                      class="arco-upload-list-picture custom-upload-avatar"
                      v-if="file && file.url"
                    >
                      <img :src="file.url" />
                      <div class="arco-upload-list-picture-mask">
                        <IconEdit />
                      </div>
                      <a-progress
                        v-if="file.status === 'uploading' && file.percent < 100"
                        :percent="file.percent"
                        type="circle"
                        size="mini"
                        :style="{
                          position: 'absolute',
                          left: '50%',
                          top: '50%',
                          transform: 'translateX(-50%) translateY(-50%)',
                        }"
                      />
                    </div>
                    <div class="arco-upload-picture-card" v-else>
                      <div class="arco-upload-picture-card-text">
                        <IconPlus />
                        <div style="margin-top: 10px; font-weight: 600">上传</div>
                      </div>
                    </div>
                  </div>
                </template>
              </a-upload>
              <Upload
                v-if="avatarShow"
                :action="uploadAction"
                :limit="1"
                :url="form.avatar"
                @update:fileList="updateFileList"
                @success="handleSuccess"
              ></Upload>
            </a-space>
          </a-form-item>
          <a-form-item field="section" label="描述">
@@ -68,9 +33,9 @@
<!--              <a-option value="1">英文</a-option>-->
<!--            </a-select>-->
<!--          </a-form-item>-->
          <a-form-item field="section" label="嵌入模型">
          <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="kbObj.chunk_num>0 || kbObj.token_num>0" 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"
@@ -84,7 +49,7 @@
            </a-space>
          </a-form-item>
          <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-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>
@@ -92,13 +57,13 @@
            <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">
@@ -130,8 +95,8 @@
          <a-form-item>
            <div style="width: 100%;text-align: right">
              <a-space>
                <a-button type="primary" html-type="submit">保存</a-button>
                <!--               <a-button @click="$refs.formRef.resetFields()">Reset</a-button>-->
                <a-button @click="cancelConfig">取消</a-button>
                <a-button :loading="loading" type="primary" html-type="submit">保存</a-button>
              </a-space>
            </div>
          </a-form-item>
@@ -193,10 +158,11 @@
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 emit =  defineEmits(['cancleConfig','saveConfig'])
// 解析方法列表
let parser_ids = props.kbtenantInfo.parser_ids.split(",").map((item) => {
  const [value1, value2] = item.split(":");
@@ -207,15 +173,16 @@
});

let kbObj = reactive({});
let avatarShow = ref(true);

const form = reactive({
  name: kbObj.name,
  avatar: '',//
  name: '',
  avatar: '',//头像
  max_token: 600,
  threshold: 0.32,
  max_cluster: 233,
  random_seed: 1500,
  chunk_token_num: 128,
  chunk_token_num: 384,
  use_raptor: false,
  pages: {},
  prompt: "请总结以下段落。 小心数字，不要编造。 段落如下：\n" +
@@ -225,7 +192,7 @@
  language: "English",
  permission: "",
  embd_id: "BAAI/bge-large-zh-v1.5",
  parser_id: kbObj.parser_id,
  parser_id: '',
  layout_recognize: true
});

@@ -236,35 +203,42 @@
      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();

const onChange = (_, currentFile) => {
  file.value = currentFile;
  convertImageToBase64(file.value.file).then((result)=>{
    form.avatar = result;
  })
const uploadAction = '/api/v1/llm/upload'; // 替换为你的上传API
const fileList = ref([]);
const imageUrls = ref([]);

const updateFileList = (newFileList) => {
  fileList.value = newFileList;
  console.log(newFileList, 88);
};

function convertImageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = function() {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

const onProgress = (currentFile) => {
  file.value = currentFile;
const handleSuccess = (urls) => {
  imageUrls.value = urls; // 拿到上传的图片地址
  form.avatar = urls[0];
};


@@ -297,21 +271,29 @@
     };
   }
   try {
    
     setLoading(true)
    const data = await kbUpdate(parms);
    if(data.code == '0'){
      Message.success("配置成功");
      // window.location.reload();
      emit('saveConfig')

    }
    // emit('upTabdateItem')
    setLoading(false)

  } catch (err) {
    Message.error(err.message);
     setLoading(false)
  }



};

const cancelConfig = () => {
    emit('cancleConfig')
}


function randomNumber() {
  // 生成一个介于min和max之间的随机整数（包含min和max）
@@ -354,14 +336,11 @@
  formRef.value.resetFields();
  kbObj = value;
  console.log(kbObj, 'kbObj');
  // if(kbObj.avatar){
  //   file.value.url = kbObj.avatar
  // }
  let configObj = {
    name: kbObj.name,
    avatar: kbObj.avatar,
    chunk_token_num: kbObj.parser_config.chunk_token_num,
    pages:  kbObj.parser_config.pages,
    chunk_token_num:  kbObj.parser_config.chunk_token_num,
    description: kbObj.description,
    language: "English",
    permission: kbObj.permission,
@@ -378,9 +357,17 @@
      use_raptor: kbObj.parser_config.raptor.use_raptor,
    });
  }else{
    Object.assign(form,configObj);
    Object.assign(form,{
      ...configObj,
      use_raptor: false,
    });
  }
  imageUrls.value = [kbObj.avatar];
  console.log(form,'配置页面表单信息');
  avatarShow.value = false;
  setTimeout(() => {
    avatarShow.value = true;
  },100);
}

defineExpose({
@@ -389,6 +376,7 @@


onBeforeMount(()=>{
  setLoading(false)
  queryModel({})
})
onMounted(()=>{
@@ -414,7 +402,7 @@
  justify-content: space-between;
  height: 100%;
  overflow: auto;
  //background: #626aea;
  border-radius: 8px;
  background: var(--color-bg-2);
  padding-top: 80px;