chore: display warning message after form change in edit model

src/pages/llmodels/components/data-form.tsx

@@ -63,7 +63,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onValuesChange,
     onOk
   } = props;
-  console.log('modelFileOptions--------', modelFileOptions);
   const { getRuleMessage } = useAppUtils();
   const [form] = Form.useForm();
   const intl = useIntl();

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

@@ -96,7 +96,7 @@ const AddModal: FC<AddModalProps> = (props) => {
   const intl = useIntl();
   const [selectedModel, setSelectedModel] = useState<any>({});
   const [collapsed, setCollapsed] = useState<boolean>(false);
-  const [isGGUF, setIsGGUF] = useState<boolean>(props.isGGUF || false);
+  const [isGGUF, setIsGGUF] = useState<boolean>(false);
   const modelFileRef = useRef<any>(null);
 
   const getDefaultSpec = (item: any) => {
@@ -225,6 +225,7 @@ const AddModal: FC<AddModalProps> = (props) => {
           ? backendOptionsMap.llamaBox
           : backendOptionsMap.vllm;
       form.current?.setFieldValue?.('backend', backend);
+      setIsGGUF(source === modelSourceMap.ollama_library_value);
     }
   };
 

src/pages/llmodels/components/instance-item.tsx

@@ -46,7 +46,7 @@ const downloadList: ColumnProps[] = [
     width: 200
   },
   {
-    title: 'models.table.status',
+    title: 'models.table.download.progress',
     locale: true,
     key: 'download_progress',
     render: ({ row }) => {

src/pages/llmodels/components/instances.tsx

@@ -1,11 +1,17 @@
 import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
-import { Space } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useMemo } from 'react';
+import styled from 'styled-components';
 import { ModelInstanceListItem } from '../config/types';
 import '../style/instance-item.less';
 import InstanceItem from './instance-item';
 
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
 interface InstanceItemProps {
   list: ModelInstanceListItem[];
   workerList: WorkerListItem[];
@@ -39,7 +45,7 @@ const Instances: React.FC<InstanceItemProps> = ({
   }, []);
 
   return (
-    <Space size={16} direction="vertical" style={{ width: '100%' }}>
+    <Wrapper>
       {_.map(list, (item: ModelInstanceListItem, index: number) => {
         return (
           <InstanceItem
@@ -52,7 +58,7 @@ const Instances: React.FC<InstanceItemProps> = ({
           ></InstanceItem>
         );
       })}
-    </Space>
+    </Wrapper>
   );
 };
 export default Instances;

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

@@ -15,7 +15,7 @@ import {
   backendLabelMap,
   backendOptionsMap,
   backendTipsList,
-  excludeFields,
+  updateExcludeFields as excludeFields,
   getSourceRepoConfigValue,
   localPathTipsList,
   modelSourceMap,
@@ -69,8 +69,51 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
   const [form] = Form.useForm();
   const localPathCache = useRef<string>('');
   const submitAnyway = useRef<boolean>(false);
+  const originFormData = useRef<any>(null);
+  const timer0 = useRef<any>(null);
 
-  const handleOnValuesChange = (data: any) => {};
+  const setOriginalFormData = () => {
+    if (!originFormData.current) {
+      clearTimeout(timer0.current);
+      timer0.current = setTimeout(() => {
+        originFormData.current = form.getFieldsValue?.();
+      }, 200);
+    }
+  };
+
+  const handleOnValuesChange = _.debounce((data: any) => {
+    const formdata = form.getFieldsValue?.();
+    let alldata = {};
+    if (formdata.scheduleType === 'manual') {
+      alldata = {
+        ..._.omit(formdata, ['worker_selector']),
+        gpu_selector:
+          formdata.gpu_selector?.gpu_ids?.length > 0
+            ? originFormData.current?.gpu_selector
+            : null
+      };
+    } else {
+      alldata = {
+        ..._.omit(formdata, ['gpu_selector']),
+        worker_selector: originFormData.current?.worker_selector || null
+      };
+    }
+    const isEqual = _.isEqual(alldata, originFormData.current);
+    if (isEqual) {
+      setWarningStatus({
+        show: false,
+        message: ''
+      });
+    } else {
+      setWarningStatus({
+        show: true,
+        isDefault: true,
+        message: intl.formatMessage({
+          id: 'models.form.update.tips'
+        })
+      });
+    }
+  }, 300);
 
   // voxbox is not support multi gpu
   const handleSetGPUIds = (backend: string) => {
@@ -353,17 +396,11 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
 
   useEffect(() => {
     if (open && formData) {
-      form.setFieldsValue(formData);
-      setWarningStatus({
-        show: true,
-        isDefault: true,
-        message: intl.formatMessage({
-          id: 'models.form.update.tips'
-        })
-      });
+      setOriginalFormData();
     }
     if (!open) {
       checkTokenRef.current?.cancel?.();
+      originFormData.current = null;
       setWarningStatus({
         show: false,
         message: ''
@@ -456,7 +493,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
           }}
         >
           <Form
-            name="addModalForm"
+            name="updateModalForm"
             form={form}
             onFinish={handleOk}
             onValuesChange={onValuesChange}

src/pages/llmodels/config/index.ts

@@ -479,3 +479,40 @@ export const excludeFields = [
   'backend',
   'gpu_selector'
 ];
+
+export const updateExcludeFields = [
+  'repo_id',
+  'file_name',
+  'description',
+  'source',
+  'worker_selector',
+  'backend_parameters',
+  'local_path',
+  'backend_version',
+  'ollama_library_model_name',
+  'scheduleType',
+  'backend',
+  'gpu_selector'
+];
+
+export const formFields = [
+  'name',
+  'repo_id',
+  'file_name',
+  'local_path',
+  'ollama_library_model_name',
+  'backend',
+  'replicas',
+  'source',
+  'description',
+  'worker_selector',
+  'cpu_offloading',
+  'distributed_inference_across_workers',
+  'gpu_selector',
+  'gpu_ids',
+  'categories',
+  'backend_version',
+  'env',
+  'scheduleType',
+  'restart_on_error'
+];

src/pages/llmodels/hooks/index.ts

@@ -212,7 +212,6 @@ export const useGenerateModelFileOptions = () => {
       }
       return acc;
     }, []);
-    console.log('childrenList', childrenList);
 
     return childrenList;
 

src/pages/resources/components/container-install.tsx

@@ -2,9 +2,8 @@ import { GPUStackVersionAtom } from '@/atoms/user';
 import { getAtomStorage } from '@/atoms/utils';
 import EditorWrap from '@/components/editor-wrap';
 import HighlightCode from '@/components/highlight-code';
-import { WarningOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Radio } from 'antd';
+import { Radio } from 'antd';
 import React from 'react';
 import { addWorkerGuide, containerInstallOptions } from '../config';
 import './styles/installation.less';
@@ -68,22 +67,13 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
           )}
         </li>
         <li>
-          <span>
-            {intl.formatMessage({ id: 'resources.worker.driver.install' })}
-          </span>
-          <WarningOutlined
-            style={{ color: 'var(--ant-color-warning)' }}
-            className="font-size-14 m-l-5 m-r-5"
-          />
-          <Button
-            style={{ padding: 0 }}
-            type="link"
-            size="small"
-            href="https://docs.gpustack.ai/latest/installation/installation-requirements/"
-            target="_blank"
-          >
-            {intl.formatMessage({ id: 'playground.audio.enablemic.doc' })}
-          </Button>
+          <span
+            dangerouslySetInnerHTML={{
+              __html: intl.formatMessage({
+                id: 'resources.worker.driver.install'
+              })
+            }}
+          ></span>
         </li>
       </ul>
       <h3 className="font-size-14 font-600">
@@ -150,7 +140,6 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
             code={code}
             lang="bash"
             copyable={false}
-            height={160}
           ></HighlightCode>
         </EditorWrap>
       ) : (