forked from innovacion/playground
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
'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>
|
|
);
|
|
}
|