Add JSON export button for line plots and upgrade gradio dependency (#378)

Co-authored-by: = <=>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: Abubakar Abid <islamrealm@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

Author: 3 people

.changeset/two-seas-burn.md

@@ -0,0 +1,5 @@
+---
+"trackio": patch
+---
+
+feat:Add JSON export button for line plots and upgrade gradio dependency

examples/transformers-integration.py

@@ -8,9 +8,15 @@
 # ///
 
 import os
-from datasets import Dataset
-from transformers import AutoModelForSequenceClassification, AutoTokenizer, Trainer, TrainingArguments
+
 import huggingface_hub
+from datasets import Dataset
+from transformers import (
+    AutoModelForSequenceClassification,
+    AutoTokenizer,
+    Trainer,
+    TrainingArguments,
+)
 
 model_name = "distilbert-base-uncased"
 tokenizer = AutoTokenizer.from_pretrained(model_name)
@@ -38,7 +44,6 @@
         report_to="trackio",
         push_to_hub=bool(hub_model_id),
         hub_model_id=hub_model_id,
-
     ),
     train_dataset=dataset,
 )
@@ -47,4 +52,3 @@
 trainer.push_to_hub()
 
 print(f"Model pushed to Hub, available at: https://huggingface.co/{hub_model_id}")
-

pyproject.toml

@@ -14,7 +14,7 @@ requires-python = ">=3.10"
 dependencies = [
     "pandas<3.0.0",
     "huggingface-hub<2.0.0",
-    "gradio[oauth]>=6.2.0,<7.0.0",
+    "gradio[oauth]>=6.3.0,<7.0.0",
     "numpy<3.0.0",
     "pillow<12.0.0",
     "orjson>=3.0,<4.0.0",

trackio/ui/main.py

@@ -86,6 +86,24 @@
 """
 
 
+def generate_download_plot_js(metric_name: str) -> str:
+    """Generate JavaScript code for downloading plot data as JSON."""
+    safe_filename = metric_name.replace("/", "_").replace("\\", "_")
+    return f"""(data) => {{
+        const jsonStr = JSON.stringify(data.value, null, 2);
+        const blob = new Blob([jsonStr], {{type: 'application/json'}});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = '{safe_filename}.json';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        return [];
+    }}"""
+
+
 def get_runs(project) -> list[str]:
     if not project:
         return []
@@ -1049,6 +1067,7 @@ def update_dashboard(
                                 x_lim_value,
                             )
                             if not metric_df.empty:
+                                download_btn = gr.Button("📄")
                                 plot = gr.LinePlot(
                                     downsampled_df,
                                     x=x_column,
@@ -1060,10 +1079,16 @@ def update_dashboard(
                                     title=metric_name,
                                     key=f"plot-{metric_idx}",
                                     preserved_by_key=None,
-                                    buttons=["fullscreen", "export"],
+                                    buttons=[download_btn, "fullscreen", "export"],
                                     x_lim=updated_x_lim,
                                     min_width=400,
                                 )
+                                download_btn.click(
+                                    None,
+                                    inputs=[plot],
+                                    outputs=[],
+                                    js=generate_download_plot_js(metric_name),
+                                )
                                 plot.select(
                                     update_x_lim,
                                     outputs=x_lim,
@@ -1114,6 +1139,7 @@ def update_dashboard(
                                         x_lim_value,
                                     )
                                     if not metric_df.empty:
+                                        download_btn = gr.Button("📄")
                                         plot = gr.LinePlot(
                                             downsampled_df,
                                             x=x_column,
@@ -1125,10 +1151,20 @@ def update_dashboard(
                                             title=metric_name,
                                             key=f"plot-{metric_idx}",
                                             preserved_by_key=None,
-                                            buttons=["fullscreen", "export"],
+                                            buttons=[
+                                                download_btn,
+                                                "fullscreen",
+                                                "export",
+                                            ],
                                             x_lim=updated_x_lim,
                                             min_width=400,
                                         )
+                                        download_btn.click(
+                                            None,
+                                            inputs=[plot],
+                                            outputs=[],
+                                            js=generate_download_plot_js(metric_name),
+                                        )
                                         plot.select(
                                             update_x_lim,
                                             outputs=x_lim,