Merge branch 'pr@main@model_embedding' of github.com:1Panel-dev/MaxKB into pr@main@model_embedding

ui/src/api/dataset.ts

@@ -129,11 +129,12 @@ const getDatasetDetail: (dataset_id: string, loading?: Ref<boolean>) => Promise<
       "desc": true
     }
  */
-const putDataset: (dataset_id: string, data: any) => Promise<Result<any>> = (
-  dataset_id,
-  data: any
-) => {
-  return put(`${prefix}/${dataset_id}`, data)
+const putDataset: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, data, loading) => {
+  return put(`${prefix}/${dataset_id}`, data, undefined, loading)
 }
 /**
  * 获取知识库 可关联的应用列表

ui/src/components/card-checkbox/index.vue

@@ -18,7 +18,8 @@
         </slot>
         <slot></slot>
       </div>
-      <el-checkbox v-bind:modelValue="modelValue.includes(toModelValue)"> </el-checkbox>
+      <el-checkbox v-bind:modelValue="modelValue.includes(toModelValue)" @change="checkboxChange">
+      </el-checkbox>
     </div>
   </el-card>
 </template>
@@ -40,7 +41,7 @@ const toModelValue = computed(() => (props.valueField ? props.data[props.valueFi
 //   set: (val) => val
 // })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'change'])
 
 const checked = () => {
   const value = props.modelValue ? props.modelValue : []
@@ -53,6 +54,10 @@ const checked = () => {
     emit('update:modelValue', [...value, toModelValue.value])
   }
 }
+
+function checkboxChange() {
+  emit('change')
+}
 </script>
 <style lang="scss" scoped>
 .card-checkbox {

ui/src/stores/modules/model.ts

@@ -1,11 +1,11 @@
 import { defineStore } from 'pinia'
 import modelApi from '@/api/model'
-import type { modelRequest, Provider } from '@/api/type/model'
+import type { ListModelRequest, Provider } from '@/api/type/model'
 const useModelStore = defineStore({
   id: 'model',
   state: () => ({}),
   actions: {
-    async asyncGetModel(data?: modelRequest) {
+    async asyncGetModel(data?: ListModelRequest) {
       return new Promise((resolve, reject) => {
         modelApi
           .getModel(data)

ui/src/views/application/component/AddDatasetDialog.vue

@@ -4,21 +4,28 @@
     v-model="dialogVisible"
     width="600"
     append-to-body
+    class="addDataset-dialog"
   >
     <template #header="{ titleId, titleClass }">
-      <div class="my-header flex">
+      <div class="flex-between mb-8">
         <h4 :id="titleId" :class="titleClass">
           {{ $t('views.application.applicationForm.dialogues.addDataset') }}
         </h4>
-        <el-button link class="ml-16" @click="refresh">
-          <el-icon class="mr-4"><Refresh /></el-icon
-          >{{ $t('views.application.applicationForm.dialogues.refresh') }}
-        </el-button>
+        <div class="flex align-center">
+          <el-button link class="ml-16" @click="refresh">
+            <el-icon class="mr-4"><Refresh /></el-icon
+            >{{ $t('views.application.applicationForm.dialogues.refresh') }}
+          </el-button>
+          <el-divider direction="vertical" />
+        </div>
       </div>
+      <el-text type="info" class="color-secondary">
+        所选知识库必须使用相同的 Embedding 模型
+      </el-text>
     </template>
     <el-row :gutter="12" v-loading="loading">
-      <el-col :span="12" v-for="(item, index) in data" :key="index" class="mb-16">
-        <CardCheckbox value-field="id" :data="item" v-model="checkList">
+      <el-col :span="12" v-for="(item, index) in filterData" :key="index" class="mb-16">
+        <CardCheckbox value-field="id" :data="item" v-model="checkList" @change="changeHandle">
           <span class="ellipsis">
             {{ item.name }}
           </span>
@@ -26,19 +33,29 @@
       </el-col>
     </el-row>
     <template #footer>
-      <span class="dialog-footer">
-        <el-button @click.prevent="dialogVisible = false">
-          {{ $t('views.application.applicationForm.buttons.cancel') }}
-        </el-button>
-        <el-button type="primary" @click="submitHandle">
-          {{ $t('views.application.applicationForm.buttons.confirm') }}
-        </el-button>
-      </span>
+      <div class="flex-between">
+        <div>
+          <el-text type="info" class="color-secondary" v-if="checkList.length > 0">
+            已选 {{ checkList.length }} 个知识库
+          </el-text>
+          <el-button link type="primary" v-if="checkList.length > 0" @click="clearCheck">
+            清空
+          </el-button>
+        </div>
+        <span>
+          <el-button @click.prevent="dialogVisible = false">
+            {{ $t('views.application.applicationForm.buttons.cancel') }}
+          </el-button>
+          <el-button type="primary" @click="submitHandle">
+            {{ $t('views.application.applicationForm.buttons.confirm') }}
+          </el-button>
+        </span>
+      </div>
     </template>
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 const props = defineProps({
   data: {
     type: Array<any>,
@@ -51,6 +68,13 @@ const emit = defineEmits(['addData', 'refresh'])
 
 const dialogVisible = ref<boolean>(false)
 const checkList = ref([])
+const currentEmbedding = ref('')
+
+const filterData = computed(() => {
+  return currentEmbedding.value
+    ? props.data.filter((v) => v.embedding_mode_id === currentEmbedding.value)
+    : props.data
+})
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
@@ -58,6 +82,18 @@ watch(dialogVisible, (bool) => {
   }
 })
 
+function changeHandle() {
+  if (checkList.value.length === 1) {
+    currentEmbedding.value = props.data.filter(
+      (v) => v.id === checkList.value[0]
+    )[0].embedding_mode_id
+  }
+}
+function clearCheck() {
+  checkList.value = []
+  currentEmbedding.value = ''
+}
+
 const open = (checked: any) => {
   checkList.value = checked
   dialogVisible.value = true
@@ -73,4 +109,13 @@ const refresh = () => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scope>
+.addDataset-dialog {
+  .el-dialog__header.show-close {
+    padding-right: 15px;
+  }
+  .el-dialog__headerbtn {
+    top: 13px;
+  }
+}
+</style>

ui/src/views/dataset/DatasetSetting.vue

@@ -105,7 +105,7 @@ import { useRoute } from 'vue-router'
 import BaseForm from '@/views/dataset/component/BaseForm.vue'
 import datasetApi from '@/api/dataset'
 import type { ApplicationFormType } from '@/api/type/application'
-import { MsgSuccess } from '@/utils/message'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { isAppIcon } from '@/utils/application'
 import useStore from '@/stores'
 const route = useRoute()
@@ -120,6 +120,8 @@ const loading = ref(false)
 const detail = ref<any>({})
 const application_list = ref<Array<ApplicationFormType>>([])
 const application_id_list = ref([])
+const cloneModelId = ref('')
+
 const form = ref<any>({
   source_url: '',
   selector: ''
@@ -133,7 +135,6 @@ async function submit() {
   if (await BaseFormRef.value?.validate()) {
     await webFormRef.value.validate((valid: any) => {
       if (valid) {
-        loading.value = true
         const obj =
           detail.value.type === '1'
             ? {
@@ -145,27 +146,49 @@ async function submit() {
                 application_id_list: application_id_list.value,
                 ...BaseFormRef.value.form
               }
-        datasetApi
-          .putDataset(id, obj)
-          .then((res) => {
+
+        if (cloneModelId.value !== BaseFormRef.value.form.embedding_mode_id) {
+          MsgConfirm(`提示`, `修改知识库向量模型后，需要对知识库重新向量化，是否继续保存？`, {
+            confirmButtonText: '重新向量化',
+            confirmButtonClass: 'primary'
+          })
+            .then(() => {
+              datasetApi.putDataset(id, obj, loading).then((res) => {
+                datasetApi.putReEmbeddingDataset(id).then(() => {
+                  MsgSuccess('保存成功')
+                })
+              })
+            })
+            .catch(() => {})
+        } else {
+          datasetApi.putDataset(id, obj, loading).then((res) => {
             MsgSuccess('保存成功')
-            loading.value = false
-          })
-          .catch(() => {
-            loading.value = false
           })
+        }
       }
     })
   }
 }
 
+function reEmbeddingDataset(row: any) {
+  datasetApi.putReEmbeddingDataset(row.id).then(() => {
+    MsgSuccess('提交成功')
+  })
+}
+
+function saveDataset(data: any) {
+  datasetApi.putDataset(id, data, loading).then((res) => {
+    MsgSuccess('保存成功')
+  })
+}
+
 function getDetail() {
   dataset.asyncGetDatasetDetail(id, loading).then((res: any) => {
     detail.value = res.data
+    cloneModelId.value = res.data?.embedding_mode_id
     if (detail.value.type === '1') {
       form.value = res.data.meta
     }
-
     application_id_list.value = res.data?.application_id_list
     datasetApi.listUsableApplication(id, loading).then((ok) => {
       application_list.value = ok.data

ui/src/views/dataset/component/BaseForm.vue

@@ -5,6 +5,7 @@
     :rules="rules"
     label-position="top"
     require-asterisk-position="right"
+    v-loading="loading"
   >
     <el-form-item label="知识库名称" prop="name">
       <el-input
@@ -29,23 +30,69 @@
     <el-form-item label="Embedding模型" prop="embedding_mode_id">
       <el-select
         v-model="form.embedding_mode_id"
-        class="w-full m-2"
         placeholder="请选择Embedding模型"
+        class="w-full"
+        popper-class="select-model"
+        :clearable="true"
       >
-        <el-option
-          v-for="item in modelOptions"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        ></el-option>
+        <el-option-group
+          v-for="(value, label) in modelOptions"
+          :key="value"
+          :label="relatedObject(providerOptions, label, 'provider')?.name"
+        >
+          <el-option
+            v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+            class="flex-between"
+          >
+            <div class="flex">
+              <span
+                v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                class="model-icon mr-8"
+              ></span>
+              <span>{{ item.name }}</span>
+            </div>
+            <el-icon class="check-icon" v-if="item.id === form.embedding_mode_id"
+              ><Check
+            /></el-icon>
+          </el-option>
+          <!-- 不可用 -->
+          <el-option
+            v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+            class="flex-between"
+            disabled
+          >
+            <div class="flex">
+              <span
+                v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                class="model-icon mr-8"
+              ></span>
+              <span>{{ item.name }}</span>
+              <span class="danger">{{
+                $t('views.application.applicationForm.form.aiModel.unavailable')
+              }}</span>
+            </div>
+            <el-icon class="check-icon" v-if="item.id === form.embedding_mode_id"
+              ><Check
+            /></el-icon>
+          </el-option>
+        </el-option-group>
       </el-select>
     </el-form-item>
   </el-form>
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
+import { groupBy } from 'lodash'
 import useStore from '@/stores'
 import type { datasetData } from '@/api/type/dataset'
+import { relatedObject } from '@/utils/utils'
+import type { Provider } from '@/api/type/model'
 
 const props = defineProps({
   data: {
@@ -65,8 +112,11 @@ const rules = reactive({
   desc: [{ required: true, message: '请输入知识库描述', trigger: 'blur' }],
   embedding_mode_id: [{ required: true, message: '请输入Embedding模型', trigger: 'change' }]
 })
+
 const FormRef = ref()
-const modelOptions = ref([])
+const loading = ref(false)
+const modelOptions = ref<any>([])
+const providerOptions = ref<Array<Provider>>([])
 
 watch(
   () => props.data,
@@ -91,12 +141,33 @@ function validate() {
 }
 
 function getModel() {
-  model.asyncGetModel({ model_type: 'EMBEDDING' }).then((res: any) => {
-    modelOptions.value = res?.data
-  })
+  loading.value = true
+  model
+    .asyncGetModel({ model_type: 'EMBEDDING' })
+    .then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getProvider() {
+  loading.value = true
+  model
+    .asyncGetProvider()
+    .then((res: any) => {
+      providerOptions.value = res?.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
 }
 
 onMounted(() => {
+  getProvider()
   getModel()
 })
 onUnmounted(() => {

ui/src/views/log/component/EditMarkDialog.vue

@@ -141,4 +141,13 @@ const submit = async (formEl: FormInstance) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scope>
+.edit-mark-dialog {
+  .el-dialog__header.show-close {
+    padding-right: 15px;
+  }
+  .el-dialog__headerbtn {
+    top: 13px;
+  }
+}
+</style>