improvement: style <progress/> consistently (#4909)

Author: mscolnick

frontend/src/css/index.css

@@ -7,3 +7,4 @@
 @import url("./md-tooltip.css");
 @import url("./admonition.css");
 @import url("./table.css");
+@import url("./progress.css");

frontend/src/css/progress.css

@@ -0,0 +1,89 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+/*
+ * Global styling for progress bars to ensure consistent appearance
+ * across both marimo native components and IPython outputs
+ */
+
+/* Container styling */
+.progress-container {
+  display: flex;
+  flex-direction: column;
+  margin-left: auto;
+  margin-right: auto;
+
+  @apply max-w-sm p-6;
+}
+
+/* Title styling */
+.progress-title {
+  font-family: var(--heading-font, "Lora", serif);
+
+  @apply text-lg font-bold text-foreground/60;
+}
+
+/* Subtitle styling */
+.progress-subtitle {
+  font-family: var(--text-font, "PT Sans", sans-serif);
+
+  @apply text-sm text-muted-foreground font-normal;
+}
+
+/* Progress wrapper */
+.progress-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  @apply gap-1 mt-2;
+}
+
+/* Progress bar row */
+.progress-row {
+  display: flex;
+  align-items: baseline;
+  font-family: var(--text-font, "PT Sans", sans-serif);
+
+  @apply gap-3 text-sm text-muted-foreground;
+}
+
+/* Meta information row */
+.progress-meta {
+  display: flex;
+  font-family: var(--text-font, "PT Sans", sans-serif);
+
+  @apply gap-2 text-muted-foreground text-sm;
+}
+
+/* Base progress element styling */
+progress {
+  appearance: none;
+  position: relative;
+  overflow: hidden;
+  border-radius: 9999px;
+  border: none;
+  flex: 1;
+
+  @apply bg-slate-200 dark:bg-accent/60 h-2 max-h-2 mr-1;
+}
+
+/* Progress bar fill styling */
+progress::-webkit-progress-bar {
+  border-radius: 9999px;
+
+  @apply bg-slate-200 dark:bg-accent/60;
+}
+
+progress::-webkit-progress-value {
+  transition: width 0.2s ease;
+  @apply bg-blue-500 dark:bg-primary;
+}
+
+progress::-moz-progress-bar {
+  transition: width 0.2s ease;
+  @apply bg-blue-500 dark:bg-primary;
+}
+
+/* Wrap existing progress elements */
+progress:not(.wrapped) {
+  display: inline-block;
+}

marimo/_smoke_tests/ipython/progress.py

@@ -0,0 +1,89 @@
+import marimo
+
+__generated_with = "0.13.7"
+app = marimo.App(width="medium")
+
+
+@app.cell
+def __1():
+    import time
+    from transformers.utils.notebook import NotebookProgressCallback
+    from transformers.training_args import IntervalStrategy
+    return IntervalStrategy, NotebookProgressCallback, time
+
+
+@app.cell
+def _(
+    MockTrainingArgs,
+    MockTrainingControl,
+    MockTrainingState,
+    NotebookProgressCallback,
+    time,
+):
+    def simulate_transformers_training():
+        # Training parameters
+        num_train_epochs = 5
+        steps_per_epoch = 100
+        total_steps = num_train_epochs * steps_per_epoch
+
+        # Initialize state, args, and control
+        state = MockTrainingState(total_steps, num_train_epochs)
+        args = MockTrainingArgs()
+        control = MockTrainingControl()
+
+        # Initialize the callback
+        callback = NotebookProgressCallback()
+
+        # Start training
+        callback.on_train_begin(args, state, control)
+
+        # Simulate epochs
+        for epoch in range(1, num_train_epochs + 1):
+            state.epoch = epoch
+
+            # Simulate steps within epoch
+            for step in range(1, steps_per_epoch + 1):
+                state.global_step = (epoch - 1) * steps_per_epoch + step
+
+                # Simulate work
+                time.sleep(0.01)  # Reduced sleep time for faster simulation
+
+                # Update progress
+                callback.on_step_end(args, state, control)
+
+            # Call on_evaluate
+            callback.on_evaluate(args, state, control, metrics={})
+
+        # End training
+        callback.on_train_end(args, state, control)
+
+
+    simulate_transformers_training()
+    return
+
+
+@app.cell
+def _(IntervalStrategy):
+    # Create a mock training state and args for the callback
+    class MockTrainingState:
+        def __init__(self, max_steps, num_train_epochs):
+            self.max_steps = max_steps
+            self.num_train_epochs = num_train_epochs
+            self.global_step = 0
+            self.epoch = 0
+            self.log_history = []
+
+
+    class MockTrainingArgs:
+        def __init__(self):
+            self.eval_strategy = IntervalStrategy.EPOCH
+
+
+    class MockTrainingControl:
+        def __init__(self):
+            pass
+    return MockTrainingArgs, MockTrainingControl, MockTrainingState
+
+
+if __name__ == "__main__":
+    app.run()