Add vLLM backend support to webui

webui/src/components/ParseCommandDialog.tsx

@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { type CreateInstanceOptions } from "@/types/instance";
+import { BackendType, type BackendTypeValue, type CreateInstanceOptions } from "@/types/instance";
 import { backendsApi } from "@/lib/api";
 import { toast } from "sonner";
 
@@ -25,6 +25,7 @@ const ParseCommandDialog: React.FC<ParseCommandDialogProps> = ({
   onParsed,
 }) => {
   const [command, setCommand] = useState('');
+  const [backendType, setBackendType] = useState<BackendTypeValue>(BackendType.LLAMA_CPP);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -38,18 +39,31 @@ const ParseCommandDialog: React.FC<ParseCommandDialogProps> = ({
     setError(null);
 
     try {
-      const options = await backendsApi.llamaCpp.parseCommand(command);
+      let options: CreateInstanceOptions;
+
+      // Parse based on selected backend type
+      switch (backendType) {
+        case BackendType.LLAMA_CPP:
+          options = await backendsApi.llamaCpp.parseCommand(command);
+          break;
+        case BackendType.MLX_LM:
+          options = await backendsApi.mlx.parseCommand(command);
+          break;
+        case BackendType.VLLM:
+          options = await backendsApi.vllm.parseCommand(command);
+          break;
+        default:
+          throw new Error(`Unsupported backend type: ${backendType}`);
+      }
+
       onParsed(options);
       onOpenChange(false);
-      // Reset form
       setCommand('');
       setError(null);
-      // Show success toast
       toast.success('Command parsed successfully');
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to parse command';
       setError(errorMessage);
-      // Show error toast
       toast.error('Failed to parse command', {
         description: errorMessage
       });
@@ -60,35 +74,62 @@ const ParseCommandDialog: React.FC<ParseCommandDialogProps> = ({
 
   const handleOpenChange = (open: boolean) => {
     if (!open) {
-      // Reset form when closing
       setCommand('');
+      setBackendType(BackendType.LLAMA_CPP);
       setError(null);
     }
     onOpenChange(open);
   };
 
+  const getPlaceholderForBackend = (backendType: BackendTypeValue): string => {
+    switch (backendType) {
+      case BackendType.LLAMA_CPP:
+        return "llama-server --model /path/to/model.gguf --gpu-layers 32 --ctx-size 4096";
+      case BackendType.MLX_LM:
+        return "mlx_lm.server --model mlx-community/Mistral-7B-Instruct-v0.3-4bit --host 0.0.0.0 --port 8080";
+      case BackendType.VLLM:
+        return "vllm serve --model microsoft/DialoGPT-medium --tensor-parallel-size 2 --gpu-memory-utilization 0.9";
+      default:
+        return "Enter your command here...";
+    }
+  };
+
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent className="sm:max-w-[600px]">
         <DialogHeader>
-          <DialogTitle>Parse Llama Server Command</DialogTitle>
+          <DialogTitle>Parse Backend Command</DialogTitle>
           <DialogDescription>
-            Paste your llama-server command to automatically populate the form fields
+            Select your backend type and paste the command to automatically populate the form fields
           </DialogDescription>
         </DialogHeader>
-        
+
         <div className="space-y-4">
+          <div>
+            <Label htmlFor="backend-type">Backend Type</Label>
+            <select
+              id="backend-type"
+              value={backendType}
+              onChange={(e) => setBackendType(e.target.value as BackendTypeValue)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <option value={BackendType.LLAMA_CPP}>Llama Server</option>
+              <option value={BackendType.MLX_LM}>MLX LM</option>
+              <option value={BackendType.VLLM}>vLLM</option>
+            </select>
+          </div>
+
           <div>
             <Label htmlFor="command">Command</Label>
             <textarea
               id="command"
               value={command}
               onChange={(e) => setCommand(e.target.value)}
-              placeholder="llama-server --model /path/to/model.gguf --gpu-layers 32 --ctx-size 4096"
+              placeholder={getPlaceholderForBackend(backendType)}
               className="w-full h-32 p-3 mt-2 border border-input rounded-md font-mono text-sm resize-vertical focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
             />
           </div>
-          
+
           {error && (
             <div className="text-destructive text-sm bg-destructive/10 p-3 rounded-md">
               {error}

webui/src/components/ZodFormField.tsx

@@ -39,6 +39,7 @@ const ZodFormField: React.FC<ZodFormFieldProps> = ({ fieldKey, value, onChange }
           >
             <option value={BackendType.LLAMA_CPP}>Llama Server</option>
             <option value={BackendType.MLX_LM}>MLX LM</option>
+            <option value={BackendType.VLLM}>vLLM</option>
           </select>
           {config.description && (
             <p className="text-sm text-muted-foreground">{config.description}</p>