feat: 模型数据管理
feat: 模型数据导入 feat: redis 向量入库 feat: 向量索引 feat: 文件导入模型 perf: 交互 perf: prompt
This commit is contained in:
archer
138
src/pages/model/list/components/CreateModel.tsx
Normal file
138
src/pages/model/list/components/CreateModel.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import React, { Dispatch, useState, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalFooter,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
Button,
|
||||
useToast,
|
||||
Input,
|
||||
Select,
|
||||
Box
|
||||
} from '@chakra-ui/react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { postCreateModel } from '@/api/model';
|
||||
import type { ModelSchema } from '@/types/mongoSchema';
|
||||
import { modelList } from '@/constants/model';
|
||||
import { formatPrice } from '@/utils/user';
|
||||
|
||||
interface CreateFormType {
|
||||
name: string;
|
||||
serviceModelName: string;
|
||||
}
|
||||
|
||||
const CreateModel = ({
|
||||
setCreateModelOpen,
|
||||
onSuccess
|
||||
}: {
|
||||
setCreateModelOpen: Dispatch<boolean>;
|
||||
onSuccess: Dispatch<ModelSchema>;
|
||||
}) => {
|
||||
const [requesting, setRequesting] = useState(false);
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const toast = useToast({
|
||||
duration: 2000,
|
||||
position: 'top'
|
||||
});
|
||||
const {
|
||||
getValues,
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors }
|
||||
} = useForm<CreateFormType>({
|
||||
defaultValues: {
|
||||
serviceModelName: modelList[0].model
|
||||
}
|
||||
});
|
||||
|
||||
const handleCreateModel = useCallback(
|
||||
async (data: CreateFormType) => {
|
||||
setRequesting(true);
|
||||
try {
|
||||
const res = await postCreateModel(data);
|
||||
toast({
|
||||
title: '创建成功',
|
||||
status: 'success'
|
||||
});
|
||||
onSuccess(res);
|
||||
setCreateModelOpen(false);
|
||||
} catch (err: any) {
|
||||
toast({
|
||||
title: typeof err === 'string' ? err : err.message || '出现了意外',
|
||||
status: 'error'
|
||||
});
|
||||
}
|
||||
setRequesting(false);
|
||||
},
|
||||
[onSuccess, setCreateModelOpen, toast]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal isOpen={true} onClose={() => setCreateModelOpen(false)}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>创建模型</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
|
||||
<ModalBody>
|
||||
<FormControl mb={8} isInvalid={!!errors.name}>
|
||||
<Input
|
||||
placeholder="模型名称"
|
||||
{...register('name', {
|
||||
required: '模型名不能为空'
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage position={'absolute'} fontSize="xs">
|
||||
{!!errors.name && errors.name.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
<FormControl isInvalid={!!errors.serviceModelName}>
|
||||
<Select
|
||||
placeholder="选择基础模型类型"
|
||||
{...register('serviceModelName', {
|
||||
required: '底层模型不能为空',
|
||||
onChange() {
|
||||
setRefresh(!refresh);
|
||||
}
|
||||
})}
|
||||
>
|
||||
{modelList.map((item) => (
|
||||
<option key={item.model} value={item.model}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
<FormErrorMessage position={'absolute'} fontSize="xs">
|
||||
{!!errors.serviceModelName && errors.serviceModelName.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
<Box mt={3} textAlign={'center'} fontSize={'sm'} color={'blackAlpha.600'}>
|
||||
{formatPrice(
|
||||
modelList.find((item) => item.model === getValues('serviceModelName'))?.price || 0,
|
||||
1000
|
||||
)}
|
||||
元/1K tokens(包括上下文和标点符号)
|
||||
</Box>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<Button mr={3} colorScheme={'gray'} onClick={() => setCreateModelOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button isLoading={requesting} onClick={handleSubmit(handleCreateModel)}>
|
||||
确认创建
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateModel;
|
||||
80
src/pages/model/list/components/ModelPhoneList.tsx
Normal file
80
src/pages/model/list/components/ModelPhoneList.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Box, Button, Flex, Tag } from '@chakra-ui/react';
|
||||
import type { ModelSchema } from '@/types/mongoSchema';
|
||||
import { formatModelStatus } from '@/constants/model';
|
||||
import dayjs from 'dayjs';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
const ModelPhoneList = ({
|
||||
models,
|
||||
handlePreviewChat
|
||||
}: {
|
||||
models: ModelSchema[];
|
||||
handlePreviewChat: (_: string) => void;
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
router.prefetch('/chat');
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<Box borderRadius={'md'} overflow={'hidden'} mb={5}>
|
||||
{models.map((model) => (
|
||||
<Box
|
||||
key={model._id}
|
||||
_notFirst={{ borderTop: '1px solid rgba(0,0,0,0.1)' }}
|
||||
px={6}
|
||||
py={3}
|
||||
backgroundColor={'white'}
|
||||
>
|
||||
<Flex alignItems={'flex-start'}>
|
||||
<Box flex={'1 0 0'} w={0} fontSize={'lg'} fontWeight={'bold'}>
|
||||
{model.name}
|
||||
</Box>
|
||||
<Tag
|
||||
colorScheme={formatModelStatus[model.status].colorTheme}
|
||||
variant="solid"
|
||||
px={3}
|
||||
size={'md'}
|
||||
>
|
||||
{formatModelStatus[model.status].text}
|
||||
</Tag>
|
||||
</Flex>
|
||||
<Flex mt={5}>
|
||||
<Box flex={'0 0 100px'}>最后更新时间: </Box>
|
||||
<Box color={'blackAlpha.500'}>{dayjs(model.updateTime).format('YYYY-MM-DD HH:mm')}</Box>
|
||||
</Flex>
|
||||
<Flex mt={5}>
|
||||
<Box flex={'0 0 100px'}>AI模型: </Box>
|
||||
<Box color={'blackAlpha.500'}>{model.service.modelName}</Box>
|
||||
</Flex>
|
||||
<Flex mt={5}>
|
||||
<Box flex={'0 0 100px'}>训练次数: </Box>
|
||||
<Box color={'blackAlpha.500'}>{model.trainingTimes}次</Box>
|
||||
</Flex>
|
||||
<Flex mt={5} justifyContent={'flex-end'}>
|
||||
<Button
|
||||
mr={3}
|
||||
variant={'outline'}
|
||||
w={'100px'}
|
||||
size={'sm'}
|
||||
onClick={() => handlePreviewChat(model._id)}
|
||||
>
|
||||
体验
|
||||
</Button>
|
||||
<Button
|
||||
size={'sm'}
|
||||
w={'100px'}
|
||||
onClick={() => router.push(`/model/detail?modelId=${model._id}`)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModelPhoneList;
|
||||
124
src/pages/model/list/components/ModelTable.tsx
Normal file
124
src/pages/model/list/components/ModelTable.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import { useEffect } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Table,
|
||||
Thead,
|
||||
Tbody,
|
||||
Tr,
|
||||
Th,
|
||||
Td,
|
||||
TableContainer,
|
||||
Tag,
|
||||
Card,
|
||||
Box
|
||||
} from '@chakra-ui/react';
|
||||
import { formatModelStatus } from '@/constants/model';
|
||||
import dayjs from 'dayjs';
|
||||
import type { ModelSchema } from '@/types/mongoSchema';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
const ModelTable = ({
|
||||
models = [],
|
||||
handlePreviewChat
|
||||
}: {
|
||||
models: ModelSchema[];
|
||||
handlePreviewChat: (_: string) => void;
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const columns = [
|
||||
{
|
||||
title: '模型名',
|
||||
key: 'name',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '最后更新时间',
|
||||
key: 'updateTime',
|
||||
render: (item: ModelSchema) => dayjs(item.updateTime).format('YYYY-MM-DD HH:mm')
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
dataIndex: 'status',
|
||||
render: (item: ModelSchema) => (
|
||||
<Tag
|
||||
colorScheme={formatModelStatus[item.status].colorTheme}
|
||||
variant="solid"
|
||||
px={3}
|
||||
size={'md'}
|
||||
>
|
||||
{formatModelStatus[item.status].text}
|
||||
</Tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'AI模型',
|
||||
key: 'service',
|
||||
render: (item: ModelSchema) => (
|
||||
<Box wordBreak={'break-all'} whiteSpace={'pre-wrap'} maxW={'200px'}>
|
||||
{item.service.modelName}
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '训练次数',
|
||||
key: 'trainingTimes',
|
||||
dataIndex: 'trainingTimes'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'control',
|
||||
render: (item: ModelSchema) => (
|
||||
<>
|
||||
<Button mr={3} onClick={() => handlePreviewChat(item._id)}>
|
||||
对话
|
||||
</Button>
|
||||
<Button
|
||||
colorScheme={'gray'}
|
||||
onClick={() => router.push(`/model/detail?modelId=${item._id}`)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
router.prefetch('/chat');
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<Card py={3}>
|
||||
<TableContainer>
|
||||
<Table variant={'simple'}>
|
||||
<Thead>
|
||||
<Tr>
|
||||
{columns.map((item) => (
|
||||
<Th key={item.key}>{item.title}</Th>
|
||||
))}
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{models.map((item) => (
|
||||
<Tr key={item._id}>
|
||||
{columns.map((col) => (
|
||||
<Td key={col.key}>
|
||||
{col.render
|
||||
? col.render(item)
|
||||
: !!col.dataIndex
|
||||
? // @ts-ignore nextline
|
||||
item[col.dataIndex]
|
||||
: ''}
|
||||
</Td>
|
||||
))}
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModelTable;
|
||||
90
src/pages/model/list/index.tsx
Normal file
90
src/pages/model/list/index.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { Box, Button, Flex, Card } from '@chakra-ui/react';
|
||||
import { getChatSiteId } from '@/api/chat';
|
||||
import type { ModelSchema } from '@/types/mongoSchema';
|
||||
import { useRouter } from 'next/router';
|
||||
import ModelTable from './components/ModelTable';
|
||||
import ModelPhoneList from './components/ModelPhoneList';
|
||||
import { useScreen } from '@/hooks/useScreen';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useLoading } from '@/hooks/useLoading';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import { useUserStore } from '@/store/user';
|
||||
|
||||
const CreateModel = dynamic(() => import('./components/CreateModel'));
|
||||
|
||||
const modelList = () => {
|
||||
const { toast } = useToast();
|
||||
const { isPc } = useScreen();
|
||||
const router = useRouter();
|
||||
const { myModels, setMyModels, getMyModels } = useUserStore();
|
||||
const [openCreateModel, setOpenCreateModel] = useState(false);
|
||||
const { Loading, setIsLoading } = useLoading();
|
||||
|
||||
/* 加载模型 */
|
||||
const { isLoading } = useQuery(['loadModels'], getMyModels);
|
||||
|
||||
/* 创建成功回调 */
|
||||
const createModelSuccess = useCallback(
|
||||
(data: ModelSchema) => {
|
||||
setMyModels([data, ...myModels]);
|
||||
},
|
||||
[myModels, setMyModels]
|
||||
);
|
||||
|
||||
/* 点前往聊天预览页 */
|
||||
const handlePreviewChat = useCallback(
|
||||
async (modelId: string) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const chatId = await getChatSiteId(modelId);
|
||||
|
||||
router.push(`/chat?chatId=${chatId}`, undefined, {
|
||||
shallow: true
|
||||
});
|
||||
} catch (err: any) {
|
||||
console.log('error->', err);
|
||||
toast({
|
||||
title: err.message || '出现一些异常',
|
||||
status: 'error'
|
||||
});
|
||||
}
|
||||
setIsLoading(false);
|
||||
},
|
||||
[router, setIsLoading, toast]
|
||||
);
|
||||
|
||||
return (
|
||||
<Box position={'relative'}>
|
||||
{/* 头部 */}
|
||||
<Card px={6} py={3}>
|
||||
<Flex alignItems={'center'} justifyContent={'space-between'}>
|
||||
<Box fontWeight={'bold'} fontSize={'xl'}>
|
||||
模型列表
|
||||
</Box>
|
||||
|
||||
<Button flex={'0 0 145px'} variant={'outline'} onClick={() => setOpenCreateModel(true)}>
|
||||
新建模型
|
||||
</Button>
|
||||
</Flex>
|
||||
</Card>
|
||||
{/* 表单 */}
|
||||
<Box mt={5} position={'relative'}>
|
||||
{isPc ? (
|
||||
<ModelTable models={myModels} handlePreviewChat={handlePreviewChat} />
|
||||
) : (
|
||||
<ModelPhoneList models={myModels} handlePreviewChat={handlePreviewChat} />
|
||||
)}
|
||||
</Box>
|
||||
{/* 创建弹窗 */}
|
||||
{openCreateModel && (
|
||||
<CreateModel setCreateModelOpen={setOpenCreateModel} onSuccess={createModelSuccess} />
|
||||
)}
|
||||
|
||||
<Loading loading={isLoading} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default modelList;
|
||||
Reference in New Issue
Block a user