<template>
|
<a-button type="primary" @click="handleClick" style="margin-left: 10px">
|
<template #icon>
|
<icon-plus />
|
</template>
|
新建智能体
|
</a-button>
|
<a-modal
|
v-model:visible="visible"
|
title="智能体配置"
|
@before-open="handleOpened"
|
@cancel="handleCancel"
|
: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.name" 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" size="large">
|
<a-switch v-model="form.layout_recognize" />
|
</a-space>
|
</a-form-item>
|
<a-form-item label="Self-RAG">
|
<a-space direction="vertical" size="large">
|
<a-switch v-model="form.layout_recognize" />
|
</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="formRef"
|
: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 :min="0" :max="100" :format-tooltip="formatter" />
|
</a-form-item>
|
<a-form-item label="关键字相似度权重">
|
<a-slider :min="0" :max="100" :format-tooltip="formatter" />
|
</a-form-item>
|
<a-form-item label="Top N">
|
<a-slider :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 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="handleClick" 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="formRef"
|
:rules="rules"
|
:model="form"
|
@submit="handleSubmit"
|
:style="{ width: '90%', margin: '0 auto' }"
|
layout="vertical"
|
>
|
<a-form-item field="name" label="智能体名称">
|
<a-input v-model="form.name" placeholder="请输入名称" />
|
</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 { queryKbList, queryModelList } from "@/api/kbList";
|
import useLoading from "@/hooks/loading";
|
const { loading,setLoading } = useLoading(true);
|
|
const visible = ref(false);
|
const editAgentKuai = ref();
|
const modelList = ref({});
|
const rankModelList = ref({});
|
let tabs = ref([]);
|
const file = ref();
|
const formRef = ref();
|
const form = reactive({
|
name: "",
|
icon: "",
|
language: "English",
|
prompt_config: {
|
empty_response: "",
|
prologue: "你好！ 我是你的助理，有什么可以帮到你的吗？",
|
quote: true,
|
self_rag: true,
|
system: "你是一个智能助手，请总结知识库的内容来回答问题，请列举知识库中的数据详细回答。当所有知识库内容都与问题无关时，你的回答必须包括“知识库中未找到您要的答案！”这句话。" +
|
"回答需要考虑聊天历史。\n 以下是知识库：\n {knowledge}\n 以上是知识库。",
|
parameters: [
|
{
|
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
|
});
|
const height = ref('calc(100vh - 560px)');
|
|
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) {
|
editAgentKuai.value.handleClick(form);
|
}
|
};
|
|
const handleClick = () => {
|
visible.value = true;
|
};
|
defineExpose({
|
handleClick
|
});
|
|
const handleCancel = () => {
|
visible.value = false;
|
formRef.value.resetFields();
|
form.name = "";
|
};
|
|
const handleOpened = (el) => {
|
// Object.assign(form,{
|
// name: '',// 用户名
|
// nameJoin: '',// 昵称
|
// post: '',// 岗位
|
// txt: '',// 备注
|
// });
|
formRef.value.resetFields();
|
form.name = "";
|
form.prompt_config.system = "你是一个智能助手，请总结知识库的内容来回答问题，请列举知识库中的数据详细回答。当所有知识库内容都与问题无关时，你的回答必须包括“知识库中未找到您要的答案！”这句话。" +
|
"回答需要考虑聊天历史。\n 以下是知识库：\n {knowledge}\n 以上是知识库。";
|
};
|
|
const addVariable = () => {
|
form.prompt_config.parameters.push({
|
key: "",
|
optional: false
|
});
|
nextTick(() => {
|
formRef.value.validate();
|
});
|
}
|
|
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>
|
