chore: display warning message after form change in edit model

1 year ago · 7c79accda7
parent 1182fdeb43
commit 7c79accda7
23 changed files with 126 additions and 71 deletions
--- a/src/components/page-tools/index.tsx
+++ b/src/components/page-tools/index.tsx
@ -146,7 +146,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
        </Button>
      </Space>
    );
-  }, [actionItems, actionType, rowSelection?.selectedRowKeys]);
+  }, [actionItems, actionType, rowSelection?.selectedRowKeys, intl]);

  return (
    <PageTools
--- a/src/components/simple-table/index.less
+++ b/src/components/simple-table/index.less
@ -36,7 +36,7 @@
  }

  .cell-header {
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-medium);
  }

  &.light {
--- a/src/components/version-info/index.less
+++ b/src/components/version-info/index.less
@ -42,16 +42,12 @@

      .item {
        display: flex;
-        font-weight: var(--font-weight-medium);
-        color: var(--ant-color-text);
      }

      .tl {
        display: flex;
        justify-content: flex-start;
        width: 60px;
-        font-weight: var(--font-weight-normal);
-        color: var(--ant-color-text-secondary);
      }
    }
  }
--- a/src/hooks/use-chunk-request.ts
+++ b/src/hooks/use-chunk-request.ts
@ -148,12 +148,6 @@ const useSetChunkRequest = () => {
          } else {
            handler(response);
          }
-
-          console.log('chunkrequest===', {
-            result: response,
-            url,
-            params
-          });
        }
      });
      setRequestReadyState(requestData?.readyState);
