From 99ae26e615613073f5faeef67a54b98934da85dd Mon Sep 17 00:00:00 2001 From: liudong <liudong> Date: 星期五, 02 八月 2024 13:37:11 +0800 Subject: [PATCH] 解析块和解析方法的页面开发和功能开发 --- src/views/dmx/knowledgeLib/config.vue | 459 ++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 293 insertions(+), 166 deletions(-) diff --git a/src/views/dmx/knowledgeLib/config.vue b/src/views/dmx/knowledgeLib/config.vue index bf5e1be..0d63a1c 100644 --- a/src/views/dmx/knowledgeLib/config.vue +++ b/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;">鍦ㄨ繖閲屾洿鏂版偍鐨勭煡璇嗗簱璇︾粏淇℃伅锛屽挨鍏舵槸瑙f瀽鏂规硶銆�</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;">鍦ㄨ繖閲屾洿鏂版偍鐨勭煡璇嗗簱璇︾粏淇℃伅锛屽挨鍏舵槸瑙f瀽鏂规硶銆�</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="瑙f瀽鏂规硶" :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="鍧桾oken鏁�" :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="鍧桾oken鏁�"> + <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="鏈�澶oken鏁�" :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="鏈�澶oken鏁�" + :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銆丒XCEL銆丳PT銆両MAGE銆丳DF銆乀XT</b>銆�</p> + <p>姝ゆ柟娉曞皢绠�鍗曠殑鏂规硶搴旂敤浜庡潡鏂囦欢锛�</p> + <p> + </p> + <li>绯荤粺灏嗕娇鐢ㄨ瑙夋娴嬫ā鍨嬪皢杩炵画鏂囨湰鍒嗗壊鎴愬涓墖娈点��</li> + <li>鎺ヤ笅鏉ワ紝杩欎簺杩炵画鐨勭墖娈佃鍚堝苟鎴怲oken鏁颁笉瓒呰繃鈥淭oken鏁扳�濈殑鍧椼��</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">鎻愬嚭浠ヤ笅灞忓箷鎴浘浠ヤ績杩涚悊瑙c��</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() { + // 鐢熸垚涓�涓粙浜巑in鍜宮ax涔嬮棿鐨勯殢鏈烘暣鏁帮紙鍖呭惈min鍜宮ax锛� + 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> \ No newline at end of file -- Gitblit v1.8.0