feat(FR-1726): Auto-populate ENV variables based on selected Inference Runtime Variant

agatha197 · agatha197 · commit 48b9212ceb22 · 2025-11-27T18:59:46.000+09:00
diff --git a/react/src/components/EnvVarFormList.tsx b/react/src/components/EnvVarFormList.tsx
@@ -1,13 +1,29 @@
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, FormItemProps, Input, InputRef } from 'antd';
+import {
+  AutoComplete,
+  Button,
+  Form,
+  FormItemProps,
+  Input,
+  InputRef,
+} from 'antd';
 import { FormListProps } from 'antd/lib/form';
 import { BAIFlex } from 'backend.ai-ui';
 import _ from 'lodash';
 import React, { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
+export interface EnvVarConfig {
+  variable: string;
+  placeholder?: string;
+  required?: boolean;
+  description?: string;
+}
+
 interface EnvVarFormListProps extends Omit<FormListProps, 'children'> {
   formItemProps?: FormItemProps;
+  requiredEnvVars?: EnvVarConfig[];
+  optionalEnvVars?: EnvVarConfig[];
 }
 
 export interface EnvVarFormListValue {
@@ -17,11 +33,45 @@ export interface EnvVarFormListValue {
 // TODO: validation rule for duplicate variable name
 const EnvVarFormList: React.FC<EnvVarFormListProps> = ({
   formItemProps,
+  requiredEnvVars,
+  optionalEnvVars,
   ...props
 }) => {
   const inputRef = useRef<InputRef>(null);
   const { t } = useTranslation();
   const form = Form.useFormInstance();
+
+  const allEnvVars = [
+    ...(requiredEnvVars || []).filter((env) => env && env.variable),
+    ...(optionalEnvVars || []).filter((env) => env && env.variable),
+  ];
+
+  const getPlaceholderForVariable = (variable: string) => {
+    if (!variable || !allEnvVars.length) return 'Value';
+    const envVarConfig = allEnvVars.find(
+      (env) => env && env.variable === variable,
+    );
+    return envVarConfig?.placeholder || 'Value';
+  };
+
+  const getAutoCompleteOptions = () => {
+    const currentValues = form.getFieldValue(props.name) || [];
+    const usedVariables = currentValues
+      .filter((item: EnvVarFormListValue) => item && item.variable)
+      .map((item: EnvVarFormListValue) => item.variable);
+
+    return (
+      optionalEnvVars
+        ?.filter(
+          (env) => env && env.variable && !usedVariables.includes(env.variable),
+        )
+        ?.map((env) => ({
+          value: env.variable,
+          label: env.variable,
+        })) || []
+    );
+  };
+
   return (
     <Form.List {...props}>
       {(fields, { add, remove }) => {
@@ -71,18 +121,38 @@ const EnvVarFormList: React.FC<EnvVarFormListProps> = ({
                   ]}
                   {...formItemProps}
                 >
-                  <Input
-                    ref={index === fields.length - 1 ? inputRef : null}
-                    placeholder="Variable"
-                    onChange={() => {
-                      const fieldNames = fields.map((_field, index) => [
-                        props.name,
-                        index,
-                        'variable',
-                      ]);
-                      form.validateFields(fieldNames);
-                    }}
-                  />
+                  {optionalEnvVars && getAutoCompleteOptions().length > 0 ? (
+                    <AutoComplete
+                      placeholder="Variable"
+                      options={getAutoCompleteOptions()}
+                      onChange={() => {
+                        const fieldNames = fields.map((_field, index) => [
+                          props.name,
+                          index,
+                          'variable',
+                        ]);
+                        form.validateFields(fieldNames);
+                      }}
+                      filterOption={(inputValue, option) =>
+                        option?.value
+                          .toLowerCase()
+                          .indexOf(inputValue.toLowerCase()) !== -1
+                      }
+                    />
+                  ) : (
+                    <Input
+                      ref={index === fields.length - 1 ? inputRef : null}
+                      placeholder="Variable"
+                      onChange={() => {
+                        const fieldNames = fields.map((_field, index) => [
+                          props.name,
+                          index,
+                          'variable',
+                        ]);
+                        form.validateFields(fieldNames);
+                      }}
+                    />
+                  )}
                 </Form.Item>
                 <Form.Item
                   {...restField}
@@ -97,9 +167,19 @@ const EnvVarFormList: React.FC<EnvVarFormListProps> = ({
                     },
                   ]}
                   validateTrigger={['onChange', 'onBlur']}
+                  dependencies={[[props.name, name, 'variable']]}
                 >
                   <Input
-                    placeholder="Value"
+                    placeholder={(() => {
+                      const currentVariable = form.getFieldValue([
+                        props.name,
+                        name,
+                        'variable',
+                      ]);
+                      return currentVariable
+                        ? getPlaceholderForVariable(currentVariable)
+                        : 'Value';
+                    })()}
                     // onChange={() => {
                     //   const valueFields = fields.map((field, index) => [
                     //     props.name,
diff --git a/react/src/components/ServiceLauncherPageContent.tsx b/react/src/components/ServiceLauncherPageContent.tsx
@@ -20,6 +20,7 @@ import { useValidateServiceName } from '../hooks/useValidateServiceName';
 import EnvVarFormList, {
   sanitizeSensitiveEnv,
   EnvVarFormListValue,
+  EnvVarConfig,
 } from './EnvVarFormList';
 import ImageEnvironmentSelectFormItems, {
   ImageEnvironmentFormInput,
@@ -175,6 +176,126 @@ const ServiceLauncherPageContent: React.FC<ServiceLauncherPageContentProps> = ({
 
   const { getErrorMessage } = useErrorMessageResolver();
 
+  // Runtime variant environment variable configurations
+  const RUNTIME_ENV_VAR_CONFIGS: Record<
+    string,
+    {
+      requiredEnvVars?: EnvVarConfig[];
+      optionalEnvVars?: EnvVarConfig[];
+    }
+  > = {
+    vllm: {
+      requiredEnvVars: [
+        {
+          variable: 'BACKEND_MODEL_NAME',
+          placeholder: 'Enter model name (e.g., meta-llama/Llama-2-7b-chat-hf)',
+          description: "Corresponds to vLLM's --model-name argument",
+        },
+      ],
+      optionalEnvVars: [
+        {
+          variable: 'VLLM_QUANTIZATION',
+          placeholder: 'e.g., awq, gptq, fp8',
+          description: "Corresponds to vLLM's --quantization argument",
+        },
+        {
+          variable: 'VLLM_TP_SIZE',
+          placeholder: 'Tensor parallel size (e.g., 2, 4, 8)',
+          description: "Corresponds to vLLM's --tensor-parallel-size argument",
+        },
+        {
+          variable: 'VLLM_PP_SIZE',
+          placeholder: 'Pipeline parallel size (e.g., 2, 4)',
+          description:
+            "Corresponds to vLLM's --pipeline-parallel-size argument",
+        },
+        {
+          variable: 'VLLM_EXTRA_ARGS',
+          placeholder:
+            'Additional vLLM arguments (e.g., --tokenizer=/models/custom-tokenizer --dtype=half)',
+          description:
+            'Used to pass additional vLLM arguments not mentioned above',
+        },
+      ],
+    },
+    sglang: {
+      requiredEnvVars: [
+        {
+          variable: 'BACKEND_MODEL_NAME',
+          placeholder:
+            'Enter model name (e.g., gpt-oss-20b, qwen3-8b-Gemini-3-2.5-Pro-Distill)',
+          description: 'Model name for sglang',
+        },
+      ],
+      optionalEnvVars: [
+        {
+          variable: 'SGLANG_QUANTIZATION',
+          placeholder: 'e.g., awq, awq_marlin, gptq, int4, fp8',
+          description: 'Quantization method',
+        },
+        {
+          variable: 'SGLANG_TP_SIZE',
+          placeholder: 'Tensor parallel size (e.g., 1(default), 2, ...)',
+          description: 'Tensor parallel size',
+        },
+        {
+          variable: 'SGLANG_PP_SIZE',
+          placeholder: 'Pipeline parallel size (e.g., 1(default), 2, ...)',
+          description: 'Pipeline parallel size',
+        },
+        {
+          variable: 'SGLANG_EXTRA_ARGS',
+          placeholder:
+            'Extra arguments (e.g., --dtype bfloat16 --max-running-requests 100)',
+          description: 'Extra arguments used for sglang cmd',
+        },
+      ],
+    },
+    nim: {
+      requiredEnvVars: [
+        {
+          variable: 'NGC_API_KEY',
+          placeholder: 'Enter your NGC API key',
+          description: 'NGC API key with NIM Model Registry access',
+        },
+      ],
+      optionalEnvVars: [],
+    },
+  };
+
+  // Helper function to set environment variables based on runtime variant
+  const setEnvironmentVariablesForRuntimeVariant = (runtimeVariant: string) => {
+    const runtimeConfig = RUNTIME_ENV_VAR_CONFIGS[runtimeVariant];
+    if (!runtimeConfig) return;
+
+    const currentEnvVars = form.getFieldValue('envvars') || [];
+    const existingVariables = currentEnvVars
+      .filter((env: EnvVarFormListValue) => env && env.variable)
+      .map((env: EnvVarFormListValue) => env.variable);
+
+    // Add required environment variables that don't exist
+    const newRequiredEnvVars = (runtimeConfig.requiredEnvVars || [])
+      .filter((envVar) => !existingVariables.includes(envVar.variable))
+      .map((envVar) => ({
+        variable: envVar.variable,
+        value: '',
+      }));
+
+    if (newRequiredEnvVars.length > 0) {
+      const updatedEnvVars = [...currentEnvVars, ...newRequiredEnvVars];
+      form.setFieldValue('envvars', updatedEnvVars);
+    }
+  };
+
+  // Handler for form values change
+  const handleFormValuesChange = (
+    changedValues: Partial<ServiceLauncherInput>,
+  ) => {
+    if (changedValues.runtimeVariant && !endpoint) {
+      setEnvironmentVariablesForRuntimeVariant(changedValues.runtimeVariant);
+    }
+  };
+
   const endpoint = useFragment(
     graphql`
       fragment ServiceLauncherPageContentFragment on Endpoint {
@@ -766,6 +887,7 @@ const ServiceLauncherPageContent: React.FC<ServiceLauncherPageContentProps> = ({
                 layout="vertical"
                 labelCol={{ span: 12 }}
                 initialValues={mergedInitialValues}
+                onValuesChange={handleFormValuesChange}
               >
                 <BAIFlex direction="column" gap={'md'} align="stretch">
                   <Card>
@@ -780,7 +902,9 @@ const ServiceLauncherPageContent: React.FC<ServiceLauncherPageContentProps> = ({
                           <Input disabled={!!endpoint} />
                         </Form.Item>
                         <Form.Item name="openToPublic" valuePropName="checked">
-                          <Checkbox disabled={!!endpoint}>{t('modelService.OpenToPublic')}</Checkbox>
+                          <Checkbox disabled={!!endpoint}>
+                            {t('modelService.OpenToPublic')}
+                          </Checkbox>
                         </Form.Item>
                         {!endpoint ? (
                           <Form.Item
@@ -1013,15 +1137,35 @@ const ServiceLauncherPageContent: React.FC<ServiceLauncherPageContentProps> = ({
                         >
                           <ResourceAllocationFormItems enableResourcePresets />
                         </div>
-                        <Form.Item
-                          label={t('session.launcher.EnvironmentVariable')}
-                        >
-                          <EnvVarFormList
-                            name={'envvars'}
-                            formItemProps={{
-                              validateTrigger: ['onChange', 'onBlur'],
-                            }}
-                          />
+                        <Form.Item dependencies={['runtimeVariant']} noStyle>
+                          {({ getFieldValue }) => {
+                            const runtimeVariant =
+                              getFieldValue('runtimeVariant');
+                            const runtimeVariantConfig = runtimeVariant
+                              ? RUNTIME_ENV_VAR_CONFIGS[runtimeVariant]
+                              : null;
+
+                            return (
+                              <Form.Item
+                                label={t(
+                                  'session.launcher.EnvironmentVariable',
+                                )}
+                              >
+                                <EnvVarFormList
+                                  name={'envvars'}
+                                  requiredEnvVars={
+                                    runtimeVariantConfig?.requiredEnvVars
+                                  }
+                                  optionalEnvVars={
+                                    runtimeVariantConfig?.optionalEnvVars
+                                  }
+                                  formItemProps={{
+                                    validateTrigger: ['onChange', 'onBlur'],
+                                  }}
+                                />
+                              </Form.Item>
+                            );
+                          }}
                         </Form.Item>
                       </>
                     )}
