diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx index eabca2bf..c8392f84 100644 --- a/src/components/icon-font/index.tsx +++ b/src/components/icon-font/index.tsx @@ -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; diff --git a/src/components/logs-viewer/config.ts b/src/components/logs-viewer/config.ts index b88588df..e986b545 100644 --- a/src/components/logs-viewer/config.ts +++ b/src/components/logs-viewer/config.ts @@ -1,2 +1,4 @@ export const controlSeqRegex = /\x1b\[(\d*);?(\d*)?([A-DJKHfm])/g; export const replaceLineRegex = /\r\n/g; + +export const PageSize = 500; diff --git a/src/components/logs-viewer/logs-list.tsx b/src/components/logs-viewer/logs-list.tsx index 557d9802..efe2516c 100644 --- a/src/components/logs-viewer/logs-list.tsx +++ b/src/components/logs-viewer/logs-list.tsx @@ -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 = (props) => { +const LogsList: React.FC = 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 = (props) => { const scroller = useRef({}); 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 = (props) => { ); -}; +}); export default React.memo(LogsList); diff --git a/src/components/logs-viewer/use-logs-pagination.ts b/src/components/logs-viewer/use-logs-pagination.ts index 0e1b045c..06bf7be0 100644 --- a/src/components/logs-viewer/use-logs-pagination.ts +++ b/src/components/logs-viewer/use-logs-pagination.ts @@ -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); diff --git a/src/components/logs-viewer/virtual-log-list.tsx b/src/components/logs-viewer/virtual-log-list.tsx index a02fe604..db3c10f3 100644 --- a/src/components/logs-viewer/virtual-log-list.tsx +++ b/src/components/logs-viewer/virtual-log-list.tsx @@ -23,10 +23,11 @@ interface LogsViewerProps { url: string; params?: object; ref?: any; + tail?: number; diffHeight?: number; } const LogsViewer: React.FC = 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 = forwardRef((props, ref) => { const cacheDataRef = useRef(''); const [logs, setLogs] = useState([]); const logParseWorker = useRef(null); - const tail = useRef(pageSize); + const tail = useRef(defaultTail); const [isLoadend, setIsLoadend] = useState(false); const [loading, setLoading] = useState(false); const [isAtTop, setIsAtTop] = useState(false); + const [scrollPos, setScrollPos] = useState([]); + const logListRef = useRef(null); useImperativeHandle(ref, () => ({ abort() { @@ -110,6 +113,7 @@ const LogsViewer: React.FC = 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 = 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 = forwardRef((props, ref) => { }; }, [url, props.params]); + useEffect(() => { + if (scrollPos[0] === 'top') { + logListRef.current?.scrollToTop(); + } + if (scrollPos[0] === 'bottom') { + logListRef.current?.scrollToBottom(); + } + }, [scrollPos]); + return (
{ 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 }; } diff --git a/src/locales/en-US/models.ts b/src/locales/en-US/models.ts index 9a215a6c..b8167091 100644 --- a/src/locales/en-US/models.ts +++ b/src/locales/en-US/models.ts @@ -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' }; diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts index 0e320cf2..8dbd1f50 100644 --- a/src/locales/zh-CN/models.ts +++ b/src/locales/zh-CN/models.ts @@ -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': '文件路径' }; diff --git a/src/pages/llmodels/components/data-form.tsx b/src/pages/llmodels/components/data-form.tsx index af0b7c58..86034a25 100644 --- a/src/pages/llmodels/components/data-form.tsx +++ b/src/pages/llmodels/components/data-form.tsx @@ -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 = forwardRef((props, ref) => { Array >([]); + 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 = 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 = forwardRef((props, ref) => { ); }; + const renderLocalPathFields = () => { + return ( + <> + + name="local_path" + key="local_path" + rules={[ + { + required: true, + message: intl.formatMessage( + { + id: 'common.form.rule.input' + }, + { name: intl.formatMessage({ id: 'models.form.filePath' }) } + ) + } + ]} + > + + + + ); + }; + const renderFieldsBySource = useMemo(() => { if (SEARCH_SOURCE.includes(props.source)) { return renderHuggingfaceFields(); @@ -258,6 +303,9 @@ const DataForm: React.FC = 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 = forwardRef((props, ref) => { required > - - name="source" - rules={[ + { + + 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' }) } - ) + } - ]} - > - { - - } - + + } + {renderFieldsBySource} name="replicas" diff --git a/src/pages/llmodels/components/deploy-modal.tsx b/src/pages/llmodels/components/deploy-modal.tsx index 009ce7ba..da5d120e 100644 --- a/src/pages/llmodels/components/deploy-modal.tsx +++ b/src/pages/llmodels/components/deploy-modal.tsx @@ -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 = (props) => { - console.log('addmodel===='); const { title, open, @@ -72,6 +71,16 @@ const AddModal: React.FC = (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 = (props) => { onOk={onOk} ref={form} isGGUF={isGGUF} + onBackendChange={handleBackendChange} > diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index a2055037..bfeb774c 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/src/pages/llmodels/components/table-list.tsx @@ -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 = ({ const [currentInstance, setCurrentInstance] = useState<{ url: string; status: string; + tail?: number; }>({ url: '', status: '' @@ -191,6 +197,21 @@ const Models: React.FC = ({ source: modelSourceMap.modelscope_value }); } + }, + { + label: intl.formatMessage({ id: 'models.form.localPath' }), + value: modelSourceMap.local_path_value, + key: 'local_path', + icon: , + onClick: (e: any) => { + setOpenDeployModal(() => { + return { + show: true, + width: 600, + source: modelSourceMap.local_path_value + }; + }); + } } ]; @@ -341,7 +362,8 @@ const Models: React.FC = ({ 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 = ({ 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 = ({ > diff --git a/src/pages/llmodels/components/update-modal.tsx b/src/pages/llmodels/components/update-modal.tsx index 636328f5..f71e2e2a 100644 --- a/src/pages/llmodels/components/update-modal.tsx +++ b/src/pages/llmodels/components/update-modal.tsx @@ -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 = (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 = (props) => { ); }; + const renderLocalPathFields = () => { + return ( + <> + + name="local_path" + key="local_path" + rules={[ + { + required: true, + message: intl.formatMessage( + { + id: 'common.form.rule.input' + }, + { name: intl.formatMessage({ id: 'models.form.filePath' }) } + ) + } + ]} + > + + + + ); + }; + const renderFieldsBySource = useMemo(() => { if (SEARCH_SOURCE.includes(props.data?.source || '')) { return renderHuggingfaceFields(); @@ -216,6 +249,10 @@ const UpdateModal: React.FC = (props) => { return renderS3Fields(); } + if (props.data?.source === modelSourceMap.local_path_value) { + return renderLocalPathFields(); + } + return null; }, [props.data?.source, isGGUF, intl]); diff --git a/src/pages/llmodels/components/view-logs-modal.tsx b/src/pages/llmodels/components/view-logs-modal.tsx index 1c62116b..a51788a8 100644 --- a/src/pages/llmodels/components/view-logs-modal.tsx +++ b/src/pages/llmodels/components/view-logs-modal.tsx @@ -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 = (props) => { - const { open, url, onCancel } = props || {}; + const { open, url, onCancel, tail } = props || {}; const [modalSize, setModalSize] = useState({ width: 600, height: 420 @@ -77,6 +78,7 @@ const ViewCodeModal: React.FC = (props) => { height={modalSize.height} diffHeight={93} url={url} + tail={tail} params={{ follow: true }} diff --git a/src/pages/llmodels/config/index.ts b/src/pages/llmodels/config/index.ts index 89c91c4e..0b1b824e 100644 --- a/src/pages/llmodels/config/index.ts +++ b/src/pages/llmodels/config/index.ts @@ -80,14 +80,17 @@ export const modelSourceMap: Record = { 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 = { diff --git a/src/pages/llmodels/config/types.ts b/src/pages/llmodels/config/types.ts index 19045a54..e2ae31ea 100644 --- a/src/pages/llmodels/config/types.ts +++ b/src/pages/llmodels/config/types.ts @@ -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?: {