fix: check the image and run_command valid when select custom backend

src/components/seal-form/seal-textarea.tsx

@@ -1,12 +1,6 @@
 import { Form, Input } from 'antd';
 import type { TextAreaProps } from 'antd/es/input/TextArea';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
@@ -73,46 +67,34 @@ const SealTextArea: React.FC<InputTextareaProps & SealFormItemProps> = (
     return focusRows;
   }, [props.autoSize, isFocus, scaleSize]);
 
-  const handleClickWrapper = useCallback(() => {
+  const handleClickWrapper = () => {
     if (!props.disabled && !isFocus) {
       inputRef.current?.focus?.({
         cursor: 'all'
       });
       setIsFocus(true);
     }
-  }, [props.disabled, isFocus]);
+  };
 
-  const handleChange = useCallback(
-    (e: any) => {
-      onChange?.(e);
-    },
-    [onChange]
-  );
+  const handleChange = (e: any) => {
+    onChange?.(e);
+  };
 
-  const handleOnFocus = useCallback(
-    (e: any) => {
-      setIsFocus(true);
-      onFocus?.(e);
-    },
-    [onFocus]
-  );
+  const handleOnFocus = (e: any) => {
+    setIsFocus(true);
+    onFocus?.(e);
+  };
 
-  const handleOnBlur = useCallback(
-    (e: any) => {
-      if (!inputRef.current?.resizableTextArea?.textArea?.value) {
-        setIsFocus(false);
-        onBlur?.(e);
-      }
-    },
-    [onBlur, scaleSize]
-  );
+  const handleOnBlur = (e: any) => {
+    if (!inputRef.current?.resizableTextArea?.textArea?.value) {
+      setIsFocus(false);
+    }
+    onBlur?.(e);
+  };
 
-  const handleInput = useCallback(
-    (e: any) => {
-      onInput?.(e);
-    },
-    [onInput]
-  );
+  const handleInput = (e: any) => {
+    onInput?.(e);
+  };
 
   console.log('style=========', style, rest);
 

src/pages/llmodels/config/backend-parameters/index.ts

@@ -17,7 +17,6 @@ export const backendOptionsMap = {
 };
 
 export const BuiltInBackendOptions = [
-  backendOptionsMap.vllm,
   backendOptionsMap.ascendMindie,
   backendOptionsMap.SGLang,
   backendOptionsMap.voxBox

src/pages/llmodels/forms/custom-backend.tsx

@@ -5,6 +5,7 @@ import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React from 'react';
 import { backendOptionsMap } from '../config/backend-parameters';
+import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
 
 const CustomBackend: React.FC = () => {
@@ -12,6 +13,23 @@ const CustomBackend: React.FC = () => {
   const { getRuleMessage } = useAppUtils();
   const form = Form.useFormInstance();
   const backend = Form.useWatch('backend', form);
+  const { onValuesChange } = useFormContext();
+
+  const handleImageNameOnBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const runCommand = form.getFieldValue('run_command');
+    if (value && runCommand) {
+      onValuesChange?.({ image_name: value }, form.getFieldsValue());
+    }
+  };
+
+  const handleRunCommandOnBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    const imageName = form.getFieldValue('image_name');
+    if (value && imageName) {
+      onValuesChange?.({ run_command: value }, form.getFieldsValue());
+    }
+  };
 
   return (
     <>
@@ -29,6 +47,7 @@ const CustomBackend: React.FC = () => {
             <SealInput.Input
               required
               allowClear
+              onBlur={handleImageNameOnBlur}
               label={intl.formatMessage({ id: 'backend.imageName' })}
             ></SealInput.Input>
           </Form.Item>
@@ -46,6 +65,7 @@ const CustomBackend: React.FC = () => {
               required
               scaleSize={false}
               alwaysFocus={true}
+              onBlur={handleRunCommandOnBlur}
               autoSize={{ minRows: 2, maxRows: 4 }}
               label={intl.formatMessage({ id: 'backend.runCommand' })}
               description={intl.formatMessage({

src/pages/llmodels/forms/index.tsx

@@ -240,6 +240,15 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
       ...updateKVCacheConfig(val, option),
       ...updateGPUSelector(val)
     });
+
+    const imageName = form.getFieldValue('image_name');
+    const runCommand = form.getFieldValue('run_command');
+
+    // if the image_name or run_command is empty, set them to default value of the backend
+
+    if (val === backendOptionsMap.custom && !imageName && !runCommand) {
+      return;
+    }
     onBackendChange?.(val);
   };