智能体配置页面修改

liudong

2024-08-06 da555b0e8e1ff75b3daa4fe62d1b3337b2aae72d

 src/views/dmx/IntelligentAgent/components/agentConfig.vue

@@ -1,15 +1,31 @@
<template>
  <a-button type="primary" @click="handleClick" style="margin-left: 10px">
  <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"
@@ -78,7 +94,7 @@
                  </a-space>
                </a-form-item>
                <a-form-item label="空回复">
                  <a-input v-model="form.name" placeholder="" />
                  <a-input v-model="form.prompt_config.empty_response" placeholder="" />
                </a-form-item>
                <a-form-item label="设置开场白">
                  <a-textarea
@@ -88,13 +104,13 @@
                  />
                </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.prompt_config.quote" size="small" />
                  </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 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="知识库">
@@ -127,7 +143,7 @@
            <a-divider style="margin-bottom: 20px;margin-top: 0" />
            <a-scrollbar style="width: 100%;overflow: auto" :style="{height:height}">
            <a-form
              ref="formRef"
              ref="formRef1"
              :rules="rules"
              :model="form"
              @submit="handleSubmit"
@@ -142,13 +158,13 @@
              </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-slider v-model="form.similarity_threshold"  :step="0.01" :min="0" :max="1"  />
              </a-form-item>
              <a-form-item  label="关键字相似度权重">
                <a-slider :min="0" :max="100"  :format-tooltip="formatter" />
                <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 :min="0" :max="30"  />
                <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">
@@ -166,7 +182,7 @@
                  </a-select>
                </a-space>
              </a-form-item>
              <a-form-item  label="Top-K">
              <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="变量">
@@ -177,7 +193,11 @@
                </div>
              </a-form-item>
              <a-form-item  label="">
                <a-table :columns="columns" :data="form.prompt_config.parameters" style="width: 100%">
                <a-table
                  :columns="columns"
                  :data="form.prompt_config.parameters"
                  style="width: 100%"
                >
                  <template #key="{ record }">
                    <a-input v-model="record.key" placeholder="" />
                  </template>
@@ -185,9 +205,9 @@
                    <a-switch v-model="record.optional" size="small" />
                  </template>
                  <template #action="{ record }">
                    <a-button type="text" @click="handleClick" style="margin-left: 0px" size="small">
                    <a-button type="text" @click="deleteParameters(record)" style="margin-left: 0px" size="small">
                      <template #icon>
                        <icon-delete />
                        <icon-delete  />
                      </template>
                    </a-button>
                  </template>
@@ -200,15 +220,69 @@
            <a-divider style="margin-bottom: 20px;margin-top: 0" />
            <div style="width: 100%;" :style="{height:height}">
              <a-form
                ref="formRef"
                ref="formRef2"
                :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 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="最大token数">
                  <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>
@@ -221,17 +295,20 @@

<script lang="ts" setup>
import { onMounted, onBeforeMount, reactive, ref, nextTick } from "vue";
import { queryKbList, queryModelList } from "@/api/kbList";
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 editAgentKuai = ref();
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: "",
@@ -245,6 +322,7 @@
      "回答需要考虑聊天历史。\n        以下是知识库：\n        {knowledge}\n        以上是知识库。",
    parameters: [
      {
        index: 0,
        key: "knowledge",
        optional: false
      }
@@ -261,10 +339,13 @@
  },
  similarity_threshold: 0.2,
  vector_similarity_weight: 0.30000000000000004,
  top_n: 8
  top_n: 8,
  rerank_id:'',
  top_k:1024,
});
const height = ref('calc(100vh - 560px)');

const height = ref('calc(100vh - 520px)');
const props = defineProps(['typeAngint', 'formData']);
const emit = defineEmits(['queryList']);
const columns = [
  {
    title: '关键字',
@@ -339,7 +420,7 @@
const handleSubmit = ({ values, errors }) => {
  console.log("values:", values, "\nerrors:", errors);
  if (!errors) {
    editAgentKuai.value.handleClick(form);

  }
};

@@ -353,7 +434,10 @@
const handleCancel = () => {
  visible.value = false;
  formRef.value.resetFields();
  formRef1.value.resetFields();
  formRef2.value.resetFields();
  form.name = "";
  emit('queryList');
};

const handleOpened = (el) => {
@@ -367,18 +451,88 @@
  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;
  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: false
    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);