{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "fine-tuning-job-monitor", "title": "Fine Tuning Job Monitor", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/fine-tuning-job-monitor/FineTuningJobMonitor.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n AlertCircle,\n Bot,\n Check,\n CheckCircle2,\n Clock,\n Copy,\n Cpu,\n Database,\n Download,\n Gauge,\n Loader2,\n Rocket,\n Save,\n ShieldCheck,\n Sliders,\n Sparkles,\n TrendingDown,\n XCircle,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface CheckpointRecord {\n id: string\n epoch: number\n step: number\n totalSteps: number\n trainLoss: number\n valLoss: number\n size: string\n filename: string\n createdAgo: string\n isBest?: boolean\n status: 'saved' | 'best' | 'evaluating'\n}\n\nexport interface LossReading {\n step: number\n trainLoss: number\n valLoss?: number\n isProjected?: boolean\n label?: string\n}\n\nexport interface FineTuningJobMonitorProps extends React.HTMLAttributes {\n jobId?: string\n baseModel?: string\n fineTunedModelName?: string\n status?: string\n currentEpoch?: number\n totalEpochs?: number\n progressPercent?: number\n currentStep?: number\n totalSteps?: number\n trainingLoss?: number\n initialLoss?: number\n validationLoss?: number\n learningRate?: string\n gpuCluster?: string\n gpuUtilization?: number\n vramUsage?: string\n tokensPerSec?: number\n elapsedTime?: string\n etaRemaining?: string\n trainingDataset?: string\n trainingExamples?: number\n validationExamples?: number\n totalTokens?: string\n batchSize?: number\n microBatchSize?: number\n gradAccumSteps?: number\n contextLength?: number\n optimizer?: string\n loraRank?: number\n loraAlpha?: number\n loraDropout?: number\n checkpoints?: CheckpointRecord[]\n lossData?: LossReading[]\n}\n\nconst defaultLossData: LossReading[] = [\n { step: 0, trainLoss: 1.84, valLoss: 1.92, label: 'Init' },\n { step: 25, trainLoss: 1.32, valLoss: undefined },\n { step: 50, trainLoss: 0.95, valLoss: 1.02, label: 'Warmup Done' },\n { step: 75, trainLoss: 0.915, valLoss: undefined },\n { step: 100, trainLoss: 0.892, valLoss: 0.945, label: 'Epoch 1 (Ckpt #1)' },\n { step: 125, trainLoss: 0.79, valLoss: undefined },\n { step: 150, trainLoss: 0.71, valLoss: 0.748, label: 'Step 150' },\n { step: 175, trainLoss: 0.64, valLoss: undefined },\n { step: 200, trainLoss: 0.584, valLoss: 0.612, label: 'Epoch 2 (Ckpt #2)' },\n { step: 225, trainLoss: 0.535, valLoss: undefined },\n { step: 250, trainLoss: 0.495, valLoss: 0.52, label: 'Step 250' },\n { step: 275, trainLoss: 0.46, valLoss: undefined },\n { step: 300, trainLoss: 0.435, valLoss: 0.468, label: 'Epoch 3 (Ckpt #3)' },\n { step: 320, trainLoss: 0.412, valLoss: 0.458, label: 'Step 320 (Live)' },\n // Projected points\n { step: 360, trainLoss: 0.395, valLoss: undefined, isProjected: true },\n { step: 400, trainLoss: 0.38, valLoss: 0.415, isProjected: true, label: 'Epoch 4 (Proj)' },\n { step: 450, trainLoss: 0.365, valLoss: undefined, isProjected: true },\n { step: 500, trainLoss: 0.355, valLoss: 0.39, isProjected: true, label: 'Epoch 5 (Target)' },\n]\n\nconst defaultCheckpoints: CheckpointRecord[] = [\n {\n id: 'ckpt-3',\n epoch: 3,\n step: 300,\n totalSteps: 500,\n trainLoss: 0.435,\n valLoss: 0.468,\n size: '1.2 GB LoRA',\n filename: 'adapter_model_step300.safetensors',\n createdAgo: '24m ago',\n isBest: true,\n status: 'best',\n },\n {\n id: 'ckpt-2',\n epoch: 2,\n step: 200,\n totalSteps: 500,\n trainLoss: 0.584,\n valLoss: 0.612,\n size: '1.2 GB LoRA',\n filename: 'adapter_model_step200.safetensors',\n createdAgo: '1h 44m ago',\n isBest: false,\n status: 'saved',\n },\n {\n id: 'ckpt-1',\n epoch: 1,\n step: 100,\n totalSteps: 500,\n trainLoss: 0.892,\n valLoss: 0.945,\n size: '1.2 GB LoRA',\n filename: 'adapter_model_step100.safetensors',\n createdAgo: '3h 02m ago',\n isBest: false,\n status: 'saved',\n },\n]\n\nexport function FineTuningJobMonitor({\n jobId = '#ft-job-2026-0842',\n baseModel = 'Meta Llama 3.3 70B Instruct',\n fineTunedModelName = 'llama-3.3-70b-uipkge-expert-v2',\n status = 'Training in Progress · Epoch 3 of 5 · 64% Complete',\n currentEpoch = 3,\n totalEpochs = 5,\n progressPercent = 64,\n currentStep = 320,\n totalSteps = 500,\n trainingLoss = 0.412,\n initialLoss = 1.84,\n validationLoss = 0.458,\n learningRate = '1.5e-5',\n gpuCluster = '8× NVIDIA H100 80GB SXM5',\n gpuUtilization = 100,\n vramUsage = '76.4 GB / 80 GB',\n tokensPerSec = 3480,\n elapsedTime = '4h 18m 22s',\n etaRemaining = '2h 25m',\n trainingDataset = 'uipkge_synthetic_sfc_pairs.jsonl',\n trainingExamples = 42500,\n validationExamples = 4250,\n totalTokens = '153.8M tokens',\n batchSize = 32,\n microBatchSize = 4,\n gradAccumSteps = 8,\n contextLength = 4096,\n optimizer = 'AdamW (beta1=0.9, beta2=0.95)',\n loraRank = 64,\n loraAlpha = 128,\n loraDropout = 0.05,\n checkpoints = defaultCheckpoints,\n lossData = defaultLossData,\n className,\n ...props\n}: FineTuningJobMonitorProps) {\n const [copiedJobId, setCopiedJobId] = React.useState(false)\n const [copiedDataset, setCopiedDataset] = React.useState(false)\n const [isDownloadingWeights, setIsDownloadingWeights] = React.useState(false)\n const [isCancelling, setIsCancelling] = React.useState(false)\n const [isJobCancelled, setIsJobCancelled] = React.useState(false)\n const [deployingCkptId, setDeployingCkptId] = React.useState(null)\n const [activeNotification, setActiveNotification] = React.useState<{\n title: string\n message: string\n type: 'success' | 'info' | 'destructive'\n } | null>(null)\n const [selectedStepIndex, setSelectedStepIndex] = React.useState(13) // Default to step 320\n\n const showNotification = React.useCallback(\n (title: string, message: string, type: 'success' | 'info' | 'destructive' = 'success') => {\n setActiveNotification({ title, message, type })\n setTimeout(() => {\n setActiveNotification((prev) => (prev?.title === title ? null : prev))\n }, 4000)\n },\n [],\n )\n\n const copyJobId = React.useCallback(() => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(jobId)\n setCopiedJobId(true)\n setTimeout(() => {\n setCopiedJobId(false)\n }, 2000)\n }\n }, [jobId])\n\n const copyDatasetName = React.useCallback(() => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(trainingDataset)\n setCopiedDataset(true)\n setTimeout(() => {\n setCopiedDataset(false)\n }, 2000)\n }\n }, [trainingDataset])\n\n const handleDownloadWeights = React.useCallback(() => {\n if (isDownloadingWeights) return\n setIsDownloadingWeights(true)\n setTimeout(() => {\n setIsDownloadingWeights(false)\n showNotification(\n 'Weights Download Triggered',\n 'LoRA adapter weights (adapter_model.safetensors, 1.2 GB) download initialized with SHA-256 verification.',\n )\n }, 900)\n }, [isDownloadingWeights, showNotification])\n\n const handleCancelJob = React.useCallback(() => {\n if (isCancelling || isJobCancelled) return\n setIsCancelling(true)\n setTimeout(() => {\n setIsCancelling(false)\n setIsJobCancelled(true)\n showNotification(\n 'Job Cancellation Dispatched',\n 'SIGTERM gracefully sent to GPU cluster. Last checkpoint #3 preserved.',\n 'destructive',\n )\n }, 700)\n }, [isCancelling, isJobCancelled, showNotification])\n\n const handleDeployToPlayground = React.useCallback(\n (ckpt: CheckpointRecord) => {\n setDeployingCkptId(ckpt.id)\n setTimeout(() => {\n setDeployingCkptId(null)\n showNotification(\n 'Checkpoint Deployed to Playground',\n `Checkpoint Epoch ${ckpt.epoch} (Step ${ckpt.step}) has been loaded into the interactive testing playground with zero cold-start latency.`,\n )\n }, 1000)\n },\n [showNotification],\n )\n\n // SVG Telemetry Loss Curves Math\n const svgWidth = 740\n const padLeft = 45\n const padRight = 695\n const usableW = padRight - padLeft\n const padTop = 25\n const padBottom = 190\n const usableH = padBottom - padTop\n\n const mapX = React.useCallback(\n (step: number): number => {\n return padLeft + (step / totalSteps) * usableW\n },\n [totalSteps, usableW],\n )\n\n const mapY = React.useCallback(\n (loss: number): number => {\n const clamped = Math.max(0, Math.min(2.0, loss))\n return padBottom - (clamped / 2.0) * usableH\n },\n [usableH],\n )\n\n const targetLossY = React.useMemo(() => mapY(0.4), [mapY])\n const currentStepX = React.useMemo(() => mapX(currentStep), [mapX, currentStep])\n\n const historicalPoints = React.useMemo(() => lossData.filter((d) => !d.isProjected), [lossData])\n\n const projectedPoints = React.useMemo(() => {\n const proj = lossData.filter((d) => d.isProjected)\n const lastHist = historicalPoints[historicalPoints.length - 1]\n return lastHist ? [lastHist, ...proj] : proj\n }, [lossData, historicalPoints])\n\n const trainPathHistoric = React.useMemo(() => {\n const pts = historicalPoints\n if (!pts.length) return ''\n let path = `M ${mapX(pts[0].step)},${mapY(pts[0].trainLoss)}`\n for (let i = 1; i < pts.length; i++) {\n const prev = pts[i - 1]\n const curr = pts[i]\n const x0 = mapX(prev.step)\n const y0 = mapY(prev.trainLoss)\n const x1 = mapX(curr.step)\n const y1 = mapY(curr.trainLoss)\n const cx = (x0 + x1) / 2\n path += ` C ${cx},${y0} ${cx},${y1} ${x1},${y1}`\n }\n return path\n }, [historicalPoints, mapX, mapY])\n\n const trainAreaHistoric = React.useMemo(() => {\n const pts = historicalPoints\n if (!pts.length) return ''\n const firstX = mapX(pts[0].step)\n const lastX = mapX(pts[pts.length - 1].step)\n return `${trainPathHistoric} L ${lastX},${padBottom} L ${firstX},${padBottom} Z`\n }, [historicalPoints, mapX, trainPathHistoric])\n\n const trainPathProjected = React.useMemo(() => {\n const pts = projectedPoints\n if (!pts.length) return ''\n let path = `M ${mapX(pts[0].step)},${mapY(pts[0].trainLoss)}`\n for (let i = 1; i < pts.length; i++) {\n const prev = pts[i - 1]\n const curr = pts[i]\n const x0 = mapX(prev.step)\n const y0 = mapY(prev.trainLoss)\n const x1 = mapX(curr.step)\n const y1 = mapY(curr.trainLoss)\n const cx = (x0 + x1) / 2\n path += ` C ${cx},${y0} ${cx},${y1} ${x1},${y1}`\n }\n return path\n }, [projectedPoints, mapX, mapY])\n\n const valPointsHistoric = React.useMemo(\n () => lossData.filter((d) => !d.isProjected && d.valLoss !== undefined),\n [lossData],\n )\n\n const valPathHistoric = React.useMemo(() => {\n const pts = valPointsHistoric\n if (!pts.length) return ''\n let path = `M ${mapX(pts[0].step)},${mapY(pts[0].valLoss!)}`\n for (let i = 1; i < pts.length; i++) {\n const prev = pts[i - 1]\n const curr = pts[i]\n const x0 = mapX(prev.step)\n const y0 = mapY(prev.valLoss!)\n const x1 = mapX(curr.step)\n const y1 = mapY(curr.valLoss!)\n const cx = (x0 + x1) / 2\n path += ` C ${cx},${y0} ${cx},${y1} ${x1},${y1}`\n }\n return path\n }, [valPointsHistoric, mapX, mapY])\n\n const valPointsProjected = React.useMemo(() => {\n const list = lossData.filter((d) => d.valLoss !== undefined && d.isProjected)\n const lastValHist = valPointsHistoric[valPointsHistoric.length - 1]\n return lastValHist ? [lastValHist, ...list] : list\n }, [lossData, valPointsHistoric])\n\n const valPathProjected = React.useMemo(() => {\n const pts = valPointsProjected\n if (!pts.length) return ''\n let path = `M ${mapX(pts[0].step)},${mapY(pts[0].valLoss!)}`\n for (let i = 1; i < pts.length; i++) {\n const prev = pts[i - 1]\n const curr = pts[i]\n const x0 = mapX(prev.step)\n const y0 = mapY(prev.valLoss!)\n const x1 = mapX(curr.step)\n const y1 = mapY(curr.valLoss!)\n const cx = (x0 + x1) / 2\n path += ` C ${cx},${y0} ${cx},${y1} ${x1},${y1}`\n }\n return path\n }, [valPointsProjected, mapX, mapY])\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n
\n
\n \n
\n
\n
\n

\n {fineTunedModelName}\n

\n \n {jobId}\n {copiedJobId ? : }\n \n
\n
\n
\n
\n\n
\n
\n Base Model:\n {baseModel}\n
\n ·\n {/* Live Status Badge */}\n
\n {!isJobCancelled ? (\n \n \n \n \n ) : (\n \n )}\n \n {isJobCancelled ? 'Job Cancelled by Operator' : status}\n \n
\n ·\n
\n \n Elapsed: {elapsedTime}\n · ETA {etaRemaining}\n
\n
\n
\n\n {/* Action Buttons */}\n
\n \n \n {isJobCancelled ? 'Cancelled' : isCancelling ? 'Cancelling...' : 'Cancel Job'}\n \n\n \n \n {isDownloadingWeights ? 'Preparing Archive...' : 'Download Weights / LoRA Adapter'}\n \n
\n
\n\n {/* Notification Toast Banner */}\n {activeNotification && (\n \n
\n {activeNotification.type === 'success' ? (\n \n ) : (\n \n )}\n
\n {activeNotification.title}: \n {activeNotification.message}\n
\n
\n setActiveNotification(null)}\n >\n ✕\n \n
\n )}\n\n {/* 4 Training Telemetry Cards */}\n
\n {/* 1. Current Training Loss */}\n \n \n
\n
\n
\n \n
\n Training Loss\n
\n \n Step {currentStep}/{totalSteps}\n \n
\n \n \n
\n
\n \n {trainingLoss.toFixed(3)}\n \n cross-entropy\n
\n
\n \n -77.6%\n
\n
\n\n
\n
\n Initial Loss:\n {initialLoss.toFixed(3)}\n
\n

Target convergence corridor: < 0.450

\n
\n \n \n\n {/* 2. Validation Loss */}\n \n \n
\n
\n
\n \n
\n Validation Loss\n
\n \n Generalizing\n \n
\n \n \n
\n
\n \n {validationLoss.toFixed(3)}\n \n eval set\n
\n +0.046 gap\n
\n\n
\n
\n Overfitting Status:\n No Overfitting\n
\n

Evaluated every 50 steps on 4,250 rows

\n
\n \n \n\n {/* 3. Learning Rate */}\n \n \n
\n
\n
\n \n
\n Learning Rate\n
\n \n Cosine\n \n
\n \n \n
\n
\n \n {learningRate}\n \n AdamW\n
\n Decay active\n
\n\n
\n
\n Schedule:\n Cosine Decay (10% warmup)\n
\n

Peak: 1.5e-4 · Min: 1.0e-6

\n
\n \n \n\n {/* 4. GPU Compute Cluster */}\n \n \n
\n
\n
\n \n
\n GPU Compute Cluster\n
\n \n {gpuUtilization}% Utilized\n \n
\n \n \n
\n
\n {gpuCluster}\n
\n
\n\n
\n \n
\n \n VRAM: {vramUsage}\n \n {tokensPerSec.toLocaleString()} tok/s\n
\n
\n \n \n
\n\n {/* Training & Validation Loss SVG Trend Curve */}\n \n \n
\n
\n
\n \n Training & Validation Loss Convergence\n
\n \n Dual-series loss trajectory across {totalSteps} gradient steps. Solid lines represent observed loss;\n dashed lines denote projected cosine decay trajectory.\n \n
\n\n {/* Legend & Metrics */}\n
\n
\n
\n \n Training Loss ({trainingLoss.toFixed(3)})\n
\n
\n \n Validation Loss ({validationLoss.toFixed(3)})\n
\n
\n \n Target (< 0.400)\n
\n
\n
\n
\n \n\n \n {/* SVG Chart Canvas Area */}\n
\n \n \n \n \n \n \n \n\n {/* Shaded Target Convergence Zone (Loss 0.00 to 0.40 -> Y: 190 to 157) */}\n \n\n {/* Horizontal Grid Lines */}\n \n \n \n \n \n \n\n {/* Y-Axis Scale Labels */}\n \n 2.00\n \n \n 1.50\n \n \n 1.00\n \n \n 0.50\n \n \n 0.40\n \n \n 0.00\n \n\n {/* Current Step 320 Vertical Indicator Line */}\n \n\n {/* Training Loss Area & Solid Line (Observed) */}\n \n \n\n {/* Training Loss Projected Line (Dashed) */}\n \n\n {/* Validation Loss Curve (Observed Solid Emerald) */}\n \n\n {/* Validation Loss Projected Line (Dashed Emerald) */}\n \n\n {/* Validation Loss Checkpoint Nodes (Observed) */}\n {valPointsHistoric.map((pt) => (\n setSelectedStepIndex(lossData.findIndex((d) => d.step === pt.step))}\n />\n ))}\n\n {/* Training Loss Interactive Point Markers */}\n {historicalPoints.map((pt, idx) => (\n setSelectedStepIndex(idx)}\n />\n ))}\n\n {/* Current Step Marker Pin Top Flag */}\n \n \n \n Step 320 / 500\n \n \n \n\n {/* X-Axis Step Milestones */}\n
\n {lossData\n .filter((d) => d.label)\n .map((pt, idx) => {\n const isSelected = selectedStepIndex === lossData.indexOf(pt)\n return (\n \n

Step {pt.step}

\n

{pt.label}

\n
\n {pt.trainLoss.toFixed(3)}\n {pt.valLoss && / {pt.valLoss.toFixed(3)}}\n
\n
\n )\n })}\n
\n \n\n {/* Metric Summary Strip */}\n
\n
\n Step Progress\n

