派生自 web/flow_web
src/views/dmx/knowledgeLib/config.vue
@@ -1,7 +1,7 @@ <template> <div class="main-container"> <div ref="scrollContainer" 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> @@ -14,53 +14,18 @@ </a-form-item> <a-form-item field="section" label="知识库图片"> <a-space direction="vertical" :style="{ width: '100%' }"> <a-upload action="/" :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 ? httpUrl + form.avatar : ''" @update:fileList="updateFileList" @success="handleSuccess" ></Upload> </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,68 +33,56 @@ <!-- <a-option value="1">英文</a-option>--> <!-- </a-select>--> <!-- </a-form-item>--> <a-form-item field="section" label="嵌入模型" :rules="[{match:/section one/,message:'请选择'}]"> <a-select v-model="form.embd_id" placeholder="请选择" allow-clear> <a-option value="section one">Section One</a-option> <a-option value="section two">Section Two</a-option> <a-option value="section three">Section Three</a-option> <a-form-item field="embd_id" label="嵌入模型"> <a-select :size="'large'" v-model="form.embd_id" placeholder="请选择 ..." :disabled="kbObj.chunk_num==0 && kbObj.token_num==0"> <a-optgroup :label="index" v-for="(item,index) in modelList" :key=index> <a-option v-for="(obj) in item" :key='obj.fid' :value="obj.llm_name" > {{obj.llm_name}} </a-option> </a-optgroup> </a-select> </a-form-item> <a-form-item field="section" label="解析方法" :rules="[{match:/section one/,message:'请选择'}]"> <a-select v-model="form.parser_id" placeholder="请选择" allow-clear> <a-option value="section one">Section One</a-option> <a-option value="section two">Section Two</a-option> <a-option value="section three">Section Three</a-option> <a-form-item field="parser_id" label="解析方法"> <a-select v-model="form.parser_id" placeholder="请选择" :disabled="kbObj.chunk_num==0 && kbObj.token_num==0" > <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数" :rules="[{type:'number', min:5,message:'slider is min than 5'}]"> <a-slider v-model="form.chunk_token_num" :max="100" show-input /> <!-- <a-input-number v-model="form.score" :style="{width:'100px',marginLeft:'2rem',borderRadius:'4px'}"--> <!-- placeholder="Please Enter" class="input-demo" :min="10" :max="1000" />--> <a-form-item field="slider" label="块Token数"> <a-slider v-model="form.chunk_token_num" :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-space direction="vertical" size="large"> <a-switch v-model="form.score" checked-value="yes" unchecked-value="no" /> <a-form-item label="布局识别" > <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" @change="onChangeRAPTOR" /> </a-space> <a-switch v-model="form.use_raptor" size="small" /> </a-form-item> <div v-if="form.use_raptor"> <a-form-item field="prompt" label="提示词"> <a-textarea v-model="form.prompt" style="height: 10rem;border: 1px solid var(--color-fill-3);border-radius: 4px" placeholder="请填写提示词" /> 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" /> <a-input-number v-model="form.max_token" :style="{width:'100px',marginLeft:'2rem',borderRadius:'4px'}" placeholder="Please Enter" class="input-demo" :min="10" :max="1000" /> <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" :max="1" /> <a-input-number v-model="form.threshold" :style="{width:'100px',marginLeft:'2rem',borderRadius:'4px'}" placeholder="Please Enter" class="input-demo" :min="0" :max="1" /> <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" /> <a-input-number v-model="form.max_cluster" :style="{width:'100px',marginLeft:'2rem',borderRadius:'4px'}" placeholder="Please Enter" class="input-demo" :min="10" :max="1000" /> <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"> <icon-plus /> </a-button> </a-form-item> </div> @@ -138,8 +91,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> @@ -199,14 +152,15 @@ <script lang="ts" setup> import { onMounted, onBeforeMount, reactive, ref } from "vue"; import { Message } from "@arco-design/web-vue"; const props = defineProps(["kbtenantInfo", "kbobj", "kbdetail"]); // const emit = defineEmits(['upTabdateItem']) const kbtenantInfo = props.kbtenantInfo; let parser_ids = kbtenantInfo.parser_ids.split(",").map((item) => { 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 scrollContainer = ref(); const props = defineProps(['kbtenantInfo']) const emit = defineEmits(['cancleConfig','saveConfig']) // 解析方法列表 let parser_ids = props.kbtenantInfo.parser_ids.split(",").map((item) => { const [value1, value2] = item.split(":"); return { name: value2, @@ -214,14 +168,17 @@ }; }); let kbObj = reactive({}); let avatarShow = ref(true); const form = reactive({ name: '', avatar: '',// max_token: 698, 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" + @@ -230,8 +187,8 @@ description: "", language: "English", permission: "", embd_id: "", parser_id: "", embd_id: "BAAI/bge-large-zh-v1.5", parser_id: '', layout_recognize: true }); @@ -242,29 +199,98 @@ 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 // url: URL.createObjectURL(currentFile.file), }; const uploadAction = '/api/v1/llm/upload'; // 替换为你的上传API const fileList = ref([]); const imageUrls = ref([]); const httpUrl = localStorage.getItem('httpUrl'); const updateFileList = (newFileList) => { fileList.value = newFileList; console.log(newFileList, 88); }; const onProgress = (currentFile) => { file.value = currentFile; const handleSuccess = (urls) => { imageUrls.value = urls; // 拿到上传的图片地址 form.avatar = urls[0]; }; const handleSubmit = ({ values, errors }) => { console.log("values:", values, "\nerrors:", errors); const handleSubmit = async ({ values, errors }) => { if (errors){ return; } let parms = { name: form.name, avatar: form.avatar, description: form.description, language: form.language, permission: form.permission, embd_id: form.embd_id, parser_id: form.parser_id, parser_config: { chunk_token_num: form.chunk_token_num, layout_recognize: form.layout_recognize, }, kb_id: kbObj.id, } if(form.use_raptor){ parms.parser_config.raptor = { use_raptor: form.use_raptor, prompt: form.prompt, max_token: form.max_token, threshold: form.threshold, max_cluster: form.max_cluster, random_seed: form.random_seed, }; } try { setLoading(true) const data = await kbUpdate(parms); if(data.code == '0'){ Message.success("配置成功"); // window.location.reload(); emit('saveConfig') } setLoading(false) } catch (err) { Message.error(err.message); setLoading(false) } }; const cancelConfig = () => { emit('cancleConfig') } function randomNumber() { // 生成一个介于min和max之间的随机整数（包含min和max） @@ -273,14 +299,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); @@ -292,31 +310,79 @@ } }); }; const handleCancel = () => { visible.value = false; }; const handleOpened =(el) => { Object.assign(form,{ const handleOpened = (el) => { Object.assign(form, { name: "",// 用户名 nameJoin: "",// 昵称 post: "",// 岗位 txt: ""// 备注 }); formRef.value.resetFields(); console.log(props.record, "record"); // if(props.edit == 'edit'){ // Object.assign(form,props.record); // } } const queryModel = async (params) => { try { const data = await queryModelList(params); // console.log(data.data, '大模型列表'); modelList.value = data.data } catch (err) { // you can report use errorHandler or other } finally { } }; onBeforeMount(() => { const changekbObj = (value) => { formRef.value.resetFields(); kbObj = value; console.log(kbObj, 'kbObj'); let configObj = { name: kbObj.name, avatar: kbObj.avatar, pages: kbObj.parser_config.pages, chunk_token_num: kbObj.parser_config.chunk_token_num, description: kbObj.description, language: "English", permission: kbObj.permission, embd_id: props.kbtenantInfo.embd_id || kbObj.embd_id, parser_id: kbObj.parser_id, layout_recognize: true, } let raptor = {} if(kbObj.parser_config && kbObj.parser_config.raptor){ raptor = kbObj.parser_config.raptor; Object.assign(form,{ ...configObj, ...raptor, use_raptor: kbObj.parser_config.raptor.use_raptor, }); }else{ Object.assign(form,{ ...configObj, use_raptor: false, }); } imageUrls.value = [kbObj.avatar]; console.log(form,'配置页面表单信息'); avatarShow.value = false; setTimeout(() => { avatarShow.value = true; },100); scrollContainer.value.scrollTop = 0; }); onMounted(() => { } defineExpose({ changekbObj }) }); onBeforeMount(()=>{ setLoading(false) queryModel({}) }) onMounted(()=>{ }) </script> <script lang="ts"> @@ -335,8 +401,8 @@ justify-content: space-between; height: 100%; overflow: auto; //background: #626aea; background: #ffffff; border-radius: 8px; background: var(--color-bg-2); padding-top: 80px; &-lf { @@ -344,7 +410,7 @@ //height: 100%; //border: 1px solid #cccccc; border-radius: 10px; //border: 1px solid var(--color-fill-3); &-top { width: 100%; height: 60px; @@ -397,10 +463,10 @@ border-radius: 10px; overflow: hidden; padding: 20px; section { width: 100%; color: #333333; //color: #333333; color: var(--color-text-1); } } }
