102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
|
|
interface LlmSettingsProps {
|
|
settings: Record<string, any>;
|
|
onSave: (key: string, value: any) => Promise<void>;
|
|
saveError: string | null;
|
|
}
|
|
|
|
const AVAILABLE_MODELS = [
|
|
"openai/gpt-oss-120b:free",
|
|
"openrouter/free",
|
|
"deepseek/deepseek-chat:free",
|
|
"meta/llama-3.3-70b-instruct:free",
|
|
];
|
|
|
|
export default function LlmSettings({ settings, onSave, saveError }: LlmSettingsProps) {
|
|
const [model, setModel] = useState(settings["llm.model"] ?? "openai/gpt-oss-120b:free");
|
|
const [temperature, setTemperature] = useState(settings["llm.temperature"] ?? 0.7);
|
|
const [maxDebateRounds, setMaxDebateRounds] = useState(settings["llm.maxDebateRounds"] ?? 3);
|
|
|
|
useEffect(() => {
|
|
setModel(settings["llm.model"] ?? "openai/gpt-oss-120b:free");
|
|
setTemperature(settings["llm.temperature"] ?? 0.7);
|
|
setMaxDebateRounds(settings["llm.maxDebateRounds"] ?? 3);
|
|
}, [settings]);
|
|
|
|
const saveModel = async (value: string) => {
|
|
setModel(value);
|
|
await onSave("llm.model", value);
|
|
};
|
|
|
|
const saveTemperature = async (value: number) => {
|
|
setTemperature(value);
|
|
await onSave("llm.temperature", value);
|
|
};
|
|
|
|
const saveMaxDebateRounds = async (value: number) => {
|
|
const clamped = Math.min(10, Math.max(1, value));
|
|
setMaxDebateRounds(clamped);
|
|
await onSave("llm.maxDebateRounds", clamped);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-gray-900">LLM & Agents</h2>
|
|
<p className="text-sm text-gray-600 mt-1">Configure the language model and agent behavior for trading analysis.</p>
|
|
</div>
|
|
|
|
{saveError && (
|
|
<div className="bg-red-50 text-red-700 px-4 py-2 rounded-lg text-sm">{saveError}</div>
|
|
)}
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Model</label>
|
|
<select
|
|
value={model}
|
|
onChange={(e) => saveModel(e.target.value)}
|
|
className="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
{AVAILABLE_MODELS.map((m) => (
|
|
<option key={m} value={m}>{m}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Temperature: {temperature.toFixed(1)}
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
step="0.1"
|
|
value={temperature}
|
|
onChange={(e) => saveTemperature(parseFloat(e.target.value))}
|
|
className="w-full"
|
|
/>
|
|
<div className="flex justify-between text-xs text-gray-500">
|
|
<span>0.0 (deterministic)</span>
|
|
<span>2.0 (creative)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Max Debate Rounds</label>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
max="10"
|
|
value={maxDebateRounds}
|
|
onChange={(e) => saveMaxDebateRounds(parseInt(e.target.value) || 1)}
|
|
className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|