chore: model form state update

src/components/label-selector/index.tsx

@@ -0,0 +1,100 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import _ from 'lodash';
+import React, { useEffect } from 'react';
+import LabelItem from './label-item';
+import Wrapper from './wrapper';
+
+interface LabelSelectorProps {
+  labels: Record<string, any>;
+  label?: string;
+  onChange?: (labels: Record<string, any>) => void;
+}
+
+const LabelSelector: React.FC<LabelSelectorProps> = ({
+  labels,
+  onChange,
+  label
+}) => {
+  const [labelList, setLabelList] = React.useState<any[]>([]);
+
+  useEffect(() => {
+    const list = _.map(_.keys(labels), (key: string) => {
+      return {
+        key,
+        value: labels[key]
+      };
+    });
+    setLabelList(list);
+  }, [labels]);
+
+  const handleOnChange = (index: string, label: any) => {
+    const list = _.cloneDeep(labelList);
+    list[index] = label;
+    const newLabels = _.reduce(
+      list,
+      (result: any, item: any) => {
+        result[item.key] = item.value;
+        return result;
+      },
+      {}
+    );
+    onChange?.(newLabels);
+  };
+
+  const handleAddLabel = () => {
+    setLabelList([
+      ...labelList,
+      {
+        key: '',
+        value: ''
+      }
+    ]);
+  };
+
+  const handleOnDelete = (index: string) => {
+    const list = _.cloneDeep(labelList);
+    list.splice(parseInt(index), 1);
+    setLabelList(list);
+    const newLabels = _.reduce(
+      list,
+      (result: any, item: any) => {
+        result[item.key] = item.value;
+        return result;
+      },
+      {}
+    );
+    onChange?.(newLabels);
+  };
+
+  return (
+    <Wrapper label={label}>
+      {_.map(labelList, (item: any, index: string) => {
+        return (
+          <LabelItem
+            key={index}
+            label={{
+              key: item.key,
+              value: item.value
+            }}
+            seperator=":"
+            onDelete={() => handleOnDelete(index)}
+            onChange={(obj) => handleOnChange(index, obj)}
+          />
+        );
+      })}
+      <div>
+        <Button
+          size="small"
+          type="default"
+          shape="circle"
+          style={{ marginTop: 16 }}
+        >
+          <PlusOutlined className="font-size-14" onClick={handleAddLabel} />
+        </Button>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default React.memo(LabelSelector);

src/components/label-selector/label-item.tsx

@@ -0,0 +1,78 @@
+import SealInput from '@/components/seal-form/seal-input';
+import { MinusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import React from 'react';
+import './styles/label-item.less';
+
+interface LabelItemProps {
+  label: {
+    key: string;
+    value: string;
+  };
+  labelKey?: string;
+  labelValue?: string;
+  keyAddon?: React.ReactNode;
+  valueAddon?: React.ReactNode;
+  seperator?: string;
+  onDelete?: () => void;
+  onChange?: (params: { key: string; value: string }) => void;
+}
+const LabelItem: React.FC<LabelItemProps> = ({
+  label,
+  seperator,
+  keyAddon,
+  valueAddon,
+  onChange,
+  onDelete
+}) => {
+  const handleOnValueChange = (e: any) => {
+    const value = e.target.value;
+    onChange?.({
+      key: label.key,
+      value: value
+    });
+  };
+
+  const handleOnKeyChange = (e: any) => {
+    const key = e.target.value;
+    onChange?.({
+      key: key,
+      value: label.value
+    });
+  };
+
+  return (
+    <div className="label-item">
+      <div className="label-key">
+        {keyAddon ?? (
+          <SealInput.Input
+            label="Key"
+            value={label.key}
+            onChange={handleOnKeyChange}
+          ></SealInput.Input>
+        )}
+      </div>
+      {seperator && <span className="seprator">{seperator}</span>}
+      <div className="label-value">
+        {valueAddon ?? (
+          <SealInput.Input
+            label="Value"
+            value={label.value}
+            onChange={handleOnValueChange}
+          ></SealInput.Input>
+        )}
+      </div>
+      <Button
+        size="small"
+        className="btn"
+        type="default"
+        shape="circle"
+        onClick={onDelete}
+      >
+        <MinusOutlined />
+      </Button>
+    </div>
+  );
+};
+
+export default LabelItem;

src/components/label-selector/styles/label-item.less

@@ -0,0 +1,29 @@
+.label-item {
+  display: flex;
+  margin-bottom: 12px;
+  align-items: center;
+  justify-content: flex-start;
+
+  .seprator {
+    display: flex;
+    flex: none;
+    width: 12px;
+    align-items: center;
+    justify-content: center;
+    color: var(--ant-color-text-tertiary);
+  }
+
+  .btn {
+    width: 24px;
+    margin-left: 10px;
+    flex: none;
+  }
+
+  .label-key {
+    flex: 1;
+  }
+
+  .label-value {
+    flex: 1;
+  }
+}

src/components/label-selector/styles/wrapper.less

@@ -0,0 +1,18 @@
+.wrapper {
+  position: relative;
+  padding: 16px 24px;
+  padding-top: 30px;
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--border-radius-base);
+  display: flex;
+  flex-direction: column;
+
+  :global {
+    .label {
+      position: absolute;
+      left: 24px;
+      line-height: 1;
+      top: 10px;
+    }
+  }
+}

src/components/label-selector/wrapper.tsx

@@ -0,0 +1,21 @@
+import LabelInfo from '@/components/seal-form/components/label-info';
+import React from 'react';
+import styles from './styles/wrapper.less';
+
+const Wrapper: React.FC<{
+  label?: string;
+  children: React.ReactNode;
+}> = ({ children, label }) => {
+  return (
+    <div className={styles['wrapper']}>
+      {label && (
+        <span className="label">
+          <LabelInfo label={label}></LabelInfo>
+        </span>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Wrapper;

src/locales/en-US/models.ts

@@ -9,6 +9,7 @@ export default {
   'models.form.repoid.desc': 'Only .gguf format is supported',
   'models.form.filename': 'File Name',
   'models.form.replicas': 'Replicas',
+  'models.form.configurations': 'Configurations',
   'models.form.s3address': 'S3 Address',
   'models.openinplayground': 'Open in Playground',
   'models.instances': 'instances',

src/locales/zh-CN/models.ts

@@ -9,6 +9,7 @@ export default {
   'models.form.repoid.desc': '只支持 .gguf 格式',
   'models.form.filename': '文件名',
   'models.form.replicas': '副本数',
+  'models.form.configurations': '配置',
   'models.form.s3address': 'S3 地址',
   'models.openinplayground': '在 Playground 中打开',
   'models.instances': '实例',

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

@@ -0,0 +1,301 @@
+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 { PageAction } from '@/config';
+import { PageActionType } from '@/config/types';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import _ from 'lodash';
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { modelSourceMap, ollamaModelOptions } from '../config';
+import { FormData } from '../config/types';
+
+interface DataFormProps {
+  ref?: any;
+  source: string;
+  action: PageActionType;
+  repo: string;
+  onOk: (values: FormData) => void;
+}
+
+const sourceOptions = [
+  {
+    label: 'Hugging Face',
+    value: modelSourceMap.huggingface_value,
+    key: 'huggingface'
+  },
+  {
+    label: 'Ollama Library',
+    value: modelSourceMap.ollama_library_value,
+    key: 'ollama_library'
+  }
+];
+
+const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
+  const { action, repo, onOk } = props;
+  const [form] = Form.useForm();
+  const intl = useIntl();
+
+  const handleSumit = () => {
+    form.submit();
+  };
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        submit: handleSumit,
+        setFieldsValue: (values: FormData) => {
+          form.setFieldsValue(values);
+        },
+        setFieldValue: (name: string, value: any) => {
+          form.setFieldValue(name, value);
+        },
+        getFieldValue: (name: string) => {
+          return form.getFieldValue(name);
+        }
+      };
+    },
+    []
+  );
+
+  const handleOnSelectModel = () => {
+    console.log('repo=============', repo);
+    if (!repo) {
+      return;
+    }
+    let name = _.split(repo, '/').slice(-1)[0];
+    const reg = /(-gguf)$/i;
+    name = _.toLower(name).replace(reg, '');
+
+    if (props.source === modelSourceMap.huggingface_value) {
+      form.setFieldsValue({
+        huggingface_repo_id: repo,
+        name: name
+      });
+    } else {
+      form.setFieldsValue({
+        ollama_library_model_name: repo,
+        name: name
+      });
+    }
+  };
+
+  const renderHuggingfaceFields = () => {
+    return (
+      <>
+        <Form.Item<FormData>
+          name="huggingface_repo_id"
+          key="huggingface_repo_id"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                {
+                  id: 'common.form.rule.input'
+                },
+                { name: intl.formatMessage({ id: 'models.form.repoid' }) }
+              )
+            }
+          ]}
+        >
+          <SealInput.Input
+            label={intl.formatMessage({ id: 'models.form.repoid' })}
+            required
+            disabled={true}
+          ></SealInput.Input>
+        </Form.Item>
+        <Form.Item<FormData>
+          name="huggingface_filename"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                {
+                  id: 'common.form.rule.input'
+                },
+                { name: intl.formatMessage({ id: 'models.form.filename' }) }
+              )
+            }
+          ]}
+        >
+          <SealInput.Input
+            label={intl.formatMessage({ id: 'models.form.filename' })}
+            required
+            disabled={true}
+          ></SealInput.Input>
+        </Form.Item>
+      </>
+    );
+  };
+
+  const renderS3Fields = () => {
+    return (
+      <>
+        <Form.Item<FormData>
+          name="s3_address"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                {
+                  id: 'common.form.rule.input'
+                },
+                { name: intl.formatMessage({ id: 'models.form.s3address' }) }
+              )
+            }
+          ]}
+        >
+          <SealInput.Input
+            label={intl.formatMessage({
+              id: 'models.form.s3address'
+            })}
+            required
+          ></SealInput.Input>
+        </Form.Item>
+      </>
+    );
+  };
+
+  const renderOllamaModelFields = () => {
+    return (
+      <>
+        <Form.Item<FormData>
+          name="ollama_library_model_name"
+          key="ollama_library_model_name"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                {
+                  id: 'common.form.rule.input'
+                },
+                { name: intl.formatMessage({ id: 'models.table.name' }) }
+              )
+            }
+          ]}
+        >
+          <SealAutoComplete
+            filterOption
+            disabled={action === PageAction.EDIT}
+            label={intl.formatMessage({ id: 'model.form.ollama.model' })}
+            placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
+            required
+            options={ollamaModelOptions}
+          ></SealAutoComplete>
+        </Form.Item>
+      </>
+    );
+  };
+
+  const renderFieldsBySource = () => {
+    switch (props.source) {
+      case modelSourceMap.huggingface_value:
+        return renderHuggingfaceFields();
+      case modelSourceMap.ollama_library_value:
+        return renderOllamaModelFields();
+      case modelSourceMap.s3_value:
+        return renderS3Fields();
+      default:
+        return null;
+    }
+  };
+
+  useEffect(() => {
+    handleOnSelectModel();
+  }, [repo]);
+
+  return (
+    <Form
+      name="deployModel"
+      form={form}
+      onFinish={onOk}
+      preserve={false}
+      style={{ padding: '16px 24px' }}
+      clearOnDestroy={true}
+      initialValues={{ replicas: 1, source: props.source }}
+    >
+      <Form.Item<FormData>
+        name="name"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              {
+                id: 'common.form.rule.input'
+              },
+              { name: intl.formatMessage({ id: 'common.table.name' }) }
+            )
+          }
+        ]}
+      >
+        <SealInput.Input
+          label={intl.formatMessage({
+            id: 'common.table.name'
+          })}
+          required
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<FormData>
+        name="source"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              {
+                id: 'common.form.rule.select'
+              },
+              { name: intl.formatMessage({ id: 'models.form.source' }) }
+            )
+          }
+        ]}
+      >
+        {
+          <SealSelect
+            disabled={true}
+            label={intl.formatMessage({
+              id: 'models.form.source'
+            })}
+            options={sourceOptions}
+            required
+          ></SealSelect>
+        }
+      </Form.Item>
+      {renderFieldsBySource()}
+      <Form.Item<FormData>
+        name="replicas"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              {
+                id: 'common.form.rule.input'
+              },
+              {
+                name: intl.formatMessage({ id: 'models.form.replicas' })
+              }
+            )
+          }
+        ]}
+      >
+        <SealInput.Number
+          style={{ width: '100%' }}
+          label={intl.formatMessage({
+            id: 'models.form.replicas'
+          })}
+          required
+          min={0}
+        ></SealInput.Number>
+      </Form.Item>
+      <Form.Item<FormData> name="description">
+        <SealInput.TextArea
+          label={intl.formatMessage({
+            id: 'common.table.description'
+          })}
+        ></SealInput.TextArea>
+      </Form.Item>
+    </Form>
+  );
+});
+
+export default React.memo(DataForm);

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

