Upload folder using huggingface_hub

app.py

@@ -661,10 +661,13 @@ def clustering_tab():
         dbc.Row([dbc.Col(html.Div(id="plot-status", className="text-danger small mb-1"))]),
         dbc.Row([
             dbc.Col(
-                dcc.Graph(
-                    id="cluster-graph",
-                    config={"displayModeBar": True, "toImageButtonOptions": {"format": "svg"}},
-                    style={"height": "650px"},
+                dcc.Loading(
+                    dcc.Graph(
+                        id="cluster-graph",
+                        config={"displayModeBar": True, "toImageButtonOptions": {"format": "svg"}},
+                        style={"height": "650px"},
+                    ),
+                    type="circle", color="#1a73e8",
                 ),
                 width=12,
             ),
@@ -725,25 +728,28 @@ def grid_metrics_tab():
                 ], width=4),
             ]),
         ], className="filter-panel"),
-        dbc.Row([
-            dbc.Col(
-                dcc.Graph(id="metrics-heatmap",
-                          config={"displayModeBar": True,
-                                  "toImageButtonOptions": {"format": "svg"}},
-                          style={"height": "420px"}),
-                width=6,
-            ),
-            dbc.Col(
-                dcc.Graph(id="metrics-model-compare",
-                          config={"displayModeBar": True,
-                                  "toImageButtonOptions": {"format": "svg"}},
-                          style={"height": "420px"}),
-                width=6,
-            ),
-        ], className="mt-3"),
+        dcc.Loading(
+            dbc.Row([
+                dbc.Col(
+                    dcc.Graph(id="metrics-heatmap",
+                              config={"displayModeBar": True,
+                                      "toImageButtonOptions": {"format": "svg"}},
+                              style={"height": "420px"}),
+                    width=6,
+                ),
+                dbc.Col(
+                    dcc.Graph(id="metrics-model-compare",
+                              config={"displayModeBar": True,
+                                      "toImageButtonOptions": {"format": "svg"}},
+                              style={"height": "420px"}),
+                    width=6,
+                ),
+            ], className="mt-3"),
+            type="circle", color="#1a73e8",
+        ),
         html.Hr(),
         html.H6("Best parameter combinations", className="fw-semibold mt-2 mb-2"),
-        html.Div(id="metrics-best-table"),
+        dcc.Loading(html.Div(id="metrics-best-table"), type="circle", color="#1a73e8"),
     ], fluid=True, className="pt-3")
 
 
@@ -1020,10 +1026,13 @@ def evaluation_tab():
                                 "Click a bar to see examples.",
                                 className="text-muted small mt-2 mb-1",
                             ),
-                            dcc.Graph(id="eval-llm-graph",
-                                      config={"displayModeBar": True, "toImageButtonOptions": {"format": "png", "filename": "purification_conditions_llm"}},
-                                      style={"height": "460px"}),
-                            html.Div(id="eval-llm-examples", className="mt-3"),
+                            dcc.Loading(
+                                dcc.Graph(id="eval-llm-graph",
+                                          config={"displayModeBar": True, "toImageButtonOptions": {"format": "png", "filename": "purification_conditions_llm"}},
+                                          style={"height": "460px"}),
+                                type="circle", color="#1a73e8",
+                            ),
+                            dcc.Loading(html.Div(id="eval-llm-examples", className="mt-3"), type="circle", color="#1a73e8"),
                         ]),
                         dbc.Tab(label="NLP-based Evaluation", tab_id="eval-tab-nlp", children=[
                             dbc.Row([
@@ -1038,10 +1047,13 @@ def evaluation_tab():
                                     ),
                                 ], width=12, md=3),
                             ], className="mb-2"),
-                            dcc.Graph(id="eval-nlp-graph",
-                                      config={"displayModeBar": True, "toImageButtonOptions": {"format": "png", "filename": "purification_conditions_nlp"}},
-                                      style={"height": "460px"}),
-                            html.Div(id="eval-nlp-examples", className="mt-3"),
+                            dcc.Loading(
+                                dcc.Graph(id="eval-nlp-graph",
+                                          config={"displayModeBar": True, "toImageButtonOptions": {"format": "png", "filename": "purification_conditions_nlp"}},
+                                          style={"height": "460px"}),
+                                type="circle", color="#1a73e8",
+                            ),
+                            dcc.Loading(html.Div(id="eval-nlp-examples", className="mt-3"), type="circle", color="#1a73e8"),
                         ]),
                     ], id="eval-sub-tabs", active_tab="eval-tab-llm"),
                 ],
@@ -1069,10 +1081,13 @@ def evaluation_tab():
                         labelStyle={"marginRight": "16px"},
                         className="mb-3",
                     ),
-                    dcc.Graph(id="eval-classif-graph",
-                              config={"displayModeBar": False},
-                              style={"height": "320px"}),
-                    html.Div(id="eval-classif-examples", className="mt-3"),
+                    dcc.Loading(
+                        dcc.Graph(id="eval-classif-graph",
+                                  config={"displayModeBar": False},
+                                  style={"height": "320px"}),
+                        type="circle", color="#1a73e8",
+                    ),
+                    dcc.Loading(html.Div(id="eval-classif-examples", className="mt-3"), type="circle", color="#1a73e8"),
                 ],
             ),
 
@@ -1097,11 +1112,14 @@ def evaluation_tab():
                         labelStyle={"marginRight": "16px"},
                         className="mb-3",
                     ),
-                    html.Div(id="confmat-cards"),
-                    dcc.Graph(id="confmat-heatmap",
-                              config={"displayModeBar": False},
-                              style={"height": "340px"}),
-                    html.Div(id="confmat-examples", className="mt-3"),
+                    dcc.Loading(html.Div(id="confmat-cards"), type="circle", color="#1a73e8"),
+                    dcc.Loading(
+                        dcc.Graph(id="confmat-heatmap",
+                                  config={"displayModeBar": False},
+                                  style={"height": "340px"}),
+                        type="circle", color="#1a73e8",
+                    ),
+                    dcc.Loading(html.Div(id="confmat-examples", className="mt-3"), type="circle", color="#1a73e8"),
                 ],
             ),