liudong
2024-08-12 f83bc6949cc59b06528d94c54bae145c3c052476
src/views/dmx/IntelligentAgent/components/agentConfig.vue
@@ -32,7 +32,7 @@
  >
    <a-row class="">
      <a-col :span="24">
        <a-tabs type="capsule" size="large" v-model="keyLarge" @tab-click="console.log(keyLarge)">
        <a-tabs type="capsule" size="large"  :active-key="activeKey" @change="handleTabChange">
          <a-tab-pane key="1" title="助理设置">
            <a-divider style="margin-bottom: 20px;margin-top: 0" />
            <div style="width: 100%;" :style="{height:height}">
@@ -48,49 +48,13 @@
                </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>
                    <Upload
                      :action="uploadAction"
                      :limit="1"
                      :url="form.icon ? httpUrl + form.icon : ''"
                      @update:fileList="updateFileList"
                      @success="handleSuccess"
                    ></Upload>
                  </a-space>
                </a-form-item>
                <a-form-item label="空回复">
@@ -198,14 +162,15 @@
                  :data="form.prompt_config.parameters"
                  style="width: 100%"
                >
                  <template #key="{ record }">
                  <template #key="{ record, rowIndex }">
                    <a-input v-model="record.key" placeholder="" />
<!--                    <a-input v-model="form.prompt_config.parameters[rowIndex].key" />-->
                  </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">
                    <a-button type="text" @click="deleteParameters(record)" style="margin-left: 0" size="small">
                      <template #icon>
                        <icon-delete  />
                      </template>
@@ -255,33 +220,33 @@
                  </a-select>
                </a-form-item>
                <a-form-item label="温度">
                  <a-switch size="small" />
                  <a-switch size="small" v-model="temperature" />
                  <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-slider :disabled="!temperature" v-model="form.llm_setting.temperature" :step="0.01" :min="0" :max="1" :style="{ width: '350px', marginLeft: '20px',display: 'flex' }" show-input />
                  </a-space>
                </a-form-item>
                <a-form-item label="top P">
                  <a-switch  size="small" />
                  <a-switch  size="small" v-model="top_p"  />
                  <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-slider :disabled="!top_p" v-model="form.llm_setting.top_p" :step="0.01" :min="0" :max="1"  :style="{ width: '350px', marginLeft: '20px',display: 'flex' }" show-input />
                  </a-space>
                </a-form-item>
                <a-form-item label="出席处罚">
                  <a-switch size="small" />
                  <a-switch size="small" v-model="presence_penalty"  />
                  <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-slider :disabled="!presence_penalty" v-model="form.llm_setting.presence_penalty" :step="0.01" :min="0" :max="1"  :style="{ width: '350px', marginLeft: '20px',display: 'flex' }" show-input />
                  </a-space>
                </a-form-item>
                <a-form-item label="频率处罚">
                  <a-switch size="small" />
                  <a-switch size="small" v-model="frequency_penalty"  />
                  <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-slider :disabled="!frequency_penalty" v-model="form.llm_setting.frequency_penalty" :step="0.01" :min="0" :max="1"  :style="{ width: '350px', marginLeft: '20px',display: 'flex' }" show-input />
                  </a-space>
                </a-form-item>
                <a-form-item label="最大token数">
                  <a-switch size="small" />
                  <a-switch size="small" v-model="max_tokens"  />
                  <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-slider :disabled="!max_tokens" v-model="form.llm_setting.max_tokens"  :min="0" :max="2048"  :style="{ width: '350px', marginLeft: '20px',display: 'flex' }" show-input />
                  </a-space>
                </a-form-item>
              </a-form>