@@ -1,18 +1,13 @@
 import ModalFooter from '@/components/modal-footer';
-import SealInput from '@/components/seal-form/seal-input';
-import SealSelect from '@/components/seal-form/seal-select';
-import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
-import { convertFileSize } from '@/utils';
 import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Drawer, Form } from 'antd';
+import { Button, Drawer } from 'antd';
-import _ from 'lodash';
+import { useCallback, useEffect, useRef, useState } from 'react';
-import { memo, useCallback, useEffect, useState } from 'react';
-import { queryHuggingfaceModelFiles, queryHuggingfaceModels } from '../apis';
 import { modelSourceMap } from '../config';
 import { FormData, ListItem } from '../config/types';
 import ColumnWrapper from './column-wrapper';
+import DataForm from './data-form';
 import HFModelFile from './hf-model-file';
 import ModelCard from './model-card';
 import SearchModel from './search-model';
@@ -24,257 +19,44 @@ type AddModalProps = {
   open: boolean;
   data?: ListItem;
   source: string;
+  width?: string | number;
   onOk: (values: FormData) => void;
   onCancel: () => void;
 };
 
-const sourceOptions = [
-  {
-    label: 'Hugging Face',
-    value: modelSourceMap.huggingface_value,
-    key: 'huggingface'
-  },
-  {
-    label: 'Ollama Library',
-    value: modelSourceMap.ollama_library_value,
-    key: 'ollama_library'
-  }
-];
-
 const AddModal: React.FC<AddModalProps> = (props) => {
   console.log('addmodel====');
-  const { title, action, open, source, onOk, onCancel } = props || {};
+  const {
-  const [form] = Form.useForm();
+    title,
+    open,
+    onOk,
+    onCancel,
+    source,
+    action,
+    width = 600
+  } = props || {};
+  const form = useRef<any>({});
   const intl = useIntl();
-  const modelSource = Form.useWatch('source', form);
+  const [huggingfaceRepoId, setHuggingfaceRepoId] = useState<string>('');
-  const huggingfaceRepoId = Form.useWatch('huggingface_repo_id', form);
-  const [loading, setLoading] = useState(false);
-  const [repoOptions, setRepoOptions] = useState<
-    { label: string; value: string }[]
-  >([]);
-  const [fileOptions, setFileOptions] = useState<
-    { label: string; value: string }[]
-  >([]);
 
-  const initFormValue = () => {
+  const handleSelectModelFile = useCallback((item: any) => {
-    form.setFieldsValue({
+    form.current?.setFieldValue?.('huggingface_filename', item.path);
-      source: props.source,
+  }, []);
-      replicas: 1
+
-    });
+  const handleOnSelectModel = (item: any) => {
+    setHuggingfaceRepoId(item.name);
+  };
+
+  const handleSumit = () => {
+    form.current?.submit?.();
   };
 
   useEffect(() => {
-    initFormValue();
+    return () => {
-    console.log('source========', props.source);
+      setHuggingfaceRepoId('');
+    };
   }, [open]);
 
-  const fileNamLabel = (item: any) => {
-    return (
-      <span>
-        {item.path}
-        <span
-          style={{ color: 'var(--ant-color-text-tertiary)', marginLeft: '4px' }}
-        >
-          ({convertFileSize(item.size)})
-        </span>
-      </span>
-    );
-  };
-  const handleFetchModelFiles = async (repo: string) => {
-    try {
-      setLoading(true);
-      const res = await queryHuggingfaceModelFiles({ repo });
-      const list = _.filter(res, (file: any) => {
-        return _.endsWith(file.path, '.gguf');
-      }).map((item: any) => {
-        return {
-          label: fileNamLabel(item),
-          value: item.path,
-          size: item.size
-        };
-      });
-      setFileOptions(list);
-      setLoading(false);
-    } catch (error) {
-      setFileOptions([]);
-      setLoading(false);
-    }
-  };
-
-  const handleRepoOnBlur = (e: any) => {
-    const repo = form.getFieldValue('huggingface_repo_id');
-    handleFetchModelFiles(repo);
-  };
-
-  const handleSelectModelFile = useCallback((item: any) => {
-    form.setFieldValue('huggingface_filename', item.path);
-  }, []);
-
-  const handleOnSearchRepo = async (text: string) => {
-    try {
-      const params = {
-        search: {
-          query: text,
-          tags: ['gguf']
-        }
-      };
-      const models = await queryHuggingfaceModels(params);
-      const list = _.map(models || [], (item: any) => {
-        return {
-          ...item,
-          value: item.name,
-          label: item.name
-        };
-      });
-      setRepoOptions(list);
-    } catch (error) {
-      setRepoOptions([]);
-    }
-  };
-
-  const debounceSearch = _.debounce((text: string) => {
-    handleOnSearchRepo(text);
-  }, 300);
-
-  const renderHuggingfaceFields = () => {
-    return (
-      <>
-        <Form.Item<FormData>
-          name="huggingface_repo_id"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.input'
-                },
-                { name: intl.formatMessage({ id: 'models.form.repoid' }) }
-              )
-            }
-          ]}
-        >
-          <SealInput.Input
-            label={intl.formatMessage({ id: 'models.form.repoid' })}
-            required
-            disabled={true}
-          ></SealInput.Input>
-        </Form.Item>
-        <Form.Item<FormData>
-          name="huggingface_filename"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.input'
-                },
-                { name: intl.formatMessage({ id: 'models.form.filename' }) }
-              )
-            }
-          ]}
-        >
-          <SealInput.Input
-            label={intl.formatMessage({ id: 'models.form.filename' })}
-            required
-            disabled={true}
-          ></SealInput.Input>
-        </Form.Item>
-      </>
-    );
-  };
-
-  const renderS3Fields = () => {
-    return (
-      <>
-        <Form.Item<FormData>
-          name="s3_address"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.input'
-                },
-                { name: intl.formatMessage({ id: 'models.form.s3address' }) }
-              )
-            }
-          ]}
-        >
-          <SealInput.Input
-            label={intl.formatMessage({
-              id: 'models.form.s3address'
-            })}
-            required
-          ></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' }) }
-              )
-            }
-          ]}
-        >
-          <SealInput.Input
-            disabled={action === PageAction.EDIT}
-            label={intl.formatMessage({ id: 'model.form.ollama.model' })}
-            placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
-            required
-          ></SealInput.Input>
-        </Form.Item>
-      </>
-    );
-  };
-
-  const renderFieldsBySource = () => {
-    switch (props.source) {
-      case modelSourceMap.huggingface_value:
-        return renderHuggingfaceFields();
-      case modelSourceMap.ollama_library_value:
-        return renderOllamaModelFields();
-      case modelSourceMap.s3_value:
-        return renderS3Fields();
-      default:
-        return null;
-    }
-  };
-
-  const handleOnSelectModel = useCallback((item: any) => {
-    const repo = item.name;
-    let name = _.split(item.name, '/').slice(-1)[0];
-    const reg = /(-gguf)$/i;
-    name = _.toLower(name).replace(reg, '');
-
-    if (form.getFieldValue('source') === modelSourceMap.huggingface_value) {
-      form.setFieldsValue({
-        huggingface_repo_id: repo,
-        name: name
-      });
-    } else {
-      form.setFieldsValue({
-        ollama_library_model_name: repo,
-        name: name
-      });
-    }
-  }, []);
-
-  const handleSumit = () => {
-    form.submit();
-  };
-
   return (
     <Drawer
       title={
@@ -309,18 +91,14 @@ const AddModal: React.FC<AddModalProps> = (props) => {
           borderRadius: '8px 0 0 8px'
         }
       }}
