refactored the interface

README.md

@@ -1,5 +1,5 @@
 ---
-title: Goal Babbling - Robotic Arm
+title: Goal-based Exploration of Robotic Arm
 emoji: 🤖
 colorFrom: purple
 colorTo: yellow

app.py

@@ -117,15 +117,31 @@ def explore(seed, N, dim, limit):
 
 
 
-demo = gr.Interface(
-    fn=explore,
-    inputs=[gr.Number(value=0, minimum=0, maximum=1000, precision=0, label="Random seed"), 
-            gr.Number(value=3000, minimum=100, maximum=5000, precision=0, label="Number of exploration steps"),
-            gr.Number(value=7, minimum=2, maximum=100, precision=0, label="Number of joints"),
-            gr.Slider(value=150, minimum=20, maximum=180,step=10, label="Joint Angle Limit")
-            ],
-    outputs=[gr.ScatterPlot(x="x", y="y", label="Motor Babbling"), 
-            gr.ScatterPlot(x="x", y="y", label="Goal Babbling",)],
-)
+with gr.Blocks() as demo:
+    with gr.Row():
+        gr.Markdown("# Goal-based Exploration of a Robotic Arm")
+        gr.Markdown(
+            """This space is based on Fabien Benureau goal babbling tutorial, which can also be run in [this notebook](https://fabien.benureau.com/recode/benureau2015_gb/benureau2015_gb.html)
+            """
+        )
+    with gr.Row():
+        seed = gr.Number(value=0, minimum=0, maximum=1000, precision=0, label="Random seed")
+        N = gr.Number(value=3000, minimum=100, maximum=5000, precision=0, label="Number of exploration steps")
+        dim = gr.Number(value=7, minimum=2, maximum=100, precision=0, label="Number of joints")
+        limit = gr.Slider(value=150, minimum=20, maximum=180,step=10, label="Joint Angle Limit")
+
+    with gr.Row():
+        explo_btn = gr.Button("Launch Exploration! ")
+
+    with gr.Row():
+        rmb_plot = gr.ScatterPlot(pd.DataFrame({"x": [], "y": []}), x="x", y="y", title="Reached Positions with Random Motor Babbling",
+                                  x_lim=[-1.1, 1.1], y_lim=[-1.1, 1.1], 
+                                  width=400, height=400, label="Motor Babbling")
+        rgb_plot = gr.ScatterPlot(pd.DataFrame({"x": [], "y": []}), x="x", y="y", title="Reached Positions with Random Motor Babbling",
+                                  x_lim=[-1.1, 1.1], y_lim=[-1.1, 1.1], 
+                                  width=400, height=400, label="Goal Babbling")
+
+
+    explo_btn.click(explore, inputs=[seed, N, dim, limit], outputs=[rmb_plot, rgb_plot])
 
 demo.launch()