Use HTML to center message's text

app.py

@@ -36,14 +36,16 @@ def get_clusters_plot(n_blobs, quantile, cluster_std):
 
     if len(centers) != n_clusters_:
         message = (
-            f"The number of estimated clusters ({n_clusters_})"
+            '<p style="text-align: center;">'
+            + f"The number of estimated clusters ({n_clusters_})"
             + f" differs from the true number of clusters ({n_blobs})."
-            + " Try changing the `Quantile` parameter."
+            + " Try changing the `Quantile` parameter.</p>"
         )
     else:
         message = (
-            f"The number of estimated clusters ({n_clusters_})"
-            + f" matches the true number of clusters ({n_blobs})!"
+            '<p style="text-align: center;">'
+            + f"The number of estimated clusters ({n_clusters_})"
+            + f" matches the true number of clusters ({n_blobs})!</p>"
         )
     return fig, message
 
@@ -65,12 +67,12 @@ demo = gr.Interface(
         gr.Slider(
             minimum=0.1,
             maximum=1,
-            label="Cluster standard deviation",
+            label="Clusters standard deviation",
             step=0.1,
             value=0.6,
         ),
     ],
-    [gr.Plot(), gr.Markdown()],
+    [gr.Plot(label="Clusters' Plot"), gr.HTML()],
     allow_flagging="never",
 )