-      width={
+      width={width}
-        props.source === modelSourceMap.huggingface_value
-          ? 'calc(100vw - 220px)'
-          : 600
-      }
       footer={false}
     >
       <div style={{ display: 'flex' }}>
         {props.source === modelSourceMap.huggingface_value && (
           <ColumnWrapper>
             <SearchModel
-              modelSource={modelSource}
+              modelSource={props.source}
               onSelectModel={handleOnSelectModel}
             ></SearchModel>
           </ColumnWrapper>
@@ -348,94 +126,16 @@ const AddModal: React.FC<AddModalProps> = (props) => {
           }
         >
           <>
-            <TitleWrapper>Configuration</TitleWrapper>
+            <TitleWrapper>
-            <Form
+              {intl.formatMessage({ id: 'models.form.configurations' })}
-              name="deployModel"
+            </TitleWrapper>
-              form={form}
+            <DataForm
-              onFinish={onOk}
+              source={source}
-              preserve={false}
+              action={action}
-              style={{ padding: '16px 24px' }}
+              repo={huggingfaceRepoId}
-            >
+              onOk={onOk}
-              <Form.Item<FormData>
+              ref={form}
-                name="name"
+            ></DataForm>
-                rules={[
-                  {
-                    required: true,
-                    message: intl.formatMessage(
-                      {
-                        id: 'common.form.rule.input'
-                      },
-                      { name: intl.formatMessage({ id: 'common.table.name' }) }
-                    )
-                  }
-                ]}
-              >
-                <SealInput.Input
-                  label={intl.formatMessage({
-                    id: 'common.table.name'
-                  })}
-                  required
-                ></SealInput.Input>
-              </Form.Item>
-              <Form.Item<FormData>
-                name="source"
-                rules={[
-                  {
-                    required: true,
-                    message: intl.formatMessage(
-                      {
-                        id: 'common.form.rule.select'
-                      },
-                      { name: intl.formatMessage({ id: 'models.form.source' }) }
-                    )
-                  }
-                ]}
-              >
-                {
-                  <SealSelect
-                    disabled={true}
-                    label={intl.formatMessage({
-                      id: 'models.form.source'
-                    })}
-                    options={sourceOptions}
-                    required
-                  ></SealSelect>
-                }
-              </Form.Item>
-              {renderFieldsBySource()}
-              <Form.Item<FormData>
-                name="replicas"
-                rules={[
-                  {
-                    required: true,
-                    message: intl.formatMessage(
-                      {
-                        id: 'common.form.rule.input'
-                      },
-                      {
-                        name: intl.formatMessage({ id: 'models.form.replicas' })
-                      }
-                    )
-                  }
-                ]}
-              >
-                <SealInput.Number
-                  style={{ width: '100%' }}
-                  label={intl.formatMessage({
-                    id: 'models.form.replicas'
-                  })}
-                  required
-                  min={0}
-                ></SealInput.Number>
-              </Form.Item>
-              <Form.Item<FormData> name="description">
-                <SealInput.TextArea
-                  label={intl.formatMessage({
-                    id: 'common.table.description'
-                  })}
-                ></SealInput.TextArea>
-              </Form.Item>
-            </Form>
           </>
         </ColumnWrapper>
       </div>
@@ -443,4 +143,4 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   );
 };
 
