feat: dynamic backends

2025-10-13 14:40:26 +08:00
parent ee95fabc47
commit bca1e8140e
19 changed files with 325 additions and 177 deletions
@@ -2,22 +2,17 @@ import IconFont from '@/components/icon-font';
 import LabelSelector from '@/components/label-selector';
 import ListInput from '@/components/list-input';
 import CheckboxField from '@/components/seal-form/checkbox-field';
-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 { useIntl } from '@umijs/max';
 import { Collapse, Form, FormInstance, Typography } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useMemo } from 'react';
 import {
-  backendLabelMap,
  backendParamsHolderTips,
-  backendTipsList,
  getBackendParamsTips,
  modelCategories,
-  modelSourceMap,
  placementStrategyOptions,
  ScheduleValueMap
 } from '../config';
@@ -26,6 +21,7 @@ import BackendParameters, {
 } from '../config/backend-parameters';
 import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
+import BackendFields from '../forms/backend-fields';
 import dataformStyles from '../style/data-form.less';
 import Performance from './performance';

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

 const placementStrategyTips = [
@@ -51,7 +45,7 @@ const placementStrategyTips = [
 ];

 const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
-  const { form, isGGUF, gpuOptions, source, backendOptions, action } = props;
+  const { form, isGGUF, gpuOptions, source, action } = props;
  const intl = useIntl();
  const wokerSelector = Form.useWatch('worker_selector', form);
  const EnviromentVars = Form.useWatch('env', form);
@@ -63,7 +57,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
  const placement_strategy = Form.useWatch('placement_strategy', form);
  const gpuSelectorIds = Form.useWatch(['gpu_selector', 'gpu_ids'], form);
  const worker_selector = Form.useWatch('worker_selector', form);
-  const { onValuesChange } = useFormContext();
+  const { onValuesChange, onBackendChange, backendOptions } = useFormContext();

  const paramsConfig = useMemo(() => {
    return _.get(BackendParameters, backend, []);
@@ -154,47 +148,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
            options={modelCategories}
          ></SealSelect>
        </Form.Item>
-        <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.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>
+        <BackendFields></BackendFields>
        {scheduleType === ScheduleValueMap.Auto && (
          <>
            <Form.Item<FormData> name="placement_strategy">
@@ -257,51 +211,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
          </>
        )}

-        <Form.Item name="backend_version">
-          <SealInput.Input
-            placeholder={
-              backendParamsTips?.version
-                ? `${intl.formatMessage({ id: 'common.help.eg' })} ${backendParamsTips?.version}`
-                : ''
-            }
-            onBlur={handleBackendVersionOnBlur}
-            label={intl.formatMessage({ id: 'models.form.backendVersion' })}
-            description={intl.formatMessage(
-              {
-                id: 'models.form.backendVersion.tips'
-              },
-              {
-                backend: backendLabelMap[backend],
-                version: backendParamsTips?.version
-                  ? `(${intl.formatMessage({ id: 'common.help.eg' })} ${backendParamsTips?.version})`
-                  : '',
-                link: backendParamsTips?.releases && (
-                  <span
-                    style={{
-                      marginLeft: 5
-                    }}
-                  >
-                    <Typography.Link
-                      className="flex-center"
-                      style={{ display: 'inline' }}
-                      href={backendParamsTips?.releases}
-                      target="_blank"
-                    >
-                      <span>
-                        {intl.formatMessage({ id: 'models.form.releases' })}
-                      </span>
-                      <IconFont
-                        type="icon-external-link"
-                        className="font-size-14 m-l-4"
-                      ></IconFont>
-                    </Typography.Link>
-                  </span>
-                )
-              }
-            )}
-          ></SealInput.Input>
-        </Form.Item>
-
        <Form.Item<FormData> name="backend_parameters">
          <ListInput
            placeholder={
@@ -9,7 +9,12 @@ import React, { forwardRef, useImperativeHandle } from 'react';
 import { excludeFields, ScheduleValueMap, sourceOptions } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
 import { FormContext } from '../config/form-context';
-import { DeployFormKey, FormData, SourceType } from '../config/types';
+import {
+  BackendOption,
+  DeployFormKey,
+  FormData,
+  SourceType
+} from '../config/types';
 import CatalogFrom from '../forms/catalog';
 import HuggingFaceForm from '../forms/hugging-face';
 import LocalPathForm from '../forms/local-path';
@@ -24,7 +29,7 @@ interface DataFormProps {
  isGGUF: boolean;
  formKey: DeployFormKey;
  sourceDisable?: boolean;
-  backendOptions?: Global.BaseOption<string>[];
+  backendOptions: BackendOption[];
  sourceList?: Global.BaseOption<string>[];
  clusterList: Global.BaseOption<number>[];
  fields?: string[];
@@ -41,7 +46,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
    formKey,
    initialValues,
    sourceDisable = true,
-    backendOptions,
+    backendOptions = [],
    sourceList,
    clusterList = [],
    fields = ['source'],
@@ -174,8 +179,10 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
      value={{
        isGGUF: isGGUF,
        formKey: formKey,
+        source: props.source,
        pageAction: action,
        gpuOptions: gpuOptions,
+        backendOptions: backendOptions,
        onValuesChange: onValuesChange,
        onBackendChange: handleBackendChange
      }}
@@ -276,8 +283,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
          isGGUF={isGGUF}
          action={action}
          source={props.source}
-          backendOptions={backendOptions}
-          handleBackendChange={handleBackendChange}
        ></AdvanceConfig>
      </Form>
    </FormContext.Provider>
@@ -9,7 +9,7 @@ import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { defaultFormValues, deployFormKeyMap, modelSourceMap } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
-import { FormData, SourceType } from '../config/types';
+import { BackendOption, FormData, SourceType } from '../config/types';
 import {
  MessageStatus,
  WarningStausOptions,
@@ -58,6 +58,7 @@ type AddModalProps = {
  width?: string | number;
  initialValues?: any;
  deploymentType?: 'modelList' | 'modelFiles';
+  backendOptions: BackendOption[];
  clusterList: Global.BaseOption<
    number,
    { provider: string; state: string | number }
@@ -541,6 +542,7 @@ const AddModal: FC<AddModalProps> = (props) => {
                onOk={handleOnOk}
                ref={form}
                isGGUF={isGGUF}
+                backendOptions={props.backendOptions}
                onBackendChange={handleBackendChange}
                onValuesChange={onValuesChange}
              ></DataForm>
@@ -57,6 +57,7 @@ import {
 } from '../config/types';
 import useFormInitialValues from '../hooks/use-form-initial-values';
 import useModelsColumns from '../hooks/use-models-columns';
+import useQueryBackends from '../hooks/use-query-backends';
 import APIAccessInfoModal from './api-access-info';
 import DeployModal from './deploy-modal';
 import Instances from './instances';
@@ -123,6 +124,7 @@ const Models: React.FC<ModelsProps> = ({
  loadend,
  total
 }) => {
+  const { backendOptions } = useQueryBackends();
  const { generateFormValues, clusterList, getClusterList } =
    useFormInitialValues();
  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
@@ -686,6 +688,7 @@ const Models: React.FC<ModelsProps> = ({
        clusterList={clusterList}
        onCancel={handleModalCancel}
        onOk={handleModalOk}
+        backendOptions={backendOptions}
      ></UpdateModel>
      <DeployModal
        open={openDeployModal.show}
@@ -696,6 +699,7 @@ const Models: React.FC<ModelsProps> = ({
        isGGUF={openDeployModal.isGGUF}
        hasLinuxWorker={openDeployModal.hasLinuxWorker}
        clusterList={clusterList}
+        backendOptions={backendOptions}
        onCancel={handleDeployModalCancel}
        onOk={handleCreateModel}
      ></DeployModal>
@@ -11,7 +11,7 @@ import {
  updateIgnoreFields
 } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
-import { FormData } from '../config/types';
+import { BackendOption, FormData } from '../config/types';
 import { generateGPUSelector } from '../config/utils';
 import { useCheckCompatibility } from '../hooks';
 import ColumnWrapper from './column-wrapper';
@@ -26,6 +26,7 @@ type AddModalProps = {
    data: FormData;
    isGGUF: boolean;
  };
+  backendOptions: BackendOption[];
  clusterList: Global.BaseOption<
    number,
    { provider: string; state: string | number }
@@ -325,6 +326,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
          onOk={handleOk}
          ref={formRef}
          isGGUF={isGGUF}
+          backendOptions={props.backendOptions}
          onBackendChange={handleAsyncBackendChange}
          onValuesChange={handleManulOnValuesChange}
        ></DataForm>