chore: model file components for updating

src/pages/llmodels/components/deploy-builtin-modal.tsx

@@ -548,6 +548,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
           byBuiltIn: true,
           sizeOptions: sizeOptions,
           quantizationOptions: quantizationOptions,
+          pageAction: action,
           onSizeChange: handleOnSizeChange,
           onQuantizationChange: handleOnQuantizationChange,
           onValuesChange: onValuesChange

src/pages/llmodels/components/deploy-modal.tsx

@@ -365,6 +365,7 @@ const AddModal: FC<AddModalProps> = (props) => {
         <FormContext.Provider
           value={{
             isGGUF: isGGUF,
+            pageAction: action,
             modelFileOptions: props.modelFileOptions,
             onValuesChange: onValuesChange
           }}

src/pages/llmodels/components/search-model.tsx

@@ -75,7 +75,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
     modelSourceMap.huggingface_value,
     modelSourceMap.modelscope_value
   ];
-  console.log('hasLinuxWorker---------:', hasLinuxWorker);
+
   const [isEvaluating, setIsEvaluating] = useState<boolean>(false);
   const [current, setCurrent] = useState<string>('');
   const currentRef = useRef<string>('');
@@ -448,7 +448,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
     return () => {
       axiosTokenRef.current?.abort?.();
       checkTokenRef.current?.cancel?.();
-      // workerRef.current?.terminate();
+
       if (timer.current) {
         clearTimeout(timer.current);
       }

src/pages/llmodels/components/table-list.tsx

@@ -93,6 +93,7 @@ interface ModelsProps {
   onViewLogs: () => void;
   onCancelViewLogs: () => void;
   handleOnToggleExpandAll: () => void;
+  onStop?: (ids: number[]) => void;
   queryParams: {
     page: number;
     perPage: number;
@@ -132,6 +133,7 @@ const Models: React.FC<ModelsProps> = ({
   onCancelViewLogs,
   handleCategoryChange,
   handleOnToggleExpandAll,
+  onStop,
   modelFileOptions,
   deleteIds,
   dataSource,
@@ -260,6 +262,7 @@ const Models: React.FC<ModelsProps> = ({
   const handleStopModel = async (row: ListItem) => {
     await updateModel(getFormattedData(row, { replicas: 0 }));
     removeExpandedRowKey([row.id]);
+    onStop?.([row.id]);
   };
 
   const handleModalOk = useCallback(
@@ -576,6 +579,7 @@ const Models: React.FC<ModelsProps> = ({
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRows, handleStopModel);
         rowSelection.clearSelections();
+        onStop?.(rowSelection.selectedRowKeys as number[]);
       }
     });
   };

src/pages/llmodels/components/update-modal.tsx

@@ -1,6 +1,4 @@
-import IconFont from '@/components/icon-font';
 import ModalFooter from '@/components/modal-footer';
-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 TooltipList from '@/components/tooltip-list';
@@ -8,7 +6,7 @@ import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
-import { Button, Form, Modal, Typography } from 'antd';
+import { Button, Form, Modal } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef } from 'react';
 import {
@@ -17,14 +15,15 @@ import {
   backendTipsList,
   updateExcludeFields as excludeFields,
   getSourceRepoConfigValue,
-  localPathTipsList,
   modelSourceMap,
-  ollamaModelOptions,
   sourceOptions,
   updateIgnoreFields
 } from '../config';
-import { FormContext } from '../config/form-context';
+import { FormContext, FormInnerContext } from '../config/form-context';
 import { FormData, ListItem } from '../config/types';
+import HuggingFaceForm from '../forms/hugging-face';
+import LocalPathForm from '../forms/local-path';
+import OllamaForm from '../forms/ollama_library';
 import { useCheckCompatibility } from '../hooks';
 import AdvanceConfig from './advance-config';
 import ColumnWrapper from './column-wrapper';
@@ -43,11 +42,6 @@ type AddModalProps = {
   onCancel: () => void;
 };
 
-const SEARCH_SOURCE = [
-  modelSourceMap.huggingface_value,
-  modelSourceMap.modelscope_value
-];
-
 const UpdateModal: React.FC<AddModalProps> = (props) => {
   const {
     title,
@@ -68,10 +62,8 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
 
   const { getRuleMessage } = useAppUtils();
   const [form] = Form.useForm();
-  const localPathCache = useRef<string>('');
   const submitAnyway = useRef<boolean>(false);
   const originFormData = useRef<any>(null);
-  const timer0 = useRef<any>(null);
 
   const setOriginalFormData = () => {
     if (!originFormData.current) {
@@ -187,192 +179,6 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     }, 100);
   };
 
-  const handleOnFocus = () => {
-    localPathCache.current = form.getFieldValue('local_path');
-  };
-
-  const handleLocalPathBlur = (e: any) => {
-    const value = e.target.value;
-    if (value === localPathCache.current && value) {
-      return;
-    }
-    const isEndwithGGUF = _.endsWith(value, '.gguf');
-    const isBlobFile = value.split('/').pop().includes('sha256');
-    let backend = form.getFieldValue('backend');
-
-    if (
-      !isEndwithGGUF &&
-      !isBlobFile &&
-      backend === backendOptionsMap.llamaBox
-    ) {
-      backend = backendOptionsMap.vllm;
-    } else if (isEndwithGGUF || isBlobFile) {
-      backend = backendOptionsMap.llamaBox;
-    }
-    form.setFieldValue('backend', backend);
-    handleBackendChange?.(backend);
-  };
-
-  const handleOnBlur = (e: any) => {
-    const value = e.target.value;
-    if (value) {
-      handleOnValuesChange?.({
-        changedValues: {},
-        allValues: {
-          ...form.getFieldsValue?.()
-        },
-        source: formData?.source
-      });
-    }
-  };
-
-  const renderHuggingfaceFields = () => {
-    return (
-      <>
-        <Form.Item<FormData>
-          name="repo_id"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.input'
-                },
-                { name: intl.formatMessage({ id: 'models.form.repoid' }) }
-              )
-            }
-          ]}
-        >
-          <SealInput.Input
-            onBlur={handleOnBlur}
-            label={intl.formatMessage({ id: 'models.form.repoid' })}
-            required
-            disabled={false}
-          ></SealInput.Input>
-        </Form.Item>
-        {isGGUF && (
-          <Form.Item<FormData>
-            name="file_name"
-            rules={[
-              {
-                required: true,
-                message: intl.formatMessage(
-                  {
-                    id: 'common.form.rule.input'
-                  },
-                  { name: intl.formatMessage({ id: 'models.form.filename' }) }
-                )
-              }
-            ]}
-          >
-            <SealInput.Input
-              onBlur={handleOnBlur}
-              label={intl.formatMessage({ id: 'models.form.filename' })}
-              required
-              disabled={false}
-            ></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' }) }
-              )
-            }
-          ]}
-        >
-          <SealAutoComplete
-            filterOption
-            defaultActiveFirstOption
-            disabled={false}
-            options={ollamaModelOptions}
-            onBlur={handleOnBlur}
-            placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
-            description={
-              <span>
-                <span>
-                  {intl.formatMessage({ id: 'models.form.ollamalink' })}
-                </span>
-                <Typography.Link
-                  className="flex-center"
-                  href="https://www.ollama.com/library"
-                  target="_blank"
-                >
-                  <IconFont
-                    type="icon-external-link"
-                    className="font-size-14"
-                  ></IconFont>
-                </Typography.Link>
-              </span>
-            }
-            label={intl.formatMessage({ id: 'model.form.ollama.model' })}
-            required
-          ></SealAutoComplete>
-        </Form.Item>
-      </>
-    );
-  };
-
-  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}
-            onFocus={handleOnFocus}
-            disabled={false}
-            label={intl.formatMessage({ id: 'models.form.filePath' })}
-            description={<TooltipList list={localPathTipsList}></TooltipList>}
-            required
-          ></SealInput.Input>
-        </Form.Item>
-      </>
-    );
-  };
-
-  const renderFieldsBySource = useMemo(() => {
-    if (SEARCH_SOURCE.includes(formData?.source || '')) {
-      return renderHuggingfaceFields();
-    }
-
-    if (formData?.source === modelSourceMap.ollama_library_value) {
-      return renderOllamaModelFields();
-    }
-
-    if (formData?.source === modelSourceMap.local_path_value) {
-      return renderLocalPathFields();
-    }
-
-    return null;
-  }, [formData?.source, isGGUF, intl]);
-
   const handleSumit = () => {
     form.submit();
   };