-export default memo(AddModal);
+export default AddModal;

src/pages/llmodels/components/hf-model-file.tsx

@@ -39,7 +39,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
     try {
       const res = await queryHuggingfaceModelFiles({ repo: props.repo });
       const list = _.filter(res, (file: any) => {
-        return _.endsWith(file.path, '.gguf');
+        return _.endsWith(file.path, '.gguf') || _.includes(file.path, '.gguf');
       });
       const sortList = _.sortBy(list, (item: any) => item.size);
       setDataSource({ fileList: sortList, loading: false });
@@ -58,7 +58,11 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
     }
     console.log('quanType', quanType, FileType[quanType]);
     if (FileType[quanType] !== undefined) {
-      return <Tag className="tag-item">{quanType}</Tag>;
+      return (
+        <Tag className="tag-item" color="cyan">
+          {quanType}
+        </Tag>
+      );
     }
     return null;
   };
@@ -100,7 +104,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
                         </span> */}
                         <Tag
                           className="tag-item"
-                          color="geekblue"
+                          color="green"
                           style={{
                             marginRight: 0
                           }}

src/pages/llmodels/components/hf-model-item.tsx

@@ -43,7 +43,7 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
             {props.task && (
               <Tag
                 className="tag-item"
-                color="geekblue"
+                color="gold"
                 style={{
                   marginRight: 0
                 }}

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

@@ -45,12 +45,14 @@ const SearchInput: React.FC<{
         )
       }
       prefix={
+        <>
           <SearchOutlined
             style={{
               fontSize: '16px',
               color: 'var(--ant-color-text-quaternary)'
             }}
           />
+        </>
       }
     ></Input>
   );

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

