Setup layouts using blocks

Using blocks allows for automatic updates when the user changes a value in one of the components

app.py

@@ -50,35 +50,59 @@ def get_clusters_plot(n_blobs, quantile, cluster_std):
     return fig, message
 
 
-demo = gr.Interface(
-    get_clusters_plot,
-    [
-        gr.Slider(
-            minimum=2,
-            maximum=10,
-            label="Number of clusters in the data",
-            step=1,
-            value=3,
-        ),
-        gr.Slider(
-            minimum=0,
-            maximum=1,
-            step=0.05,
-            value=0.2,
-            label="Quantile",
-            info="Used to determine clustering's bandwidth.",
-        ),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1,
-            label="Clusters' standard deviation",
-            step=0.1,
-            value=0.6,
-        ),
-    ],
-    [gr.Plot(label="Clusters' Plot"), gr.HTML()],
-    allow_flagging="never",
-)
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column(scale=1):
+            n_blobs = gr.Slider(
+                minimum=2,
+                maximum=10,
+                label="Number of clusters in the data",
+                step=1,
+                value=3,
+            )
+            quantile = gr.Slider(
+                minimum=0,
+                maximum=1,
+                step=0.05,
+                value=0.2,
+                label="Quantile",
+                info="Used to determine clustering's bandwidth.",
+            )
+            cluster_std = gr.Slider(
+                minimum=0.1,
+                maximum=1,
+                label="Clusters' standard deviation",
+                step=0.1,
+                value=0.6,
+            )
+        with gr.Column(scale=4):
+            clusters_plots = gr.Plot(label="Clusters' Plot")
+            message = gr.HTML()
+
+    n_blobs.change(
+        get_clusters_plot,
+        [n_blobs, quantile, cluster_std],
+        [clusters_plots, message],
+        queue=False,
+    )
+    quantile.change(
+        get_clusters_plot,
+        [n_blobs, quantile, cluster_std],
+        [clusters_plots, message],
+        queue=False,
+    )
+    cluster_std.change(
+        get_clusters_plot,
+        [n_blobs, quantile, cluster_std],
+        [clusters_plots, message],
+        queue=False,
+    )
+    demo.load(
+        get_clusters_plot,
+        [n_blobs, quantile, cluster_std],
+        [clusters_plots, message],
+        queue=False,
+    )
 
 if __name__ == "__main__":
     demo.launch()