From ab967ca32557c9535a4508468bf855a80e34809d Mon Sep 17 00:00:00 2001 From: zhangxiao <898441624@qq.com> Date: 星期二, 06 八月 2024 19:24:37 +0800 Subject: [PATCH] Merge branch 'master' of http://192.168.5.5:10010/r/web/flow_web --- src/views/dmx/IntelligentAgent/components/agentConfig.vue | 595 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 595 insertions(+), 0 deletions(-) diff --git a/src/views/dmx/IntelligentAgent/components/agentConfig.vue b/src/views/dmx/IntelligentAgent/components/agentConfig.vue new file mode 100644 index 0000000..c150713 --- /dev/null +++ b/src/views/dmx/IntelligentAgent/components/agentConfig.vue @@ -0,0 +1,595 @@ +<template> + <a-button + v-if="typeAngint == 'add'" + type="primary" + @click="handleClick" + style="margin-left: 10px"> + <template #icon> + <icon-plus /> + </template> + 鏂板缓鏅鸿兘浣� + </a-button> + <a-button + v-if="typeAngint == 'edit'" + type="text" + size="small" + @click="editClick" + > + <template #icon> + <icon-tool /> + </template> + </a-button> + <a-modal + v-model:visible="visible" + title="鏅鸿兘浣撻厤缃�" + @before-open="handleOpened" + @cancel="handleCancel" + :ok-loading="loading" + @before-ok="handleBeforeOk" + :footer="true" + title-align="start" + width="600px" + > + <a-row class=""> + <a-col :span="24"> + <a-tabs type="capsule" size="large"> + <a-tab-pane key="1" title="鍔╃悊璁剧疆"> + <a-divider style="margin-bottom: 20px;margin-top: 0" /> + <div style="width: 100%;" :style="{height:height}"> + <a-form + ref="formRef" + :rules="rules" + :model="form" + @submit="handleSubmit" + :style="{ width: '90%', margin: '0 auto' }" + > + <a-form-item field="name" label="鏅鸿兘浣撳悕绉�"> + <a-input v-model="form.name" placeholder="璇疯緭鍏ュ悕绉�" /> + </a-form-item> + <a-form-item 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> + </a-space> + </a-form-item> + <a-form-item label="绌哄洖澶�"> + <a-input v-model="form.prompt_config.empty_response" placeholder="" /> + </a-form-item> + <a-form-item label="璁剧疆寮�鍦虹櫧"> + <a-textarea + v-model="form.prompt_config.prologue" + placeholder="" + style="height: 100px" + /> + </a-form-item> + <a-form-item label="鏄剧ず寮曟枃"> + <a-space direction="vertical" > + <a-switch v-model="form.prompt_config.quote" size="small" /> + </a-space> + </a-form-item> + <a-form-item label="Self-RAG"> + <a-space direction="vertical"> + <a-switch v-model="form.prompt_config.self_rag" size="small" /> + </a-space> + </a-form-item> + <a-form-item field="kb_ids" label="鐭ヨ瘑搴�"> + <a-select + v-model="form.kb_ids" + placeholder="璇烽�夋嫨 ..." + multiple + > + <a-option + v-for="item in tabs" + :key="item.id" + :value="item.id" + > + {{ item.name }} + </a-option> + </a-select> + </a-form-item> + <!-- <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> + </a-tab-pane> + <a-tab-pane key="2" title="鎻愮ず寮曟搸"> + <a-divider style="margin-bottom: 20px;margin-top: 0" /> + <a-scrollbar style="width: 100%;overflow: auto" :style="{height:height}"> + <a-form + ref="formRef1" + :rules="rules" + :model="form" + @submit="handleSubmit" + :style="{ width: '90%', margin: '0 auto' }" + > + <a-form-item field="prompt_config.system" label="绯荤粺"> + <a-textarea + v-model="form.prompt_config.system" + placeholder="" + style="height: 180px" + /> + </a-form-item> + <a-divider style="margin: 0;margin-bottom: 10px" /> + <a-form-item label="鐩镐技搴﹂槇鍊�"> + <a-slider v-model="form.similarity_threshold" :step="0.01" :min="0" :max="1" /> + </a-form-item> + <a-form-item label="鍏抽敭瀛楃浉浼煎害鏉冮噸"> + <a-slider v-model="form.vector_similarity_weight" :step="0.01" :min="0" :max="1" /> + </a-form-item> + <a-form-item label="Top N"> + <a-slider v-model="form.top_n" :min="0" :max="30" /> + </a-form-item> + <a-form-item label="Rerank妯″瀷" > + <a-space direction="vertical" size="large"> + <a-select :size="'large'" v-model="form.rerank_id" placeholder="璇烽�夋嫨 ..." allow-clear> + <a-optgroup :label="index" v-for="(item,index) in rankModelList" :key=index> + <a-option + v-for="(obj) in item" + :key="obj.fid" + :disabled="!obj.available" + :value="obj.llm_name" + > + {{obj.llm_name}} + </a-option> + </a-optgroup> + </a-select> + </a-space> + </a-form-item> + <a-form-item v-if="form.rerank_id" label="Top-K"> + <a-slider v-model="form.top_k" :min="1" :max="2048" /> + </a-form-item> + <a-form-item label="鍙橀噺"> + <div style="width: 100%;text-align: right" > + <a-button type="outline" @click="addVariable" style="" size="mini" shape="round"> + 鏂板缓 + </a-button> + </div> + </a-form-item> + <a-form-item label=""> + <a-table + :columns="columns" + :data="form.prompt_config.parameters" + style="width: 100%" + > + <template #key="{ record }"> + <a-input v-model="record.key" placeholder="" /> + </template> + <template #optional="{ record }"> + <a-switch v-model="record.optional" size="small" /> + </template> + <template #action="{ record }"> + <a-button type="text" @click="deleteParameters(record)" style="margin-left: 0px" size="small"> + <template #icon> + <icon-delete /> + </template> + </a-button> + </template> + </a-table> + </a-form-item> + </a-form> + </a-scrollbar> + </a-tab-pane> + <a-tab-pane key="3" title="妯″瀷璁剧疆"> + <a-divider style="margin-bottom: 20px;margin-top: 0" /> + <div style="width: 100%;" :style="{height:height}"> + <a-form + ref="formRef2" + :rules="rules" + :model="form" + @submit="handleSubmit" + :style="{ width: '90%', margin: '0 auto' }" + > + <a-form-item field="llm_id" label="妯″瀷"> + <a-space direction="vertical" size="large"> + <a-select :size="'large'" field="llm_id" v-model="form.llm_id" style="width: 400px" placeholder="璇烽�夋嫨"> + <a-optgroup + :label="index" + v-for="(item, index) in modelList" + :key="index" + > + <a-option + v-for="obj in item" + :key="obj.fid" + :disabled="!obj.available" + :value="obj.llm_id" + > + {{ obj.llm_name }} + </a-option> + </a-optgroup> + </a-select> + </a-space> + </a-form-item> + <a-divider style="margin-bottom: 20px;margin-top: 0" /> + <a-form-item label="鑷敱"> + <a-select default-value="2" :style="{width:'400px'}" placeholder=""> + <a-option value="1">鍗冲叴鍒涗綔</a-option> + <a-option value="2">绮剧‘</a-option> + <a-option value="3">骞宠 </a-option> + </a-select> + </a-form-item> + <a-form-item label="娓╁害"> + <a-switch size="small" /> + <a-space direction="vertical" size="large"> + <a-slider v-model="form.llm_setting.temperature" :step="0.01" :min="0" :max="1" :style="{ width: '350px', marginLeft: '20px' }" show-input /> + </a-space> + </a-form-item> + <a-form-item label="top P"> + <a-switch size="small" /> + <a-space direction="vertical" size="large"> + <a-slider v-model="form.llm_setting.top_p" :step="0.01" :min="0" :max="1" :style="{ width: '350px', marginLeft: '20px' }" show-input /> + </a-space> + </a-form-item> + <a-form-item label="鍑哄腑澶勭綒"> + <a-switch size="small" /> + <a-space direction="vertical" size="large"> + <a-slider v-model="form.llm_setting.presence_penalty" :step="0.01" :min="0" :max="1" :style="{ width: '350px', marginLeft: '20px' }" show-input /> + </a-space> + </a-form-item> + <a-form-item label="棰戠巼澶勭綒"> + <a-switch size="small" /> + <a-space direction="vertical" size="large"> + <a-slider v-model="form.llm_setting.frequency_penalty" :step="0.01" :min="0" :max="1" :style="{ width: '350px', marginLeft: '20px' }" show-input /> + </a-space> + </a-form-item> + <a-form-item label="鏈�澶oken鏁�"> + <a-switch size="small" /> + <a-space direction="vertical" size="large"> + <a-slider v-model="form.llm_setting.max_tokens" :min="0" :max="2048" :style="{ width: '350px', marginLeft: '20px' }" show-input /> + </a-space> + </a-form-item> + </a-form> + </div> + </a-tab-pane> + </a-tabs> + </a-col> + </a-row> + </a-modal> +</template> + +<script lang="ts" setup> +import { onMounted, onBeforeMount, reactive, ref, nextTick } from "vue"; +import { kbdocumentupload, queryKbList, queryModelList } from "@/api/kbList"; +import useLoading from "@/hooks/loading"; +import { Message } from "@arco-design/web-vue"; +import { dialogSet } from "@/api/Agent"; +import EventBus from "@/utils/EventBus"; +const { loading,setLoading } = useLoading(true); +const visible = ref(false); +const modelList = ref({}); +const rankModelList = ref({}); +let tabs = ref([]); +const file = ref(); +const formRef = ref(); +const formRef1 = ref(); +const formRef2 = ref(); +const form = reactive({ + name: "", + icon: "", + language: "English", + prompt_config: { + empty_response: "", + prologue: "浣犲ソ锛� 鎴戞槸浣犵殑鍔╃悊锛屾湁浠�涔堝彲浠ュ府鍒颁綘鐨勫悧锛�", + quote: true, + self_rag: true, + system: "浣犳槸涓�涓櫤鑳藉姪鎵嬶紝璇锋�荤粨鐭ヨ瘑搴撶殑鍐呭鏉ュ洖绛旈棶棰橈紝璇峰垪涓剧煡璇嗗簱涓殑鏁版嵁璇︾粏鍥炵瓟銆傚綋鎵�鏈夌煡璇嗗簱鍐呭閮戒笌闂鏃犲叧鏃讹紝浣犵殑鍥炵瓟蹇呴』鍖呮嫭鈥滅煡璇嗗簱涓湭鎵惧埌鎮ㄨ鐨勭瓟妗堬紒鈥濊繖鍙ヨ瘽銆�" + + "鍥炵瓟闇�瑕佽�冭檻鑱婂ぉ鍘嗗彶銆俓n 浠ヤ笅鏄煡璇嗗簱锛歕n {knowledge}\n 浠ヤ笂鏄煡璇嗗簱銆�", + parameters: [ + { + index: 0, + key: "knowledge", + optional: false + } + ] + }, + kb_ids: [], + llm_id: "qwen-plus", + llm_setting: { + temperature: 0.1, + top_p: 0.3, + presence_penalty: 0.4, + frequency_penalty: 0.7, + max_tokens: 512 + }, + similarity_threshold: 0.2, + vector_similarity_weight: 0.30000000000000004, + top_n: 8, + rerank_id:'', + top_k:1024, +}); +const height = ref('calc(100vh - 520px)'); +const props = defineProps(['typeAngint', 'formData']); +const emit = defineEmits(['queryList']); +const columns = [ + { + title: '鍏抽敭瀛�', + dataIndex: 'key', + slotName: 'key', + }, + { + title: '鍙��', + dataIndex: 'optional', + slotName: 'optional', + }, + { + title: '鎿嶄綔', + dataIndex: 'action', + slotName: 'action', + }, +]; + +const formatter = (value) => { + return `${(value / 100).toFixed(2)}` +}; + +const onChange = (_, currentFile) => { + file.value = currentFile; + convertImageToBase64(file.value.file).then((result) => { + form.icon = 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 rules = { + name: [ + { + required: true, + message: "鍚嶇О涓嶅厑璁镐负绌�" + } + ], + "prompt_config.system": [ + { + required: true, + message: "绯荤粺涓嶅厑璁镐负绌�" + } + ], + llm_id: [ + { + required: true, + message: '妯″瀷涓嶈兘涓虹┖', + }, + ], + kb_ids: [ + { + required: true, + message: '鐭ヨ瘑搴撲笉鑳戒负绌�', + }, + ], +}; + +const handleSubmit = ({ values, errors }) => { + console.log("values:", values, "\nerrors:", errors); + if (!errors) { + + } +}; + +const handleClick = () => { + visible.value = true; +}; +defineExpose({ + handleClick +}); + +const handleCancel = () => { + visible.value = false; + formRef.value.resetFields(); + formRef1.value.resetFields(); + formRef2.value.resetFields(); + form.name = ""; + emit('queryList'); +}; + +const handleOpened = (el) => { + // Object.assign(form,{ + // name: '',// 鐢ㄦ埛鍚� + // nameJoin: '',// 鏄电О + // post: '',// 宀椾綅 + // txt: '',// 澶囨敞 + // }); + formRef.value.resetFields(); + form.name = ""; + form.prompt_config.system = "浣犳槸涓�涓櫤鑳藉姪鎵嬶紝璇锋�荤粨鐭ヨ瘑搴撶殑鍐呭鏉ュ洖绛旈棶棰橈紝璇峰垪涓剧煡璇嗗簱涓殑鏁版嵁璇︾粏鍥炵瓟銆傚綋鎵�鏈夌煡璇嗗簱鍐呭閮戒笌闂鏃犲叧鏃讹紝浣犵殑鍥炵瓟蹇呴』鍖呮嫭鈥滅煡璇嗗簱涓湭鎵惧埌鎮ㄨ鐨勭瓟妗堬紒鈥濊繖鍙ヨ瘽銆�" + + "鍥炵瓟闇�瑕佽�冭檻鑱婂ぉ鍘嗗彶銆俓n 浠ヤ笅鏄煡璇嗗簱锛歕n {knowledge}\n 浠ヤ笂鏄煡璇嗗簱銆�"; + formRef.value.resetFields(); + formRef1.value.resetFields(); + formRef2.value.resetFields(); +}; + + +const handleBeforeOk = async (done) => { + formRef.value.validate().then(res => { + console.log('res:', res) + }) + formRef1.value.validate().then(res => { + console.log('res:', res) + }) + formRef2.value.validate().then(res => { + console.log('res:', res) + }) + if (form.name && form.kb_ids.length>0 && form.prompt_config.system && form.llm_id) { + let title = '鍒涘缓鎴愬姛'; + let formNew = { ...form }; + if(formNew.rerank_id){ + delete formNew.top_k; + } + + if(formNew.rerank_id){ + delete formNew.top_k; + } + + if (props.typeAngint == 'edit') { + formNew.dialog_id = form.id; + delete formNew.id; + delete formNew.off; + title = '淇敼鎴愬姛'; + } + setLoading(true) + try { + const data = await dialogSet(formNew); + console.log(data, 'data'); + if (data.code == 0){ + Message.success(title); + handleCancel(); + EventBus.emit('queryList'); + }else { + Message.error(data.msg); + } + done(true); + setLoading(false) + } catch (err) { + // you can report use errorHandler or other + setLoading(false) + } + }else { + Message.warning('璇峰~鍐欏繀濉」'); + done(false) + } +}; + +const editClick = (data) => { + visible.value = true; + nextTick(()=>{ + console.log(props.formData,'浼犲叆鏁版嵁'); + Object.assign(form, props.formData); + console.log(form,'琛ㄥ崟鏁版嵁'); + }) +}; + +const addVariable = () => { + form.prompt_config.parameters.push({ + index: form.prompt_config.parameters.length, + key: "", + optional: true + }); + nextTick(() => { + formRef.value.validate(); + }); +} + +const deleteParameters = (record) => { + // console.log(record, 'record'); + // console.log(form.prompt_config.parameters); + form.prompt_config.parameters = form.prompt_config.parameters.filter(item => item.index !== record.index); + +} + + +const queryModel = async (params) => { + try { + const data = await queryModelList(params); + console.log(data.data, '澶фā鍨嬪垪琛�'); + modelList.value = data.data; + rankModelList.value = { + BAAI: [data.data.BAAI[1]], + Jina: data.data.Jina, + youdao: data.data.youdao + }; + } catch (err) { + // you can report use errorHandler or other + } finally { + } +}; + + +const knowledgeData = async (params = { page: 1, page_size: 20 }) => { + setLoading(true); + try { + const { data } = await queryKbList(params); + console.log(data, 'data'); + nextTick(() => { + tabs.value = data; + console.log(tabs.value, 'tabs'); + }); + } catch (err) { + // you can report use errorHandler or other + } finally { + setLoading(false); + } +}; + +onBeforeMount(() => { + queryModel({}); + knowledgeData(); +}); +onMounted(() => {}); + + + + +</script> +<style lang="less" scoped> +:deep(.arco-tabs-nav-tab-list) { + width: 100%; + + .arco-tabs-tab { + width: 33%; + + .arco-tabs-tab-title { + width: 100%; + display: inline-block; + text-align: center; + } + } +} +</style> \ No newline at end of file -- Gitblit v1.8.0