From 30c1eeca00527a1294c62b1c708edd32ba079b67 Mon Sep 17 00:00:00 2001 From: yinbangzhong <zhongbangyin@126.com> Date: 星期四, 29 八月 2024 17:35:47 +0800 Subject: [PATCH] select role --- src/views/dmx/knowledgeLib/config.vue | 323 ++++++++++++++++++++++++++--------------------------- 1 files changed, 157 insertions(+), 166 deletions(-) diff --git a/src/views/dmx/knowledgeLib/config.vue b/src/views/dmx/knowledgeLib/config.vue index 8af79cf..ebec067 100644 --- a/src/views/dmx/knowledgeLib/config.vue +++ b/src/views/dmx/knowledgeLib/config.vue @@ -1,5 +1,5 @@ <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> <div style="color: #666666;">鍦ㄨ繖閲屾洿鏂版偍鐨勭煡璇嗗簱璇︾粏淇℃伅锛屽挨鍏舵槸瑙f瀽鏂规硶銆�</div> @@ -14,53 +14,18 @@ </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 ? 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,38 +33,41 @@ <!-- <a-option value="1">鑻辨枃</a-option>--> <!-- </a-select>--> <!-- </a-form-item>--> - <a-form-item field="section" label="宓屽叆妯″瀷" :rules="[{match:/section one/,message:'璇烽�夋嫨'}]"> - <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 field="embd_id" label="宓屽叆妯″瀷"> + <a-select :size="'large'" v-model="form.embd_id" placeholder="璇烽�夋嫨 ..." :disabled="kbObj.chunk_num && kbObj.token_num"> + <!-- <a-optgroup :label="index" v-for="(item,index) in mobileData" :key=index> + <a-option + v-for="(obj) in item" + :key='obj.fid' + :value="obj.llm_name" + > + {{obj.llm_name}} + </a-option> + </a-optgroup> --> + <a-option + v-for="(item,index) in mobileData" + :key='item.name' + :value="item.name" + > + {{item.name}} + </a-option> + </a-select> </a-form-item> - <a-form-item field="section" label="瑙f瀽鏂规硶" :rules="[{match:/section one/,message:'璇烽�夋嫨'}]"> - <a-select v-model="form.parser_id" placeholder="璇烽�夋嫨" disabled allow-clear> + <a-form-item field="parser_id" label="瑙f瀽鏂规硶"> + <a-select v-model="form.parser_id" placeholder="璇烽�夋嫨" :disabled="!!(kbObj.chunk_num && kbObj.token_num)" > <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鏁�"> - <a-slider v-model="form.chunk_token_num" :max="1000" show-input /> + <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> + <a-switch v-model="form.use_raptor" size="small" /> </a-form-item> <div v-if="form.use_raptor"> <a-form-item field="prompt" label="鎻愮ず璇�"> @@ -107,19 +75,16 @@ 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.max_token" :min="1" :max="1000" show-input/> + <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.threshold" show-tooltip show-input/> + <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" show-input/> + <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"> @@ -133,8 +98,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> @@ -192,17 +157,17 @@ </template> <script lang="ts" setup> -import { onMounted, onBeforeMount, reactive, ref } from "vue"; +import { onMounted, onBeforeMount, reactive, ref, nextTick } from "vue"; import { Message } from "@arco-design/web-vue"; -import { queryModelList,kbUpdate } from "@/api/kbList"; - - +import { queryModelList,kbUpdate,getKnowledgeBaseModel } 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(['upTabdateItem']) - -const kbtenantInfo = props.kbtenantInfo; - -let parser_ids = kbtenantInfo.parser_ids.split(",").map((item) => { +const emit = defineEmits(['cancleConfig','saveConfig']) +// 瑙f瀽鏂规硶鍒楄〃 +let parser_ids = props.kbtenantInfo.parser_ids.split(",").map((item) => { const [value1, value2] = item.split(":"); return { name: value2, @@ -211,15 +176,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" + @@ -228,8 +194,8 @@ description: "", language: "English", permission: "", - embd_id: "BAAI/bge-large-zh-v1.5", - parser_id: kbObj.parser_id, + embd_id: "", + parser_id: '', layout_recognize: true }); @@ -240,35 +206,44 @@ 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 formRef = ref(); const modelList = ref({}); +const mobileData= ref<any>([]) const file = ref(); -const onChange = (_, currentFile) => { - file.value = currentFile; - convertImageToBase64(file.value.file).then((result)=>{ - form.avatar = result; - }) +const uploadAction = '/api/v1/llm/upload'; // 鏇挎崲涓轰綘鐨勪笂浼燗PI +const fileList = ref([]); +const imageUrls = ref([]); +const httpUrl = localStorage.getItem('httpUrl'); + +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]; }; @@ -276,7 +251,6 @@ if (errors){ return; } - console.log(form); let parms = { name: form.name, avatar: form.avatar, @@ -291,7 +265,7 @@ }, kb_id: kbObj.id, } - if(form.layout_recognize){ + if(form.use_raptor){ parms.parser_config.raptor = { use_raptor: form.use_raptor, prompt: form.prompt, @@ -301,24 +275,30 @@ random_seed: form.random_seed, }; } - - try { + setLoading(true) const data = await kbUpdate(parms); if(data.code == '0'){ Message.success("閰嶇疆鎴愬姛"); - window.location.reload(); + // window.location.reload(); + emit('saveConfig') + } - // visible.value = false; - // emit('upTabdateItem') + setLoading(false) } catch (err) { - // you can report use errorHandler or other + Message.error(err.message); + setLoading(false) } }; + +const cancelConfig = () => { + emit('cancleConfig') +} + function randomNumber() { // 鐢熸垚涓�涓粙浜巑in鍜宮ax涔嬮棿鐨勯殢鏈烘暣鏁帮紙鍖呭惈min鍜宮ax锛� @@ -327,14 +307,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); @@ -346,22 +318,29 @@ } }); }; -const handleCancel = () => { - visible.value = false; -}; - const handleOpened =(el) => { Object.assign(form,{ }); - formRef.value.resetFields(); + // formRef.value.resetFields(); } const queryModel = async (params) => { try { - const data = await queryModelList(params); + const data = await getKnowledgeBaseModel(params); + // const res =await queryModelList(params) // console.log(data.data, '澶фā鍨嬪垪琛�'); modelList.value = data.data + for(let key in data.data) { + if (data.data.hasOwnProperty(key)) { // 纭繚鏄璞¤嚜鏈夊睘鎬э紝涓嶆槸鍘熷瀷閾句笂鐨勫睘鎬� + if(data.data[key].llm.length > 0){ + mobileData.value= data.data[key].llm.filter(item => item.type == "embedding") + } + } + + } + + } catch (err) { // you can report use errorHandler or other } finally { @@ -370,34 +349,45 @@ }; 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); - } - + + formRef.value.resetFields(); + nextTick(()=>{ + 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: kbObj.embd_id || props.kbtenantInfo.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; + }) } defineExpose({ @@ -406,6 +396,7 @@ onBeforeMount(()=>{ + setLoading(false) queryModel({}) }) onMounted(()=>{ @@ -431,7 +422,7 @@ justify-content: space-between; height: 100%; overflow: auto; - //background: #626aea; + border-radius: 8px; background: var(--color-bg-2); padding-top: 80px; -- Gitblit v1.8.0