@@ -528,6 +334,8 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
       >
         <FormContext.Provider
           value={{
+            isGGUF: isGGUF,
+            pageAction: action,
             onValuesChange: handleManulOnValuesChange
           }}
         >
@@ -583,7 +391,16 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                 ></SealSelect>
               )}
             </Form.Item>
-            {renderFieldsBySource}
+            <FormInnerContext.Provider
+              value={{
+                onBackendChange: handleBackendChange,
+                gpuOptions: gpuOptions
+              }}
+            >
+              <HuggingFaceForm></HuggingFaceForm>
+              <OllamaForm></OllamaForm>
+              <LocalPathForm></LocalPathForm>
+            </FormInnerContext.Provider>
             <Form.Item name="backend" rules={[{ required: true }]}>
               <SealSelect
                 required

src/pages/llmodels/config/form-context.ts

@@ -1,8 +1,10 @@
+import { PageActionType } from '@/config/types';
 import React from 'react';
 
 interface FormContextProps {
   isGGUF?: boolean;
   byBuiltIn?: boolean;
+  pageAction: PageActionType;
   sizeOptions?: Global.BaseOption<number>[];
   quantizationOptions?: Global.BaseOption<string>[];
   modelFileOptions?: any[];

src/pages/llmodels/config/llama-config.ts

@@ -596,6 +596,14 @@ const options = [
   {
     label: '--visual-max-image-cache',
     value: '--visual-max-image-cache'
+  },
+  {
+    label: '--max-projected-cache',
+    value: '--max-projected-cache'
+  },
+  {
+    label: '--swa-full',
+    value: '--swa-full'
   }
 ];
 

src/pages/llmodels/forms/hugging-face.tsx

@@ -1,4 +1,5 @@
 import SealInput from '@/components/seal-form/seal-input';
+import { PageAction } from '@/config';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
@@ -8,10 +9,11 @@ import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
 
 const HuggingFaceForm: React.FC = () => {
+  const formInstance = Form.useFormInstance();
   const formCtx = useFormContext();
   const { getRuleMessage } = useAppUtils();
   const intl = useIntl();
-  const { isGGUF, byBuiltIn } = formCtx;
+  const { isGGUF, byBuiltIn, pageAction, onValuesChange } = formCtx;
   const source = Form.useWatch('source');
 
   console.log('HuggingFaceForm', { source, isGGUF });
@@ -25,6 +27,11 @@ const HuggingFaceForm: React.FC = () => {
   ) {
     return null;
   }
+
+  const handleOnBlur = (e: any) => {
+    onValuesChange?.({}, formInstance.getFieldsValue());
+  };
+
   return (
     <>
       <Form.Item<FormData>
@@ -40,7 +47,8 @@ const HuggingFaceForm: React.FC = () => {
         <SealInput.Input
           label={intl.formatMessage({ id: 'models.form.repoid' })}
           required
-          disabled={true}
+          disabled={pageAction === PageAction.CREATE}
+          onBlur={handleOnBlur}
         ></SealInput.Input>
       </Form.Item>
       {isGGUF && (
@@ -57,7 +65,8 @@ const HuggingFaceForm: React.FC = () => {
           <SealInput.Input
             label={intl.formatMessage({ id: 'models.form.filename' })}
             required
-            disabled={true}
+            disabled={pageAction === PageAction.CREATE}
+            onBlur={handleOnBlur}
           ></SealInput.Input>
         </Form.Item>
       )}

src/pages/llmodels/index.tsx

@@ -252,6 +252,12 @@ const Models: React.FC = () => {
     });
   }, [fetchData, createModelsChunkRequest, createModelsInstanceChunkRequest]);
 
+  const handleOnStop = useCallback((ids: number[]) => {
+    cacheInsDataListRef.current = cacheInsDataListRef.current.filter(
+      (item: any) => !ids.includes(item.model_id)
+    );
+  }, []);
+
   const handleSearch = useCallback(async () => {
     await fetchData();
   }, [fetchData]);
@@ -458,6 +464,7 @@ const Models: React.FC = () => {
         handleOnToggleExpandAll={createModelsInstanceChunkRequest}
         onViewLogs={handleOnViewLogs}
         onCancelViewLogs={handleOnCancelViewLogs}
+        onStop={handleOnStop}
         queryParams={queryParams}
         loading={dataSource.loading}
         loadend={dataSource.loadend}