File size: 2,103 Bytes
a94ab76 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import React from 'react';
import { MODELS, ModelConfig } from '../types';
import { ChevronDown, Cpu } from 'lucide-react';
interface ModelSelectorProps {
selectedModel: ModelConfig;
onModelChange: (model: ModelConfig) => void;
}
export const ModelSelector: React.FC<ModelSelectorProps> = ({
selectedModel,
onModelChange
}) => {
return (
<div className="relative">
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<Cpu size={16} />
Model Seçimi
</label>
<div className="relative">
<select
value={selectedModel.name}
onChange={(e) => {
const model = MODELS.find(m => m.name === e.target.value);
if (model) onModelChange(model);
}}
className="w-full appearance-none px-4 py-2.5 pr-10 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-600 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-all"
>
{MODELS.map((model) => (
<option key={model.path} value={model.name}>
{model.name}
</option>
))}
</select>
<ChevronDown
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 pointer-events-none"
size={20}
/>
</div>
{selectedModel.supportsImages && (
<div className="mt-2 flex items-center gap-1.5 text-xs text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2.5 py-1.5 rounded-md w-fit">
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span>Resim desteği aktif</span>
</div>
)}
</div>
);
};
|