\n {currentStep} / {totalSteps} ({progressPercent}%)\n

\n
\n \n
\n
\n\n
\n Tokens Processed\n

98.4M / 153.8M

\n 64.0% of corpus\n
\n\n
\n Cluster Throughput\n

\n {tokensPerSec.toLocaleString()} tok/s\n

\n Zero pipeline bubbles\n
\n\n
\n Current Epoch\n

\n Epoch {currentEpoch} of {totalEpochs}\n

\n 100 steps / epoch\n
\n\n
\n Convergence Projection\n

\n 0.355 at Step 500\n

\n Expected final loss\n
\n
\n \n \n\n {/* Lower Section: Checkpoint History & Hyperparameters Configuration */}\n
\n {/* Left Column (2 cols on lg): Checkpoint History Table */}\n \n \n
\n
\n
\n \n Checkpoint History & Weight Exporter\n
\n \n Saved LoRA adapter snapshots. Deploy directly to test playground or download safe tensors.\n \n
\n \n {checkpoints.length} Saved Snapshots\n \n
\n \n \n
\n \n \n \n Checkpoint\n Step\n Train Loss\n Val Loss\n Size & Type\n Created\n Actions\n \n \n \n {checkpoints.map((ckpt) => (\n \n \n
\n
\n Epoch {ckpt.epoch}.0\n {ckpt.isBest && (\n \n Best Val Loss\n \n )}\n
\n

{ckpt.filename}

\n
\n \n \n {ckpt.step} / {ckpt.totalSteps}\n \n \n \n {ckpt.trainLoss.toFixed(3)}\n \n \n \n \n {ckpt.valLoss.toFixed(3)}\n \n \n \n {ckpt.size}\n \n \n {ckpt.createdAgo}\n \n \n
\n handleDeployToPlayground(ckpt)}\n >\n {deployingCkptId === ckpt.id ? (\n \n ) : (\n \n )}\n {deployingCkptId === ckpt.id ? 'Deploying...' : 'Deploy to Playground'}\n \n \n \n \n
\n \n \n ))}\n \n
\n
\n \n \n\n {/* Right Column (1 col on lg): Hyperparameters & Dataset Configuration Card */}\n \n \n
\n
\n \n Hyperparameters & Dataset\n
\n \n LoRA PEFT\n \n
\n \n Fine-tuning recipe manifest and dataset partition metadata.\n \n \n \n {/* Training Dataset Box */}\n
\n
\n
\n \n Training Dataset\n
\n \n {copiedDataset ? : }\n \n
\n

