306 lines
11 KiB
TypeScript
306 lines
11 KiB
TypeScript
|
import React, { useEffect, useMemo } from 'react';
|
||
|
|
import {
|
||
|
|
Dialog,
|
||
|
|
DialogTitle,
|
||
|
|
DialogContent,
|
||
|
|
DialogActions,
|
||
|
|
Button,
|
||
|
|
FormControl,
|
||
|
|
InputLabel,
|
||
|
|
Select,
|
||
|
|
MenuItem,
|
||
|
|
Box,
|
||
|
|
Typography,
|
||
|
|
CircularProgress,
|
||
|
|
ListSubheader,
|
||
|
|
} from '@mui/material';
|
||
|
|
import { useForm, Controller } from 'react-hook-form';
|
||
|
|
import { LlmSvgIcon } from '@/components/AppSvgIcon';
|
||
|
|
import { IconMap, type LLMFactory } from '@/constants/llm';
|
||
|
|
import type { ITenantInfo } from '@/interfaces/database/knowledge';
|
||
|
|
import type { LlmModelType } from '@/constants/knowledge';
|
||
|
|
import type { IMyLlmModel, IThirdOAIModel } from '@/interfaces/database/llm';
|
||
|
|
|
||
|
|
interface AllModelOptionItem {
|
||
|
|
label: string;
|
||
|
|
options: {
|
||
|
|
value: string;
|
||
|
|
label: string;
|
||
|
|
disabled: boolean;
|
||
|
|
model: IThirdOAIModel
|
||
|
|
}[];
|
||
|
|
}
|
||
|
|
|
||
|
|
// 导出接口供其他文件使用
|
||
|
|
export interface SystemModelFormData extends Partial<ITenantInfo> { }
|
||
|
|
|
||
|
|
// 系统默认模型设置对话框
|
||
|
|
export interface SystemModelDialogProps {
|
||
|
|
open: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
loading: boolean;
|
||
|
|
editMode?: boolean;
|
||
|
|
onSubmit: (data: SystemModelFormData) => Promise<void>;
|
||
|
|
initialData?: Partial<ITenantInfo>;
|
||
|
|
allModelOptions: Record<string, AllModelOptionItem[]>;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export interface ModelOption {
|
||
|
|
value: string;
|
||
|
|
label: string;
|
||
|
|
disabled: boolean;
|
||
|
|
model: IThirdOAIModel;
|
||
|
|
}
|
||
|
|
export interface ModelGroup {
|
||
|
|
label: string;
|
||
|
|
options: ModelOption[];
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 系统默认模型设置对话框
|
||
|
|
*/
|
||
|
|
function SystemModelDialog({
|
||
|
|
open,
|
||
|
|
onClose,
|
||
|
|
onSubmit,
|
||
|
|
loading,
|
||
|
|
initialData,
|
||
|
|
editMode = false,
|
||
|
|
allModelOptions
|
||
|
|
}: SystemModelDialogProps) {
|
||
|
|
const { control, handleSubmit, reset, formState: { errors } } = useForm<ITenantInfo>({
|
||
|
|
defaultValues: {}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 获取工厂图标名称
|
||
|
|
const getFactoryIconName = (factoryName: LLMFactory) => {
|
||
|
|
return IconMap[factoryName] || 'default';
|
||
|
|
};
|
||
|
|
|
||
|
|
// all model options 包含了全部的 options
|
||
|
|
const llmOptions = useMemo(() => allModelOptions?.llmOptions || [], [allModelOptions]);
|
||
|
|
const embdOptions = useMemo(() => allModelOptions?.embeddingOptions || [], [allModelOptions]);
|
||
|
|
const img2txtOptions = useMemo(() => allModelOptions?.image2textOptions || [], [allModelOptions]);
|
||
|
|
const asrOptions = useMemo(() => allModelOptions?.speech2textOptions || [], [allModelOptions]);
|
||
|
|
const ttsOptions = useMemo(() => allModelOptions?.ttsOptions || [], [allModelOptions]);
|
||
|
|
const rerankOptions = useMemo(() => allModelOptions?.rerankOptions || [], [allModelOptions]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (open && initialData) {
|
||
|
|
reset(initialData);
|
||
|
|
} else if (open) {
|
||
|
|
reset({
|
||
|
|
llm_id: '',
|
||
|
|
embd_id: '',
|
||
|
|
img2txt_id: '',
|
||
|
|
asr_id: '',
|
||
|
|
tts_id: '',
|
||
|
|
rerank_id: '',
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, [open, initialData, reset]);
|
||
|
|
|
||
|
|
const handleFormSubmit = async (data: ITenantInfo) => {
|
||
|
|
try {
|
||
|
|
await onSubmit(data);
|
||
|
|
onClose();
|
||
|
|
} catch (error) {
|
||
|
|
console.error('提交失败:', error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
||
|
|
<DialogTitle>
|
||
|
|
设置默认模型
|
||
|
|
</DialogTitle>
|
||
|
|
<DialogContent>
|
||
|
|
<Box component="form" sx={{ mt: 2 }}>
|
||
|
|
<Controller
|
||
|
|
name="llm_id"
|
||
|
|
control={control}
|
||
|
|
rules={{ required: '聊天模型是必填项' }}
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormControl fullWidth margin="normal" error={!!errors.llm_id}>
|
||
|
|
<InputLabel>聊天模型</InputLabel>
|
||
|
|
<Select {...field} label="聊天模型">
|
||
|
|
{llmOptions.map((group) => [
|
||
|
|
<ListSubheader key={group.label}>{group.label}</ListSubheader>,
|
||
|
|
...group.options.map((option) => (
|
||
|
|
<MenuItem key={option.value} value={option.value} disabled={option.disabled}>
|
||
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
|
|
<LlmSvgIcon
|
||
|
|
name={getFactoryIconName(group.label as LLMFactory)}
|
||
|
|
sx={{ width: 20, height: 20, color: 'primary.main' }}
|
||
|
|
/>
|
||
|
|
{option.label}
|
||
|
|
</Box>
|
||
|
|
</MenuItem>
|
||
|
|
))
|
||
|
|
])}
|
||
|
|
</Select>
|
||
|
|
{errors.llm_id && (
|
||
|
|
<Typography variant="caption" color="error" sx={{ mt: 1, ml: 2 }}>
|
||
|
|
{errors.llm_id.message}
|
||
|
|
</Typography>
|
||
|
|
)}
|
||
|
|
</FormControl>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Controller
|
||
|
|
name="embd_id"
|
||
|
|
control={control}
|
||
|
|
rules={{ required: '嵌入模型是必填项' }}
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormControl fullWidth margin="normal" error={!!errors.embd_id}>
|
||
|
|
<InputLabel>嵌入模型</InputLabel>
|
||
|
|
<Select {...field} label="嵌入模型">
|
||
|
|
{embdOptions.map((group) => [
|
||
|
|
<ListSubheader key={group.label}>{group.label}</ListSubheader>,
|
||
|
|
...group.options.map((option) => (
|
||
|
|
<MenuItem key={option.value} value={option.value} disabled={option.disabled}>
|
||
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
|
|
<LlmSvgIcon
|
||
|
|
name={getFactoryIconName(group.label as LLMFactory)}
|
||
|
|
sx={{ width: 20, height: 20, color: 'primary.main' }}
|
||
|
|
/>
|
||
|
|
{option.label}
|
||
|
|
</Box>
|
||
|
|
</MenuItem>
|
||
|
|
))
|
||
|
|
])}
|
||
|
|
</Select>
|
||
|
|
{errors.embd_id && (
|
||
|
|
<Typography variant="caption" color="error" sx={{ mt: 1, ml: 2 }}>
|
||
|
|
{errors.embd_id.message}
|
||
|
|
</Typography>
|
||
|
|
)}
|
||
|
|
</FormControl>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Controller
|
||
|
|
name="img2txt_id"
|
||
|
|
control={control}
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormControl fullWidth margin="normal">
|
||
|
|
<InputLabel>Img2txt模型</InputLabel>
|
||
|
|
<Select {...field} label="Img2txt模型">
|
||
|
|
{img2txtOptions.map((group) => [
|
||
|
|
<ListSubheader key={group.label}>{group.label}</ListSubheader>,
|
||
|
|
...group.options.map((option) => (
|
||
|
|
<MenuItem key={option.value} value={option.value} disabled={option.disabled}>
|
||
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
|
|
<LlmSvgIcon
|
||
|
|
name={getFactoryIconName(group.label as LLMFactory)}
|
||
|
|
sx={{ width: 20, height: 20, color: 'primary.main' }}
|
||
|
|
/>
|
||
|
|
{option.label}
|
||
|
|
</Box>
|
||
|
|
</MenuItem>
|
||
|
|
))
|
||
|
|
])}
|
||
|
|
</Select>
|
||
|
|
</FormControl>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Controller
|
||
|
|
name="asr_id"
|
||
|
|
control={control}
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormControl fullWidth margin="normal">
|
||
|
|
<InputLabel>Speech2txt模型</InputLabel>
|
||
|
|
<Select {...field} label="Speech2txt模型">
|
||
|
|
{asrOptions.map((group) => [
|
||
|
|
<ListSubheader key={group.label}>{group.label}</ListSubheader>,
|
||
|
|
...group.options.map((option) => (
|
||
|
|
<MenuItem key={option.value} value={option.value} disabled={option.disabled}>
|
||
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
|
|
<LlmSvgIcon
|
||
|
|
name={getFactoryIconName(group.label as LLMFactory)}
|
||
|
|
sx={{ width: 20, height: 20, color: 'primary.main' }}
|
||
|
|
/>
|
||
|
|
{option.label}
|
||
|
|
</Box>
|
||
|
|
</MenuItem>
|
||
|
|
))
|
||
|
|
])}
|
||
|
|
</Select>
|
||
|
|
</FormControl>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Controller
|
||
|
|
name="rerank_id"
|
||
|
|
control={control}
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormControl fullWidth margin="normal">
|
||
|
|
<InputLabel>Rerank模型</InputLabel>
|
||
|
|
<Select {...field} label="Rerank模型">
|
||
|
|
{rerankOptions.map((group) => [
|
||
|
|
<ListSubheader key={group.label}>{group.label}</ListSubheader>,
|
||
|
|
...group.options.map((option) => (
|
||
|
|
<MenuItem key={option.value} value={option.value} disabled={option.disabled}>
|
||
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
|
|
<LlmSvgIcon
|
||
|
|
name={getFactoryIconName(group.label as LLMFactory)}
|
||
|
|
sx={{ width: 20, height: 20, color: 'primary.main' }}
|
||
|
|
/>
|
||
|
|
{option.label}
|
||
|
|
</Box>
|
||
|
|
</MenuItem>
|
||
|
|
))
|
||
|
|
])}
|
||
|
|
</Select>
|
||
|
|
</FormControl>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Controller
|
||
|
|
name="tts_id"
|
||
|
|
control={control}
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormControl fullWidth margin="normal">
|
||
|
|
<InputLabel>TTS模型</InputLabel>
|
||
|
|
<Select {...field} label="TTS模型">
|
||
|
|
{ttsOptions.map((group) => [
|
||
|
|
<ListSubheader key={group.label}>{group.label}</ListSubheader>,
|
||
|
|
...group.options.map((option) => (
|
||
|
|
<MenuItem key={option.value} value={option.value} disabled={option.disabled}>
|
||
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
|
|
<LlmSvgIcon
|
||
|
|
name={getFactoryIconName(group.label as LLMFactory)}
|
||
|
|
sx={{ width: 20, height: 20, color: 'primary.main' }}
|
||
|
|
/>
|
||
|
|
{option.label}
|
||
|
|
</Box>
|
||
|
|
</MenuItem>
|
||
|
|
))
|
||
|
|
])}
|
||
|
|
</Select>
|
||
|
|
</FormControl>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
</DialogContent>
|
||
|
|
<DialogActions>
|
||
|
|
<Button onClick={onClose} disabled={loading}>
|
||
|
|
取消
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
onClick={handleSubmit(handleFormSubmit)}
|
||
|
|
variant="contained"
|
||
|
|
disabled={loading}
|
||
|
|
startIcon={loading ? <CircularProgress size={20} /> : null}
|
||
|
|
>
|
||
|
|
确定
|
||
|
|
</Button>
|
||
|
|
</DialogActions>
|
||
|
|
</Dialog>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SystemModelDialog;
|