Merge pull request #166 from unslothai/feat/download-progress-indicator

feat: add download progress indicators for dataset preview and training overlay

studio/frontend/src/features/studio/sections/dataset-preview-dialog.tsx

@@ -63,6 +63,7 @@ export function DatasetPreviewDialog({
   const mappingOk = !!manualMapping.input && !!manualMapping.output;
   const leftLabel = isVlm ? "Image" : "Input";
   const rightLabel = isVlm ? "Text" : "Output";
+  const isHfDataset = !!datasetName && datasetName.includes("/");
 
   useEffect(() => {
     if (!manualMapping.input || !manualMapping.output) return;
@@ -266,8 +267,13 @@ export function DatasetPreviewDialog({
                 <Spinner className="size-5 text-primary" />
               </div>
               <p className="text-sm text-muted-foreground font-medium">
-                Loading preview...
+                {isHfDataset ? "Fetching dataset preview from Hugging Face..." : "Loading preview..."}
               </p>
+              {isHfDataset && (
+                <p className="text-xs text-muted-foreground/60">
+                  This may take a moment for large datasets
+                </p>
+              )}
             </div>
           )}
 

studio/frontend/src/features/studio/sections/progress-section-lib.ts

@@ -2,6 +2,8 @@ import type { TrainingPhase } from "@/features/training";
 
 export const phaseLabel: Record<TrainingPhase, string> = {
   idle: "Idle",
+  downloading_model: "Downloading model",
+  downloading_dataset: "Downloading dataset",
   loading_model: "Loading model",
   loading_dataset: "Loading dataset",
   configuring: "Configuring",
@@ -13,6 +15,10 @@ export const phaseLabel: Record<TrainingPhase, string> = {
 
 export const phaseColors: Record<TrainingPhase, string> = {
   idle: "bg-muted text-muted-foreground",
+  downloading_model:
+    "bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300",
+  downloading_dataset:
+    "bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300",
   loading_model:
     "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300",
   loading_dataset:

studio/frontend/src/features/studio/training-view.tsx

@@ -19,6 +19,8 @@ export function TrainingView(): ReactElement {
   );
 
   const isPreparingPhase =
+    runtime.phase === "downloading_model" ||
+    runtime.phase === "downloading_dataset" ||
     runtime.phase === "loading_model" ||
     runtime.phase === "loading_dataset" ||
     runtime.phase === "configuring";

studio/frontend/src/features/training/types/runtime.ts

@@ -1,5 +1,7 @@
 export type TrainingPhase =
   | "idle"
+  | "downloading_model"
+  | "downloading_dataset"
   | "loading_model"
   | "loading_dataset"
   | "configuring"