Initial commit

frontend/components/model-selector.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { geminiImageModels, veoVideoModels } from '@/lib/google-ai';
+
+interface ModelSelectorProps {
+  selectedModel: string;
+  onModelChange: (model: string) => void;
+  contentType: 'image' | 'video';
+}
+
+export function ModelSelector({ selectedModel, onModelChange, contentType }: ModelSelectorProps) {
+  const models = contentType === 'image' ? geminiImageModels : veoVideoModels;
+
+  return (
+    <div className="space-y-3">
+      <label className="text-sm font-medium text-foreground">
+        Modelo de IA
+      </label>
+      <select
+        value={selectedModel}
+        onChange={(e) => onModelChange(e.target.value)}
+        className="w-full px-4 py-2.5 bg-secondary border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary transition-all"
+      >
+        {models.map((model) => (
+          <option key={model.id} value={model.id}>
+            {model.name} - {model.description}
+          </option>
+        ))}
+      </select>
+
+      {/* Info del modelo seleccionado */}
+      <div className="text-xs text-muted-foreground bg-muted p-3 rounded-lg">
+        {(() => {
+          const model = models.find(m => m.id === selectedModel);
+          if (!model) return null;
+
+          return (
+            <div className="space-y-1">
+              <p><strong>Modelo:</strong> {model.name}</p>
+              <p><strong>ID:</strong> {model.id}</p>
+              {model.capabilities && (
+                <p><strong>Capacidades:</strong> {model.capabilities.join(', ')}</p>
+              )}
+            </div>
+          );
+        })()}
+      </div>
+    </div>
+  );
+}