refactor: model instance item
This commit is contained in:
jialin
@@ -0,0 +1,259 @@
|
||||
import ModalFooter from '@/components/modal-footer';
|
||||
import GSDrawer from '@/components/scroller-modal/gs-drawer';
|
||||
import { ProviderValueMap } from '@/pages/cluster-management/config';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { debounce } from 'lodash';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import ColumnWrapper from '../../../_components/column-wrapper';
|
||||
import { modelSourceMap } from '../../config';
|
||||
import { FormData } from '../../config/types';
|
||||
import HFModelFile from '../model-source/hf-model-file';
|
||||
import ModelCard from '../model-source/model-card';
|
||||
import SearchModel from '../model-source/search-model';
|
||||
import Separator from '../separator';
|
||||
import TitleWrapper from '../title-wrapper';
|
||||
import TargetForm from './target-form';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
open: boolean;
|
||||
source: string;
|
||||
width?: string | number;
|
||||
hasLinuxWorker?: boolean;
|
||||
workerOptions: any[];
|
||||
workersList?: any[];
|
||||
onOk: (values: FormData) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
const ColWrapper = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
max-width: 33.33%;
|
||||
`;
|
||||
|
||||
const FormWrapper = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
maxwidth: 100%;
|
||||
`;
|
||||
|
||||
const DownloadModel: React.FC<AddModalProps> = (props) => {
|
||||
const {
|
||||
title,
|
||||
open,
|
||||
onOk,
|
||||
onCancel,
|
||||
hasLinuxWorker,
|
||||
source,
|
||||
width = 600,
|
||||
workerOptions,
|
||||
workersList
|
||||
} = props || {};
|
||||
const SEARCH_SOURCE = [
|
||||
modelSourceMap.huggingface_value,
|
||||
modelSourceMap.modelscope_value
|
||||
];
|
||||
|
||||
const form = useRef<any>({});
|
||||
const intl = useIntl();
|
||||
const [selectedModel, setSelectedModel] = useState<any>({});
|
||||
const [collapsed, setCollapsed] = useState<boolean>(false);
|
||||
const [isGGUF, setIsGGUF] = useState<boolean>(false);
|
||||
const [fileName, setFileName] = useState<string>('');
|
||||
const modelFileRef = useRef<any>(null);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const generateModelInfo = () => {
|
||||
if (source === modelSourceMap.huggingface_value) {
|
||||
const huggingFaceModel = {
|
||||
huggingface_repo_id: selectedModel.name,
|
||||
huggingface_filename: fileName || null
|
||||
};
|
||||
return huggingFaceModel;
|
||||
}
|
||||
|
||||
if (source === modelSourceMap.modelscope_value) {
|
||||
const modelScopeModel = {
|
||||
model_scope_model_id: selectedModel.name,
|
||||
model_scope_file_path: fileName || null
|
||||
};
|
||||
return modelScopeModel;
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
const handleOnSelectModel = (item: any) => {
|
||||
setSelectedModel(item);
|
||||
setFileName('');
|
||||
};
|
||||
|
||||
const handleOk = async (values: any) => {
|
||||
setLoading(true);
|
||||
await onOk({
|
||||
...values,
|
||||
source: source,
|
||||
...generateModelInfo()
|
||||
});
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleSumit = () => {
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
form.current?.form?.submit?.();
|
||||
};
|
||||
|
||||
const debounceFetchModelFiles = debounce(() => {
|
||||
modelFileRef.current?.fetchModelFiles?.();
|
||||
}, 300);
|
||||
|
||||
const handleSetIsGGUF = (flag: boolean) => {
|
||||
setIsGGUF(flag);
|
||||
if (flag) {
|
||||
debounceFetchModelFiles();
|
||||
}
|
||||
};
|
||||
const handleSelectModelFile = useCallback((item: any) => {
|
||||
setFileName(item.fakeName);
|
||||
}, []);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
onCancel?.();
|
||||
}, [onCancel]);
|
||||
|
||||
const initDefaultWorker = () => {
|
||||
if (!workerOptions || workerOptions.length === 0) {
|
||||
form.current?.form?.setFieldValue('worker_id', []);
|
||||
return;
|
||||
}
|
||||
const getWorkerId = (worker: any) => [
|
||||
worker?.value ?? '',
|
||||
worker?.children?.[0]?.value ?? ''
|
||||
];
|
||||
|
||||
const customWorker = workerOptions.find(
|
||||
(item) => item.provider === ProviderValueMap.Docker
|
||||
);
|
||||
|
||||
const worker_id = getWorkerId(customWorker || workerOptions[0]);
|
||||
form.current?.form?.setFieldValue('worker_id', worker_id);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setIsGGUF(false);
|
||||
}
|
||||
if (open) {
|
||||
initDefaultWorker();
|
||||
}
|
||||
|
||||
return () => {
|
||||
setSelectedModel({});
|
||||
};
|
||||
}, [open, source]);
|
||||
|
||||
return (
|
||||
<GSDrawer
|
||||
title={title}
|
||||
open={open}
|
||||
onClose={handleCancel}
|
||||
destroyOnHidden={true}
|
||||
closeIcon={false}
|
||||
mask={{
|
||||
closable: false
|
||||
}}
|
||||
keyboard={false}
|
||||
zIndex={2000}
|
||||
styles={{
|
||||
wrapper: { width: width }
|
||||
}}
|
||||
footer={false}
|
||||
>
|
||||
<div style={{ display: 'flex', height: '100%' }}>
|
||||
{SEARCH_SOURCE.includes(props.source) && (
|
||||
<>
|
||||
<ColWrapper>
|
||||
<SearchModel
|
||||
hasLinuxWorker={hasLinuxWorker}
|
||||
modelSource={props.source}
|
||||
onSelectModel={handleOnSelectModel}
|
||||
isDownload={true}
|
||||
></SearchModel>
|
||||
<Separator></Separator>
|
||||
</ColWrapper>
|
||||
<ColWrapper>
|
||||
<ColumnWrapper styles={{ container: { padding: 0 } }}>
|
||||
<ModelCard
|
||||
selectedModel={selectedModel}
|
||||
onCollapse={setCollapsed}
|
||||
collapsed={collapsed}
|
||||
modelSource={props.source}
|
||||
setIsGGUF={handleSetIsGGUF}
|
||||
></ModelCard>
|
||||
{isGGUF && (
|
||||
<HFModelFile
|
||||
ref={modelFileRef}
|
||||
selectedModel={selectedModel}
|
||||
modelSource={props.source}
|
||||
onSelectFile={handleSelectModelFile}
|
||||
collapsed={collapsed}
|
||||
isDownload={true}
|
||||
></HFModelFile>
|
||||
)}
|
||||
</ColumnWrapper>
|
||||
<Separator></Separator>
|
||||
</ColWrapper>
|
||||
</>
|
||||
)}
|
||||
<FormWrapper>
|
||||
<ColumnWrapper
|
||||
styles={{
|
||||
container: { paddingBlock: 0 }
|
||||
}}
|
||||
footer={
|
||||
<>
|
||||
<ModalFooter
|
||||
onCancel={handleCancel}
|
||||
onOk={handleSumit}
|
||||
okBtnProps={{
|
||||
loading: loading
|
||||
}}
|
||||
style={{
|
||||
padding: '16px 24px 8px',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end'
|
||||
}}
|
||||
></ModalFooter>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<>
|
||||
{SEARCH_SOURCE.includes(source) && (
|
||||
<TitleWrapper>
|
||||
{intl.formatMessage({
|
||||
id: 'resources.modelfiles.selecttarget'
|
||||
})}
|
||||
<span style={{ display: 'flex', height: 24 }}></span>
|
||||
</TitleWrapper>
|
||||
)}
|
||||
<TargetForm
|
||||
ref={form}
|
||||
onOk={handleOk}
|
||||
source={source}
|
||||
selectedModel={selectedModel}
|
||||
fileName={fileName}
|
||||
workersList={workersList}
|
||||
workerOptions={workerOptions}
|
||||
></TargetForm>
|
||||
</>
|
||||
</ColumnWrapper>
|
||||
</FormWrapper>
|
||||
</div>
|
||||
</GSDrawer>
|
||||
);
|
||||
};
|
||||
|
||||
export default DownloadModel;
|
||||
@@ -0,0 +1,246 @@
|
||||
import SealCascader from '@/components/seal-form/seal-cascader';
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
import SealSelect from '@/components/seal-form/seal-select';
|
||||
import TooltipList from '@/components/tooltip-list';
|
||||
import useAppUtils from '@/hooks/use-app-utils';
|
||||
import { ModelFileFormData as FormData } from '@/pages/resources/config/types';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Form } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import minimatch from 'minimatch';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo
|
||||
} from 'react';
|
||||
import { localPathTipsList, modelSourceMap, sourceOptions } from '../../config';
|
||||
import { useGenerateWorkersModelFileOptions } from '../../hooks';
|
||||
|
||||
type EmptyObject = Record<never, never>;
|
||||
|
||||
type CascaderOption<T extends object = EmptyObject> = {
|
||||
label: string;
|
||||
value: string | number;
|
||||
parent?: boolean;
|
||||
disabled?: boolean;
|
||||
index?: number;
|
||||
children?: CascaderOption<T>[];
|
||||
} & Partial<T>;
|
||||
|
||||
interface TargetFormProps {
|
||||
ref?: any;
|
||||
source: string;
|
||||
workerOptions: CascaderOption<{ state: string }>[];
|
||||
workersList?: Global.BaseOption<
|
||||
number,
|
||||
{ state: string; labels: Record<string, string>; cluster_id: number }
|
||||
>[];
|
||||
selectedModel?: Record<string, any>;
|
||||
fileName?: string;
|
||||
onOk: (values: any) => void;
|
||||
}
|
||||
|
||||
const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
|
||||
const {
|
||||
modelFileOptions,
|
||||
getModelFileList,
|
||||
generateWorkersModelFileOptions
|
||||
} = useGenerateWorkersModelFileOptions();
|
||||
const { onOk, source, workerOptions, workersList, selectedModel, fileName } =
|
||||
props;
|
||||
const { getRuleMessage } = useAppUtils();
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm();
|
||||
const localPath = Form.useWatch('local_path', form);
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
if (workersList && workersList?.length > 0) {
|
||||
const modelFiles = await getModelFileList();
|
||||
generateWorkersModelFileOptions(modelFiles, workersList || []);
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
init();
|
||||
}, [workersList]);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
form
|
||||
}));
|
||||
|
||||
const handleOk = (values: any) => {
|
||||
const data = _.pickBy(values, (val: string) => val);
|
||||
onOk({
|
||||
...data,
|
||||
worker_id: data.worker_id?.[1]
|
||||
});
|
||||
};
|
||||
|
||||
const handleOnLocalPathBlur = (e: any) => {
|
||||
let { value } = e.target;
|
||||
|
||||
// remove all the backslashes and slashes at the end of the string
|
||||
value = value.replace(/(\\|\/)+$/, '');
|
||||
form.setFieldsValue({
|
||||
local_path: value
|
||||
});
|
||||
};
|
||||
|
||||
const renderOptionNode = (props: { data: any }) => {
|
||||
const { data } = props;
|
||||
const currentWorker = modelFileOptions.find(
|
||||
(item) => item.value === data.value
|
||||
);
|
||||
|
||||
const isExisting = currentWorker?.children?.some((child) => {
|
||||
const isSameFile =
|
||||
child.fileName === (fileName || localPath || '') ||
|
||||
minimatch(child.fileName || '', fileName || '');
|
||||
|
||||
return child.repoId === (selectedModel?.name || '') && isSameFile;
|
||||
});
|
||||
|
||||
const localeId = localPath
|
||||
? 'resources.modelfiles.form.added'
|
||||
: 'resources.modelfiles.form.exsting';
|
||||
|
||||
return (
|
||||
<span>
|
||||
{data.label}
|
||||
{isExisting && (
|
||||
<span className="text-tertiary m-l-4">
|
||||
[{intl.formatMessage({ id: localeId })}]
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const renderLocalPathFields = () => {
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
name="local_path"
|
||||
key="local_path"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: getRuleMessage('input', 'models.form.filePath')
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
required
|
||||
label={intl.formatMessage({ id: 'models.form.filePath' })}
|
||||
onBlur={handleOnLocalPathBlur}
|
||||
description={<TooltipList list={localPathTipsList}></TooltipList>}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFieldsBySource = useMemo(() => {
|
||||
if (props.source === modelSourceMap.local_path_value) {
|
||||
return renderLocalPathFields();
|
||||
}
|
||||
|
||||
return null;
|
||||
}, [props.source, intl]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={handleOk}
|
||||
preserve={false}
|
||||
clearOnDestroy={true}
|
||||
initialValues={{
|
||||
source: source
|
||||
}}
|
||||
>
|
||||
<Form.Item<FormData>
|
||||
name="source"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: getRuleMessage('select', 'models.form.source')
|
||||
}
|
||||
]}
|
||||
>
|
||||
{
|
||||
<SealSelect
|
||||
disabled
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.source'
|
||||
})}
|
||||
options={sourceOptions}
|
||||
required
|
||||
></SealSelect>
|
||||
}
|
||||
</Form.Item>
|
||||
{renderFieldsBySource}
|
||||
<Form.Item
|
||||
name="worker_id"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: getRuleMessage('select', 'resources.worker')
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealCascader
|
||||
required
|
||||
showSearch
|
||||
expandTrigger="hover"
|
||||
multiple={false}
|
||||
classNames={{
|
||||
popup: {
|
||||
root: 'cascader-popup-wrapper gpu-selector'
|
||||
}
|
||||
}}
|
||||
maxTagCount={1}
|
||||
label={intl.formatMessage({ id: 'resources.worker' })}
|
||||
options={workerOptions}
|
||||
showCheckedStrategy="SHOW_CHILD"
|
||||
optionNode={renderOptionNode}
|
||||
getPopupContainer={(triggerNode) => triggerNode.parentNode}
|
||||
></SealCascader>
|
||||
</Form.Item>
|
||||
{source !== modelSourceMap.local_path_value && (
|
||||
<Form.Item<FormData>
|
||||
name="local_dir"
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
message: getRuleMessage(
|
||||
'input',
|
||||
'resources.modelfiles.form.localdir'
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
description={
|
||||
<span
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: intl.formatMessage({
|
||||
id: 'resources.modelfiles.form.localdir.tips'
|
||||
})
|
||||
}}
|
||||
></span>
|
||||
}
|
||||
label={intl.formatMessage({
|
||||
id: 'resources.modelfiles.form.localdir'
|
||||
})}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default TargetForm;
|
||||
Reference in New Issue
Block a user