Apply Graio Block to control how much space is allocated to the simulation screen.

app.py

@@ -8,18 +8,43 @@ def simulate_and_render(seed: int, azimuth: float=35, elevation: float=-20, dist
     gif_path = run_tray_simulation(seed=seed, azimuth=azimuth, elevation=elevation, distance=distance)
     return gif_path
 
-iface = gr.Interface(
-    fn=simulate_and_render,
-    inputs=[
-        gr.Number(label="Random Seed", value=0),
-        gr.Slider(minimum=0, maximum=360, label="Azimuth", value=35),
-        gr.Slider(minimum=-90, maximum=90, label="Elevation", value=-20),
-        gr.Slider(minimum=0.2, maximum=1.0, label="Zoom (Distance)", value=1.0)
-    ],
-    outputs=gr.Image(type="filepath", label="Simulation"),
-    title="TraySim Simulation Viewer",
-    description="Simulates object drop on a tray using MuJoCo and shows the result as a GIF."
-)
+#iface = gr.Interface(
+#    fn=simulate_and_render,
+#    inputs=[
+#        gr.Number(label="Random Seed", value=0),
+#        gr.Slider(minimum=0, maximum=360, label="Azimuth", value=35),
+#        gr.Slider(minimum=-90, maximum=90, label="Elevation", value=-20),
+#        gr.Slider(minimum=0.2, maximum=1.0, label="Zoom (Distance)", value=1.0)
+#    ],
+#    outputs=gr.Image(type="filepath", label="Simulation"),
+#    title="TraySim Simulation Viewer",
+#    description="Simulates object drop on a tray using MuJoCo and shows the result as a GIF."
+#)
+
+# Define the custom layout using Blocks
+with gr.Blocks() as iface:
+    gr.Markdown("# TraySim Simulation Viewer")
+    gr.Markdown("Simulates object drop on a tray using MuJoCo and shows the result as a GIF.")
+    
+    with gr.Row():
+        # Input column (30% width)
+        with gr.Column(scale=3):  # scale=3 for 30% width
+            seed_input = gr.Number(label="Random Seed", value=0)
+            azimuth_input = gr.Slider(minimum=0, maximum=360, label="Azimuth", value=35)
+            elevation_input = gr.Slider(minimum=-90, maximum=90, label="Elevation", value=-20)
+            distance_input = gr.Slider(minimum=0.2, maximum=1.0, label="Zoom (Distance)", value=1.0)
+            submit_button = gr.Button("Run Simulation")
+        
+        # Output column (70% width)
+        with gr.Column(scale=7):  # scale=7 for 70% width
+            output_image = gr.Image(type="filepath", label="Simulation")
+
+    # Connect the button to the simulation function
+    submit_button.click(
+        fn=simulate_and_render,
+        inputs=[seed_input, azimuth_input, elevation_input, distance_input],
+        outputs=output_image
+    )
 
 if __name__ == "__main__":
     iface.launch()