Redesign create/edit instance dialog

2025-11-06 17:14:28 +00:00 · 2025-09-23 21:11:00 +02:00
parent 9ebc05fa3a
commit 2cbd666d38
6 changed files with 224 additions and 227 deletions
--- a/webui/src/components/instance/BackendConfigurationCard.tsx
+++ b/webui/src/components/instance/BackendConfigurationCard.tsx
@@ -0,0 +1,117 @@
+import React, { useState } from 'react'
+import { BackendType, type CreateInstanceOptions } from '@/types/instance'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Terminal, ChevronDown, ChevronRight } from 'lucide-react'
+import { getBasicBackendFields, getAdvancedBackendFields } from '@/lib/zodFormUtils'
+import BackendFormField from '@/components/BackendFormField'
+import SelectInput from '@/components/form/SelectInput'
+
+interface BackendConfigurationCardProps {
+  formData: CreateInstanceOptions
+  onBackendFieldChange: (key: string, value: unknown) => void
+  onChange: (key: keyof CreateInstanceOptions, value: unknown) => void
+  onParseCommand: () => void
+}
+
+const BackendConfigurationCard: React.FC<BackendConfigurationCardProps> = ({
+  formData,
+  onBackendFieldChange,
+  onChange,
+  onParseCommand
+}) => {
+  const [showAdvanced, setShowAdvanced] = useState(false)
+  const basicBackendFields = getBasicBackendFields(formData.backend_type)
+  const advancedBackendFields = getAdvancedBackendFields(formData.backend_type)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Backend Configuration</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Backend Type Selection */}
+        <SelectInput
+          id="backend_type"
+          label="Backend Type"
+          value={formData.backend_type || BackendType.LLAMA_CPP}
+          onChange={(value) => onChange('backend_type', value)}
+          options={[
+            { value: BackendType.LLAMA_CPP, label: 'Llama Server (llama_cpp)' },
+            { value: BackendType.MLX_LM, label: 'MLX LM (mlx_lm)' },
+            { value: BackendType.VLLM, label: 'vLLM (vllm)' }
+          ]}
+          description="Select the backend server type"
+        />
+
+        {/* Parse Command Section */}
+        <div className="flex flex-col gap-2">
+          <Button
+            variant="outline"
+            onClick={onParseCommand}
+            className="flex items-center gap-2 w-fit"
+          >
+            <Terminal className="h-4 w-4" />
+            Parse Command
+          </Button>
+          <p className="text-sm text-muted-foreground">
+            Import settings from your backend command
+          </p>
+        </div>
+
+        {/* Basic Backend Options */}
+        {basicBackendFields.length > 0 && (
+          <div className="space-y-4">
+            <h3 className="text-md font-medium">Basic Backend Options</h3>
+            {basicBackendFields.map((fieldKey) => (
+              <BackendFormField
+                key={fieldKey}
+                fieldKey={fieldKey}
+                value={(formData.backend_options as Record<string, unknown>)?.[fieldKey] as string | number | boolean | string[] | undefined}
+                onChange={onBackendFieldChange}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Advanced Backend Options */}
+        {advancedBackendFields.length > 0 && (
+          <div className="space-y-4">
+            <Button
+              variant="ghost"
+              onClick={() => setShowAdvanced(!showAdvanced)}
+              className="flex items-center gap-2 p-0 h-auto font-medium"
+            >
+              {showAdvanced ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronRight className="h-4 w-4" />
+              )}
+              Advanced Backend Options
+              <span className="text-muted-foreground text-sm font-normal">
+                ({advancedBackendFields.length} options)
+              </span>
+            </Button>
+
+            {showAdvanced && (
+              <div className="space-y-4 pl-6 border-l-2 border-muted">
+                {advancedBackendFields
+                  .sort()
+                  .map((fieldKey) => (
+                    <BackendFormField
+                      key={fieldKey}
+                      fieldKey={fieldKey}
+                      value={(formData.backend_options as Record<string, unknown>)?.[fieldKey] as string | number | boolean | string[] | undefined}
+                      onChange={onBackendFieldChange}
+                    />
+                  ))}
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default BackendConfigurationCard