@ -197,11 +191,6 @@ const useSetChunkRequest = () => {
  }, []);

  useEffect(() => {
-    console.log(
-      'chunkrequest===retryCount.current==',
-      requestReadyState,
-      retryCount.current
-    );
    if (requestReadyState === 4 && retryCount.current > 0) {
      requestConfig.current.beforeReconnect?.();
      clearTimeout(timer.current);
--- a/src/hooks/use-update-chunk-list.ts
+++ b/src/hooks/use-update-chunk-list.ts
@ -41,11 +41,6 @@ export function useUpdateChunkedList(options: {
    }, 200);
  };
  const updateChunkedList = (data: ChunkedCollection) => {
-    console.log('updateChunkedList=====', {
-      ids: data?.ids,
-      type: data?.type,
-      collection: data?.collection
-    });
    let collections = data?.collection || [];
    if (options?.computedID) {
      collections = collections?.map((item: any) => {
--- a/src/locales/en-US/models.ts
+++ b/src/locales/en-US/models.ts
@ -132,5 +132,6 @@ export default {
    'The model requires approximately {vram} VRAM and {ram} RAM.',
  'models.form.check.claims2': 'The model requires approximately {vram} VRAM.',
  'models.form.update.tips':
-    'Changes will only apply after you delete and recreate the instance.'
+    'Changes will only apply after you delete and recreate the instance.',
+  'models.table.download.progress': 'Download Progress'
 };
--- a/src/locales/en-US/resources.ts
+++ b/src/locales/en-US/resources.ts
@ -51,7 +51,7 @@ export default {
  'resources.worker.container.supported': 'Do not support macOS or Windows.',
  'resources.worker.current.version': 'Current version is {version}.',
  'resources.worker.driver.install':
-    'Ensure all necessary drivers and libraries are installed on the system prior to installing GPUStack.',
+    'Install <a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">required drivers and libraries</a> prior to GPUStack installation.',
  'resources.worker.select.command':
    'Select a label to generate the command and copy it using the copy button.',
  'resources.worker.script.install': 'Script Installation',
--- a/src/locales/ja-JP/models.ts
+++ b/src/locales/ja-JP/models.ts
@ -129,7 +129,8 @@ export default {
    'The model requires approximately {vram} VRAM and {ram} RAM.',
  'models.form.check.claims2': 'The model requires approximately {vram} VRAM.',
  'models.form.update.tips':
-    'Changes will only apply after you delete and recreate the instance.'
+    'Changes will only apply after you delete and recreate the instance.',
+  'models.table.download.progress': 'Download Progress'
 };

 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@ -147,5 +148,6 @@ export default {
 // 12. 'models.form.check.claims',
 // 13. 'model.deploy.search.placeholder',
 // 14. 'models.form.update.tips,
-// 15. models.form.check.claims2
+// 15. models.form.check.claims2,
+// 16. 'models.table.download.progress'
 // ========== End of To-Do List ==========
--- a/src/locales/ja-JP/resources.ts
+++ b/src/locales/ja-JP/resources.ts
@ -52,7 +52,7 @@ export default {
    'MacOSまたはWindowsはサポートされていません。',
  'resources.worker.current.version': '現在のバージョンは {version} です。',
  'resources.worker.driver.install':
-    'GPUStackをインストールする前に、必要なすべてのドライバーとライブラリがシステムにインストールされていることを確認してください。',
+    'Install <a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">required drivers and libraries</a> prior to GPUStack installation.',
  'resources.worker.select.command':
    'ラベルを選択してコマンドを生成し、コピーを使用してコマンドをコピーします。',
  'resources.worker.script.install': 'スクリプトインストール',
@ -95,4 +95,5 @@ export default {
 // 16. 'resources.filter.path',
 // 17. 'resources.form.workerSelector.description,
 // 18. 'resources.worker.cann.tips',
+// 19. 'resources.worker.driver.install'
 // ========== End of To-Do List ==========
--- a/src/locales/ru-RU/models.ts
+++ b/src/locales/ru-RU/models.ts
@ -132,7 +132,8 @@ export default {
    'Модель требует примерно {vram} VRAM и {ram} RAM.',
  'models.form.check.claims2': 'Модель требует примерно {vram} VRAM.',
  'models.form.update.tips':
-    'Changes will only apply after you delete and recreate the instance.'
+    'Changes will only apply after you delete and recreate the instance.',
+  'models.table.download.progress': 'Download Progress'
 };

 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@ -140,4 +141,5 @@ export default {
 // 2. 'models.form.partialoffload.tips
 // 3. 'model.deploy.search.placeholder',
 // 4. 'models.form.update.tips',
+// 5. 'models.table.download.progress
 // ========== End of To-Do List ==========
--- a/src/locales/ru-RU/resources.ts
+++ b/src/locales/ru-RU/resources.ts
@ -51,7 +51,7 @@ export default {
  'resources.worker.container.supported': 'Только для Linux.',
  'resources.worker.current.version': 'Текущая версия: {version}',
  'resources.worker.driver.install':
-    'Установите необходимые драйверы и библиотеки перед установкой GPUStack.',
+    'Install <a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">required drivers and libraries</a> prior to GPUStack installation.',
  'resources.worker.select.command':
    'Выберите метку для генерации команды и скопируйте её.',
  'resources.worker.script.install': 'Установка скриптом',
@ -76,5 +76,6 @@ export default {

 // ========== To-Do: Translate Keys (Remove After Translation) ==========
 // 1. 'resources.worker.cann.tips',
-// 2. 'resources.worker.add.step2.tips'
+// 2. 'resources.worker.add.step2.tips',
+// 3. 'resources.worker.driver.install'
 // ========== End of To-Do List ==========
--- a/src/locales/zh-CN/models.ts
+++ b/src/locales/zh-CN/models.ts
@ -124,5 +124,6 @@ export default {
  'models.form.check.passed': '兼容性检查通过',
  'models.form.check.claims': '该模型大约需要 {vram} 显存和 {ram} 内存。',
  'models.form.check.claims2': '该模型大约需要 {vram} 显存。',
-  'models.form.update.tips': '更改仅在删除并重新创建实例后生效。'
+  'models.form.update.tips': '更改仅在删除并重新创建实例后生效。',
+  'models.table.download.progress': '下载进度'
 };
--- a/src/locales/zh-CN/playground.ts
+++ b/src/locales/zh-CN/playground.ts
@ -27,7 +27,7 @@ export default {
  'playground.params.seed.tips':
    '如果指定，系统将尽最大努力进行确定性采样，以便使用相同 Seed 和参数的重复请求应返回相同的结果。',
  'playground.params.stop.tips':
-    '停止序列是一个预定义或用户指定的文本字符串，当这些序列出现时，它会提示 AI 停止生成后续的 Token',
+    '停止序列是一个预定义或用户指定的文本字符串，当这些序列出现时，它会提示 AI 停止生成后续的 Token。',
  'playground.viewcode.tips':
    '{here} 查看 API 密钥。您应该使用环境变量或密钥管理工具将您的密钥暴露给您的应用程序。',
  'playground.viewcode.here': '这里',
--- a/src/locales/zh-CN/resources.ts
+++ b/src/locales/zh-CN/resources.ts
@ -51,7 +51,7 @@ export default {
  'resources.worker.current.version': '当前版本为 {version}',
  'resources.worker.select.command': '选择一个标签生成命令并使用复制按钮复制',
  'resources.worker.driver.install':
-    '在安装 GPUStack 之前，确保系统上安装了所有必需的驱动程序和库',
+    '在安装 GPUStack 之前，请安装<a href="https://docs.gpustack.ai/latest/installation/installation-requirements/" target="_blank">所需的驱动程序和库</a>。',
  'resources.worker.script.install': '脚本安装',
  'resources.worker.container.install': '容器安装(仅支持 Linux)',
  'resources.worker.cann.tips':
--- a/src/pages/llmodels/components/data-form.tsx
+++ b/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();
--- a/src/pages/llmodels/components/deploy-modal.tsx
+++ b/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);
    }
  };

--- a/src/pages/llmodels/components/instance-item.tsx
+++ b/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 }) => {
--- a/src/pages/llmodels/components/instances.tsx
+++ b/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;
--- a/src/pages/llmodels/components/update-modal.tsx
+++ b/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}
--- a/src/pages/llmodels/config/index.ts
+++ b/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'
+];
--- a/src/pages/llmodels/hooks/index.ts
+++ b/src/pages/llmodels/hooks/index.ts
@ -212,7 +212,6 @@ export const useGenerateModelFileOptions = () => {
      }
      return acc;
    }, []);
-    console.log('childrenList', childrenList);

    return childrenList;

--- a/src/pages/resources/components/container-install.tsx
+++ b/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>
      ) : (
--- a/src/request-config.ts
+++ b/src/request-config.ts
@ -22,7 +22,6 @@ export const requestConfig: RequestConfig = {

        history.push('/login', { replace: true });
      }
-      console.log('error==============', error);
    }
  },
  requestInterceptors: [