💄 style: Allow switching model type (lobehub#9529)

Author: sxjeru

packages/database/src/repositories/aiInfra/index.ts

@@ -128,7 +128,7 @@ export class AiInfraRepos {
               providerId: provider.id,
               settings: item.settings,
               sort: user.sort || undefined,
-              type: item.type,
+              type: user.type || item.type,
             };
           })
           .filter((item) => (filterEnabled ? item.enabled : true));

packages/model-bank/src/types/aiModel.ts

@@ -327,6 +327,7 @@ export const CreateAiModelSchema = z.object({
   id: z.string(),
   providerId: z.string(),
   releasedAt: z.string().optional(),
+  type: AiModelTypeSchema.optional(),
 
   // checkModel: z.string().optional(),
   // homeUrl: z.string().optional(),
@@ -362,6 +363,7 @@ export const UpdateAiModelSchema = z.object({
     .optional(),
   contextWindowTokens: z.number().nullable().optional(),
   displayName: z.string().nullable().optional(),
+  type: AiModelTypeSchema.optional(),
 });
 
 export type UpdateAiModelParams = z.infer<typeof UpdateAiModelSchema>;

src/app/[variants]/(main)/settings/provider/features/ModelList/CreateNewModelModal/Form.tsx

@@ -1,13 +1,14 @@
 import { Input } from '@lobehub/ui';
-import { Checkbox, Form, FormInstance } from 'antd';
-import { memo, useEffect } from 'react';
+import { Checkbox, Form, FormInstance, Select } from 'antd';
+import { memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import MaxTokenSlider from '@/components/MaxTokenSlider';
 import { useIsMobile } from '@/hooks/useIsMobile';
-import { AiModelType } from '../../../../../../../../../packages/model-bank/src/types/aiModel';
 import { ChatModelCard } from '@/types/llm';
 
+import { AiModelType } from '../../../../../../../../../packages/model-bank/src/types/aiModel';
+
 interface ModelConfigFormProps {
   idEditable?: boolean;
   initialValues?: ChatModelCard;
@@ -24,6 +25,30 @@ const ModelConfigForm = memo<ModelConfigFormProps>(
 
     const isMobile = useIsMobile();
 
+    const modelTypeOptions = useMemo(
+      () =>
+        (
+          [
+            'chat',
+            'embedding',
+            'tts',
+            'stt',
+            'image',
+            // 'text2video',
+            // 'text2music',
+            'realtime',
+          ] as AiModelType[]
+        ).map((value) => {
+          const label = t(`providerModels.item.modelConfig.type.options.${value}`);
+
+          return {
+            label: label !== value ? `${label} (${value})` : label,
+            value,
+          };
+        }),
+      [t],
+    );
+
     useEffect(() => {
       onFormInstanceReady(formInstance);
     }, []);
@@ -102,6 +127,16 @@ const ModelConfigForm = memo<ModelConfigFormProps>(
           >
             <Checkbox />
           </Form.Item>
+          <Form.Item
+            extra={t('providerModels.item.modelConfig.type.extra')}
+            label={t('providerModels.item.modelConfig.type.title')}
+            name={'type'}
+          >
+            <Select
+              options={modelTypeOptions}
+              placeholder={t('providerModels.item.modelConfig.type.placeholder')}
+            />
+          </Form.Item>
           {/*<Form.Item*/}
           {/*  extra={t('providerModels.item.modelConfig.files.extra')}*/}
           {/*  label={t('providerModels.item.modelConfig.files.title')}*/}

src/locales/default/modelProvider.ts

@@ -299,6 +299,21 @@ export default {
           title: '最大上下文窗口',
           unlimited: '无限制',
         },
+        type: {
+          extra: '不同模型类型拥有差异化的使用场景与能力',
+          options: {
+            chat: '对话',
+            embedding: '向量化',
+            image: '图片生成',
+            realtime: '实时对话',
+            stt: '语音转文本',
+            text2music: '文本转音乐',
+            text2video: '文本转视频',
+            tts: '语音合成',
+          },
+          placeholder: '请选择模型类型',
+          title: '模型类型',
+        },
         vision: {
           extra:
             '此配置将仅开启应用中的图片上传配置，是否支持识别完全取决于模型本身，请自行测试该模型的视觉识别能力可用性',

src/store/aiInfra/slices/aiProvider/action.ts

@@ -160,7 +160,10 @@ export const createAiProviderSlice: StateCreator<
     await get().refreshAiProviderRuntimeState();
   },
   refreshAiProviderRuntimeState: async () => {
-    await mutate([AiProviderSwrKey.fetchAiProviderRuntimeState, true]);
+    await Promise.all([
+      mutate([AiProviderSwrKey.fetchAiProviderRuntimeState, true]),
+      mutate([AiProviderSwrKey.fetchAiProviderRuntimeState, false]),
+    ]);
   },
   removeAiProvider: async (id) => {
     await aiProviderService.deleteAiProvider(id);