chore: deploy model from local path

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;

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;

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<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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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"
+        <Form.Item<FormData>
-        rules={[
+          name="source"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                {
+                  id: 'common.form.rule.select'
+                },
+                { name: intl.formatMessage({ id: 'models.form.source' }) }
+              )
+            }
+          ]}
+        >
           {
-            required: true,
+            <SealSelect
-            message: intl.formatMessage(
+              disabled={true}
-              {
+              label={intl.formatMessage({
-                id: 'common.form.rule.select'
+                id: 'models.form.source'
-              },
+              })}
-              { name: intl.formatMessage({ id: 'models.form.source' }) }
+              options={sourceOptions}
-            )
+              required
+            ></SealSelect>
           }
-        ]}
+        </Form.Item>
-      >
+      }
-        {
+
-          <SealSelect
-            disabled={true}
-            label={intl.formatMessage({
-              id: 'models.form.source'
-            })}
-            options={sourceOptions}
-            required
-          ></SealSelect>
-        }
-      </Form.Item>
       {renderFieldsBySource}
       <Form.Item<FormData>
         name="replicas"

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<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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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?: {