Spaces:
Running
Running
| import { useEffect, useState } from "react"; | |
| import { InputField } from "@elvis/ui"; | |
| import { SUPPORTED_ALGORITHMS, type SettingsUi } from "./types"; | |
| export const DEFAULT_HYPERPARAMETERS = { | |
| "Gradient Descent": { learningRate: "0.1", momentum: "0.0" }, | |
| "Nesterov": { learningRate: "0.1", momentum: "0.1" }, | |
| "Adam": { learningRate: "0.1", beta1: "0.9", beta2: "0.999", epsilon: "1e-8" }, | |
| "Adagrad": { learningRate: "0.1", epsilon: "1e-8" }, | |
| "RMSProp": { learningRate: "0.1", beta: "0.9", epsilon: "1e-8" }, | |
| "Adadelta": { beta: "0.9", epsilon: "1e-3" }, | |
| "Newton": {} | |
| } | |
| export default function AlgorithmControls({ settings, setSettings, onRandomInitialPoint, showInitialPoint = true }: { | |
| settings: SettingsUi; | |
| setSettings: (settings: SettingsUi) => void; | |
| onRandomInitialPoint?: () => void; | |
| showInitialPoint?: boolean; | |
| }) { | |
| function updateSettings(key: keyof SettingsUi, value: string) { | |
| if (key === "algorithm") { | |
| const defaults = DEFAULT_HYPERPARAMETERS[value as keyof typeof DEFAULT_HYPERPARAMETERS]; | |
| setSettings({ mode: settings.mode, functionExpr: settings.functionExpr, x0: settings.x0, y0: settings.y0, algorithm: value as SettingsUi["algorithm"], ...defaults }); | |
| } else { | |
| setSettings({ ...settings, [key]: value }); | |
| } | |
| } | |
| const [initialPointInput, setInitialPointInput] = useState<string>(() => | |
| [settings.x0 ?? "", settings.y0 ?? ""].filter((part) => part !== "").join(", ") | |
| ); | |
| useEffect(() => { | |
| if (settings.mode === "Bivariate") { | |
| setInitialPointInput([settings.x0 ?? "", settings.y0 ?? ""].filter((part) => part !== "").join(", ")); | |
| } | |
| }, [settings.mode, settings.x0, settings.y0]); | |
| function handleInitialPointChange(value: string) { | |
| setInitialPointInput(value); | |
| if (settings.mode === "Bivariate") { | |
| const parts = value.split(",").map((part) => part.trim()); | |
| const [xValue, yValue] = parts; | |
| setSettings({ | |
| ...settings, | |
| x0: xValue ?? "", | |
| y0: yValue ?? settings.y0 ?? "", | |
| }); | |
| } else { | |
| updateSettings("x0", value); | |
| } | |
| } | |
| return <> | |
| <div className="grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-0.5"> | |
| <label className="text-sm font-semibold whitespace-nowrap pr-0.25">Algorithm</label> | |
| <div className="min-w-0"> | |
| <select | |
| value={settings.algorithm} | |
| onChange={(event) => updateSettings("algorithm", event.target.value as SettingsUi["algorithm"])} | |
| className="h-10 w-full rounded border border-stone-300 bg-white px-2 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-stone-400" | |
| > | |
| {SUPPORTED_ALGORITHMS.map((option) => ( | |
| <option key={option} value={option}> | |
| {option} | |
| </option> | |
| ))} | |
| </select> | |
| </div> | |
| </div> | |
| {showInitialPoint && (settings.mode === "Bivariate" ? ( | |
| <div className="grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-0.5"> | |
| <label className="text-sm font-medium whitespace-nowrap pr-0.25">Initial (X, Y)</label> | |
| <div className="flex min-w-0 items-center gap-2"> | |
| <input | |
| type="text" | |
| value={initialPointInput} | |
| onChange={(event) => handleInitialPointChange(event.target.value)} | |
| className="h-10 w-full rounded border border-stone-300 px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-stone-400" | |
| /> | |
| <button | |
| type="button" | |
| onClick={onRandomInitialPoint} | |
| className="h-10 rounded border border-gray-300 bg-orange-200 px-3 py-1 text-sm text-stone-700 hover:bg-orange-300" | |
| > | |
| random | |
| </button> | |
| </div> | |
| </div> | |
| ) : ( | |
| <div className="grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-0.5"> | |
| <label className="text-sm font-medium whitespace-nowrap pr-0.25">Initial X</label> | |
| <div className="flex min-w-0 items-center gap-2"> | |
| <input | |
| type="text" | |
| value={settings.x0} | |
| onChange={(event) => updateSettings("x0", event.target.value)} | |
| className="h-10 w-full rounded border border-stone-300 px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-stone-400" | |
| /> | |
| <button | |
| type="button" | |
| onClick={onRandomInitialPoint} | |
| className="h-10 rounded border border-gray-300 bg-orange-200 px-3 py-1 text-sm text-stone-700 hover:bg-orange-300" | |
| > | |
| random | |
| </button> | |
| </div> | |
| </div> | |
| ))} | |
| <div className="grid grid-cols-2 gap-2"> | |
| {["Gradient Descent", "Nesterov", "Adam", "Adagrad", "RMSProp"].includes(settings.algorithm) && ( | |
| <> | |
| <InputField | |
| label="Learning Rate" | |
| value={settings.learningRate} | |
| onChange={(value) => updateSettings("learningRate", value)} | |
| /> | |
| </> | |
| )} | |
| {["Gradient Descent", "Nesterov"].includes(settings.algorithm) && ( | |
| <> | |
| <InputField | |
| label="Momentum" | |
| value={settings.momentum} | |
| onChange={(value) => updateSettings("momentum", value)} | |
| /> | |
| </> | |
| )} | |
| {settings.algorithm === "Adam" && ( | |
| <> | |
| <InputField | |
| label="Beta 1" | |
| value={settings.beta1} | |
| onChange={(value) => updateSettings("beta1", value)} | |
| /> | |
| <InputField | |
| label="Beta 2" | |
| value={settings.beta2} | |
| onChange={(value) => updateSettings("beta2", value)} | |
| /> | |
| </> | |
| )} | |
| {["RMSProp", "Adadelta"].includes(settings.algorithm) && ( | |
| <> | |
| <InputField | |
| label="Beta" | |
| value={settings.beta} | |
| onChange={(value) => updateSettings("beta", value)} | |
| /> | |
| </> | |
| )} | |
| {["Adam", "Adagrad", "RMSProp", "Adadelta"].includes(settings.algorithm) && ( | |
| <> | |
| <InputField | |
| label="Epsilon" | |
| value={settings.epsilon} | |
| onChange={(value) => updateSettings("epsilon", value)} | |
| /> | |
| </> | |
| )} | |
| </div> | |
| </>; | |
| } | |