From 1606cbed5beef1dd04a3235d4bc3fd30ea45eb1e Mon Sep 17 00:00:00 2001 From: liudong <liudong> Date: 星期五, 09 八月 2024 11:13:29 +0800 Subject: [PATCH] 智能体页面bug修改 --- src/views/dmx/knowledgeLib/tool.vue | 780 +++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 648 insertions(+), 132 deletions(-) diff --git a/src/views/dmx/knowledgeLib/tool.vue b/src/views/dmx/knowledgeLib/tool.vue index 3dbead6..9fc3e64 100644 --- a/src/views/dmx/knowledgeLib/tool.vue +++ b/src/views/dmx/knowledgeLib/tool.vue @@ -1,4 +1,3 @@ - <template> <a-button type="text" @click="handleClick" size="small"> <template #icon> @@ -7,134 +6,458 @@ </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" :format-tooltip="formatter" 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-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鏁�"> + <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)" + /> + </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 { + onMounted, + onBeforeMount, + reactive, + ref, + computed, + watch +} from "vue"; import { Message } from "@arco-design/web-vue"; -import {kbdocumentchangeparser} from "@/api/kbList"; +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 visible = ref(false); const loading = ref(false); +const radio = ref("1"); +const keyBg = ref(""); +const eidtDil = ref(); +const eidtDilVisible = ref(false); +const eidtDilinfo = reactive({}); -const props = defineProps(['kbtenantInfo','item','kbdetail']) +const props = defineProps(["kbtenantInfo", "item", "kbdetail"]); // const emit = defineEmits(['upTabdateItem']) -let threshold = computed(()=>{ - return form.threshold/100; -}) +let threshold = computed(() => { + return form.threshold / 100; +}); const kbtenantInfo = props.kbtenantInfo; -let parser_ids = kbtenantInfo.parser_ids.split(',').map((item) => { - const [value1, value2] = item.split(':'); +let parser_ids = kbtenantInfo.parser_ids.split(",").map((item) => { + const [value1, value2] = item.split(":"); return { name: value2, - value: value1, + 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 = ''; + } + }); +}; + +watch(isBtn, (val) => { + if (!val) { + closeSlelct(); + } +}); + const form = reactive({ - parser_id: props.item.parser_id, + parser_id: '', doc_id: props.item.id, max_token: 698, - threshold: 30, + threshold: 0.3, max_cluster: 233, random_seed: 1500, chunk_token_num: 128, use_raptor: false, + keywords: "", pages: {}, - prompt: '璇锋�荤粨浠ヤ笅娈佃惤銆� 灏忓績鏁板瓧锛屼笉瑕佺紪閫犮�� 娈佃惤濡備笅锛歕n' + - ' {cluster_content}\n' + - '浠ヤ笂灏辨槸浣犻渶瑕佹�荤粨鐨勫唴瀹广��', + prompt: + "璇锋�荤粨浠ヤ笅娈佃惤銆� 灏忓績鏁板瓧锛屼笉瑕佺紪閫犮�� 娈佃惤濡備笅锛歕n" + + " {cluster_content}\n" + + "浠ヤ笂灏辨槸浣犻渶瑕佹�荤粨鐨勫唴瀹广��" }); const formRef = ref(null); - const rules = { prompt: [ { required: true, - message:'鎻愮ず璇嶄笉鍏佽涓虹┖', - }, - ], -} -const formatter = (value) => { - return value / 100 + message: "鎻愮ず璇嶄笉鍏佽涓虹┖" + } + ] }; - function randomNumber() { - // 鐢熸垚涓�涓粙浜巑in鍜宮ax涔嬮棿鐨勯殢鏈烘暣鏁帮紙鍖呭惈min鍜宮ax锛� - const min = 1; // 鏈�灏忓�� - const max = 10000; // 鏈�澶у�� - form.random_seed = Math.floor(Math.random() * (max - min + 1)) + min; - } -const handleSubmit = async ({values, errors}) => { - if(!errors){ +const listData = ref([]); + +const formatter = (value) => { + return value / 100; +}; + +function randomNumber() { + // 鐢熸垚涓�涓粙浜巑in鍜宮ax涔嬮棿鐨勯殢鏈烘暣鏁帮紙鍖呭惈min鍜宮ax锛� + const min = 1; // 鏈�灏忓�� + const max = 10000; // 鏈�澶у�� + 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, @@ -145,46 +468,55 @@ max_token: form.max_token, threshold: form.threshold, max_cluster: form.max_cluster, - random_seed: form.random_seed, + random_seed: form.random_seed }, chunk_token_num: form.chunk_token_num, - pages: [ - - ] + 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 handleBeforeOk = (done) => { - formRef.value.validate().then(res => { - console.log('form:', form) - if (!form.name) { - done(false) - }else { - console.log('璇锋眰鏁版嵁'); - - } - }) -}; const handleCancel = () => { visible.value = false; -} +}; -const handleOpened =(el) => { - console.log('props',props.kbtenantInfo); +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 handleOpened = (el) => { + // console.log('props',props.kbtenantInfo); console.log('props',props.item); - console.log('props',props.kbdetail); - console.log(parser_ids, 'parser_ids'); + // 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; + } + }); + + // Object.assign(form,{ // name: '',// 鐢ㄦ埛鍚� // nameJoin: '',// 鏄电О @@ -192,26 +524,210 @@ // txt: '',// 澶囨敞 // }); // formRef.value.resetFields(); -} + console.log(props.item.id); +}; const onChangeRAPTOR = () => { - }; -onBeforeMount(()=>{ - -}) -onMounted(()=>{ - - -}) -</script> - -<script lang="ts"> -export default { - name: 'add', - methods: { - +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 = []; } }; -</script> \ No newline at end of file + +const handleChange = (values) => { + data.value = values; +}; + +//鎵归噺鍚敤鍒犻櫎绂佺敤 +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> + +<style scoped lang="less"> +.parser { + width: 100%; + + ::v-deep .arco-btn-outline:hover, + .arco-btn-outline, + .arco-btn-outline[type='button'] { + color: #2a2a2b; + border: 1px solid #2a2a2b; + } + + .button { + //color: #2a2a2b!important; + } +} + +::-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