@@ -232,6 +232,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
 
   useEffect(() => {
     handleOnOpen();
+    console.log('SearchModel useEffect', modelSource);
     return () => {
       axiosTokenRef.current?.abort?.();
     };

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

@@ -80,14 +80,17 @@ const Models: React.FC<ModelsProps> = ({
   const [openViewCodeModal, setOpenViewCodeModal] = useState(false);
   const [openLogModal, setOpenLogModal] = useState(false);
   const [openAddModal, setOpenAddModal] = useState(false);
-  const [openDeployModal, setOpenDeployModal] = useState(false);
+  const [openDeployModal, setOpenDeployModal] = useState<any>({
+    show: false,
+    width: 600,
+    source: modelSourceMap.huggingface_value
+  });
   const [title, setTitle] = useState<string>('');
   const [currentData, setCurrentData] = useState<ListItem | undefined>(
     undefined
   );
   const [currentInstanceUrl, setCurrentInstanceUrl] = useState<string>('');
   const modalRef = useRef<any>(null);
-  const sourceRef = useRef<any>(null);
 
   const sourceOptions = [
     {
@@ -96,8 +99,11 @@ const Models: React.FC<ModelsProps> = ({
       key: 'huggingface',
       icon: <IconFont type="icon-huggingface"></IconFont>,
       onClick: () => {
-        sourceRef.current = modelSourceMap.huggingface_value;
+        setOpenDeployModal({
-        setOpenDeployModal(true);
+          show: true,
+          width: 'calc(100vw - 220px)',
+          source: modelSourceMap.huggingface_value
+        });
       }
     },
     {
@@ -106,8 +112,11 @@ const Models: React.FC<ModelsProps> = ({
       key: 'ollama_library',
       icon: <IconFont type="icon-ollama"></IconFont>,
       onClick: () => {
-        sourceRef.current = modelSourceMap.ollama_library_value;
+        setOpenDeployModal({
-        setOpenDeployModal(true);
+          show: true,
+          width: 600,
+          source: modelSourceMap.ollama_library_value
+        });
       }
     }
   ];
@@ -177,16 +186,22 @@ const Models: React.FC<ModelsProps> = ({
     setOpenAddModal(false);
   }, []);
 
-  const handleDeployModalCancel = useCallback(() => {
+  const handleDeployModalCancel = () => {
-    setOpenDeployModal(false);
+    setOpenDeployModal({
-  }, []);
+      ...openDeployModal,
+      show: false
+    });
+  };
 
   const handleCreateModel = useCallback(async (data: FormData) => {
     try {
       console.log('data:', data);
 
       await createModel({ data });
-      setOpenDeployModal(false);
+      setOpenDeployModal({
+        ...openDeployModal,
+        show: false
+      });
       message.success(intl.formatMessage({ id: 'common.message.success' }));
     } catch (error) {}
   }, []);
@@ -476,11 +491,12 @@ const Models: React.FC<ModelsProps> = ({
         onOk={handleModalOk}
       ></UpdateModel>
       <DeployModal
-        open={openDeployModal}
+        open={openDeployModal.show}
         action={PageAction.CREATE}
-        title="Deploy Model"
+        title={intl.formatMessage({ id: 'models.button.deploy' })}
         data={currentData}
-        source={sourceRef.current}
+        source={openDeployModal.source}
+        width={openDeployModal.width}
         onCancel={handleDeployModalCancel}
         onOk={handleCreateModel}
       ></DeployModal>

src/pages/llmodels/style/hf-model-file.less

@@ -27,8 +27,9 @@
     border-radius: 4px;
     font-size: 12px;
     height: 22px;
-    border: 1px solid var(--ant-color-border);
+    opacity: 0.7;
-    color: var(--ant-color-text-secondary);
+    // border: 1px solid var(--ant-color-border);
+    // color: var(--ant-color-text-secondary);
   }
 
   .btn {

src/pages/llmodels/style/hf-model-item.less

@@ -31,8 +31,9 @@
       border-radius: 4px;
       font-size: 12px;
       height: 22px;
-      border: 1px solid var(--ant-color-border);
+      opacity: 0.9;
-      color: var(--ant-color-text-secondary);
+      // border: 1px solid var(--ant-color-border);
+      // color: var(--ant-color-text-secondary);
     }
   }
 }