From ad3849b444b67e1601cfe3ec3a7916da581d09ac Mon Sep 17 00:00:00 2001 From: zhangxiao <898441624@qq.com> Date: 星期六, 17 八月 2024 18:53:45 +0800 Subject: [PATCH] fix: 修改知识库bug --- src/views/dmx/knowledgeLib/tool.vue | 857 +++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 688 insertions(+), 169 deletions(-) diff --git a/src/views/dmx/knowledgeLib/tool.vue b/src/views/dmx/knowledgeLib/tool.vue index f055f2d..190264f 100644 --- a/src/views/dmx/knowledgeLib/tool.vue +++ b/src/views/dmx/knowledgeLib/tool.vue @@ -1,131 +1,463 @@ - <template> - <a-button type="text" @click="handleClick" size="small"> + <a-button + type="text" + :disabled="props.item.run == '1'" + @click="handleClick" + size="small" + > <template #icon> <icon-tool /> </template> </a-button> <a-modal v-model:visible="visible" - title="瑙f瀽鏂规硶" + title=" " @before-open="handleOpened" @cancel="handleCancel" - @opened="handleOpened" :footer="false" title-align="start" - width="700px" + width="900px" > - <div style="display: flex;align-items: center;"> - <div> - 瑙f瀽鏂规硶: - </div> - <div style="margin-left: 10px"> - <a-select v-model="form.parser_id" placeholder="璇烽�夋嫨" > - <a-option v-for="item in parser_ids" :key="item.value" :label="item.name" :value="item.value"></a-option> - </a-select> - </div> - </div> - <a-form ref="formRef" :rules="rules" :model="form" auto-label-width @submit="handleSubmit" > - <a-divider style="margin-top: 10px" /> - <a-form-item field="slider" label="鍧梩oken鏁�" - :rules="[{type:'number', min:1,message:'slider is min than 1'}]"> - <a-slider v-model="form.chunk_token_num" :max="1000" show-input /> - </a-form-item> - <a-divider style="margin-top: 10px" /> - <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-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="璇峰~鍐欐彁绀鸿瘝" /> - </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> - <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> - <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="闅忔満绉嶅瓙" 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-button @click="visible = false">鍙栨秷</a-button> - <a-button style="margin-left: 10px" type="primary" html-type="submit">纭畾</a-button> + <a-tabs default-active-key="1"> + <a-tab-pane key="1"> + <template #title> + <icon-calendar /> + 瑙f瀽鏂规硶 + </template> + <div style="width: 100%"> + <div style="display: flex; align-items: center"> + <div> 瑙f瀽鏂规硶:</div> + <div style="margin-left: 10px"> + <a-select v-model="form.parser_id" placeholder="璇烽�夋嫨"> + <a-option + v-for="item in parser_ids" + :key="item.value" + :label="item.name" + :value="item.value" + ></a-option> + </a-select> + </div> + </div> + <div class="parser"> + <a-form + ref="formRef" + :rules="rules" + :model="form" + auto-label-width + @submit="handleSubmit" + > + <a-divider + style="margin-top: 10px" + v-if="form.parser_id === 'naive'" + /> + <a-form-item + field="slider" + label="鍧桾oken鏁�" + v-if="form.parser_id === 'naive'" + > + <a-slider + v-model="form.chunk_token_num" + :min="0" + :max="2048" + show-input + /> + </a-form-item> + <a-divider + style="margin-top: 10px" + v-if=" + form.parser_id === 'naive' || + form.parser_id === 'qa' || + form.parser_id === 'manual' || + form.parser_id === 'laws' || + form.parser_id === 'book' + " + /> + <a-form-item + field="raptor" + label="浣跨敤鍙洖澧炲己RAPTOR绛栫暐" + v-if=" + form.parser_id === 'naive' || + form.parser_id === 'qa' || + form.parser_id === 'manual' || + form.parser_id === 'laws' || + form.parser_id === 'book' + " + > + <a-switch + v-model="form.use_raptor" + @change="onChangeRAPTOR" + 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="璇峰~鍐欐彁绀鸿瘝" + /> + </a-form-item> + <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="闃堝��"> + <a-slider + v-model="form.threshold" + :step="0.01" + :min="0" + :max="1" + show-input + /> + </a-form-item> + <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-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-button @click="visible = false">鍙栨秷</a-button> + <a-button + style="margin-left: 10px" + type="primary" + html-type="submit" + >纭畾 + </a-button> + </div> + </a-form-item> + </a-form> + </div> </div> - </a-form-item> - </a-form> + </a-tab-pane> + <a-tab-pane key="2"> + <template #title> + <icon-clock-circle /> + 鍒涘缓瑙f瀽鍧� + </template> + <div class="details"> + <div class="details-header"> + <div + style=" + display: flex; + align-items: center; + justify-content: flex-end; + " + > + <a-radio-group + v-model="radio" + type="button" + style="margin-right: 10px" + @change="onRadioChange" + > + <a-radio value="1">鍏ㄦ枃</a-radio> + <a-radio value="2">鐪佺暐</a-radio> + </a-radio-group> + <a-popover position="bottom"> + <a-button + type="outline" + class="button" + style="margin-right: 10px" + >鎵归噺 + <icon-down style="margin-left: 4px" /> + </a-button> + <template #content> + <a-space direction="vertical"> + <a-checkbox + :model-value="checkedAll" + :indeterminate="indeterminate" + @change="handleChangeAll" + style="margin-left: 10px" + > + 閫夋嫨鎵�鏈� + </a-checkbox> + </a-space> + <a-divider style="margin: 10px 0" /> + <p> + <a-button + type="text" + class="button" + style="color: #2a2a2b" + @click="addBlock(1)" + > + <template #icon> + <icon-check-circle /> + </template> + 鍚敤閫夊畾鐨� + </a-button> + </p> + <p> + <a-button + type="text" + class="button" + style="color: #2a2a2b" + @click="addBlock(0)" + > + <template #icon> + <icon-close-circle /> + </template> + 绂佺敤閫夊畾鐨� + </a-button> + </p> + <a-divider style="margin: 10px 0" /> + <p> + <a-button + type="text" + class="button" + style="color: #2a2a2b" + @click="addBlock(3)" + > + <template #icon> + <icon-delete /> + </template> + 鍒犻櫎閫夊畾鐨� + </a-button> + </p> + </template> + </a-popover> + <a-space + direction="vertical" + size="large" + style="margin-right: 10px" + class="space_search" + v-show="!isBtn" + > + <a-input-search + :style="{ width: '220px' }" + v-model="form.keywords" + @input="getList()" + allow-clear + @clear.stop="getList()" + placeholder="鎼滅储" + /> + </a-space> + <a-button + type="outline" + class="button" + style="margin-right: 10px" + v-show="isBtn" + @click.stop="isBtn = !isBtn" + > + <template #icon> + <icon-search /> + </template> + </a-button> + <a-popover position="bottom"> + <a-button + type="outline" + class="button" + style="margin-right: 10px" + > + <icon-sort /> + </a-button> + <template #content> + <a-radio-group + v-model="available_int" + direction="vertical" + size="large" + @change="onChangeavailable" + > + <a-radio :value="''">鎵�鏈�</a-radio> + <a-radio :value="1">鍚敤</a-radio> + <a-radio :value="0">绂佺敤</a-radio> + </a-radio-group> + </template> + </a-popover> + <addDetails + :item="item" + @canplaythrough="canplaythrough" + ></addDetails> + </div> + </div> + <a-divider style="margin-top: 10px" /> + <div class="groupMain"> + <a-spin :loading="isLoading" :tip="tip"> + <a-checkbox-group v-model="data" @change="handleChange"> + <div + class="groupList" + :class="{ + groupActive: keyBg == index, + groupNoActive: keyBg != index, + }" + v-for="(item, index) in listData" + :key="index" + > + <a-checkbox :value="item.chunk_id"></a-checkbox> + <div + class="groupList-content emphaRed" + @click="groupListContentClick(index)" + @dblclick="contentClick(item)" + v-html="item.content_with_weight" + > + </div> + <div class="groupList-right"> + <a-switch + v-model="item.available_int" + :checked-value="1" + :unchecked-value="0" + @change="handleChangeStatus(item)" + size="small" + /> + </div> + </div> + </a-checkbox-group> + </a-spin> + </div> + </div> + <eidtDetails + ref="eidtDil" + :item="eidtDilinfo" + v-model:eidtDilVisible="eidtDilVisible" + @canplaythrough="canplaythrough" + ></eidtDetails> + </a-tab-pane> + </a-tabs> </a-modal> </template> <script lang="ts" setup> -import { onMounted, onBeforeMount, reactive, ref, computed } from "vue"; -import { Message } from "@arco-design/web-vue"; -import {kbdocumentchangeparser} from "@/api/kbList"; -const visible = ref(false); -const loading = ref(false); + import { + onMounted, + onBeforeMount, + reactive, + ref, + computed, + watch, + } from 'vue'; + import { Message } from '@arco-design/web-vue'; + import { + kbdocumentchangeparser, + achunkCreate, + queryChunkList, + chunkSwitch, + chunkRm, + achunkGet, + } from '@/api/kbList'; + import addDetails from '@/views/dmx/knowledgeLib/addDetails.vue'; + import eidtDetails from '@/views/dmx/knowledgeLib/eidtDetails.vue'; -const props = defineProps(['kbtenantInfo','item','kbdetail']) -// const emit = defineEmits(['upTabdateItem']) + const visible = ref(false); + const loading = ref(false); + const radio = ref('1'); + const keyBg = ref(''); + const eidtDil = ref(); + const eidtDilVisible = ref(false); + const eidtDilinfo = reactive({}); -let threshold = computed(()=>{ - return form.threshold/100; -}) + const props = defineProps(['kbtenantInfo', 'item', 'kbdetail']); + // const emit = defineEmits(['upTabdateItem']) -const kbtenantInfo = props.kbtenantInfo; + let threshold = computed(() => { + return form.threshold / 100; + }); -let parser_ids = kbtenantInfo.parser_ids.split(',').map((item) => { - const [value1, value2] = item.split(':'); - return { - name: value2, - value: value1, + const kbtenantInfo = props.kbtenantInfo; + + let parser_ids = kbtenantInfo.parser_ids.split(',').map((item) => { + const [value1, value2] = item.split(':'); + return { + name: value2, + value: value1, + }; + }); + + // 杩囨护瑙f瀽鏂规硶 + + const filterParserArr = [ + 'naive', + 'qa', + 'resume', + 'manual', + 'book', + 'laws', + 'one', + ]; + + const isBtn = ref(true); + + const closeSlelct = () => { + window.addEventListener('click', (event) => { + if (!event.target.closest('.space_search') && !isBtn.value) { + isBtn.value = true; + // form.keywords = ''; + } + }); }; -}); -const form = reactive({ - parser_id: props.item.parser_id, - doc_id: props.item.id, - max_token: 698, - threshold: 30, - max_cluster: 233, - random_seed: 1500, - chunk_token_num: 128, - use_raptor: false, - pages: {}, - prompt: '璇锋�荤粨浠ヤ笅娈佃惤銆� 灏忓績鏁板瓧锛屼笉瑕佺紪閫犮�� 娈佃惤濡備笅锛歕n' + - ' {cluster_content}\n' + - '浠ヤ笂灏辨槸浣犻渶瑕佹�荤粨鐨勫唴瀹广��', -}); -const formRef = ref(null); + watch(isBtn, (val) => { + if (!val) { + closeSlelct(); + } + }); -const rules = { - prompt: [ - { - required: true, - message:'鎻愮ず璇嶄笉鍏佽涓虹┖', - }, - ], -} -const formatter = (value) => { - return value / 100 -}; + const form = reactive({ + parser_id: '', + doc_id: props.item.id, + max_token: 698, + threshold: 0.3, + max_cluster: 233, + random_seed: 1500, + chunk_token_num: 128, + use_raptor: false, + keywords: '', + pages: {}, + prompt: + '璇锋�荤粨浠ヤ笅娈佃惤銆� 灏忓績鏁板瓧锛屼笉瑕佺紪閫犮�� 娈佃惤濡備笅锛歕n' + + ' {cluster_content}\n' + + '浠ヤ笂灏辨槸浣犻渶瑕佹�荤粨鐨勫唴瀹广��', + }); + const formRef = ref(null); + const rules = { + prompt: [ + { + required: true, + message: '鎻愮ず璇嶄笉鍏佽涓虹┖', + }, + ], + }; + + const listData = ref([]); + + const formatter = (value) => { + return value / 100; + }; + function randomNumber() { // 鐢熸垚涓�涓粙浜巑in鍜宮ax涔嬮棿鐨勯殢鏈烘暣鏁帮紙鍖呭惈min鍜宮ax锛� const min = 1; // 鏈�灏忓�� @@ -133,85 +465,272 @@ form.random_seed = Math.floor(Math.random() * (max - min + 1)) + min; } -const handleSubmit = async ({values, errors}) => { - if(!errors){ - let data = await kbdocumentchangeparser({ - parser_id: form.parser_id, - doc_id: form.doc_id, - 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, + const handleSubmit = async ({ values, errors }) => { + if (!errors) { + let data = await kbdocumentchangeparser({ + parser_id: form.parser_id, + doc_id: form.doc_id, + 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, + }, + chunk_token_num: form.chunk_token_num, + pages: [], }, - chunk_token_num: form.chunk_token_num, - pages: [ - - ] + }); + if (data.code == 0) { + Message.success('閰嶇疆鎴愬姛'); + } else { + Message.error('閰嶇疆澶辫触'); } - }) - if(data.code == 0){ - Message.success('閰嶇疆鎴愬姛'); - }else{ - Message.error('閰嶇疆澶辫触'); + visible.value = false; } + }; + + const handleClick = () => { + visible.value = true; + }; + const handleCancel = () => { visible.value = false; - } -} + }; -const handleClick = () => { - visible.value = true; -}; -const handleBeforeOk = (done) => { - formRef.value.validate().then(res => { - console.log('form:', form) - if (!form.name) { - done(false) - }else { - console.log('璇锋眰鏁版嵁'); - + const contentClick = async (item) => { + try { + const data = await achunkGet({ + chunk_id: item.chunk_id, + }); + // console.log(data.data); + Object.assign(eidtDilinfo, data.data); + eidtDilVisible.value = true; + } catch (error) { + Message.error('鑾峰彇澶辫触'); } - }) -}; -const handleCancel = () => { - visible.value = false; -} + }; + const handleOpened = (el) => { + // console.log('props',props.kbtenantInfo); + console.log('props', props.item); + // console.log('props',props.kbdetail); + console.log(parser_ids, 'parser_ids'); + let parser_id = props.item.parser_id; + parser_ids.forEach((item) => { + if (item.name == parser_id) { + form.parser_id = item.value; + } + }); -const handleOpened =(el) => { - console.log('props',props.kbtenantInfo); - console.log('props',props.item); - console.log('props',props.kbdetail); - console.log(parser_ids, 'parser_ids'); - // Object.assign(form,{ - // name: '',// 鐢ㄦ埛鍚� - // nameJoin: '',// 鏄电О - // post: '',// 宀椾綅 - // txt: '',// 澶囨敞 - // }); - // formRef.value.resetFields(); -} + // Object.assign(form,{ + // name: '',// 鐢ㄦ埛鍚� + // nameJoin: '',// 鏄电О + // post: '',// 宀椾綅 + // txt: '',// 澶囨敞 + // }); + // formRef.value.resetFields(); + console.log(props.item.id); + }; -const onChangeRAPTOR = () => { + const onChangeRAPTOR = () => {}; -}; + const indeterminate = ref(false); + const checkedAll = ref(false); + const data = ref([]); + const switchType = ref(false); + const available_int = ref(''); + const onRadioChange = () => { + console.log(radio.value); + }; + //鎵归噺鎿嶄綔 + const handleChangeAll = (value) => { + indeterminate.value = false; + if (value) { + checkedAll.value = true; + listData.value.forEach((item) => { + data.value.push(item.chunk_id); + }); + } else { + checkedAll.value = false; + data.value = []; + } + }; -onBeforeMount(()=>{ + const handleChange = (values) => { + data.value = values; + }; -}) -onMounted(()=>{ + //鎵归噺鍚敤鍒犻櫎绂佺敤 + const addBlock = (type) => { + if (data.value.length == 0) { + Message.error('璇烽�夋嫨瑕佹搷浣滅殑鏁版嵁'); + return; + } + if (type == 3) { + deleteChunk(); + } else { + let params = { + chunk_ids: data.value, + available_int: type, + doc_id: props.item.id, + }; + chunkSwitch(params).then((res) => { + if (res.code == 0) { + Message.success('鎿嶄綔鎴愬姛'); + getList(); + checkedAll.value = false; + data.value = []; + } else { + Message.error('鎿嶄綔澶辫触'); + } + }); + } + }; + const groupListContentClick = (value) => { + keyBg.value = value; + }; -}) + const onChangeavailable = () => { + getList(); + }; + + const handleChangeStatus = (val) => { + updateChunkStatus(val); + }; + const isLoading = ref(true); + // 鑷畾涔夊姞杞芥彁绀烘枃鏈� + const tip = '鍔犺浇涓紝璇风◢鍊�...'; + //鑾峰彇鍒楄〃 + const getList = async () => { + let params = { + doc_id: props.item.id, + keywords: form.keywords, + page: 1, + size: 10000, + }; + if (available_int.value !== '') { + params.available_int = available_int.value; + } + await queryChunkList(params).then((res) => { + if (res.code == 0) { + listData.value = res.data.chunks; + isLoading.value = false; + listData.value = listData.value.map((item) => { + item.available_int = parseInt(item.available_int); + return item; + }); + } + }); + }; + //鏇存柊鍒楄〃 + const canplaythrough = () => { + getList(); + }; + + //鍚敤绂佺敤 + const updateChunkStatus = (val) => { + let params = { + chunk_ids: [val.chunk_id], + available_int: val.available_int, + doc_id: props.item.id, + }; + chunkSwitch(params).then((res) => { + console.log(res); + if (res.code == 0) { + Message.success('鏇存柊鎴愬姛'); + getList(); + } else { + Message.error('鏇存柊澶辫触'); + } + }); + }; + + //鍒犻櫎 + const deleteChunk = () => { + let params = { + chunk_ids: data.value, + doc_id: props.item.id, + }; + chunkRm(params).then((res) => { + console.log(res); + if (res.code == 0) { + Message.success('鍒犻櫎鎴愬姛'); + getList(); + } else { + Message.error('鍒犻櫎澶辫触'); + } + }); + }; + + onBeforeMount(() => { + getList(); + }); + onMounted(() => {}); </script> -<script lang="ts"> -export default { - name: 'add', - methods: { +<style scoped lang="less"> + .parser { + width: 100%; + .arco-btn-outline:hover, + .arco-btn-outline, + .arco-btn-outline[type='button'] { + color: #2a2a2b; + border: 1px solid #2a2a2b; + } + + .button { + //color: #2a2a2b!important; + } } -}; -</script> \ No newline at end of file + + ::-webkit-scrollbar { + display: none; + } + + .groupMain { + width: 100%; + height: 500px; + overflow: auto; + display: flex; + justify-content: center; + + .groupList { + display: flex; + padding: 24px; + border-radius: 8px; + //background: #eff8ff; + border: 1px solid #f0f0f0; + margin-bottom: 20px; + overflow: auto; + + .groupList-content { + width: 700px; + //height: 100px; + overflow: auto; + box-sizing: border-box; + margin: 0; + padding: 0; + color: #2a2a2b; + font-size: 14px; + font-family: Inter; + position: relative; + } + } + } + + :deep(.emphaRed em) { + color: red !important; + } + + .groupActive { + background: #eff8ff; + } + + .groupNoActive { + background: var(--color-bg-1); + color: var(--color-text-1); + } +</style> -- Gitblit v1.8.0