From 6cedc339c63d94147c2d082cbb0522873e854a4d Mon Sep 17 00:00:00 2001 From: imagineer99 Date: Mon, 23 Feb 2026 18:55:08 +0000 Subject: [PATCH 1/2] feat: add Upload / Save / Reset training config from local YAML --- studio/frontend/bun.lock | 10 ++- studio/frontend/package.json | 2 + .../studio/sections/training-section.tsx | 87 ++++++++++++++++-- .../frontend/src/features/training/index.ts | 1 + .../src/features/training/lib/yaml-config.ts | 88 +++++++++++++++++++ .../training/stores/training-config-store.ts | 11 +++ .../src/features/training/types/config.ts | 3 + 7 files changed, 191 insertions(+), 11 deletions(-) create mode 100644 studio/frontend/src/features/training/lib/yaml-config.ts diff --git a/studio/frontend/bun.lock b/studio/frontend/bun.lock index 27bc43b946..aa0a0c5b5c 100644 --- a/studio/frontend/bun.lock +++ b/studio/frontend/bun.lock @@ -40,6 +40,7 @@ "date-fns": "^4.1.0", "dexie": "^4.2.1", "framer-motion": "^11.15.0", + "js-yaml": "^4.1.1", "katex": "^0.16.22", "lucide-react": "^0.563.0", "mammoth": "^1.11.0", @@ -66,6 +67,7 @@ "devDependencies": { "@biomejs/biome": "^1.9.4", "@eslint/js": "^9.39.1", + "@types/js-yaml": "^4.0.9", "@types/node": "^24.10.1", "@types/react": "^19.2.5", "@types/react-dom": "^19.2.3", @@ -757,6 +759,8 @@ "@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="], + "@types/js-yaml": ["@types/js-yaml@4.0.9", "", {}, "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg=="], + "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="], "@types/katex": ["@types/katex@0.16.8", "", {}, "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg=="], @@ -827,7 +831,7 @@ "ansis": ["ansis@4.2.0", "", {}, "sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig=="], - "argparse": ["argparse@1.0.10", "", { "dependencies": { "sprintf-js": "~1.0.2" } }, "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg=="], + "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="], "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="], @@ -2267,12 +2271,12 @@ "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="], - "js-yaml/argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="], - "log-symbols/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="], "log-symbols/is-unicode-supported": ["is-unicode-supported@1.3.0", "", {}, "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ=="], + "mammoth/argparse": ["argparse@1.0.10", "", { "dependencies": { "sprintf-js": "~1.0.2" } }, "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg=="], + "mdast-util-find-and-replace/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="], "mermaid/marked": ["marked@16.4.2", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA=="], diff --git a/studio/frontend/package.json b/studio/frontend/package.json index 0d1352efb3..02a716a2dd 100644 --- a/studio/frontend/package.json +++ b/studio/frontend/package.json @@ -48,6 +48,7 @@ "date-fns": "^4.1.0", "dexie": "^4.2.1", "framer-motion": "^11.15.0", + "js-yaml": "^4.1.1", "katex": "^0.16.22", "lucide-react": "^0.563.0", "mammoth": "^1.11.0", @@ -74,6 +75,7 @@ "devDependencies": { "@biomejs/biome": "^1.9.4", "@eslint/js": "^9.39.1", + "@types/js-yaml": "^4.0.9", "@types/node": "^24.10.1", "@types/react": "^19.2.5", "@types/react-dom": "^19.2.3", diff --git a/studio/frontend/src/features/studio/sections/training-section.tsx b/studio/frontend/src/features/studio/sections/training-section.tsx index a8f8a9c475..dfcd72632e 100644 --- a/studio/frontend/src/features/studio/sections/training-section.tsx +++ b/studio/frontend/src/features/studio/sections/training-section.tsx @@ -9,16 +9,23 @@ import { CollapsibleTrigger, } from "@/components/ui/collapsible"; import { Input } from "@/components/ui/input"; -import { useTrainingActions, useTrainingConfigStore } from "@/features/training"; +import { + parseYamlConfig, + serializeConfigToYaml, + useTrainingActions, + useTrainingConfigStore, +} from "@/features/training"; import { Archive04Icon, ArrowDown01Icon, ChartAverageIcon, CleanIcon, + CloudUploadIcon, Rocket01Icon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; -import { useState } from "react"; +import { useRef, useState } from "react"; +import { toast } from "sonner"; import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"; const chartConfig = { @@ -40,7 +47,47 @@ export function TrainingSection() { const [logOpen, setLogOpen] = useState(false); const isIncompatible = !store.isVisionModel && store.isDatasetMultimodal === true; + const fileInputRef = useRef(null); + const handleFileUpload = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + e.target.value = ""; + + const reader = new FileReader(); + reader.onload = () => { + try { + const config = parseYamlConfig(reader.result as string); + store.applyConfigPatch(config); + toast.success("Config loaded", { description: file.name }); + } catch (err) { + toast.error("Failed to load config", { + description: + err instanceof Error ? err.message : "Invalid YAML file", + }); + } + }; + reader.onerror = () => { + toast.error("Failed to read file"); + }; + reader.readAsText(file); + }; + + const handleSaveConfig = () => { + const yamlStr = serializeConfigToYaml(store, store.isVisionModel); + const blob = new Blob([yamlStr], { type: "text/yaml" }); + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = "training-config.yaml"; + a.click(); + URL.revokeObjectURL(url); + }; + + const handleResetConfig = () => { + store.resetToModelDefaults(); + toast.success("Parameters reset to model defaults"); + }; return (
@@ -115,21 +162,45 @@ export function TrainingSection() {

)} - {/* Save / Clear */} -
+ {/* Upload / Save / Reset */} +
+ -
+ {/* Logging */} diff --git a/studio/frontend/src/features/training/index.ts b/studio/frontend/src/features/training/index.ts index 24439f0c8a..d2fd4f2e43 100644 --- a/studio/frontend/src/features/training/index.ts +++ b/studio/frontend/src/features/training/index.ts @@ -10,3 +10,4 @@ export { useDatasetPreviewDialogStore } from "./stores/dataset-preview-dialog-st export { listLocalModels } from "./api/models-api"; export type { LocalModelInfo } from "./api/models-api"; export type { TrainingPhase } from "./types/runtime"; +export { parseYamlConfig, serializeConfigToYaml } from "./lib/yaml-config"; diff --git a/studio/frontend/src/features/training/lib/yaml-config.ts b/studio/frontend/src/features/training/lib/yaml-config.ts new file mode 100644 index 0000000000..594122fa7d --- /dev/null +++ b/studio/frontend/src/features/training/lib/yaml-config.ts @@ -0,0 +1,88 @@ +import * as yaml from "js-yaml"; +import type { BackendModelConfig } from "../api/models-api"; +import type { TrainingConfigState } from "../types/config"; + +const EXPECTED_TOP_KEYS = new Set(["training", "lora", "logging", "inference"]); + +/** + * Parse a YAML string into a BackendModelConfig suitable for + * `mapBackendModelConfigToTrainingPatch`. Throws on invalid input. + */ +export function parseYamlConfig(text: string): BackendModelConfig { + const parsed = yaml.load(text); + if (parsed == null || typeof parsed !== "object" || Array.isArray(parsed)) { + throw new Error( + "Invalid config: expected a YAML mapping with training/lora/logging sections", + ); + } + + const raw = parsed as Record; + const unknownKeys = Object.keys(raw).filter( + (k) => !EXPECTED_TOP_KEYS.has(k), + ); + if (unknownKeys.length > 0) { + console.warn("Ignored unknown YAML keys:", unknownKeys.join(", ")); + } + + return { + training: (raw.training ?? undefined) as BackendModelConfig["training"], + lora: (raw.lora ?? undefined) as BackendModelConfig["lora"], + logging: (raw.logging ?? undefined) as BackendModelConfig["logging"], + }; +} + +/** + * Serialize the current training config state to a YAML string matching the + * backend model-defaults schema. + */ +export function serializeConfigToYaml( + state: TrainingConfigState, + includeVisionFields: boolean, +): string { + const lora: Record = { + lora_r: state.loraRank, + lora_alpha: state.loraAlpha, + lora_dropout: state.loraDropout, + target_modules: state.targetModules, + use_rslora: state.loraVariant === "rslora", + use_loftq: state.loraVariant === "loftq", + }; + + if (includeVisionFields) { + lora.finetune_vision_layers = state.finetuneVisionLayers; + lora.finetune_language_layers = state.finetuneLanguageLayers; + lora.finetune_attention_modules = state.finetuneAttentionModules; + lora.finetune_mlp_modules = state.finetuneMLPModules; + } + + const config = { + training: { + max_seq_length: state.contextLength, + num_epochs: state.epochs, + learning_rate: state.learningRate, + batch_size: state.batchSize, + gradient_accumulation_steps: state.gradientAccumulation, + warmup_steps: state.warmupSteps, + max_steps: state.maxSteps, + save_steps: state.saveSteps, + eval_steps: state.evalSteps, + weight_decay: state.weightDecay, + random_seed: state.randomSeed, + packing: state.packing, + train_on_completions: state.trainOnCompletions, + gradient_checkpointing: state.gradientCheckpointing, + optim: state.optimizerType, + lr_scheduler_type: state.lrSchedulerType, + }, + lora, + logging: { + enable_wandb: state.enableWandb, + wandb_project: state.wandbProject, + enable_tensorboard: state.enableTensorboard, + tensorboard_dir: state.tensorboardDir, + log_frequency: state.logFrequency, + }, + }; + + return yaml.dump(config, { lineWidth: -1, noRefs: true }); +} diff --git a/studio/frontend/src/features/training/stores/training-config-store.ts b/studio/frontend/src/features/training/stores/training-config-store.ts index b6f9c01c42..d124ffd8db 100644 --- a/studio/frontend/src/features/training/stores/training-config-store.ts +++ b/studio/frontend/src/features/training/stores/training-config-store.ts @@ -5,6 +5,7 @@ import { persist } from "zustand/middleware"; import { checkDatasetFormat } from "../api/datasets-api"; import { checkVisionModel, getModelConfig } from "../api/models-api"; import { mapBackendModelConfigToTrainingPatch } from "../lib/model-defaults"; +import type { BackendModelConfig } from "../api/models-api"; import type { TrainingConfigState, TrainingConfigStore } from "../types/config"; const MIN_STEP: StepNumber = 1; @@ -344,6 +345,16 @@ export const useTrainingConfigStore = create()( setTargetModules: (targetModules) => set({ targetModules }), canProceed: () => canProceedForStep(get()), reset: () => set(initialState), + resetToModelDefaults: () => { + const { selectedModel } = get(); + if (!selectedModel) return; + set({ modelDefaultsAppliedFor: null }); + loadAndApplyModelDefaults(selectedModel); + }, + applyConfigPatch: (config: BackendModelConfig) => { + const patch = mapBackendModelConfigToTrainingPatch(config); + set(patch); + }, }; }, { diff --git a/studio/frontend/src/features/training/types/config.ts b/studio/frontend/src/features/training/types/config.ts index b268a08b79..b0b74f1f5b 100644 --- a/studio/frontend/src/features/training/types/config.ts +++ b/studio/frontend/src/features/training/types/config.ts @@ -6,6 +6,7 @@ import type { StepNumber, TrainingMethod, } from "@/types/training"; +import type { BackendModelConfig } from "../api/models-api"; export type LoraVariant = "lora" | "rslora" | "loftq"; @@ -117,6 +118,8 @@ export interface TrainingConfigActions { setTargetModules: (value: string[]) => void; canProceed: () => boolean; reset: () => void; + resetToModelDefaults: () => void; + applyConfigPatch: (config: BackendModelConfig) => void; } export type TrainingConfigStore = TrainingConfigState & TrainingConfigActions; From 002fe3d879e38b45d325c34be1c0da3e79afc457 Mon Sep 17 00:00:00 2001 From: imagineer99 Date: Tue, 24 Feb 2026 08:16:45 +0000 Subject: [PATCH 2/2] feat: improve training config UX and remove unused logging options --- .../studio/sections/training-section.tsx | 175 ++++++------------ .../src/features/studio/tour/steps/save.tsx | 4 +- .../src/features/training/lib/yaml-config.ts | 7 - 3 files changed, 59 insertions(+), 127 deletions(-) diff --git a/studio/frontend/src/features/studio/sections/training-section.tsx b/studio/frontend/src/features/studio/sections/training-section.tsx index dfcd72632e..3f342ad68c 100644 --- a/studio/frontend/src/features/studio/sections/training-section.tsx +++ b/studio/frontend/src/features/studio/sections/training-section.tsx @@ -2,13 +2,11 @@ import { SectionCard } from "@/components/section-card"; import { Button } from "@/components/ui/button"; import { ChartContainer } from "@/components/ui/chart"; import type { ChartConfig } from "@/components/ui/chart"; -import { Checkbox } from "@/components/ui/checkbox"; import { - Collapsible, - CollapsibleContent, - CollapsibleTrigger, -} from "@/components/ui/collapsible"; -import { Input } from "@/components/ui/input"; + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; import { parseYamlConfig, serializeConfigToYaml, @@ -17,14 +15,13 @@ import { } from "@/features/training"; import { Archive04Icon, - ArrowDown01Icon, ChartAverageIcon, CleanIcon, CloudUploadIcon, Rocket01Icon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; -import { useRef, useState } from "react"; +import { useRef } from "react"; import { toast } from "sonner"; import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"; @@ -44,7 +41,6 @@ const placeholderData = [ export function TrainingSection() { const store = useTrainingConfigStore(); const { isStarting, startError, startTrainingRun } = useTrainingActions(); - const [logOpen, setLogOpen] = useState(false); const isIncompatible = !store.isVisionModel && store.isDatasetMultimodal === true; const fileInputRef = useRef(null); @@ -79,7 +75,13 @@ export function TrainingSection() { const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; - a.download = "training-config.yaml"; + + const model = (store.selectedModel ?? "model").split("/").pop(); + const method = store.trainingMethod ?? "qlora"; + const dataset = (store.dataset ?? "dataset").split("/").pop(); + const timestamp = new Date().toISOString().replace(/[:T]/g, "-").slice(0, 19); + a.download = `${model}_${method}_${dataset}_${timestamp}.yaml`; + a.click(); URL.revokeObjectURL(url); }; @@ -163,36 +165,52 @@ export function TrainingSection() { )} {/* Upload / Save / Reset */} +

Training Config

- - - + + + + + Load a saved YAML config + + + + + + Download current config as YAML + + + + + + Reset to model defaults +
- - {/* Logging */} - - - - Logging - - - {/* W&B */} -
- store.setEnableWandb(!!v)} - /> - -
- {store.enableWandb && ( -
- store.setWandbToken(e.target.value)} - /> - store.setWandbProject(e.target.value)} - /> -
- )} - - {/* TensorBoard */} -
- store.setEnableTensorboard(!!v)} - /> - -
- {store.enableTensorboard && ( -
- store.setTensorboardDir(e.target.value)} - /> -
- - Log frequency - - - store.setLogFrequency(Number(e.target.value)) - } - className="w-24" - /> -
-
- )} - -
diff --git a/studio/frontend/src/features/studio/tour/steps/save.tsx b/studio/frontend/src/features/studio/tour/steps/save.tsx index d137aecf41..d93548fc3d 100644 --- a/studio/frontend/src/features/studio/tour/steps/save.tsx +++ b/studio/frontend/src/features/studio/tour/steps/save.tsx @@ -6,8 +6,8 @@ export const studioSaveStep: TourStep = { title: "Save config", body: ( <> - Save configs that worked. Re-running the same baseline makes it obvious - if a change helped (or if you just got lucky). + Save your training config as a YAML file. Re-running the same baseline + makes it obvious if a change helped (or if you just got lucky). ), }; diff --git a/studio/frontend/src/features/training/lib/yaml-config.ts b/studio/frontend/src/features/training/lib/yaml-config.ts index 594122fa7d..3bc113f173 100644 --- a/studio/frontend/src/features/training/lib/yaml-config.ts +++ b/studio/frontend/src/features/training/lib/yaml-config.ts @@ -75,13 +75,6 @@ export function serializeConfigToYaml( lr_scheduler_type: state.lrSchedulerType, }, lora, - logging: { - enable_wandb: state.enableWandb, - wandb_project: state.wandbProject, - enable_tensorboard: state.enableTensorboard, - tensorboard_dir: state.tensorboardDir, - log_frequency: state.logFrequency, - }, }; return yaml.dump(config, { lineWidth: -1, noRefs: true });