派生自 web/flow_web
src/views/dmx/knowledgeLib/config.vue
@@ -1,22 +1,21 @@ <template> <div class="main-container"> <div style="position: absolute;top: 0;left: 0;width: 100%;padding: 0 20px"> <h4 style="margin-bottom: 10px">配置</h4> <div style="color: #666666;">在这里更新您的知识库详细信息，尤其是解析方法。</div> <a-divider style="margin-top: 20px" /> </div> <div class="main-container-lf"> <div class="main-container-lf-down"> <div style="margin-bottom: 10px">配置</div> <div style="color: #999;">在这里更新您的知识库详细信息，尤其是解析方法。</div> <a-divider style="margin-top: 10px" /> <a-form ref="formRef" :size="form.size" :model="form" :style="{width:'100%'}" layout="vertical" <a-form ref="formRef" :rules="rules" :model="form" :style="{width:'100%'}" layout="vertical" @submit="handleSubmit"> <a-form-item field="name" label="知识库名称" :rules="[{required:true,message:'name is required'},{minLength:5,message:'must be greater than 5 characters'}]" :validate-trigger="['change','input']" > <a-form-item field="name" label="知识库名称"> <a-input v-model="form.name" placeholder="请输入" /> </a-form-item> <a-form-item field="section" label="知识库图片"> <a-space direction="vertical" :style="{ width: '100%' }"> <a-upload action="/" :auto-upload="false" :fileList="file ? [file] : []" :show-file-list="false" @change="onChange" @@ -25,8 +24,8 @@ <template #upload-button> <div :class="`arco-upload-list-item${ file && file.status === 'error' ? ' arco-upload-list-item-error' : '' }`" file && file.status === 'error' ? ' arco-upload-list-item-error' : '' }`" > <div class="arco-upload-list-picture custom-upload-avatar" @@ -42,11 +41,11 @@ type="circle" size="mini" :style="{ position: 'absolute', left: '50%', top: '50%', transform: 'translateX(-50%) translateY(-50%)', }" position: 'absolute', left: '50%', top: '50%', transform: 'translateX(-50%) translateY(-50%)', }" /> </div> <div class="arco-upload-picture-card" v-else> @@ -63,84 +62,131 @@ <a-form-item field="section" label="描述"> <a-textarea placeholder="" 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> <a-option value="0">中文</a-option> <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.section" placeholder="请选择" allow-clear>--> <!-- <a-option value="0">中文</a-option>--> <!-- <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.section" 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-select> <a-space direction="vertical" size="large"> <a-select :size="'large'" v-model="form.embd_id" :style="{width:'100%'}" placeholder="请选择 ..." disabled allow-clear> <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-space> </a-form-item> <a-form-item field="section" label="解析方法" :rules="[{match:/section one/,message:'请选择'}]"> <a-select v-model="form.section" 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-select v-model="form.parser_id" placeholder="请选择" disabled 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数" :rules="[{type:'number', min:5,message:'slider is min than 5'}]"> <a-slider v-model="form.score" :max="10" /> <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" :max="1000" show-input /> </a-form-item> <a-form-item field="slider" label="布局识别" :rules="[{type:'number', min:5,message:'slider is min than 5'}]"> <a-form-item label="布局识别" > <a-space direction="vertical" size="large"> <a-switch v-model="form.score" checked-value="yes" unchecked-value="no" /> <a-switch v-model="form.layout_recognize" /> </a-space> </a-form-item> <a-form-item field="raptor" label="使用召回增强RAPTOR策略"> <a-space direction="vertical" size="large"> <a-switch v-model="form.raptor" @change="onChangeRAPTOR" /> <a-switch v-model="form.use_raptor" /> </a-space> </a-form-item> <div v-if="form.raptor"> <a-form-item field="section" label="提示词"> <a-textarea style="height: 10rem;border: 1px solid var(--color-fill-3);border-radius: 4px" placeholder="" allow-clear/> <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="请填写提示词" /> </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.score" :max="10" /> <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数" :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> <a-form-item field="slider" label="阈值" :rules="[{type:'number', min:5,message:'slider is min than 5'}]"> <a-slider v-model="form.score" :max="10" /> <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-slider v-model="form.threshold" show-tooltip 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.score" :max="10" /> <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="最大聚类数" :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> <a-form-item field="slider" label="随机种子" :rules="[{type:'number', min:5,message:'slider is min than 5'}]"> <a-input-number v-model="form.score" :style="{width:'300px',marginRight:'1rem',borderRadius:'4px'}" placeholder="请输入" class="input-demo" :min="10" :max="100"/> <a-button type="primary" @click=""><icon-plus /></a-button> <a-form-item field="slider" label="随机种子" v-model="form.random_seed" :rules="[{type:'number', min:5,message:'slider is min than 5'}]"> <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> <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-space> </div> </a-form-item> <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-space> </div> </a-form-item> </a-form> </div> </div> <div class="main-container-rt"> <section data-inspector-line="34" data-inspector-column="4" data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx" class="categoryPanelWrapper___yI4rY"><h4 class="ant-typography topTitle___tNiB9 css-dev-only-do-not-override-1wxecgq" data-inspector-line="37" data-inspector-column="10" data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx">"General" 分块方法说明</h4> <p data-inspector-line="40" data-inspector-column="10" data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"><p> 支持的文件格式为<b>DOCX、EXCEL、PPT、IMAGE、PDF、TXT</b>。</p> <p>此方法将简单的方法应用于块文件：</p> <p> </p> <li>系统将使用视觉检测模型将连续文本分割成多个片段。</li> <li>接下来，这些连续的片段被合并成Token数不超过“Token数”的块。</li> <p></p></p> <h4 class="ant-typography css-dev-only-do-not-override-1wxecgq" data-inspector-line="45" data-inspector-column="10" data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"> "General" 示例</h4><span class="ant-typography css-dev-only-do-not-override-1wxecgq" data-inspector-line="48" data-inspector-column="10" data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx">提出以下屏幕截图以促进理解。</span> <div data-inspector-line="49" data-inspector-column="10" data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx" class="ant-row imageRow___C3Xpb css-dev-only-do-not-override-1wxecgq" style="margin-left: -5px; margin-right: -5px; row-gap: 10px;display: flex; margin-top: 20px;width: 100%"> <img data-inspector-line="32" data-inspector-column="8" data-inspector-relative-path="src\components\svg-icon.tsx" src="../../../assets/images/step1.png" alt="" width="50%"> <img data-inspector-line="32" data-inspector-column="8" data-inspector-relative-path="src\components\svg-icon.tsx" src="../../../assets/images/step2.png" alt="" width="50%"> </div> <h4 class="ant-typography css-dev-only-do-not-override-1wxecgq" data-inspector-line="60" data-inspector-column="10" data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"> General 对话示例</h4> <div class="ant-divider css-dev-only-do-not-override-1wxecgq ant-divider-horizontal" data-inspector-line="63" data-inspector-column="10" data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx" role="separator"></div> <a-divider style="margin-top: 20px" /> </section> </div> </div> </template> @@ -148,112 +194,141 @@ <script lang="ts" setup> import { onMounted, onBeforeMount, reactive, ref } from "vue"; import { Message } from "@arco-design/web-vue"; import { queryModelList,kbUpdate } from "@/api/kbList"; const props = defineProps({ record: { type: Object, default: () => { return {}; } } const props = defineProps(['kbtenantInfo']) // const emit = defineEmits(['upTabdateItem']) const kbtenantInfo = props.kbtenantInfo; let parser_ids = kbtenantInfo.parser_ids.split(",").map((item) => { const [value1, value2] = item.split(":"); return { name: value2, value: value1 }; }); const visible = ref(false); const configIsShow = ref(false); const loading = ref(false); const formRef = ref(null); let kbObj = reactive({}); const form = reactive({ size: "medium", name: "", age: undefined, section: "0", province: "haidian", options: [], date: "", time: "", radio: "radio one", slider: 5, score: 5, switch: false, multiSelect: ["section one"], treeSelect: "", raptor: false name: kbObj.name, avatar: '',// max_token: 600, threshold: 0.32, max_cluster: 233, random_seed: 1500, chunk_token_num: 128, use_raptor: false, pages: {}, prompt: "请总结以下段落。 小心数字，不要编造。 段落如下：\n" + " {cluster_content}\n" + "以上就是你需要总结的内容。", description: "", language: "English", permission: "", embd_id: "BAAI/bge-large-zh-v1.5", parser_id: kbObj.parser_id, layout_recognize: true }); const options = [ { value: "beijing", label: "Beijing", children: [ { value: "chaoyang", label: "ChaoYang", children: [ { value: "datunli", label: "Datunli" } ] }, { value: "haidian", label: "Haidian" }, { value: "dongcheng", label: "Dongcheng" }, { value: "xicheng", label: "XiCheng" } ] }, { value: "shanghai", label: "Shanghai", children: [ { value: "shanghaishi", label: "Shanghai", children: [ { value: "huangpu", label: "Huangpu" } ] } ] } ]; const rules = { name: [ { required: true, message:'知识库名称不允许为空', }, ], } const sayHello = () => { Message.info("hello"); }; 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), }; file.value = currentFile; convertImageToBase64(file.value.file).then((result)=>{ form.avatar = result; }) }; 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 handleSubmit = ({ values, errors }) => { console.log("values:", values, "\nerrors:", errors); const handleSubmit = async ({ values, errors }) => { if (errors){ return; } console.log(form); 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.layout_recognize){ 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 { const data = await kbUpdate(parms); if(data.code == '0'){ Message.success("配置成功"); window.location.reload(); } // visible.value = false; // emit('upTabdateItem') } catch (err) { // you can report use errorHandler or other } }; function randomNumber() { // 生成一个介于min和max之间的随机整数（包含min和max） const min = 1; // 最小值 const max = 10000; // 最大值 form.random_seed = Math.floor(Math.random() * (max - min + 1)) + min; } const onChangeRAPTOR = () => { console.log(form.raptor); console.log(form); }; @@ -275,27 +350,69 @@ visible.value = false; }; const handleOpened = (el) => { Object.assign(form, { name: "",// 用户名 nameJoin: "",// 昵称 post: "",// 岗位 txt: ""// 备注 const handleOpened =(el) => { Object.assign(form,{ }); 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) => { 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 ? kbObj.parser_config.chunk_token_num : 128, pages: kbObj.pages, description: kbObj.description, language: "English", permission: kbObj.permission, embd_id: "BAAI/bge-large-zh-v1.5", parser_id: kbObj.parser_id, layout_recognize: kbObj.parser_config ? kbObj.parser_config.layout_recognize:false, } let raptor = {} if(kbObj.parser_config && kbObj.parser_config.raptor){ raptor = kbObj.parser_config.raptor; Object.assign(form,{ ...configObj, ...raptor, }); }else{ Object.assign(form,configObj); } }); onMounted(() => { } defineExpose({ changekbObj }) }); onBeforeMount(()=>{ queryModel({}) }) onMounted(()=>{ }) </script> <script lang="ts"> @@ -309,12 +426,15 @@ </script> <style scoped lang="less"> .main-container { position: relative; display: flex; justify-content: space-between; height: 100%; overflow: auto; //background: #626aea; background: #ffffff; padding-top: 80px; &-lf { width: 40%; //height: 100%; @@ -371,6 +491,13 @@ //background: #626aea; //border: 1px solid #cccccc; border-radius: 10px; overflow: hidden; padding: 20px; section { width: 100%; color: #333333; } } } </style>
