【代码重构】AI：“聊天模型”重构为“模型”，支持 type 模型类型

Author: YunaiV

src/api/ai/image/index.ts

@@ -20,9 +20,8 @@ export interface ImageVO {
 }
 
 export interface ImageDrawReqVO {
-  platform: string // 平台
   prompt: string // 提示词
-  model: string // 模型
+  modelId: number // 模型
   style: string // 图像生成的风格
   width: string // 图片宽度
   height: string // 图片高度
@@ -31,7 +30,7 @@ export interface ImageDrawReqVO {
 
 export interface ImageMidjourneyImagineReqVO {
   prompt: string // 提示词
-  model: string // 模型 mj nijj
+  modelId: number // 模型
   base64Array: string[] // size不能为空
   width: string // 图片宽度
   height: string // 图片高度

src/api/ai/model/chatModel/index.ts

@@ -0,0 +1,54 @@
+import request from '@/config/axios'
+
+// AI 聊天模型 VO
+export interface ModelVO {
+  id: number // 编号
+  keyId: number // API 秘钥编号
+  name: string // 模型名字
+  model: string // 模型标识
+  platform: string // 模型平台
+  type: number // 模型类型
+  sort: number // 排序
+  status: number // 状态
+  temperature?: number // 温度参数
+  maxTokens?: number // 单条回复的最大 Token 数量
+  maxContexts?: number // 上下文的最大 Message 数量
+}
+
+// AI 模型 API
+export const ModelApi = {
+  // 查询模型分页
+  getModelPage: async (params: any) => {
+    return await request.get({ url: `/ai/model/page`, params })
+  },
+
+  // 获得模型列表
+  getModelSimpleList: async (type?: number) => {
+    return await request.get({
+      url: `/ai/model/simple-list`,
+      params: {
+        type
+      }
+    })
+  },
+
+  // 查询模型详情
+  getModel: async (id: number) => {
+    return await request.get({ url: `/ai/model/get?id=` + id })
+  },
+
+  // 新增模型
+  createModel: async (data: ModelVO) => {
+    return await request.post({ url: `/ai/model/create`, data })
+  },
+
+  // 修改聊天模型
+  updateModel: async (data: ModelVO) => {
+    return await request.put({ url: `/ai/model/update`, data })
+  },
+
+  // 删除聊天模型
+  deleteModel: async (id: number) => {
+    return await request.delete({ url: `/ai/model/delete?id=` + id })
+  }
+}

src/api/ai/model/model/index.ts

@@ -219,6 +219,7 @@ export enum DICT_TYPE {
 
   // ========== AI - 人工智能模块  ==========
   AI_PLATFORM = 'ai_platform', // AI 平台
+  AI_MODEL_TYPE = 'ai_model_type', // AI 模型类型
   AI_IMAGE_STATUS = 'ai_image_status', // AI 图片状态
   AI_MUSIC_STATUS = 'ai_music_status', // AI 音乐状态
   AI_GENERATE_MODE = 'ai_generate_mode', // AI 生成模式

src/utils/dict.ts

@@ -58,9 +58,9 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { CommonStatusEnum } from '@/utils/constants'
-import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
+import { ModelApi, ModelVO } from '@/api/ai/model/model'
 import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
+import { AiModelTypeEnum } from '@/views/ai/utils/constants'
 
 /** AI 聊天对话的更新表单 */
 defineOptions({ name: 'ChatConversationUpdateForm' })
@@ -85,7 +85,7 @@ const formRules = reactive({
   maxContexts: [{ required: true, message: '上下文数量不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-const chatModelList = ref([] as ChatModelVO[]) // 聊天模型列表
+const chatModelList = ref([] as ModelVO[]) // 聊天模型列表
 
 /** 打开弹窗 */
 const open = async (id: number) => {
@@ -107,7 +107,7 @@ const open = async (id: number) => {
     }
   }
   // 获得下拉数据
-  chatModelList.value = await ChatModelApi.getChatModelSimpleList(CommonStatusEnum.ENABLE)
+  chatModelList.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.CHAT)
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 

src/views/ai/chat/index/components/conversation/ConversationUpdateForm.vue

@@ -41,9 +41,9 @@
 </template>
 
 <script setup lang="ts">
-import {ChatRoleVO} from '@/api/ai/model/chatRole'
-import {PropType, ref} from 'vue'
-import {More} from '@element-plus/icons-vue'
+import { ChatRoleVO } from '@/api/ai/model/chatRole'
+import { PropType, ref } from 'vue'
+import { More } from '@element-plus/icons-vue'
 
 const tabsRef = ref<any>() // tabs ref
 

src/views/ai/chat/index/components/role/RoleList.vue

@@ -2,11 +2,11 @@
 <template>
   <div class="prompt">
     <el-text tag="b">画面描述</el-text>
-    <el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开</el-text>
+    <el-text tag="p">建议使用“形容词 + 动词 + 风格”的格式，使用“，”隔开</el-text>
     <el-input
       v-model="prompt"
       maxlength="1024"
-      rows="5"
+      :rows="5"
       class="w-100% mt-15px"
       input-style="border-radius: 7px;"
       placeholder="例如：童话里的小屋应该是什么样子？"
@@ -57,8 +57,13 @@
       <el-text tag="b">模型</el-text>
     </div>
     <el-space wrap class="group-item-body">
-      <el-select v-model="model" placeholder="Select" size="large" class="!w-350px">
-        <el-option v-for="item in models" :key="item.key" :label="item.name" :value="item.key" />
+      <el-select v-model="modelId" placeholder="Select" size="large" class="!w-350px">
+        <el-option
+          v-for="item in platformModels"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
       </el-select>
     </el-space>
   </div>
@@ -72,25 +77,34 @@
     </el-space>
   </div>
   <div class="btns">
-    <el-button type="primary" size="large" round :loading="drawIn" @click="handleGenerateImage">
+    <el-button
+      type="primary"
+      size="large"
+      round
+      :loading="drawIn"
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
       {{ drawIn ? '生成中' : '生成内容' }}
     </el-button>
   </div>
 </template>
 <script setup lang="ts">
 import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
-import {
-  AiPlatformEnum,
-  ChatGlmModels,
-  ImageHotWords,
-  ImageModelVO,
-  OtherPlatformEnum,
-  QianFanModels,
-  TongYiWanXiangModels
-} from '@/views/ai/utils/constants'
+import { AiPlatformEnum, ImageHotWords, OtherPlatformEnum } from '@/views/ai/utils/constants'
+import { ModelVO } from '@/api/ai/model/model'
 
 const message = useMessage() // 消息弹窗
 
+// 接收父组件传入的模型列表
+const props = defineProps({
+  models: {
+    type: Array<ModelVO>,
+    default: () => [] as ModelVO[]
+  }
+})
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
+
 // 定义属性
 const drawIn = ref<boolean>(false) // 生成中
 const selectHotWord = ref<string>('') // 选中的热词
@@ -99,10 +113,8 @@ const prompt = ref<string>('') // 提示词
 const width = ref<number>(512) // 图片宽度
 const height = ref<number>(512) // 图片高度
 const otherPlatform = ref<string>(AiPlatformEnum.TONG_YI) // 平台
-const models = ref<ImageModelVO[]>(TongYiWanXiangModels) // 模型  TongYiWanXiangModels、QianFanModels
-const model = ref<string>(models.value[0].key) // 模型
-
-const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
+const platformModels = ref<ModelVO[]>([]) // 模型列表
+const modelId = ref<number>() // 选中的模型
 
 /** 选择热词 */
 const handleHotWordClick = async (hotWord: string) => {
@@ -125,11 +137,11 @@ const handleGenerateImage = async () => {
     // 加载中
     drawIn.value = true
     // 回调
-    emits('onDrawStart', AiPlatformEnum.STABLE_DIFFUSION)
+    emits('onDrawStart', otherPlatform.value)
     // 发送请求
     const form = {
       platform: otherPlatform.value,
-      model: model.value, // 模型
+      modelId: modelId.value, // 模型
       prompt: prompt.value, // 提示词
       width: width.value, // 图片宽度
       height: height.value, // 图片高度
@@ -138,7 +150,7 @@ const handleGenerateImage = async () => {
     await ImageApi.drawImage(form)
   } finally {
     // 回调
-    emits('onDrawComplete', AiPlatformEnum.STABLE_DIFFUSION)
+    emits('onDrawComplete', otherPlatform.value)
     // 加载结束
     drawIn.value = false
   }
@@ -153,33 +165,29 @@ const settingValues = async (detail: ImageVO) => {
 
 /** 平台切换 */
 const handlerPlatformChange = async (platform: string) => {
-  // 切换平台，切换模型、风格
-  if (AiPlatformEnum.TONG_YI === platform) {
-    models.value = TongYiWanXiangModels
-  } else if (AiPlatformEnum.YI_YAN === platform) {
-    models.value = QianFanModels
-  } else if (AiPlatformEnum.ZHI_PU === platform) {
-    models.value = ChatGlmModels
-  } else {
-    models.value = []
-  }
-  // 切换平台，默认选择一个风格
-  if (models.value.length > 0) {
-    model.value = models.value[0].key
+  // 根据选择的平台筛选模型
+  platformModels.value = props.models.filter((item: ModelVO) => item.platform === platform)
+
+  // 切换平台，默认选择一个模型
+  if (platformModels.value.length > 0) {
+    modelId.value = platformModels.value[0].id // 使用 model 属性作为值
   } else {
-    model.value = ''
+    modelId.value = undefined
   }
 }
 
+/** 监听 models 变化 */
+watch(
+  () => props.models,
+  () => {
+    handlerPlatformChange(otherPlatform.value)
+  },
+  { immediate: true, deep: true }
+)
 /** 暴露组件方法 */
 defineExpose({ settingValues })
 </script>
 <style scoped lang="scss">
-// 提示词
-.prompt {
-}
-
-// 热词
 .hot-words {
   display: flex;
   flex-direction: column;