root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: deploy model from local path

Browse Source
This commit is contained in:
jialin
2024-11-07 17:35:07 +08:00
parent 8bc67b323c
commit 93a6a77c2b
15 changed files with 270 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/data-form.tsx
+91 -40
View File
@@ -30,25 +30,9 @@ interface DataFormProps {
selectedModel: any;
isGGUF: boolean;
onOk: (values: FormData) => void;
onBackendChange?: (value: string) => void;
}
const sourceOptions = [
{
label: 'Hugging Face',
value: modelSourceMap.huggingface_value,
key: 'huggingface'
},
{
label: 'Ollama Library',
value: modelSourceMap.ollama_library_value,
key: 'ollama_library'
},
{
label: 'ModelScope',
value: modelSourceMap.modelscope_value,
key: 'model_scope'
}
];
const SEARCH_SOURCE = [
modelSourceMap.huggingface_value,
modelSourceMap.modelscope_value
@@ -62,6 +46,29 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
Array<GPUListItem & { label: string; value: string }>
>([]);
const sourceOptions = [
{
label: 'Hugging Face',
value: modelSourceMap.huggingface_value,
key: 'huggingface'
},
{
label: 'Ollama Library',
value: modelSourceMap.ollama_library_value,
key: 'ollama_library'
},
{
label: 'ModelScope',
value: modelSourceMap.modelscope_value,
key: 'model_scope'
},
{
label: intl.formatMessage({ id: 'models.form.localPath' }),
value: modelSourceMap.local_path_value,
key: 'local_path'
}
];
const getGPUList = async () => {
const data = await queryGPUList();
const list = _.map(data.items, (item: GPUListItem) => {
@@ -119,6 +126,16 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
}
};
const handleLocalPathBlur = (e: any) => {
const value = e.target.value;
const isEndwithGGUF = _.endsWith(value, '.gguf');
if (isEndwithGGUF) {
props.onBackendChange?.(backendOptionsMap.llamaBox);
} else {
props.onBackendChange?.(backendOptionsMap.vllm);
}
};
const renderHuggingfaceFields = () => {
return (
<>
@@ -246,6 +263,34 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
);
};
const renderLocalPathFields = () => {
return (
<>
<Form.Item<FormData>
name="local_path"
key="local_path"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.filePath' }) }
)
}
]}
>
<SealInput.Input
onBlur={handleLocalPathBlur}
label={intl.formatMessage({ id: 'models.form.filePath' })}
required
></SealInput.Input>
</Form.Item>
</>
);
};
const renderFieldsBySource = useMemo(() => {
if (SEARCH_SOURCE.includes(props.source)) {
return renderHuggingfaceFields();
@@ -258,6 +303,9 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
if (props.source === modelSourceMap.s3_value) {
return renderS3Fields();
}
if (props.source === modelSourceMap.local_path_value) {
return renderLocalPathFields();
}
return null;
}, [props.source, isGGUF, intl]);
@@ -332,31 +380,34 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="source"
rules={[
{
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: intl.formatMessage({ id: 'models.form.source' }) }
)
}
]}
>
{
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>
}
]}
>
{
<SealSelect
disabled={true}
label={intl.formatMessage({
id: 'models.form.source'
})}
options={sourceOptions}
required
></SealSelect>
}
</Form.Item>
</Form.Item>
}
{renderFieldsBySource}
<Form.Item<FormData>
name="replicas"
src/pages/llmodels/components/deploy-modal.tsx
+12 -2
View File
@@ -5,7 +5,7 @@ import { useIntl } from '@umijs/max';
import { Button, Drawer } from 'antd';
import { debounce } from 'lodash';
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { modelSourceMap } from '../config';
import { backendOptionsMap, modelSourceMap } from '../config';
import { FormData, ListItem } from '../config/types';
import ColumnWrapper from './column-wrapper';
import DataForm from './data-form';
@@ -27,7 +27,6 @@ type AddModalProps = {
};
const AddModal: React.FC<AddModalProps> = (props) => {
console.log('addmodel====');
const {
title,
open,
@@ -72,6 +71,16 @@ const AddModal: React.FC<AddModalProps> = (props) => {
}
};
const handleBackendChange = (backend: string) => {
if (backend === backendOptionsMap.vllm) {
setIsGGUF(false);
}
if (backend === backendOptionsMap.llamaBox) {
setIsGGUF(true);
}
};
useEffect(() => {
handleSelectModelFile({ fakeName: '' });
}, [selectedModel]);
@@ -188,6 +197,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
onOk={onOk}
ref={form}
isGGUF={isGGUF}
onBackendChange={handleBackendChange}
></DataForm>
</>
</ColumnWrapper>
src/pages/llmodels/components/table-list.tsx
+32 -3
View File
@@ -2,6 +2,7 @@ import AutoTooltip from '@/components/auto-tooltip';
import DeleteModal from '@/components/delete-modal';
import DropdownButtons from '@/components/drop-down-buttons';
import IconFont from '@/components/icon-font';
import { PageSize } from '@/components/logs-viewer/config';
import PageTools from '@/components/page-tools';
import SealTable from '@/components/seal-table';
import SealColumn from '@/components/seal-table/components/seal-column';
@@ -39,7 +40,11 @@ import {
queryModelInstancesList,
updateModel
} from '../apis';
import { getSourceRepoConfigValue, modelSourceMap } from '../config';
import {
InstanceStatusMap,
getSourceRepoConfigValue,
modelSourceMap
} from '../config';
import { FormData, ListItem, ModelInstanceListItem } from '../config/types';
import DeployModal from './deploy-modal';
import InstanceItem from './instance-item';
@@ -99,6 +104,7 @@ const Models: React.FC<ModelsProps> = ({
const [currentInstance, setCurrentInstance] = useState<{
url: string;
status: string;
tail?: number;
}>({
url: '',
status: ''
@@ -191,6 +197,21 @@ const Models: React.FC<ModelsProps> = ({
source: modelSourceMap.modelscope_value
});
}
},
{
label: intl.formatMessage({ id: 'models.form.localPath' }),
value: modelSourceMap.local_path_value,
key: 'local_path',
icon: <IconFont type="icon-hard-disk"></IconFont>,
onClick: (e: any) => {
setOpenDeployModal(() => {
return {
show: true,
width: 600,
source: modelSourceMap.local_path_value
};
});
}
}
];
@@ -341,7 +362,8 @@ const Models: React.FC<ModelsProps> = ({
try {
setCurrentInstance({
url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
status: row.status
status: row.state,
tail: row.state === InstanceStatusMap.Downloading ? undefined : PageSize
});
setOpenLogModal(true);
} catch (error) {
@@ -438,7 +460,13 @@ const Models: React.FC<ModelsProps> = ({
if (record.source === modelSourceMap.huggingface_value) {
return `${modelSourceMap.huggingface}/${record.huggingface_repo_id}`;
}
return `${modelSourceMap.ollama_library}/${record.ollama_library_model_name}`;
if (record.source === modelSourceMap.local_path_value) {
return `${modelSourceMap.local_path} ${record.local_path}`;
}
if (record.source === modelSourceMap.ollama_library_value) {
return `${modelSourceMap.ollama_library}/${record.ollama_library_model_name}`;
}
return '';
}, []);
const handleCloseViewCode = useCallback(() => {
@@ -653,6 +681,7 @@ const Models: React.FC<ModelsProps> = ({
></DeployModal>
<ViewLogsModal
url={currentInstance.url}
tail={currentInstance.tail}
open={openLogModal}
onCancel={handleLogModalCancel}
></ViewLogsModal>
src/pages/llmodels/components/update-modal.tsx
+56 -19
View File
@@ -7,7 +7,7 @@ import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
import { Form, Modal } from 'antd';
import _ from 'lodash';
import { memo, useEffect, useMemo, useState } from 'react';
import React, { memo, useEffect, useMemo, useState } from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import { queryGPUList } from '../apis';
@@ -28,24 +28,6 @@ type AddModalProps = {
onCancel: () => void;
};
const sourceOptions = [
{
label: 'Hugging Face',
value: modelSourceMap.huggingface_value,
key: 'huggingface'
},
{
label: 'Ollama Library',
value: modelSourceMap.ollama_library_value,
key: 'ollama_library'
},
{
label: 'ModelScope',
value: modelSourceMap.modelscope_value,
key: 'model_scope'
}
];
const SEARCH_SOURCE = [
modelSourceMap.huggingface_value,
modelSourceMap.modelscope_value
@@ -72,6 +54,29 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
setGpuOptions(list);
};
const sourceOptions = [
{
label: 'Hugging Face',
value: modelSourceMap.huggingface_value,
key: 'huggingface'
},
{
label: 'Ollama Library',
value: modelSourceMap.ollama_library_value,
key: 'ollama_library'
},
{
label: 'ModelScope',
value: modelSourceMap.modelscope_value,
key: 'model_scope'
},
{
label: intl.formatMessage({ id: 'models.form.localPath' }),
value: modelSourceMap.local_path_value,
key: 'local_path'
}
];
useEffect(() => {
if (action === PageAction.EDIT && open) {
const result = setSourceRepoConfigValue(
@@ -203,6 +208,34 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
);
};
const renderLocalPathFields = () => {
return (
<>
<Form.Item<FormData>
name="local_path"
key="local_path"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.filePath' }) }
)
}
]}
>
<SealInput.Input
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'models.form.filePath' })}
required
></SealInput.Input>
</Form.Item>
</>
);
};
const renderFieldsBySource = useMemo(() => {
if (SEARCH_SOURCE.includes(props.data?.source || '')) {
return renderHuggingfaceFields();
@@ -216,6 +249,10 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
return renderS3Fields();
}
if (props.data?.source === modelSourceMap.local_path_value) {
return renderLocalPathFields();
}
return null;
}, [props.data?.source, isGGUF, intl]);
src/pages/llmodels/components/view-logs-modal.tsx
+3 -1
View File
@@ -6,12 +6,13 @@ import React, { useCallback, useEffect, useState } from 'react';
type ViewModalProps = {
open: boolean;
url: string;
tail?: number;
autoScroll?: boolean;
onCancel: () => void;
};
const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const { open, url, onCancel } = props || {};
const { open, url, onCancel, tail } = props || {};
const [modalSize, setModalSize] = useState<any>({
width: 600,
height: 420
@@ -77,6 +78,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
height={modalSize.height}
diffHeight={93}
url={url}
tail={tail}
params={{
follow: true
}}