{trainingDataset}

\n
\n \n {trainingExamples.toLocaleString()} train · {validationExamples.toLocaleString()} val\n \n {totalTokens}\n
\n
\n\n {/* Key Parameters Grid */}\n
\n
\n Effective Batch Size:\n \n {batchSize}{' '}\n \n ({microBatchSize} × {gradAccumSteps} accum)\n \n \n
\n\n
\n Context Length:\n \n {contextLength.toLocaleString()} tokens\n \n
\n\n
\n Optimizer:\n {optimizer}\n
\n\n
\n LoRA Rank & Alpha:\n \n r={loraRank}, α={loraAlpha} (dropout={loraDropout})\n \n
\n\n
\n Target Modules:\n All Linear (q, k, v, o, gate, up, down)\n
\n\n
\n Precision & Kernel:\n bfloat16 · FlashAttention-2\n
\n\n
\n Parallelism Strategy:\n PyTorch FSDP-2 (Hybrid Sharded)\n
\n
\n\n \n\n {/* Export & Integration Note */}\n
\n
\n \n HuggingFace Hub & vLLM Ready\n
\n

\n Checkpoints are stored in standard SafeTensors format with tokenizer configs ready for instant\n serverless vLLM / TensorRT-LLM deployment.\n

\n
\n \n \n
\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/FineTuningJobMonitor.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/table.json" ], "description": "LLM fine-tuning job telemetry, loss curve convergence tracking, GPU cluster utilization, hyperparameter manifests, and LoRA checkpoint exporter.", "categories": [ "ai", "dashboard", "app" ] }