From 9cc24ac5082c12ff3b0c651443c915d5ee743122 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 12 Aug 2024 11:46:19 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=A2=9E=E5=8A=A0AI=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/application/ApplicationSetting.vue  |  10 ++
 .../component/AIModeParamSettingDialog.vue    | 133 ++++++++++++++++++
 2 files changed, 143 insertions(+)
 create mode 100644 ui/src/views/application/component/AIModeParamSettingDialog.vue

diff --git a/ui/src/views/application/ApplicationSetting.vue b/ui/src/views/application/ApplicationSetting.vue
index cfcd11d5..a83a6fdb 100644
--- a/ui/src/views/application/ApplicationSetting.vue
+++ b/ui/src/views/application/ApplicationSetting.vue
@@ -67,6 +67,9 @@
                 <template #label>
                   <div class="flex-between">
                     <span>{{ $t('views.application.applicationForm.form.aiModel.label') }}</span>
+                    <!-- <el-button type="primary" link @click="openAIParamSettingDialog">
+                      {{ $t('views.application.applicationForm.form.paramSetting') }}
+                    </el-button> -->
                   </div>
                 </template>
                 <el-select
@@ -311,6 +314,7 @@
       </el-col>
     </el-row>
 
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
     <ParamSettingDialog ref="ParamSettingDialogRef" @refresh="refreshParam" />
     <AddDatasetDialog
       ref="AddDatasetDialogRef"
@@ -333,6 +337,7 @@
 import { reactive, ref, watch, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { groupBy } from 'lodash'
+import AIModeParamSettingDialog from './component/AIModeParamSettingDialog.vue'
 import ParamSettingDialog from './component/ParamSettingDialog.vue'
 import AddDatasetDialog from './component/AddDatasetDialog.vue'
 import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
@@ -358,6 +363,7 @@ const defaultPrompt = t('views.application.prompt.defaultPrompt', {
   question: '{question}'
 })
 
+const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
 const ParamSettingDialogRef = ref<InstanceType<typeof ParamSettingDialog>>()
 const createModelRef = ref<InstanceType<typeof CreateModelDialog>>()
 const selectProviderRef = ref<InstanceType<typeof SelectProviderDialog>>()
@@ -429,6 +435,10 @@ const submit = async (formEl: FormInstance | undefined) => {
   })
 }
 
+const openAIParamSettingDialog = () => {
+  AIModeParamSettingDialogRef.value?.open(applicationForm.value)
+}
+
 const openParamSettingDialog = () => {
   ParamSettingDialogRef.value?.open(applicationForm.value.dataset_setting)
 }
diff --git a/ui/src/views/application/component/AIModeParamSettingDialog.vue b/ui/src/views/application/component/AIModeParamSettingDialog.vue
new file mode 100644
index 00000000..ea7852c4
--- /dev/null
+++ b/ui/src/views/application/component/AIModeParamSettingDialog.vue
@@ -0,0 +1,133 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('views.application.applicationForm.dialogues.paramSettings')"
+    class="aiMode-param-dialog"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+  >
+    <el-form label-position="top" ref="paramFormRef" :model="form">
+      <el-form-item>
+        <template #label>
+          <div class="flex align-center">
+            <div class="flex-between mr-4">
+              <span>温度</span>
+            </div>
+            <el-tooltip effect="dark" placement="right">
+              <template #content
+                >较高的数值会使输出更加随机，而较低的数值会使其更加集中和确定</template
+              >
+              <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+            </el-tooltip>
+          </div>
+        </template>
+        <el-slider
+          v-model="form.similarity"
+          show-input
+          :show-input-controls="false"
+          :min="0"
+          :max="1"
+          :precision="2"
+          :step="0.01"
+          class="custom-slider"
+        />
+      </el-form-item>
+      <el-form-item>
+        <template #label>
+          <div class="flex align-center">
+            <div class="flex-between mr-4">
+              <span>输出最大Tokens</span>
+            </div>
+            <el-tooltip effect="dark" placement="right">
+              <template #content>指定模型可生成的最大token个数</template>
+              <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+            </el-tooltip>
+          </div>
+        </template>
+        <el-slider
+          v-model="form.max_paragraph_char_number"
+          show-input
+          :show-input-controls="false"
+          :min="1"
+          :max="10000"
+          class="custom-slider"
+        />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer p-16">
+        <el-button @click.prevent="dialogVisible = false">{{
+          $t('views.application.applicationForm.buttons.cancel')
+        }}</el-button>
+        <el-button type="primary" @click="submit(paramFormRef)" :loading="loading">
+          {{ $t('views.application.applicationForm.buttons.confirm') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { cloneDeep } from 'lodash'
+import type { FormInstance, FormRules } from 'element-plus'
+
+const emit = defineEmits(['refresh'])
+
+const paramFormRef = ref()
+
+const form = ref<any>({
+  similarity: 0.6,
+  max_paragraph_char_number: 5000
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      similarity: 0.6,
+      max_paragraph_char_number: 5000
+    }
+  }
+})
+
+const open = (data: any) => {
+  form.value = cloneDeep(data)
+
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      emit('refresh', form.value)
+      dialogVisible.value = false
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.aiMode-param-dialog {
+  padding: 8px 8px 24px 8px;
+  .el-dialog__header {
+    padding: 16px 16px 0 16px;
+  }
+  .el-dialog__body {
+    padding: 16px !important;
+  }
+  .dialog-max-height {
+    height: 550px;
+  }
+  .custom-slider {
+    .el-input-number.is-without-controls .el-input__wrapper {
+      padding: 0 !important;
+    }
+  }
+}
+</style>