Update code

app.py

@@ -35,30 +35,53 @@ with gr.Blocks(title="World-in-World: Building a Closed-Loop World Interface to
     gr.HTML("<h1 style='text-align: center; margin-bottom: 1rem'>🏆 World-in-World: Building a Closed-Loop World Interface to Evaluate World Models</h1>")
     
     with gr.Tabs():
-        # New Zone before Leaderboard
-        with gr.TabItem("🧑‍🏫 Instruction & Environmental Feedback"):
+        with gr.TabItem("🧑‍🏫 Interactive Demo"):
             with gr.Row():
-                with gr.Column(scale=1, min_width=300):  # Ensuring proper alignment
-                    gr.HTML("<h3 style='text-align: center;'>Instruction:</h3>")
-                    gr.Markdown("Navigate to the Toaster in the room and be as close as possible to it.")
-                    gr.Markdown("""
-                    **Environment Step 4-7:**
-
-                    **Planning:**
-                    1. Move leftward by 0.25.
-                    2. Move leftward by 0.25.
-                    3. Move forward by 0.25.
-                    4. Move forward by 0.25.
+                # Left Zone: Instructions
+                with gr.Column(scale=2, min_width=350):
+                    # Mimicking the blue instruction box from the image
+                    gr.HTML("""
+                        <div style='background-color: #e6f3ff; border: 1px solid #b3d9ff; border-radius: 8px; padding: 15px; font-family: sans-serif;'>
+                            <div style='display: flex; align-items: center; margin-bottom: 10px;'>
+                                <span style='font-size: 24px; margin-right: 10px;'>🧠</span>
+                                <h3 style='margin: 0; color: #333;'>Instruction:</h3>
+                            </div>
+                            <p style='margin: 0; color: #555;'>Navigate to the Toaster in the room and be as close as possible to it.</p>
+                        </div>
+                    """)
+                    # Mimicking the grey planning box from the image
+                    gr.HTML("""
+                        <div style='background-color: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-top: 20px; font-family: sans-serif;'>
+                            <div style='display: flex; align-items: center; margin-bottom: 10px;'>
+                                <span style='font-size: 24px; margin-right: 10px;'>🦾</span>
+                                <h3 style='margin: 0; color: #333;'>Environment Step 4-7:</h3>
+                            </div>
+                            <h4 style='margin-top: 10px; margin-bottom: 5px; color: #444;'>Planning:</h4>
+                            <ol start="4" style='padding-left: 20px; margin: 0; color: #555;'>
+                                <li>Move leftward by 0.25.</li>
+                                <li>Move leftward by 0.25.</li>
+                                <li>Move forward by 0.25.</li>
+                                <li>Move forward by 0.25.</li>
+                            </ol>
+                        </div>
                     """)
                 
-                with gr.Column(scale=2, min_width=600):
-                    gr.HTML("<h3 style='text-align: center;'>Closed-Loop Environmental Feedback</h3>")
-                    # Adjust image/video sizes for better layout
-                    gr.Video("/home/user/app/demo_source_data/AR/FTwan21_lora/X7HyMhZNoso/E145/A001/world_model_gen/bbox_gen_video_1.mp4", label="Left Image", width=480)
-                    gr.Image("/home/user/app/demo_source_data/AR/FTwan21_lora/X7HyMhZNoso/E145/A001/real_obs.png", label="Bird Eye View", type="pil", width=480)
-                    gr.HTML("<h4 style='text-align: center;'>3D Scene:</h4>")
-                    with gr.Column(scale=1):
-                        gr.Model3D("/home/user/app/demo_source_data/scenes_glb/5ZKStnWn8Zo.glb", label="3D Scene")
+                # Middle Zone: Closed-Loop Environmental Feedback
+                with gr.Column(scale=4, min_width=400):
+                    gr.HTML("<h2 style='text-align: center; color: #db83b5;'>Closed-Loop Environmental Feedback</h2>")
+                    with gr.Row():
+                        # The single video on the left of this zone
+                        gr.Video("/home/user/app/demo_source_data/AR/FTwan21_lora/X7HyMhZNoso/E145/A001/world_model_gen/bbox_gen_video_1.mp4", label="First Person View", interactive=False)
+                        # The column with the other two views on the right
+                        with gr.Column():
+                             gr.Image("/home/user/app/demo_source_data/AR/FTwan21_lora/5ZKStnWn8Zo/E014/A000/real_obs_bbox.png", label="Bird's Eye View", type="pil", interactive=False)
+                             gr.Model3D("/home/user/app/demo_source_data/scenes_glb/5ZKStnWn8Zo.glb", label="3D Scene", interactive=False)
+                
+                # Right Zone: World Model's Generation
+                with gr.Column(scale=3, min_width=300):
+                    gr.HTML("<h2 style='text-align: center;'>World Model's Generation</h2>")
+                    gr.Video("/home/user/app/demo_source_data/AR/FTwan21_lora/X7HyMhZNoso/E145/A001/world_model_gen/gen_video_1.mp4", label="Generated View", interactive=False)
+
 
         with gr.TabItem("📊 Leaderboard"):
             leaderboard_table = gr.DataFrame(
@@ -94,4 +117,4 @@ with gr.Blocks(title="World-in-World: Building a Closed-Loop World Interface to
             """)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()