import { useState, useEffect, useCallback } from 'react'; import { RotateCcw } from 'lucide-react'; import { Button } from '../../ui/button'; import { Switch } from '../../ui/switch'; import { getModelSettings, updateModelSettings, type ModelSettings, type SamplingConfig, } from '../../../api'; import { defineMessages, useIntl } from '../../../i18n'; const i18n = defineMessages({ loadingSettings: { id: 'modelSettingsPanel.loadingSettings', defaultMessage: 'Loading settings...', }, saving: { id: 'modelSettingsPanel.saving', defaultMessage: 'Saving...', }, reset: { id: 'modelSettingsPanel.reset', defaultMessage: 'Reset', }, resetToDefaults: { id: 'modelSettingsPanel.resetToDefaults', defaultMessage: 'Reset to defaults', }, contextAndGeneration: { id: 'modelSettingsPanel.contextAndGeneration', defaultMessage: 'Context & Generation', }, contextSize: { id: 'modelSettingsPanel.contextSize', defaultMessage: 'Context size', }, contextSizeDescription: { id: 'modelSettingsPanel.contextSizeDescription', defaultMessage: 'Max context window (0 = model default)', }, maxOutputTokens: { id: 'modelSettingsPanel.maxOutputTokens', defaultMessage: 'Max output tokens', }, maxOutputTokensDescription: { id: 'modelSettingsPanel.maxOutputTokensDescription', defaultMessage: 'Cap on generated tokens', }, samplingStrategy: { id: 'modelSettingsPanel.samplingStrategy', defaultMessage: 'Sampling Strategy', }, temperature: { id: 'modelSettingsPanel.temperature', defaultMessage: 'Temperature', }, topK: { id: 'modelSettingsPanel.topK', defaultMessage: 'Top K', }, topP: { id: 'modelSettingsPanel.topP', defaultMessage: 'Top P', }, minP: { id: 'modelSettingsPanel.minP', defaultMessage: 'Min P', }, seed: { id: 'modelSettingsPanel.seed', defaultMessage: 'Seed', }, tauTargetEntropy: { id: 'modelSettingsPanel.tauTargetEntropy', defaultMessage: 'Tau (target entropy)', }, etaLearningRate: { id: 'modelSettingsPanel.etaLearningRate', defaultMessage: 'Eta (learning rate)', }, repetitionPenalty: { id: 'modelSettingsPanel.repetitionPenalty', defaultMessage: 'Repetition Penalty', }, repeatPenalty: { id: 'modelSettingsPanel.repeatPenalty', defaultMessage: 'Repeat penalty', }, repeatPenaltyDescription: { id: 'modelSettingsPanel.repeatPenaltyDescription', defaultMessage: '1.0 = off', }, repeatWindow: { id: 'modelSettingsPanel.repeatWindow', defaultMessage: 'Repeat window', }, repeatWindowDescription: { id: 'modelSettingsPanel.repeatWindowDescription', defaultMessage: 'Tokens to look back', }, frequencyPenalty: { id: 'modelSettingsPanel.frequencyPenalty', defaultMessage: 'Frequency penalty', }, frequencyPenaltyDescription: { id: 'modelSettingsPanel.frequencyPenaltyDescription', defaultMessage: '0.0 = off', }, presencePenalty: { id: 'modelSettingsPanel.presencePenalty', defaultMessage: 'Presence penalty', }, presencePenaltyDescription: { id: 'modelSettingsPanel.presencePenaltyDescription', defaultMessage: '0.0 = off', }, performance: { id: 'modelSettingsPanel.performance', defaultMessage: 'Performance', }, batchSize: { id: 'modelSettingsPanel.batchSize', defaultMessage: 'Batch size', }, batchSizeDescription: { id: 'modelSettingsPanel.batchSizeDescription', defaultMessage: 'Prompt processing batch', }, gpuLayers: { id: 'modelSettingsPanel.gpuLayers', defaultMessage: 'GPU layers', }, gpuLayersDescription: { id: 'modelSettingsPanel.gpuLayersDescription', defaultMessage: 'Layers to offload to GPU', }, threads: { id: 'modelSettingsPanel.threads', defaultMessage: 'Threads', }, threadsDescription: { id: 'modelSettingsPanel.threadsDescription', defaultMessage: 'CPU threads for generation', }, lockModelInRam: { id: 'modelSettingsPanel.lockModelInRam', defaultMessage: 'Lock model in RAM (mlock)', }, lockModelInRamDescription: { id: 'modelSettingsPanel.lockModelInRamDescription', defaultMessage: 'Prevent model from being swapped to disk', }, flashAttention: { id: 'modelSettingsPanel.flashAttention', defaultMessage: 'Flash attention', }, flashAttentionDescription: { id: 'modelSettingsPanel.flashAttentionDescription', defaultMessage: 'Enable flash attention optimization', }, toolCalling: { id: 'modelSettingsPanel.toolCalling', defaultMessage: 'Tool Calling', }, nativeToolCalling: { id: 'modelSettingsPanel.nativeToolCalling', defaultMessage: 'Native tool calling', }, nativeToolCallingDescription: { id: 'modelSettingsPanel.nativeToolCallingDescription', defaultMessage: "Use the model's built-in tool-call format instead of the shell-command emulator. Enable for large models that reliably support tool calling.", }, }); const DEFAULT_SETTINGS: ModelSettings = { context_size: null, max_output_tokens: null, sampling: { type: 'Temperature', temperature: 0.8, top_k: 40, top_p: 0.95, min_p: 0.05, seed: null, }, repeat_penalty: 1.0, repeat_last_n: 64, frequency_penalty: 0.0, presence_penalty: 0.0, n_batch: null, n_gpu_layers: null, use_mlock: false, flash_attention: null, n_threads: null, native_tool_calling: false, }; type SamplingType = SamplingConfig['type']; function NumberField({ label, description, value, onChange, placeholder, min, max, step, allowNull, }: { label: string; description?: string; value: number | null | undefined; onChange: (v: number | null) => void; placeholder?: string; min?: number; max?: number; step?: number; allowNull?: boolean; }) { return (

{label} {description && {description}} { const raw = e.target.value; if (raw === '' && allowNull) { onChange(null); } else { const n = step && step < 1 ? parseFloat(raw) : parseInt(raw, 10); if (!isNaN(n)) onChange(n); } }} placeholder={placeholder ?? 'Auto'} min={min} max={max} step={step} />

); } function ToggleField({ label, description, value, onChange, }: { label: string; description?: string; value: boolean; onChange: (v: boolean) => void; }) { return (

{label}

{description && {description}}

); } function SelectField({ label, description, value, options, onChange, }: { label: string; description?: string; value: T; options: { value: T; label: string }[]; onChange: (v: T) => void; }) { return (

{label}

{description && {description}}

); } export const ModelSettingsPanel = ({ modelId }: { modelId: string }) => { const intl = useIntl(); const [settings, setSettings] = useState(DEFAULT_SETTINGS); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const load = useCallback(async () => { try { const res = await getModelSettings({ path: { model_id: modelId } }); if (res.data) setSettings(res.data); } catch { // use defaults } finally { setLoading(false); } }, [modelId]); useEffect(() => { load(); }, [load]); const save = async (updated: ModelSettings) => { setSettings(updated); setSaving(true); try { await updateModelSettings({ path: { model_id: modelId }, body: updated }); } catch (e) { console.error('Failed to save settings:', e); } finally { setSaving(false); } }; const resetDefaults = () => save(DEFAULT_SETTINGS); const updateField = (key: K, value: ModelSettings[K]) => { save({ ...settings, [key]: value }); }; const samplingType: SamplingType = settings.sampling?.type ?? 'Temperature'; const setSamplingType = (type: SamplingType) => { let sampling: SamplingConfig; if (type === 'Greedy') { sampling = { type: 'Greedy' }; } else if (type === 'MirostatV2') { sampling = { type: 'MirostatV2', tau: 5.0, eta: 0.1, seed: null }; } else { sampling = { type: 'Temperature', temperature: 0.8, top_k: 40, top_p: 0.95, min_p: 0.05, seed: null, }; } save({ ...settings, sampling }); }; const updateSampling = (partial: Partial) => { save({ ...settings, sampling: { ...settings.sampling!, ...partial } as SamplingConfig }); }; if (loading) { return

{intl.formatMessage(i18n.loadingSettings)}

; } return (

{saving && {intl.formatMessage(i18n.saving)}}

{/* Context & Generation */}

{intl.formatMessage(i18n.contextAndGeneration)}

updateField('context_size', v)} placeholder="Auto" min={0} allowNull /> updateField('max_output_tokens', v)} placeholder="No limit" min={1} allowNull />

{/* Sampling */}

setSamplingType(v)} /> {samplingType === 'Temperature' && settings.sampling?.type === 'Temperature' && (

updateSampling({ temperature: v ?? 0.8 })} min={0} max={2} step={0.05} /> updateSampling({ top_k: v ?? 40 })} min={0} /> updateSampling({ top_p: v ?? 0.95 })} min={0} max={1} step={0.01} /> updateSampling({ min_p: v ?? 0.05 })} min={0} max={1} step={0.01} /> updateSampling({ seed: v })} placeholder="Random" min={0} allowNull />

)} {samplingType === 'MirostatV2' && settings.sampling?.type === 'MirostatV2' && (

updateSampling({ tau: v ?? 5.0 })} min={0} step={0.1} /> updateSampling({ eta: v ?? 0.1 })} min={0} max={1} step={0.01} /> updateSampling({ seed: v })} placeholder="Random" min={0} allowNull />

)}

{/* Repetition Penalty */}

{intl.formatMessage(i18n.repetitionPenalty)}

updateField('repeat_penalty', v ?? 1.0)} min={0} step={0.05} /> updateField('repeat_last_n', v ?? 64)} min={0} /> updateField('frequency_penalty', v ?? 0.0)} min={0} max={2} step={0.05} /> updateField('presence_penalty', v ?? 0.0)} min={0} max={2} step={0.05} />

{/* Performance */}

{intl.formatMessage(i18n.performance)}

updateField('n_batch', v)} placeholder="Auto" min={1} allowNull /> updateField('n_gpu_layers', v)} placeholder="All" min={0} allowNull /> updateField('n_threads', v)} placeholder="Auto" min={1} allowNull />

updateField('use_mlock', v)} /> updateField('flash_attention', v === 'auto' ? null : v === 'on')} />

{/* Tool Calling */}

{intl.formatMessage(i18n.toolCalling)}

updateField('native_tool_calling', v)} />

); };