chore: model form state update
This commit is contained in:
jialin
@@ -0,0 +1,100 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { Button } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, { useEffect } from 'react';
|
||||
import LabelItem from './label-item';
|
||||
import Wrapper from './wrapper';
|
||||
|
||||
interface LabelSelectorProps {
|
||||
labels: Record<string, any>;
|
||||
label?: string;
|
||||
onChange?: (labels: Record<string, any>) => void;
|
||||
}
|
||||
|
||||
const LabelSelector: React.FC<LabelSelectorProps> = ({
|
||||
labels,
|
||||
onChange,
|
||||
label
|
||||
}) => {
|
||||
const [labelList, setLabelList] = React.useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const list = _.map(_.keys(labels), (key: string) => {
|
||||
return {
|
||||
key,
|
||||
value: labels[key]
|
||||
};
|
||||
});
|
||||
setLabelList(list);
|
||||
}, [labels]);
|
||||
|
||||
const handleOnChange = (index: string, label: any) => {
|
||||
const list = _.cloneDeep(labelList);
|
||||
list[index] = label;
|
||||
const newLabels = _.reduce(
|
||||
list,
|
||||
(result: any, item: any) => {
|
||||
result[item.key] = item.value;
|
||||
return result;
|
||||
},
|
||||
{}
|
||||
);
|
||||
onChange?.(newLabels);
|
||||
};
|
||||
|
||||
const handleAddLabel = () => {
|
||||
setLabelList([
|
||||
...labelList,
|
||||
{
|
||||
key: '',
|
||||
value: ''
|
||||
}
|
||||
]);
|
||||
};
|
||||
|
||||
const handleOnDelete = (index: string) => {
|
||||
const list = _.cloneDeep(labelList);
|
||||
list.splice(parseInt(index), 1);
|
||||
setLabelList(list);
|
||||
const newLabels = _.reduce(
|
||||
list,
|
||||
(result: any, item: any) => {
|
||||
result[item.key] = item.value;
|
||||
return result;
|
||||
},
|
||||
{}
|
||||
);
|
||||
onChange?.(newLabels);
|
||||
};
|
||||
|
||||
return (
|
||||
<Wrapper label={label}>
|
||||
{_.map(labelList, (item: any, index: string) => {
|
||||
return (
|
||||
<LabelItem
|
||||
key={index}
|
||||
label={{
|
||||
key: item.key,
|
||||
value: item.value
|
||||
}}
|
||||
seperator=":"
|
||||
onDelete={() => handleOnDelete(index)}
|
||||
onChange={(obj) => handleOnChange(index, obj)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
type="default"
|
||||
shape="circle"
|
||||
style={{ marginTop: 16 }}
|
||||
>
|
||||
<PlusOutlined className="font-size-14" onClick={handleAddLabel} />
|
||||
</Button>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(LabelSelector);
|
||||
@@ -0,0 +1,78 @@
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
import { MinusOutlined } from '@ant-design/icons';
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
import './styles/label-item.less';
|
||||
|
||||
interface LabelItemProps {
|
||||
label: {
|
||||
key: string;
|
||||
value: string;
|
||||
};
|
||||
labelKey?: string;
|
||||
labelValue?: string;
|
||||
keyAddon?: React.ReactNode;
|
||||
valueAddon?: React.ReactNode;
|
||||
seperator?: string;
|
||||
onDelete?: () => void;
|
||||
onChange?: (params: { key: string; value: string }) => void;
|
||||
}
|
||||
const LabelItem: React.FC<LabelItemProps> = ({
|
||||
label,
|
||||
seperator,
|
||||
keyAddon,
|
||||
valueAddon,
|
||||
onChange,
|
||||
onDelete
|
||||
}) => {
|
||||
const handleOnValueChange = (e: any) => {
|
||||
const value = e.target.value;
|
||||
onChange?.({
|
||||
key: label.key,
|
||||
value: value
|
||||
});
|
||||
};
|
||||
|
||||
const handleOnKeyChange = (e: any) => {
|
||||
const key = e.target.value;
|
||||
onChange?.({
|
||||
key: key,
|
||||
value: label.value
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="label-item">
|
||||
<div className="label-key">
|
||||
{keyAddon ?? (
|
||||
<SealInput.Input
|
||||
label="Key"
|
||||
value={label.key}
|
||||
onChange={handleOnKeyChange}
|
||||
></SealInput.Input>
|
||||
)}
|
||||
</div>
|
||||
{seperator && <span className="seprator">{seperator}</span>}
|
||||
<div className="label-value">
|
||||
{valueAddon ?? (
|
||||
<SealInput.Input
|
||||
label="Value"
|
||||
value={label.value}
|
||||
onChange={handleOnValueChange}
|
||||
></SealInput.Input>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
size="small"
|
||||
className="btn"
|
||||
type="default"
|
||||
shape="circle"
|
||||
onClick={onDelete}
|
||||
>
|
||||
<MinusOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LabelItem;
|
||||
@@ -0,0 +1,29 @@
|
||||
.label-item {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.seprator {
|
||||
display: flex;
|
||||
flex: none;
|
||||
width: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--ant-color-text-tertiary);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 24px;
|
||||
margin-left: 10px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.label-key {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.label-value {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
.wrapper {
|
||||
position: relative;
|
||||
padding: 16px 24px;
|
||||
padding-top: 30px;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
border-radius: var(--border-radius-base);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
:global {
|
||||
.label {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
line-height: 1;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import LabelInfo from '@/components/seal-form/components/label-info';
|
||||
import React from 'react';
|
||||
import styles from './styles/wrapper.less';
|
||||
|
||||
const Wrapper: React.FC<{
|
||||
label?: string;
|
||||
children: React.ReactNode;
|
||||
}> = ({ children, label }) => {
|
||||
return (
|
||||
<div className={styles['wrapper']}>
|
||||
{label && (
|
||||
<span className="label">
|
||||
<LabelInfo label={label}></LabelInfo>
|
||||
</span>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Wrapper;
|
||||
@@ -9,6 +9,7 @@ export default {
|
||||
'models.form.repoid.desc': 'Only .gguf format is supported',
|
||||
'models.form.filename': 'File Name',
|
||||
'models.form.replicas': 'Replicas',
|
||||
'models.form.configurations': 'Configurations',
|
||||
'models.form.s3address': 'S3 Address',
|
||||
'models.openinplayground': 'Open in Playground',
|
||||
'models.instances': 'instances',
|
||||
|
||||
@@ -9,6 +9,7 @@ export default {
|
||||
'models.form.repoid.desc': '只支持 .gguf 格式',
|
||||
'models.form.filename': '文件名',
|
||||
'models.form.replicas': '副本数',
|
||||
'models.form.configurations': '配置',
|
||||
'models.form.s3address': 'S3 地址',
|
||||
'models.openinplayground': '在 Playground 中打开',
|
||||
'models.instances': '实例',
|
||||
|
||||
@@ -0,0 +1,301 @@
|
||||
import SealAutoComplete from '@/components/seal-form/auto-complete';
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
import SealSelect from '@/components/seal-form/seal-select';
|
||||
import { PageAction } from '@/config';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Form } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
|
||||
import { modelSourceMap, ollamaModelOptions } from '../config';
|
||||
import { FormData } from '../config/types';
|
||||
|
||||
interface DataFormProps {
|
||||
ref?: any;
|
||||
source: string;
|
||||
action: PageActionType;
|
||||
repo: string;
|
||||
onOk: (values: FormData) => void;
|
||||
}
|
||||
|
||||
const sourceOptions = [
|
||||
{
|
||||
label: 'Hugging Face',
|
||||
value: modelSourceMap.huggingface_value,
|
||||
key: 'huggingface'
|
||||
},
|
||||
{
|
||||
label: 'Ollama Library',
|
||||
value: modelSourceMap.ollama_library_value,
|
||||
key: 'ollama_library'
|
||||
}
|
||||
];
|
||||
|
||||
const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
|
||||
const { action, repo, onOk } = props;
|
||||
const [form] = Form.useForm();
|
||||
const intl = useIntl();
|
||||
|
||||
const handleSumit = () => {
|
||||
form.submit();
|
||||
};
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => {
|
||||
return {
|
||||
submit: handleSumit,
|
||||
setFieldsValue: (values: FormData) => {
|
||||
form.setFieldsValue(values);
|
||||
},
|
||||
setFieldValue: (name: string, value: any) => {
|
||||
form.setFieldValue(name, value);
|
||||
},
|
||||
getFieldValue: (name: string) => {
|
||||
return form.getFieldValue(name);
|
||||
}
|
||||
};
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleOnSelectModel = () => {
|
||||
console.log('repo=============', repo);
|
||||
if (!repo) {
|
||||
return;
|
||||
}
|
||||
let name = _.split(repo, '/').slice(-1)[0];
|
||||
const reg = /(-gguf)$/i;
|
||||
name = _.toLower(name).replace(reg, '');
|
||||
|
||||
if (props.source === modelSourceMap.huggingface_value) {
|
||||
form.setFieldsValue({
|
||||
huggingface_repo_id: repo,
|
||||
name: name
|
||||
});
|
||||
} else {
|
||||
form.setFieldsValue({
|
||||
ollama_library_model_name: repo,
|
||||
name: name
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const renderHuggingfaceFields = () => {
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
name="huggingface_repo_id"
|
||||
key="huggingface_repo_id"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.repoid' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({ id: 'models.form.repoid' })}
|
||||
required
|
||||
disabled={true}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData>
|
||||
name="huggingface_filename"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.filename' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({ id: 'models.form.filename' })}
|
||||
required
|
||||
disabled={true}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderS3Fields = () => {
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
name="s3_address"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.s3address' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.s3address'
|
||||
})}
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderOllamaModelFields = () => {
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
name="ollama_library_model_name"
|
||||
key="ollama_library_model_name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.table.name' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealAutoComplete
|
||||
filterOption
|
||||
disabled={action === PageAction.EDIT}
|
||||
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
|
||||
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
|
||||
required
|
||||
options={ollamaModelOptions}
|
||||
></SealAutoComplete>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFieldsBySource = () => {
|
||||
switch (props.source) {
|
||||
case modelSourceMap.huggingface_value:
|
||||
return renderHuggingfaceFields();
|
||||
case modelSourceMap.ollama_library_value:
|
||||
return renderOllamaModelFields();
|
||||
case modelSourceMap.s3_value:
|
||||
return renderS3Fields();
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
handleOnSelectModel();
|
||||
}, [repo]);
|
||||
|
||||
return (
|
||||
<Form
|
||||
name="deployModel"
|
||||
form={form}
|
||||
onFinish={onOk}
|
||||
preserve={false}
|
||||
style={{ padding: '16px 24px' }}
|
||||
clearOnDestroy={true}
|
||||
initialValues={{ replicas: 1, source: props.source }}
|
||||
>
|
||||
<Form.Item<FormData>
|
||||
name="name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'common.table.name' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({
|
||||
id: 'common.table.name'
|
||||
})}
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData>
|
||||
name="source"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.select'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.source' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
{
|
||||
<SealSelect
|
||||
disabled={true}
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.source'
|
||||
})}
|
||||
options={sourceOptions}
|
||||
required
|
||||
></SealSelect>
|
||||
}
|
||||
</Form.Item>
|
||||
{renderFieldsBySource()}
|
||||
<Form.Item<FormData>
|
||||
name="replicas"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{
|
||||
name: intl.formatMessage({ id: 'models.form.replicas' })
|
||||
}
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Number
|
||||
style={{ width: '100%' }}
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.replicas'
|
||||
})}
|
||||
required
|
||||
min={0}
|
||||
></SealInput.Number>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData> name="description">
|
||||
<SealInput.TextArea
|
||||
label={intl.formatMessage({
|
||||
id: 'common.table.description'
|
||||
})}
|
||||
></SealInput.TextArea>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
});
|
||||
|
||||
export default React.memo(DataForm);
|
||||
@@ -1,18 +1,13 @@
|
||||
import ModalFooter from '@/components/modal-footer';
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
import SealSelect from '@/components/seal-form/seal-select';
|
||||
import { PageAction } from '@/config';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { convertFileSize } from '@/utils';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Drawer, Form } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { memo, useCallback, useEffect, useState } from 'react';
|
||||
import { queryHuggingfaceModelFiles, queryHuggingfaceModels } from '../apis';
|
||||
import { Button, Drawer } from 'antd';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { modelSourceMap } from '../config';
|
||||
import { FormData, ListItem } from '../config/types';
|
||||
import ColumnWrapper from './column-wrapper';
|
||||
import DataForm from './data-form';
|
||||
import HFModelFile from './hf-model-file';
|
||||
import ModelCard from './model-card';
|
||||
import SearchModel from './search-model';
|
||||
@@ -24,257 +19,44 @@ type AddModalProps = {
|
||||
open: boolean;
|
||||
data?: ListItem;
|
||||
source: string;
|
||||
width?: string | number;
|
||||
onOk: (values: FormData) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
const sourceOptions = [
|
||||
{
|
||||
label: 'Hugging Face',
|
||||
value: modelSourceMap.huggingface_value,
|
||||
key: 'huggingface'
|
||||
},
|
||||
{
|
||||
label: 'Ollama Library',
|
||||
value: modelSourceMap.ollama_library_value,
|
||||
key: 'ollama_library'
|
||||
}
|
||||
];
|
||||
|
||||
const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
console.log('addmodel====');
|
||||
const { title, action, open, source, onOk, onCancel } = props || {};
|
||||
const [form] = Form.useForm();
|
||||
const {
|
||||
title,
|
||||
open,
|
||||
onOk,
|
||||
onCancel,
|
||||
source,
|
||||
action,
|
||||
width = 600
|
||||
} = props || {};
|
||||
const form = useRef<any>({});
|
||||
const intl = useIntl();
|
||||
const modelSource = Form.useWatch('source', form);
|
||||
const huggingfaceRepoId = Form.useWatch('huggingface_repo_id', form);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [repoOptions, setRepoOptions] = useState<
|
||||
{ label: string; value: string }[]
|
||||
>([]);
|
||||
const [fileOptions, setFileOptions] = useState<
|
||||
{ label: string; value: string }[]
|
||||
>([]);
|
||||
const [huggingfaceRepoId, setHuggingfaceRepoId] = useState<string>('');
|
||||
|
||||
const initFormValue = () => {
|
||||
form.setFieldsValue({
|
||||
source: props.source,
|
||||
replicas: 1
|
||||
});
|
||||
const handleSelectModelFile = useCallback((item: any) => {
|
||||
form.current?.setFieldValue?.('huggingface_filename', item.path);
|
||||
}, []);
|
||||
|
||||
const handleOnSelectModel = (item: any) => {
|
||||
setHuggingfaceRepoId(item.name);
|
||||
};
|
||||
|
||||
const handleSumit = () => {
|
||||
form.current?.submit?.();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
initFormValue();
|
||||
console.log('source========', props.source);
|
||||
return () => {
|
||||
setHuggingfaceRepoId('');
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const fileNamLabel = (item: any) => {
|
||||
return (
|
||||
<span>
|
||||
{item.path}
|
||||
<span
|
||||
style={{ color: 'var(--ant-color-text-tertiary)', marginLeft: '4px' }}
|
||||
>
|
||||
({convertFileSize(item.size)})
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
const handleFetchModelFiles = async (repo: string) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await queryHuggingfaceModelFiles({ repo });
|
||||
const list = _.filter(res, (file: any) => {
|
||||
return _.endsWith(file.path, '.gguf');
|
||||
}).map((item: any) => {
|
||||
return {
|
||||
label: fileNamLabel(item),
|
||||
value: item.path,
|
||||
size: item.size
|
||||
};
|
||||
});
|
||||
setFileOptions(list);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
setFileOptions([]);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRepoOnBlur = (e: any) => {
|
||||
const repo = form.getFieldValue('huggingface_repo_id');
|
||||
handleFetchModelFiles(repo);
|
||||
};
|
||||
|
||||
const handleSelectModelFile = useCallback((item: any) => {
|
||||
form.setFieldValue('huggingface_filename', item.path);
|
||||
}, []);
|
||||
|
||||
const handleOnSearchRepo = async (text: string) => {
|
||||
try {
|
||||
const params = {
|
||||
search: {
|
||||
query: text,
|
||||
tags: ['gguf']
|
||||
}
|
||||
};
|
||||
const models = await queryHuggingfaceModels(params);
|
||||
const list = _.map(models || [], (item: any) => {
|
||||
return {
|
||||
...item,
|
||||
value: item.name,
|
||||
label: item.name
|
||||
};
|
||||
});
|
||||
setRepoOptions(list);
|
||||
} catch (error) {
|
||||
setRepoOptions([]);
|
||||
}
|
||||
};
|
||||
|
||||
const debounceSearch = _.debounce((text: string) => {
|
||||
handleOnSearchRepo(text);
|
||||
}, 300);
|
||||
|
||||
const renderHuggingfaceFields = () => {
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
name="huggingface_repo_id"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.repoid' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({ id: 'models.form.repoid' })}
|
||||
required
|
||||
disabled={true}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData>
|
||||
name="huggingface_filename"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.filename' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({ id: 'models.form.filename' })}
|
||||
required
|
||||
disabled={true}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderS3Fields = () => {
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
name="s3_address"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.s3address' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.s3address'
|
||||
})}
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderOllamaModelFields = () => {
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
name="ollama_library_model_name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.table.name' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
disabled={action === PageAction.EDIT}
|
||||
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
|
||||
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFieldsBySource = () => {
|
||||
switch (props.source) {
|
||||
case modelSourceMap.huggingface_value:
|
||||
return renderHuggingfaceFields();
|
||||
case modelSourceMap.ollama_library_value:
|
||||
return renderOllamaModelFields();
|
||||
case modelSourceMap.s3_value:
|
||||
return renderS3Fields();
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnSelectModel = useCallback((item: any) => {
|
||||
const repo = item.name;
|
||||
let name = _.split(item.name, '/').slice(-1)[0];
|
||||
const reg = /(-gguf)$/i;
|
||||
name = _.toLower(name).replace(reg, '');
|
||||
|
||||
if (form.getFieldValue('source') === modelSourceMap.huggingface_value) {
|
||||
form.setFieldsValue({
|
||||
huggingface_repo_id: repo,
|
||||
name: name
|
||||
});
|
||||
} else {
|
||||
form.setFieldsValue({
|
||||
ollama_library_model_name: repo,
|
||||
name: name
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSumit = () => {
|
||||
form.submit();
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={
|
||||
@@ -309,18 +91,14 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
borderRadius: '8px 0 0 8px'
|
||||
}
|
||||
}}
|
||||
width={
|
||||
props.source === modelSourceMap.huggingface_value
|
||||
? 'calc(100vw - 220px)'
|
||||
: 600
|
||||
}
|
||||
width={width}
|
||||
footer={false}
|
||||
>
|
||||
<div style={{ display: 'flex' }}>
|
||||
{props.source === modelSourceMap.huggingface_value && (
|
||||
<ColumnWrapper>
|
||||
<SearchModel
|
||||
modelSource={modelSource}
|
||||
modelSource={props.source}
|
||||
onSelectModel={handleOnSelectModel}
|
||||
></SearchModel>
|
||||
</ColumnWrapper>
|
||||
@@ -348,94 +126,16 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
}
|
||||
>
|
||||
<>
|
||||
<TitleWrapper>Configuration</TitleWrapper>
|
||||
<Form
|
||||
name="deployModel"
|
||||
form={form}
|
||||
onFinish={onOk}
|
||||
preserve={false}
|
||||
style={{ padding: '16px 24px' }}
|
||||
>
|
||||
<Form.Item<FormData>
|
||||
name="name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'common.table.name' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({
|
||||
id: 'common.table.name'
|
||||
})}
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData>
|
||||
name="source"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.select'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.source' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
{
|
||||
<SealSelect
|
||||
disabled={true}
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.source'
|
||||
})}
|
||||
options={sourceOptions}
|
||||
required
|
||||
></SealSelect>
|
||||
}
|
||||
</Form.Item>
|
||||
{renderFieldsBySource()}
|
||||
<Form.Item<FormData>
|
||||
name="replicas"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{
|
||||
name: intl.formatMessage({ id: 'models.form.replicas' })
|
||||
}
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Number
|
||||
style={{ width: '100%' }}
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.replicas'
|
||||
})}
|
||||
required
|
||||
min={0}
|
||||
></SealInput.Number>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData> name="description">
|
||||
<SealInput.TextArea
|
||||
label={intl.formatMessage({
|
||||
id: 'common.table.description'
|
||||
})}
|
||||
></SealInput.TextArea>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<TitleWrapper>
|
||||
{intl.formatMessage({ id: 'models.form.configurations' })}
|
||||
</TitleWrapper>
|
||||
<DataForm
|
||||
source={source}
|
||||
action={action}
|
||||
repo={huggingfaceRepoId}
|
||||
onOk={onOk}
|
||||
ref={form}
|
||||
></DataForm>
|
||||
</>
|
||||
</ColumnWrapper>
|
||||
</div>
|
||||
@@ -443,4 +143,4 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(AddModal);
|
||||
export default AddModal;
|
||||
|
||||
@@ -39,7 +39,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
|
||||
try {
|
||||
const res = await queryHuggingfaceModelFiles({ repo: props.repo });
|
||||
const list = _.filter(res, (file: any) => {
|
||||
return _.endsWith(file.path, '.gguf');
|
||||
return _.endsWith(file.path, '.gguf') || _.includes(file.path, '.gguf');
|
||||
});
|
||||
const sortList = _.sortBy(list, (item: any) => item.size);
|
||||
setDataSource({ fileList: sortList, loading: false });
|
||||
@@ -58,7 +58,11 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
|
||||
}
|
||||
console.log('quanType', quanType, FileType[quanType]);
|
||||
if (FileType[quanType] !== undefined) {
|
||||
return <Tag className="tag-item">{quanType}</Tag>;
|
||||
return (
|
||||
<Tag className="tag-item" color="cyan">
|
||||
{quanType}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
@@ -100,7 +104,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
|
||||
</span> */}
|
||||
<Tag
|
||||
className="tag-item"
|
||||
color="geekblue"
|
||||
color="green"
|
||||
style={{
|
||||
marginRight: 0
|
||||
}}
|
||||
|
||||
@@ -43,7 +43,7 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
|
||||
{props.task && (
|
||||
<Tag
|
||||
className="tag-item"
|
||||
color="geekblue"
|
||||
color="gold"
|
||||
style={{
|
||||
marginRight: 0
|
||||
}}
|
||||
|
||||
@@ -45,12 +45,14 @@ const SearchInput: React.FC<{
|
||||
)
|
||||
}
|
||||
prefix={
|
||||
<SearchOutlined
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
color: 'var(--ant-color-text-quaternary)'
|
||||
}}
|
||||
/>
|
||||
<>
|
||||
<SearchOutlined
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
color: 'var(--ant-color-text-quaternary)'
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
></Input>
|
||||
);
|
||||
|
||||
@@ -232,6 +232,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
|
||||
|
||||
useEffect(() => {
|
||||
handleOnOpen();
|
||||
console.log('SearchModel useEffect', modelSource);
|
||||
return () => {
|
||||
axiosTokenRef.current?.abort?.();
|
||||
};
|
||||
|
||||
@@ -80,14 +80,17 @@ const Models: React.FC<ModelsProps> = ({
|
||||
const [openViewCodeModal, setOpenViewCodeModal] = useState(false);
|
||||
const [openLogModal, setOpenLogModal] = useState(false);
|
||||
const [openAddModal, setOpenAddModal] = useState(false);
|
||||
const [openDeployModal, setOpenDeployModal] = useState(false);
|
||||
const [openDeployModal, setOpenDeployModal] = useState<any>({
|
||||
show: false,
|
||||
width: 600,
|
||||
source: modelSourceMap.huggingface_value
|
||||
});
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [currentData, setCurrentData] = useState<ListItem | undefined>(
|
||||
undefined
|
||||
);
|
||||
const [currentInstanceUrl, setCurrentInstanceUrl] = useState<string>('');
|
||||
const modalRef = useRef<any>(null);
|
||||
const sourceRef = useRef<any>(null);
|
||||
|
||||
const sourceOptions = [
|
||||
{
|
||||
@@ -96,8 +99,11 @@ const Models: React.FC<ModelsProps> = ({
|
||||
key: 'huggingface',
|
||||
icon: <IconFont type="icon-huggingface"></IconFont>,
|
||||
onClick: () => {
|
||||
sourceRef.current = modelSourceMap.huggingface_value;
|
||||
setOpenDeployModal(true);
|
||||
setOpenDeployModal({
|
||||
show: true,
|
||||
width: 'calc(100vw - 220px)',
|
||||
source: modelSourceMap.huggingface_value
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -106,8 +112,11 @@ const Models: React.FC<ModelsProps> = ({
|
||||
key: 'ollama_library',
|
||||
icon: <IconFont type="icon-ollama"></IconFont>,
|
||||
onClick: () => {
|
||||
sourceRef.current = modelSourceMap.ollama_library_value;
|
||||
setOpenDeployModal(true);
|
||||
setOpenDeployModal({
|
||||
show: true,
|
||||
width: 600,
|
||||
source: modelSourceMap.ollama_library_value
|
||||
});
|
||||
}
|
||||
}
|
||||
];
|
||||
@@ -177,16 +186,22 @@ const Models: React.FC<ModelsProps> = ({
|
||||
setOpenAddModal(false);
|
||||
}, []);
|
||||
|
||||
const handleDeployModalCancel = useCallback(() => {
|
||||
setOpenDeployModal(false);
|
||||
}, []);
|
||||
const handleDeployModalCancel = () => {
|
||||
setOpenDeployModal({
|
||||
...openDeployModal,
|
||||
show: false
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreateModel = useCallback(async (data: FormData) => {
|
||||
try {
|
||||
console.log('data:', data);
|
||||
|
||||
await createModel({ data });
|
||||
setOpenDeployModal(false);
|
||||
setOpenDeployModal({
|
||||
...openDeployModal,
|
||||
show: false
|
||||
});
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
} catch (error) {}
|
||||
}, []);
|
||||
@@ -476,11 +491,12 @@ const Models: React.FC<ModelsProps> = ({
|
||||
onOk={handleModalOk}
|
||||
></UpdateModel>
|
||||
<DeployModal
|
||||
open={openDeployModal}
|
||||
open={openDeployModal.show}
|
||||
action={PageAction.CREATE}
|
||||
title="Deploy Model"
|
||||
title={intl.formatMessage({ id: 'models.button.deploy' })}
|
||||
data={currentData}
|
||||
source={sourceRef.current}
|
||||
source={openDeployModal.source}
|
||||
width={openDeployModal.width}
|
||||
onCancel={handleDeployModalCancel}
|
||||
onOk={handleCreateModel}
|
||||
></DeployModal>
|
||||
|
||||
@@ -27,8 +27,9 @@
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
height: 22px;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
color: var(--ant-color-text-secondary);
|
||||
opacity: 0.7;
|
||||
// border: 1px solid var(--ant-color-border);
|
||||
// color: var(--ant-color-text-secondary);
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
||||
@@ -31,8 +31,9 @@
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
height: 22px;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
color: var(--ant-color-text-secondary);
|
||||
opacity: 0.9;
|
||||
// border: 1px solid var(--ant-color-border);
|
||||
// color: var(--ant-color-text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user