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}