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/components/icon-font/index.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { createFromIconfontCN } from '@ant-design/icons';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4613488_l9554igzbh.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_flbkvujyhg4.js'
});
export default IconFont;
src/components/logs-viewer/config.ts
+2
View File
@@ -1,2 +1,4 @@
export const controlSeqRegex = /\x1b\[(\d*);?(\d*)?([A-DJKHfm])/g;
export const replaceLineRegex = /\r\n/g;
export const PageSize = 500;
src/components/logs-viewer/logs-list.tsx
+25 -3
View File
@@ -1,7 +1,14 @@
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import classNames from 'classnames';
import _, { throttle } from 'lodash';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import React, {
forwardRef,
useCallback,
useEffect,
useImperativeHandle,
useRef,
useState
} from 'react';
import './styles/logs-list.less';
interface LogsListProps {
@@ -9,12 +16,14 @@ interface LogsListProps {
height?: number;
onScroll?: (isTop: boolean) => void;
diffHeight?: number;
ref?: any;
}
const LogsList: React.FC<LogsListProps> = (props) => {
const LogsList: React.FC<LogsListProps> = forwardRef((props, ref) => {
const { dataList, height, onScroll, diffHeight = 96 } = props;
const {
initialize,
updateScrollerPosition,
updateScrollerPositionToTop,
generateInstance,
scrollEventElement,
instance,
@@ -28,6 +37,19 @@ const LogsList: React.FC<LogsListProps> = (props) => {
const scroller = useRef<any>({});
const stopScroll = useRef(false);
const scrollToBottom = useCallback(() => {
updateScrollerPosition(0);
}, [updateScrollerPosition]);
const scrollToTop = useCallback(() => {
updateScrollerPositionToTop();
}, [updateScrollerPositionToTop]);
useImperativeHandle(ref, () => ({
scrollToBottom,
scrollToTop
}));
const debounceResetStopScroll = _.debounce(() => {
stopScroll.current = false;
}, 30000);
@@ -106,6 +128,6 @@ const LogsList: React.FC<LogsListProps> = (props) => {
</div>
</div>
);
};
});
export default React.memo(LogsList);
src/components/logs-viewer/use-logs-pagination.ts
+2 -1
View File
@@ -1,7 +1,8 @@
import { useState } from 'react';
import { PageSize } from './config';
const useLogsPagination = () => {
const [pageSize, setPageSize] = useState(500);
const [pageSize, setPageSize] = useState(PageSize);
const [page, setPage] = useState(1);
const [total, setTotal] = useState(1);
src/components/logs-viewer/virtual-log-list.tsx
+17 -2
View File
@@ -23,10 +23,11 @@ interface LogsViewerProps {
url: string;
params?: object;
ref?: any;
tail?: number;
diffHeight?: number;
}
const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const { diffHeight, url } = props;
const { diffHeight, url, tail: defaultTail } = props;
const { pageSize, page, setPage, setTotalPage, totalPage } =
useLogsPagination();
const { setChunkFetch } = useSetChunkFetch();
@@ -34,10 +35,12 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const cacheDataRef = useRef<any>('');
const [logs, setLogs] = useState<any[]>([]);
const logParseWorker = useRef<any>(null);
const tail = useRef<any>(pageSize);
const tail = useRef<any>(defaultTail);
const [isLoadend, setIsLoadend] = useState(false);
const [loading, setLoading] = useState(false);
const [isAtTop, setIsAtTop] = useState(false);
const [scrollPos, setScrollPos] = useState<any[]>([]);
const logListRef = useRef<any>(null);
useImperativeHandle(ref, () => ({
abort() {
@@ -110,6 +113,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const end = newPage * pageSize;
const prePage = list.slice(start, end).join('\n');
setPage(newPage);
setScrollPos(['bottom', newPage]);
logParseWorker.current.postMessage({
inputStr: prePage
});
@@ -125,6 +129,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const end = newPage * pageSize;
const nextPage = list.slice(start, end).join('\n');
setPage(newPage);
setScrollPos(['top', newPage]);
logParseWorker.current.postMessage({
inputStr: nextPage
});
@@ -183,11 +188,21 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
};
}, [url, props.params]);
useEffect(() => {
if (scrollPos[0] === 'top') {
logListRef.current?.scrollToTop();
}
if (scrollPos[0] === 'bottom') {
logListRef.current?.scrollToBottom();
}
}, [scrollPos]);
return (
<div className="logs-viewer-wrap-w2">
<div className="wrap">
<div className={classNames('content')}>
<LogsList
ref={logListRef}
dataList={logs}
diffHeight={diffHeight}
onScroll={handleOnScroll}
src/hooks/use-overlay-scroller.ts
+16 -1
View File
@@ -68,6 +68,7 @@ export default function useOverlayScroller(options?: any) {
instanceRef.current?.update?.();
}, [scrollEventElement.current, instanceRef.current]);
// scroll to bottom
const throttledUpdateScrollerPosition = React.useCallback(
(delay?: number) => {
if (delay === 0) {
@@ -79,6 +80,19 @@ export default function useOverlayScroller(options?: any) {
[throttledScroll, scrollauto]
);
// scroll to top
const updateScrollerPositionToTop = React.useCallback(() => {
console.log(
' scrollEventElement.current.scrollHeight====',
scrollEventElement.current.scrollHeight
);
scrollEventElement.current?.scrollTo?.({
top: 0,
behavior: 'auto'
});
instanceRef.current?.update?.();
}, [scrollEventElement.current, instanceRef.current]);
const generateInstance = () => {
instanceRef.current = instance?.();
scrollEventElement.current =
@@ -114,6 +128,7 @@ export default function useOverlayScroller(options?: any) {
scrollEventElement: scrollEventElement.current,
initialized: initialized.current,
generateInstance,
updateScrollerPosition: throttledUpdateScrollerPosition
updateScrollerPosition: throttledUpdateScrollerPosition,
updateScrollerPositionToTop: updateScrollerPositionToTop
};
}
src/locales/en-US/models.ts
+3 -1
View File
@@ -68,5 +68,7 @@ export default {
'models.form.backend_parameters.vllm.tips':
'More {backend} parameter details',
'models.logs.pagination.prev': 'Previous {lines} Lines',
'models.logs.pagination.next': 'Next {lines} Lines'
'models.logs.pagination.next': 'Next {lines} Lines',
'models.form.localPath': 'Local Path',
'models.form.filePath': 'File Path'
};
src/locales/zh-CN/models.ts
+3 -1
View File
@@ -66,5 +66,7 @@ export default {
'例如，--max-model-len=8192',
'models.form.backend_parameters.vllm.tips': '更多 {backend} 参数说明查看',
'models.logs.pagination.prev': '上一 {lines} 行',
'models.logs.pagination.next': '下一 {lines} 行'
'models.logs.pagination.next': '下一 {lines} 行',
'models.form.localPath': '本地路径',
'models.form.filePath': '文件路径'
};
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
}}
src/pages/llmodels/config/index.ts
+5 -2
View File
@@ -80,14 +80,17 @@ export const modelSourceMap: Record<string, string> = {
ollama_library_value: 'ollama_library',
s3_value: 's3',
modelScope: 'ModelScope',
modelscope_value: 'model_scope'
modelscope_value: 'model_scope',
local_path: 'Local Path',
local_path_value: 'local_path'
};
export const modelSourceValueMap = {
[modelSourceMap.huggingface_value]: modelSourceMap.huggingface,
[modelSourceMap.ollama_library_value]: modelSourceMap.ollama_library,
[modelSourceMap.s3_value]: modelSourceMap.s3,
[modelSourceMap.modelscope_value]: modelSourceMap.modelScope
[modelSourceMap.modelscope_value]: modelSourceMap.modelScope,
[modelSourceMap.local_path_value]: modelSourceMap.local_path
};
export const InstanceStatusMap = {
src/pages/llmodels/config/types.ts
+2
View File
@@ -15,6 +15,7 @@ export interface ListItem {
name: string;
description: string;
id: number;
local_path?: string;
created_at: string;
updated_at: string;
gpu_selector?: {
@@ -36,6 +37,7 @@ export interface FormData {
s3_address: string;
ollama_library_model_name: string;
distributed_inference_across_workers?: boolean;
local_path?: string;
model_scope_model_id?: string;
model_scope_file_path?: string;
gpu_selector?: {