@@ -294,7 +259,7 @@
</template>
<script lang="ts" setup>
import { onMounted, onBeforeMount, reactive, ref, nextTick } from "vue";
import { onMounted, onBeforeMount, reactive, ref, nextTick, onUnmounted } from "vue";
import { kbdocumentupload, queryKbList, queryModelList } from "@/api/kbList";
import useLoading from "@/hooks/loading";
import { Message } from "@arco-design/web-vue";
@@ -309,7 +274,7 @@
const formRef = ref();
const formRef1 = ref();
const formRef2 = ref();
const keyLarge = ref('1');
const activeKey = ref('1');
const form = reactive({
  name: "",
  icon: "",
@@ -318,7 +283,7 @@
    empty_response: "",
    prologue: "你好! 我是你的助理,有什么可以帮到你的吗?",
    quote: true,
    self_rag: true,
    self_rag: false,
    system: "你是一个智能助手,请总结知识库的内容来回答问题,请列举知识库中的数据详细回答。当所有知识库内容都与问题无关时,你的回答必须包括“知识库中未找到您要的答案!”这句话。" +
      "回答需要考虑聊天历史。\n        以下是知识库:\n        {knowledge}\n        以上是知识库。",
    parameters: [
@@ -344,7 +309,15 @@
  rerank_id:'',
  top_k:1024,
});
const height = ref('calc(100vh - 520px)');
let temperature = ref(true);
let top_p = ref(true);
let presence_penalty = ref(true);
let frequency_penalty = ref(true);
let max_tokens = ref(true);
const httpUrl = localStorage.getItem('httpUrl');
let avatarShow = ref(false);
const height = ref('calc(500px)');
const props = defineProps(['typeAngint', 'formData']);
const emit = defineEmits(['queryList']);
const columns = [
@@ -369,26 +342,18 @@
  return `${(value / 100).toFixed(2)}`
};
const onChange = (_, currentFile) => {
  file.value = currentFile;
  convertImageToBase64(file.value.file).then((result) => {
    form.icon = result;
  });
const uploadAction = '/api/v1/llm/upload'; // 替换为你的上传API
const fileList = ref([]);
const imageUrls = ref([]);
const updateFileList = (newFileList) => {
  fileList.value = newFileList;
  console.log(newFileList, 88);
};
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 handleSuccess = (urls) => {
  imageUrls.value = urls; // 拿到上传的图片地址
  form.icon = urls[0];
};
const rules = {
@@ -448,15 +413,24 @@
  //   post: '',// 岗位
  //   txt: '',// 备注
  // });
  activeKey.value= '1'
  formRef.value.resetFields();
  formRef1.value.resetFields();
  formRef2.value.resetFields();
  nextTick(()=>{
    if(props.typeAngint=='add'){
      form.name = "";
      form.icon = "";
      form.prompt_config.system = "你是一个智能助手,请总结知识库的内容来回答问题,请列举知识库中的数据详细回答。当所有知识库内容都与问题无关时,你的回答必须包括“知识库中未找到您要的答案!”这句话。" +
        "回答需要考虑聊天历史。\n        以下是知识库:\n        {knowledge}\n        以上是知识库。";
  if(props.typeAngint=='add'){
    form.name = "";
    form.prompt_config.system = "你是一个智能助手,请总结知识库的内容来回答问题,请列举知识库中的数据详细回答。当所有知识库内容都与问题无关时,你的回答必须包括“知识库中未找到您要的答案!”这句话。" +
      "回答需要考虑聊天历史。\n        以下是知识库:\n        {knowledge}\n        以上是知识库。";
  }
    }
    console.log(form,'新建智能体弹窗');
    avatarShow.value = false;
    setTimeout(() => {
      avatarShow.value = true;
    },100);
  })
};
@@ -491,7 +465,7 @@
    setLoading(true)
    try {
      const data = await dialogSet(formNew);
      console.log(data, 'data');
      // console.log(data, 'data');
      if (data.code == 0){
        Message.success(title);
        handleCancel();
@@ -514,7 +488,7 @@
const editClick = (data) => {
  visible.value = true;
  nextTick(()=>{
    console.log(props.formData,'传入数据');
    // console.log(props.formData,'传入数据');
    Object.assign(form, props.formData);
    console.log(form,'表单数据');
  })
@@ -538,11 +512,16 @@
}
function handleTabChange(key) {
  // 处理标签改变事件
  console.log('Changed to tab:', key);
  activeKey.value=key;
}
const queryModel = async (params) => {
  try {
    const data = await queryModelList(params);
    console.log(data.data, '大模型列表');
    // console.log(data.data, '大模型列表');
    modelList.value = data.data;
    rankModelList.value = {
      BAAI: [data.data.BAAI[1]],
@@ -560,10 +539,10 @@
  setLoading(true);
  try {
    const { data } = await queryKbList(params);
    console.log(data, 'data');
    // console.log(data, 'data');
    nextTick(() => {
      tabs.value = data;
      console.log(tabs.value, 'tabs');
      // console.log(tabs.value, 'tabs');
    });
  } catch (err) {
    // you can report use errorHandler or other
@@ -579,6 +558,11 @@
onMounted(() => {});
onUnmounted(()=>{
})
</script>