Add support for extra arguments in frontend

webui/src/components/BackendFormField.tsx

@@ -3,17 +3,31 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Checkbox } from '@/components/ui/checkbox'
 import { getBackendFieldType, basicBackendFieldsConfig } from '@/lib/zodFormUtils'
+import ExtraArgsInput from '@/components/form/ExtraArgsInput'
 
 interface BackendFormFieldProps {
   fieldKey: string
-  value: string | number | boolean | string[] | undefined
-  onChange: (key: string, value: string | number | boolean | string[] | undefined) => void
+  value: string | number | boolean | string[] | Record<string, string> | undefined
+  onChange: (key: string, value: string | number | boolean | string[] | Record<string, string> | undefined) => void
 }
 
 const BackendFormField: React.FC<BackendFormFieldProps> = ({ fieldKey, value, onChange }) => {
+  // Special handling for extra_args
+  if (fieldKey === 'extra_args') {
+    return (
+      <ExtraArgsInput
+        id={fieldKey}
+        label="Extra Arguments"
+        value={value as Record<string, string> | undefined}
+        onChange={(newValue) => onChange(fieldKey, newValue)}
+        description="Additional command line arguments to pass to the backend"
+      />
+    )
+  }
+
   // Get configuration for basic fields, or use field name for advanced fields
   const config = basicBackendFieldsConfig[fieldKey] || { label: fieldKey }
-  
+
   // Get type from Zod schema
   const fieldType = getBackendFieldType(fieldKey)
 

webui/src/components/form/EnvVarsInput.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import KeyValueInput from './KeyValueInput'
+
+interface EnvVarsInputProps {
+  id: string
+  label: string
+  value: Record<string, string> | undefined
+  onChange: (value: Record<string, string> | undefined) => void
+  description?: string
+  disabled?: boolean
+  className?: string
+}
+
+const EnvVarsInput: React.FC<EnvVarsInputProps> = (props) => {
+  return (
+    <KeyValueInput
+      {...props}
+      keyPlaceholder="Variable name"
+      valuePlaceholder="Variable value"
+      addButtonText="Add Variable"
+      helperText="Environment variables that will be passed to the backend process"
+      allowEmptyValues={false}
+    />
+  )
+}
+
+export default EnvVarsInput

webui/src/components/form/ExtraArgsInput.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import KeyValueInput from './KeyValueInput'
+
+interface ExtraArgsInputProps {
+  id: string
+  label: string
+  value: Record<string, string> | undefined
+  onChange: (value: Record<string, string> | undefined) => void
+  description?: string
+  disabled?: boolean
+  className?: string
+}
+
+const ExtraArgsInput: React.FC<ExtraArgsInputProps> = (props) => {
+  return (
+    <KeyValueInput
+      {...props}
+      keyPlaceholder="Flag name (without --)"
+      valuePlaceholder="Value (empty for boolean flags)"
+      addButtonText="Add Argument"
+      helperText="Additional command line arguments to pass to the backend. Leave value empty for boolean flags."
+      allowEmptyValues={true}
+    />
+  )
+}
+
+export default ExtraArgsInput

webui/src/components/form/KeyValueInput.tsx

@@ -4,7 +4,7 @@ import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
 import { X, Plus } from 'lucide-react'
 
-interface EnvironmentVariablesInputProps {
+interface KeyValueInputProps {
   id: string
   label: string
   value: Record<string, string> | undefined
@@ -12,76 +12,88 @@ interface EnvironmentVariablesInputProps {
   description?: string
   disabled?: boolean
   className?: string
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+  addButtonText?: string
+  helperText?: string
+  allowEmptyValues?: boolean // If true, entries with empty values are considered valid
 }
 
-interface EnvVar {
+interface KeyValuePair {
   key: string
   value: string
 }
 
-const EnvironmentVariablesInput: React.FC<EnvironmentVariablesInputProps> = ({
+const KeyValueInput: React.FC<KeyValueInputProps> = ({
   id,
   label,
   value,
   onChange,
   description,
   disabled = false,
-  className
+  className,
+  keyPlaceholder = 'Key',
+  valuePlaceholder = 'Value',
+  addButtonText = 'Add Entry',
+  helperText,
+  allowEmptyValues = false
 }) => {
   // Convert the value object to an array of key-value pairs for editing
-  const envVarsFromValue = value
+  const pairsFromValue = value
     ? Object.entries(value).map(([key, val]) => ({ key, value: val }))
     : []
 
-  const [envVars, setEnvVars] = useState<EnvVar[]>(
-    envVarsFromValue.length > 0 ? envVarsFromValue : [{ key: '', value: '' }]
+  const [pairs, setPairs] = useState<KeyValuePair[]>(
+    pairsFromValue.length > 0 ? pairsFromValue : [{ key: '', value: '' }]
   )
 
-  // Update parent component when env vars change
-  const updateParent = (newEnvVars: EnvVar[]) => {
-    // Filter out empty entries
-    const validVars = newEnvVars.filter(env => env.key.trim() !== '' && env.value.trim() !== '')
+  // Update parent component when pairs change
+  const updateParent = (newPairs: KeyValuePair[]) => {
+    // Filter based on validation rules
+    const validPairs = allowEmptyValues
+      ? newPairs.filter(pair => pair.key.trim() !== '')
+      : newPairs.filter(pair => pair.key.trim() !== '' && pair.value.trim() !== '')
 
-    if (validVars.length === 0) {
+    if (validPairs.length === 0) {
       onChange(undefined)
     } else {
-      const envObject = validVars.reduce((acc, env) => {
-        acc[env.key.trim()] = env.value.trim()
+      const pairsObject = validPairs.reduce((acc, pair) => {
+        acc[pair.key.trim()] = pair.value.trim()
         return acc
       }, {} as Record<string, string>)
-      onChange(envObject)
+      onChange(pairsObject)
     }
   }
 
   const handleKeyChange = (index: number, newKey: string) => {
-    const newEnvVars = [...envVars]
-    newEnvVars[index].key = newKey
-    setEnvVars(newEnvVars)
-    updateParent(newEnvVars)
+    const newPairs = [...pairs]
+    newPairs[index].key = newKey
+    setPairs(newPairs)
+    updateParent(newPairs)
   }
 
   const handleValueChange = (index: number, newValue: string) => {
-    const newEnvVars = [...envVars]
-    newEnvVars[index].value = newValue
-    setEnvVars(newEnvVars)
-    updateParent(newEnvVars)
+    const newPairs = [...pairs]
+    newPairs[index].value = newValue
+    setPairs(newPairs)
+    updateParent(newPairs)
   }
 
-  const addEnvVar = () => {
-    const newEnvVars = [...envVars, { key: '', value: '' }]
-    setEnvVars(newEnvVars)
+  const addPair = () => {
+    const newPairs = [...pairs, { key: '', value: '' }]
+    setPairs(newPairs)
   }
 
-  const removeEnvVar = (index: number) => {
-    if (envVars.length === 1) {
+  const removePair = (index: number) => {
+    if (pairs.length === 1) {
       // Reset to empty if it's the last one
-      const newEnvVars = [{ key: '', value: '' }]
-      setEnvVars(newEnvVars)
-      updateParent(newEnvVars)
+      const newPairs = [{ key: '', value: '' }]
+      setPairs(newPairs)
+      updateParent(newPairs)
     } else {
-      const newEnvVars = envVars.filter((_, i) => i !== index)
-      setEnvVars(newEnvVars)
-      updateParent(newEnvVars)
+      const newPairs = pairs.filter((_, i) => i !== index)
+      setPairs(newPairs)
+      updateParent(newPairs)
     }
   }
 
@@ -91,18 +103,18 @@ const EnvironmentVariablesInput: React.FC<EnvironmentVariablesInputProps> = ({
         {label}
       </Label>
       <div className="space-y-2">
-        {envVars.map((envVar, index) => (
+        {pairs.map((pair, index) => (
           <div key={index} className="flex gap-2 items-center">
             <Input
-              placeholder="Variable name"
-              value={envVar.key}
+              placeholder={keyPlaceholder}
+              value={pair.key}
               onChange={(e) => handleKeyChange(index, e.target.value)}
               disabled={disabled}
               className="flex-1"
             />
             <Input
-              placeholder="Variable value"
-              value={envVar.value}
+              placeholder={valuePlaceholder}
+              value={pair.value}
               onChange={(e) => handleValueChange(index, e.target.value)}
               disabled={disabled}
               className="flex-1"
@@ -111,7 +123,7 @@ const EnvironmentVariablesInput: React.FC<EnvironmentVariablesInputProps> = ({
               type="button"
               variant="outline"
               size="sm"
-              onClick={() => removeEnvVar(index)}
+              onClick={() => removePair(index)}
               disabled={disabled}
               className="shrink-0"
             >
@@ -123,22 +135,22 @@ const EnvironmentVariablesInput: React.FC<EnvironmentVariablesInputProps> = ({
           type="button"
           variant="outline"
           size="sm"
-          onClick={addEnvVar}
+          onClick={addPair}
           disabled={disabled}
           className="w-fit"
         >
           <Plus className="h-4 w-4 mr-2" />
-          Add Variable
+          {addButtonText}
         </Button>
       </div>
       {description && (
         <p className="text-sm text-muted-foreground">{description}</p>
       )}
-      <p className="text-xs text-muted-foreground">
-        Environment variables that will be passed to the backend process
-      </p>
+      {helperText && (
+        <p className="text-xs text-muted-foreground">{helperText}</p>
+      )}
     </div>
   )
 }
 
-export default EnvironmentVariablesInput
+export default KeyValueInput

webui/src/components/instance/BackendConfiguration.tsx

@@ -47,8 +47,18 @@ const BackendConfiguration: React.FC<BackendConfigurationProps> = ({
             ))}
         </div>
       )}
+
+      {/* Extra Args - Always visible as a separate section */}
+      <div className="space-y-4">
+        <BackendFormField
+          key="extra_args"
+          fieldKey="extra_args"
+          value={(formData.backend_options as any)?.extra_args}
+          onChange={onBackendFieldChange}
+        />
+      </div>
     </div>
   )
 }
 
-export default BackendConfiguration
+export default BackendConfiguration

webui/src/components/instance/BackendConfigurationCard.tsx

@@ -109,6 +109,16 @@ const BackendConfigurationCard: React.FC<BackendConfigurationCardProps> = ({
             )}
           </div>
         )}
+
+        {/* Extra Arguments - Always visible */}
+        <div className="space-y-4">
+          <BackendFormField
+            key="extra_args"
+            fieldKey="extra_args"
+            value={(formData.backend_options as Record<string, unknown>)?.extra_args as Record<string, string> | undefined}
+            onChange={onBackendFieldChange}
+          />
+        </div>
       </CardContent>
     </Card>
   )

webui/src/components/instance/InstanceSettingsCard.tsx

@@ -6,7 +6,7 @@ import { Input } from '@/components/ui/input'
 import AutoRestartConfiguration from '@/components/instance/AutoRestartConfiguration'
 import NumberInput from '@/components/form/NumberInput'
 import CheckboxInput from '@/components/form/CheckboxInput'
-import EnvironmentVariablesInput from '@/components/form/EnvironmentVariablesInput'
+import EnvVarsInput from '@/components/form/EnvironmentVariablesInput'
 import SelectInput from '@/components/form/SelectInput'
 import { nodesApi, type NodesMap } from '@/lib/api'
 
@@ -132,7 +132,7 @@ const InstanceSettingsCard: React.FC<InstanceSettingsCardProps> = ({
             description="Start instance only when needed"
           />
 
-          <EnvironmentVariablesInput
+          <EnvVarsInput
             id="environment"
             label="Environment Variables"
             value={formData.environment}

webui/src/lib/zodFormUtils.ts

@@ -126,7 +126,7 @@ export function getAdvancedBackendFields(backendType?: string): string[] {
   const fieldGetter = backendFieldGetters[normalizedType] || getAllLlamaCppFieldKeys
   const basicConfig = backendFieldConfigs[normalizedType] || basicLlamaCppFieldsConfig
 
-  return fieldGetter().filter(key => !(key in basicConfig))
+  return fieldGetter().filter(key => !(key in basicConfig) && key !== 'extra_args')
 }
 
 // Combined backend fields config for use in BackendFormField

webui/src/schemas/backends/llamacpp.ts

@@ -167,6 +167,9 @@ export const LlamaCppBackendOptionsSchema = z.object({
   fim_qwen_7b_default: z.boolean().optional(),
   fim_qwen_7b_spec: z.boolean().optional(),
   fim_qwen_14b_spec: z.boolean().optional(),
+
+  // Extra args
+  extra_args: z.record(z.string(), z.string()).optional(),
 })
 
 // Infer the TypeScript type from the schema

webui/src/schemas/backends/mlx.ts

@@ -25,6 +25,9 @@ export const MlxBackendOptionsSchema = z.object({
   top_k: z.number().optional(),
   min_p: z.number().optional(),
   max_tokens: z.number().optional(),
+
+  // Extra args
+  extra_args: z.record(z.string(), z.string()).optional(),
 })
 
 // Infer the TypeScript type from the schema

webui/src/schemas/backends/vllm.ts

@@ -125,6 +125,9 @@ export const VllmBackendOptionsSchema = z.object({
   override_pooling_config: z.string().optional(),
   override_neuron_config: z.string().optional(),
   override_kv_cache_align_size: z.number().optional(),
+
+  // Extra args
+  extra_args: z.record(z.string(), z.string()).optional(),
 })
 
 // Infer the TypeScript type from the schema