feat: add cluster list

2025-09-16 11:26:17 +08:00
parent 43e1dd0b0e
commit 89001dbb92
24 changed files with 1695 additions and 110 deletions
@@ -5,6 +5,7 @@ import SealCascader from '@/components/seal-form/seal-cascader';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
+import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { QuestionCircleOutlined } from '@ant-design/icons';
@@ -24,8 +25,10 @@ import {
  backendLabelMap,
  backendOptionsMap,
  backendParamsHolderTips,
+  backendTipsList,
  getBackendParamsTips,
  modelCategories,
+  modelSourceMap,
  placementStrategyOptions
 } from '../config';
 import { useFormContext } from '../config/form-context';
@@ -35,6 +38,8 @@ import { FormData } from '../config/types';
 import vllmConfig from '../config/vllm-config';
 import dataformStyles from '../style/data-form.less';
 import GPUCard from './gpu-card';
+import Performance from './performance';
+import Scaling from './scaling';

 interface AdvanceConfigProps {
  isGGUF: boolean;
@@ -42,6 +47,8 @@ interface AdvanceConfigProps {
  gpuOptions: Array<any>;
  action: PageActionType;
  source: string;
+  backendOptions?: Global.BaseOption<string>[];
+  handleBackendChange?: (value: string) => void;
 }

 const placementStrategyTips = [
@@ -92,7 +99,7 @@ const CheckboxField: React.FC<{
 };

 const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
-  const { form, isGGUF, gpuOptions, source } = props;
+  const { form, isGGUF, gpuOptions, source, backendOptions, action } = props;
  const { getRuleMessage } = useAppUtils();
  const intl = useIntl();
  const wokerSelector = Form.useWatch('worker_selector', form);
@@ -205,7 +212,56 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
            options={modelCategories}
          ></SealSelect>
        </Form.Item>
-        <Form.Item name="scheduleType">
+        <Form.Item name="backend" rules={[{ required: true }]}>
+          <SealSelect
+            required
+            onChange={props.handleBackendChange}
+            label={intl.formatMessage({ id: 'models.form.backend' })}
+            description={<TooltipList list={backendTipsList}></TooltipList>}
+            options={
+              backendOptions ?? [
+                {
+                  label: backendLabelMap[backendOptionsMap.llamaBox],
+                  value: backendOptionsMap.llamaBox,
+                  disabled:
+                    props.source === modelSourceMap.local_path_value
+                      ? false
+                      : !isGGUF
+                },
+                {
+                  label: backendLabelMap[backendOptionsMap.vllm],
+                  value: backendOptionsMap.vllm,
+                  disabled:
+                    props.source === modelSourceMap.local_path_value
+                      ? false
+                      : isGGUF
+                },
+                {
+                  label: backendLabelMap[backendOptionsMap.ascendMindie],
+                  value: backendOptionsMap.ascendMindie,
+                  disabled:
+                    props.source === modelSourceMap.local_path_value
+                      ? false
+                      : isGGUF
+                },
+                {
+                  label: backendLabelMap[backendOptionsMap.voxBox],
+                  value: backendOptionsMap.voxBox,
+                  disabled:
+                    props.source === modelSourceMap.local_path_value
+                      ? false
+                      : props.source === modelSourceMap.ollama_library_value ||
+                        isGGUF
+                }
+              ]
+            }
+            disabled={
+              action === PageAction.EDIT &&
+              props.source !== modelSourceMap.local_path_value
+            }
+          ></SealSelect>
+        </Form.Item>
+        {/* <Form.Item name="scheduleType">
          <SealSelect
            onChange={handleScheduleTypeChange}
            label={intl.formatMessage({ id: 'models.form.scheduletype' })}
@@ -225,7 +281,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
              }
            ]}
          ></SealSelect>
-        </Form.Item>
+        </Form.Item> */}
        {scheduleType === 'auto' && (
          <>
            <Form.Item<FormData> name="placement_strategy">
@@ -489,6 +545,32 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
      </>
    );
    return [
+      {
+        key: '2',
+        label: (
+          <span
+            style={{ fontWeight: 'var(--font-weight-medium)' }}
+            className="font-size-14"
+          >
+            Performance
+          </span>
+        ),
+        forceRender: true,
+        children: <Performance></Performance>
+      },
+      {
+        key: '3',
+        label: (
+          <span
+            style={{ fontWeight: 'var(--font-weight-medium)' }}
+            className="font-size-14"
+          >
+            Scaling
+          </span>
+        ),
+        forceRender: true,
+        children: <Scaling></Scaling>
+      },
      {
        key: '1',
        label: (
@@ -527,6 +609,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
      expandIconPosition="start"
      bordered={false}
      ghost
+      accordion
      destroyInactivePanel={false}
      className={dataformStyles['advanced-collapse']}
      expandIcon={({ isActive }) => (
@@ -1,7 +1,5 @@
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
-import TooltipList from '@/components/tooltip-list';
-import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
@@ -9,9 +7,7 @@ import { Form } from 'antd';
 import _ from 'lodash';
 import React, { forwardRef, useImperativeHandle } from 'react';
 import {
-  backendLabelMap,
  backendOptionsMap,
-  backendTipsList,
  excludeFields,
  modelSourceMap,
  sourceOptions
@@ -254,7 +250,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
        <HuggingFaceForm></HuggingFaceForm>
        <LocalPathForm></LocalPathForm>
      </FormInnerContext.Provider>
-      <Form.Item name="backend" rules={[{ required: true }]}>
+      {/* <Form.Item name="backend" rules={[{ required: true }]}>
        <SealSelect
          required
          onChange={handleBackendChange}
@@ -302,9 +298,9 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
            props.source !== modelSourceMap.local_path_value
          }
        ></SealSelect>
-      </Form.Item>
+      </Form.Item> */}
      <CatalogFrom></CatalogFrom>
-      <Form.Item<FormData>
+      {/* <Form.Item<FormData>
        name="replicas"
        rules={[
          {
@@ -325,7 +321,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
          )}
          min={0}
        ></SealInput.Number>
-      </Form.Item>
+      </Form.Item> */}
      <Form.Item<FormData> name="description">
        <SealInput.TextArea
          scaleSize={true}
@@ -340,6 +336,8 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
        isGGUF={isGGUF}
        action={action}
        source={props.source}
+        backendOptions={backendOptions}
+        handleBackendChange={handleBackendChange}
      ></AdvanceConfig>
    </Form>
  );
@@ -27,7 +27,7 @@ import {
 import ColumnWrapper from './column-wrapper';
 import CompatibilityAlert from './compatible-alert';
 import DataForm from './data-form';
-import HFModelFile from './hf-model-file';
+import GGUFResult from './gguf-result';
 import ModelCard from './model-card';
 import SearchModel from './search-model';
 import Separator from './separator';
@@ -556,16 +556,7 @@ const AddModal: FC<AddModalProps> = (props) => {
                    modelSource={props.source}
                    setIsGGUF={handleSetIsGGUF}
                  ></ModelCard>
-                  {isGGUF && (
-                    <HFModelFile
-                      ref={modelFileRef}
-                      selectedModel={selectedModel}
-                      modelSource={props.source}
-                      onSelectFile={handleSelectModelFile}
-                      collapsed={collapsed}
-                      gpuOptions={props.gpuOptions}
-                    ></HFModelFile>
-                  )}
+                  {isGGUF && <GGUFResult></GGUFResult>}
                </ColumnWrapper>
                <Separator></Separator>
              </ColWrapper>
@@ -0,0 +1,20 @@
+import { WarningOutlined } from '@ant-design/icons';
+import { Result } from 'antd';
+import React from 'react';
+
+const GGUFResult: React.FC = () => {
+  return (
+    <Result
+      status="info"
+      icon={
+        <WarningOutlined
+          style={{ color: 'var(--ant-color-text-quaternary)' }}
+        />
+      }
+      title={false}
+      subTitle="GGUF model is not supported yet."
+    />
+  );
+};
+
+export default GGUFResult;
@@ -12,6 +12,7 @@ import useDownloadStream from '@/hooks/use-download-stream';
 import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
 import { convertFileSize } from '@/utils';
 import {
+  CodeOutlined,
  DeleteOutlined,
  DownloadOutlined,
  HddFilled,
@@ -270,6 +271,12 @@ const childActionList = [
    ],
    icon: <IconFont type="icon-logs" />
  },
+  {
+    label: 'Terminal',
+    locale: false,
+    key: 'terminal',
+    icon: <CodeOutlined />
+  },
  {
    label: 'common.button.downloadLog',
    key: 'download',
@@ -0,0 +1,137 @@
+import SealSelect from '@/components/seal-form/seal-select';
+import TooltipList from '@/components/tooltip-list';
+import useAppUtils from '@/hooks/use-app-utils';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Checkbox, Form, Tooltip } from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import React from 'react';
+import { useFormContext } from '../config/form-context';
+
+const scheduleTypeTips = [
+  {
+    title: {
+      text: 'models.form.scheduletype.auto',
+      locale: true
+    },
+    tips: 'models.form.scheduletype.auto.tips'
+  },
+  {
+    title: {
+      text: 'models.form.scheduletype.manual',
+      locale: true
+    },
+    tips: 'models.form.scheduletype.manual.tips'
+  }
+];
+
+const CheckboxField: React.FC<{
+  title: string;
+  label: string;
+  checked?: boolean;
+  onChange?: (e: CheckboxChangeEvent) => void;
+}> = ({ title, label, checked, onChange }) => {
+  return (
+    <Checkbox className="p-l-6" checked={checked} onChange={onChange}>
+      <Tooltip title={title}>
+        <span style={{ color: 'var(--ant-color-text-tertiary)' }}>{label}</span>
+        <QuestionCircleOutlined
+          className="m-l-4"
+          style={{ color: 'var(--ant-color-text-tertiary)' }}
+        />
+      </Tooltip>
+    </Checkbox>
+  );
+};
+
+const Performance: React.FC = () => {
+  const intl = useIntl();
+  const { onValuesChange, onQuantizationChange, source, quantizationOptions } =
+    useFormContext();
+  const { getRuleMessage } = useAppUtils();
+  const form = Form.useFormInstance();
+
+  const handleScheduleTypeChange = (value: string) => {
+    if (value === 'auto') {
+      onValuesChange?.({}, form.getFieldsValue());
+    }
+  };
+
+  const handleOnQuantizationChange = (val: any) => {
+    onQuantizationChange?.(val);
+  };
+
+  return (
+    <>
+      <Form.Item name="scheduleType">
+        <SealSelect
+          onChange={handleScheduleTypeChange}
+          label={intl.formatMessage({ id: 'models.form.scheduletype' })}
+          description={<TooltipList list={scheduleTypeTips}></TooltipList>}
+          options={[
+            {
+              label: intl.formatMessage({
+                id: 'models.form.scheduletype.auto'
+              }),
+              value: 'auto'
+            },
+            {
+              label: intl.formatMessage({
+                id: 'models.form.scheduletype.manual'
+              }),
+              value: 'manual'
+            }
+          ]}
+        ></SealSelect>
+      </Form.Item>
+      <Form.Item<FormData>
+        name="quantization"
+        key="quantization"
+        rules={[
+          {
+            required: true,
+            message: getRuleMessage('select', 'quantization', false)
+          }
+        ]}
+      >
+        <SealSelect
+          filterOption
+          defaultActiveFirstOption
+          disabled={false}
+          options={quantizationOptions}
+          onChange={handleOnQuantizationChange}
+          label="Quantization"
+          required
+        ></SealSelect>
+      </Form.Item>
+      <div style={{ paddingBottom: 22, paddingLeft: 10 }}>
+        <Form.Item<FormData>
+          name="optimize_long_prompt"
+          valuePropName="checked"
+          style={{ padding: '0 10px', marginBottom: 0 }}
+          noStyle
+        >
+          <CheckboxField
+            title="Optimize long prompt tips"
+            label="Optimize Long Prompt"
+          ></CheckboxField>
+        </Form.Item>
+      </div>
+      <div style={{ paddingBottom: 22, paddingLeft: 10 }}>
+        <Form.Item<FormData>
+          name="enable_speculative_decoding"
+          valuePropName="checked"
+          style={{ padding: '0 10px', marginBottom: 0 }}
+          noStyle
+        >
+          <CheckboxField
+            title="Enable speculative decoding tips"
+            label="Enable Speculative Decoding"
+          ></CheckboxField>
+        </Form.Item>
+      </div>
+    </>
+  );
+};
+
+export default Performance;
@@ -0,0 +1,157 @@
+import SealInputNumber from '@/components/seal-form/input-number';
+import useAppUtils from '@/hooks/use-app-utils';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Checkbox, Form, Tooltip } from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import React from 'react';
+import { useFormContext } from '../config/form-context';
+
+const scheduleTypeTips = [
+  {
+    title: {
+      text: 'models.form.scheduletype.auto',
+      locale: true
+    },
+    tips: 'models.form.scheduletype.auto.tips'
+  },
+  {
+    title: {
+      text: 'models.form.scheduletype.manual',
+      locale: true
+    },
+    tips: 'models.form.scheduletype.manual.tips'
+  }
+];
+
+const CheckboxField: React.FC<{
+  title: string;
+  label: string;
+  checked?: boolean;
+  onChange?: (e: CheckboxChangeEvent) => void;
+}> = ({ title, label, checked, onChange }) => {
+  return (
+    <Checkbox className="p-l-6" checked={checked} onChange={onChange}>
+      <Tooltip title={title}>
+        <span style={{ color: 'var(--ant-color-text-tertiary)' }}>{label}</span>
+        <QuestionCircleOutlined
+          className="m-l-4"
+          style={{ color: 'var(--ant-color-text-tertiary)' }}
+        />
+      </Tooltip>
+    </Checkbox>
+  );
+};
+
+const Scaling: React.FC = () => {
+  const intl = useIntl();
+  const { onValuesChange, onQuantizationChange, source, quantizationOptions } =
+    useFormContext();
+  const { getRuleMessage } = useAppUtils();
+  const form = Form.useFormInstance();
+
+  const handleScheduleTypeChange = (value: string) => {
+    if (value === 'auto') {
+      onValuesChange?.({}, form.getFieldsValue());
+    }
+  };
+
+  const handleOnQuantizationChange = (val: any) => {
+    onQuantizationChange?.(val);
+  };
+
+  return (
+    <>
+      <div style={{ paddingBottom: 22, paddingLeft: 10 }}>
+        <Form.Item<FormData>
+          name="enable_auto_scaling"
+          valuePropName="checked"
+          style={{ padding: '0 10px', marginBottom: 0 }}
+          noStyle
+        >
+          <CheckboxField
+            title="Enable auto scaling tips"
+            label="Enable Auto Scaling"
+          ></CheckboxField>
+        </Form.Item>
+      </div>
+      <Form.Item<FormData>
+        name="min_replicas"
+        rules={[
+          {
+            required: true
+          }
+        ]}
+      >
+        <SealInputNumber
+          min={0}
+          style={{ width: '100%' }}
+          label="Min Replicas"
+          required
+        ></SealInputNumber>
+      </Form.Item>
+      <Form.Item<FormData>
+        name="max_replicas"
+        rules={[
+          {
+            required: true
+          }
+        ]}
+      >
+        <SealInputNumber
+          min={0}
+          style={{ width: '100%' }}
+          label="Max Replicas"
+          required
+        ></SealInputNumber>
+      </Form.Item>
+      <Form.Item<FormData>
+        name="scale_to_zero_window"
+        rules={[
+          {
+            required: true
+          }
+        ]}
+      >
+        <SealInputNumber
+          min={0}
+          style={{ width: '100%' }}
+          label="Scale to Zero Window"
+          required
+        ></SealInputNumber>
+      </Form.Item>
+      <Form.Item<FormData>
+        name="scale_down_window"
+        rules={[
+          {
+            required: true
+          }
+        ]}
+      >
+        <SealInputNumber
+          min={0}
+          style={{ width: '100%' }}
+          label="Scale Down Window"
+          required
+        ></SealInputNumber>
+      </Form.Item>
+      <Form.Item<FormData>
+        name="scale_up_window"
+        rules={[
+          {
+            required: true
+          }
+        ]}
+      >
+        <SealInputNumber
+          min={0}
+          style={{ width: '100%' }}
+          label="Scale Up Window"
+          required
+        ></SealInputNumber>
+      </Form.Item>
+    </>
+  );
+};
+
+export default Scaling;
@@ -2,7 +2,7 @@ import { getRequestId, setRquestId } from '@/atoms/models';
 import { createAxiosToken } from '@/hooks/use-chunk-request';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Checkbox, Pagination, Select, Tooltip } from 'antd';
+import { Pagination, Select, Tooltip } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -167,7 +167,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
      search: {
        query: searchInputRef.current || '',
        sort: sort,
-        tags: filterGGUFRef.current ? ['gguf'] : [],
+        tags: [],
        task: HuggingFaceTaskMap[filterTaskRef.current] || task
      }
    };
@@ -199,7 +199,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
    try {
      const params = {
        Name: `${searchInputRef.current}`,
-        tags: filterGGUFRef.current ? ['gguf'] : [],
+        tags: [],
        tasks: filterTaskRef.current
          ? ([ModelscopeTaskMap[filterTaskRef.current]] as string[])
          : [],
@@ -562,13 +562,13 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
              size="middle"
              style={{ width: '150px' }}
            ></Select>
-            <Checkbox
+            {/* <Checkbox
              onChange={handleFilterGGUFChange}
              className="m-l-8"
              checked={filterGGUFRef.current}
            >
              {renderGGUFTips}
-            </Checkbox>
+            </Checkbox> */}
          </span>
          <PaginationMain
            simple={{ readOnly: true }}
@@ -606,7 +606,7 @@ const Models: React.FC<ModelsProps> = ({
        dataIndex: 'name',
        key: 'name',
        width: 400,
-        span: 6,
+        span: 5,
        render: (text: string, record: ListItem) => (
          <span className="flex-center" style={{ maxWidth: '100%' }}>
            <AutoTooltip ghost>
@@ -616,11 +616,22 @@ const Models: React.FC<ModelsProps> = ({
          </span>
        )
      },
+      {
+        title: 'Cluster',
+        dataIndex: 'cluster',
+        key: 'cluster',
+        span: 4,
+        render: (text: string, record: ListItem) => (
+          <span className="flex flex-column" style={{ width: '100%' }}>
+            Custom
+          </span>
+        )
+      },
      {
        title: intl.formatMessage({ id: 'models.form.source' }),
        dataIndex: 'source',
        key: 'source',
-        span: 7,
+        span: 4,
        render: (text: string, record: ListItem) => (
          <span className="flex flex-column" style={{ width: '100%' }}>
            <AutoTooltip ghost>{generateSource(record)}</AutoTooltip>
@@ -767,7 +778,7 @@ const Models: React.FC<ModelsProps> = ({
            <Space>
              <Input
                placeholder={intl.formatMessage({ id: 'common.filter.name' })}
-                style={{ width: 230 }}
+                style={{ width: 200 }}
                size="large"
                allowClear
                onChange={handleNameChange}
@@ -784,6 +795,15 @@ const Models: React.FC<ModelsProps> = ({
                onChange={handleCategoryChange}
                options={modelCategories.filter((item) => item.value)}
              ></Select>
+              <Select
+                allowClear
+                showSearch={false}
+                placeholder="Filter by worker"
+                style={{ width: 180 }}
+                size="large"
+                maxTagCount={1}
+                options={[]}
+              ></Select>
              <Button
                type="text"
                style={{ color: 'var(--ant-color-text-tertiary)' }}
@@ -46,6 +46,11 @@ export const ActionList: ActionItem[] = [
    key: 'edit',
    icon: icons.EditOutlined
  },
+  {
+    label: 'common.button.detail',
+    key: 'details',
+    icon: icons.FileTextOutlined
+  },
  {
    label: 'models.openinplayground',
    key: 'chat',
@@ -4,6 +4,7 @@ import React from 'react';
 interface FormContextProps {
  isGGUF?: boolean;
  byBuiltIn?: boolean;
+  source?: string;
  pageAction: PageActionType;
  sizeOptions?: Global.BaseOption<number>[];
  quantizationOptions?: Global.BaseOption<string>[];
@@ -45,13 +45,13 @@ const HuggingFaceForm: React.FC = () => {
        ]}
      >
        <SealInput.Input
-          label={intl.formatMessage({ id: 'models.form.repoid' })}
+          label="Base Model"
          required
          disabled={pageAction === PageAction.CREATE}
          onBlur={handleOnBlur}
        ></SealInput.Input>
      </Form.Item>
-      {isGGUF && (
+      {/* {isGGUF && (
        <Form.Item<FormData>
          name="file_name"
          key="file_name"
@@ -69,7 +69,7 @@ const HuggingFaceForm: React.FC = () => {
            onBlur={handleOnBlur}
          ></SealInput.Input>
        </Form.Item>
-      )}
+      )} */}
    </>
  );
 };