From 9f8024586cf4b4531cf9ef18634080420a8df24c Mon Sep 17 00:00:00 2001 From: liudong <liudong> Date: 星期三, 07 八月 2024 11:23:40 +0800 Subject: [PATCH] 智能体页面修改 --- src/views/dmx/knowledgeLib/config.vue | 395 ++++++++++++++++++++++++++++++++----------------------- 1 files changed, 230 insertions(+), 165 deletions(-) diff --git a/src/views/dmx/knowledgeLib/config.vue b/src/views/dmx/knowledgeLib/config.vue index d134148..c55b0d6 100644 --- a/src/views/dmx/knowledgeLib/config.vue +++ b/src/views/dmx/knowledgeLib/config.vue @@ -1,24 +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> + <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"> - <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" @@ -27,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" @@ -44,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,74 +60,68 @@ </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> - <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" :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-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鏁�"> + <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.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="闃堝��" > + <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.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="鏈�澶ц仛绫绘暟"> + <a-slider v-model="form.max_cluster" :min="1" :max="1024" 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'}" + <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=""> + <a-button type="primary" @click="randomNumber"> <icon-plus /> </a-button> - </a-form-item> </div> @@ -150,7 +141,7 @@ <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="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" @@ -200,112 +191,142 @@ <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); }; @@ -327,27 +348,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"> @@ -367,14 +430,15 @@ height: 100%; overflow: auto; //background: #626aea; - background: #ffffff; + background: var(--color-bg-2); padding-top: 80px; + &-lf { width: 40%; //height: 100%; //border: 1px solid #cccccc; border-radius: 10px; - + //border: 1px solid var(--color-fill-3); &-top { width: 100%; height: 60px; @@ -427,9 +491,10 @@ border-radius: 10px; overflow: hidden; padding: 20px; - section{ + section { width: 100%; - color: #333333; + //color: #333333; + color: var(--color-text-1); } } } -- Gitblit v1.8.0