File size: 6,519 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 | import React, { useState } from 'react';
import { GenerationParams, DEFAULT_SYSTEM_PROMPT } from '../types';
import { ChevronDown, ChevronUp, Settings, RotateCcw } from 'lucide-react';
interface AdvancedSettingsProps {
params: GenerationParams;
systemPrompt: string;
onParamsChange: (params: GenerationParams) => void;
onSystemPromptChange: (prompt: string) => void;
}
export const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
params,
systemPrompt,
onParamsChange,
onSystemPromptChange
}) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800 transition-colors">
<button
onClick={() => setIsOpen(!isOpen)}
className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
>
<div className="flex items-center gap-2">
<Settings size={18} className="text-gray-500 dark:text-gray-400" />
<span className="font-medium text-gray-700 dark:text-gray-300">Gelişmiş Ayarlar</span>
</div>
{isOpen ? (
<ChevronUp size={20} className="text-gray-400 dark:text-gray-500" />
) : (
<ChevronDown size={20} className="text-gray-400 dark:text-gray-500" />
)}
</button>
{isOpen && (
<div className="px-4 pb-4 space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4 bg-gray-50 dark:bg-gray-800/50">
{/* System Prompt */}
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Sistem Prompt
</label>
<textarea
value={systemPrompt}
onChange={(e) => onSystemPromptChange(e.target.value)}
rows={4}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-600 focus:border-transparent resize-none transition-all text-sm"
placeholder="Sistem talimatlarını buraya girin..."
/>
<button
onClick={() => onSystemPromptChange(DEFAULT_SYSTEM_PROMPT)}
className="mt-2 flex items-center gap-1.5 text-xs text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors"
>
<RotateCcw size={12} />
Varsayılana Dön
</button>
</div>
{/* Temperature */}
<div>
<div className="flex justify-between items-center mb-2">
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
Temperature
</label>
<span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
{params.temperature.toFixed(1)}
</span>
</div>
<input
type="range"
min="0"
max="1"
step="0.1"
value={params.temperature}
onChange={(e) =>
onParamsChange({ ...params, temperature: parseFloat(e.target.value) })
}
className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
/>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1.5">
Düşük: daha tutarlı • Yüksek: daha yaratıcı
</p>
</div>
{/* Max Tokens */}
<div>
<div className="flex justify-between items-center mb-2">
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
Max New Tokens
</label>
<span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
{params.maxTokens}
</span>
</div>
<input
type="range"
min="64"
max="4096"
step="64"
value={params.maxTokens}
onChange={(e) =>
onParamsChange({ ...params, maxTokens: parseInt(e.target.value) })
}
className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
/>
</div>
{/* Top-p */}
<div>
<div className="flex justify-between items-center mb-2">
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
Top-p (Nucleus Sampling)
</label>
<span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
{params.topP.toFixed(2)}
</span>
</div>
<input
type="range"
min="0.1"
max="1"
step="0.05"
value={params.topP}
onChange={(e) =>
onParamsChange({ ...params, topP: parseFloat(e.target.value) })
}
className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
/>
</div>
{/* Top-k */}
<div>
<div className="flex justify-between items-center mb-2">
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
Top-k
</label>
<span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
{params.topK}
</span>
</div>
<input
type="range"
min="1"
max="100"
step="1"
value={params.topK}
onChange={(e) =>
onParamsChange({ ...params, topK: parseInt(e.target.value) })
}
className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
/>
</div>
</div>
)}
</div>
);
};
|