Hugging Face's logo

Spaces:
WiW-collab
/
wiw-prototype
Sleeping

App Files Community
1
annaaaddddd commited on
Commit
892fa36
·
verified ·
1 Parent(s): 59f94b7

Update app.py to use the new interactive demo UI

Browse files

there are some formatting issue though, will fix tomorrow.

Files changed (1) hide show
  1. app.py +45 -42
app.py CHANGED
@@ -61,50 +61,53 @@ with gr.Blocks(title="World-in-World: Building a Closed-Loop World Interface to
61
 
62
  with gr.Tabs():
63
  with gr.TabItem("🧑‍🏫 Interactive Demo"):
64
- with gr.Row():
65
- # Left Zone: Agent's View
66
- with gr.Column(scale=2, min_width=350):
67
- gr.HTML("<h2 style='text-align: center;'>Agent's View</h2>")
68
- # Mimicking the blue instruction box from the image
69
- gr.HTML("""
70
- <div style='background-color: #e6f3ff; border: 1px solid #b3d9ff; border-radius: 8px; padding: 15px; font-family: sans-serif;'>
71
- <div style='display: flex; align-items: center; margin-bottom: 10px;'>
72
- <span style='font-size: 24px; margin-right: 10px;'>🧠</span>
73
- <h3 style='margin: 0; color: #333;'>Instruction:</h3>
74
- </div>
75
- <p style='margin: 0; color: #555;'>Navigate to the Toaster in the room and be as close as possible to it.</p>
76
- </div>
77
- """)
78
- # Mimicking the grey planning box from the image
79
- gr.HTML("""
80
- <div style='background-color: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-top: 20px; font-family: sans-serif;'>
81
- <div style='display: flex; align-items: center; margin-bottom: 10px;'>
82
- <span style='font-size: 24px; margin-right: 10px;'>🦾</span>
83
- <h3 style='margin: 0; color: #333;'>Environment Step 4-7:</h3>
84
- </div>
85
- <h4 style='margin-top: 10px; margin-bottom: 5px; color: #444;'>Planning:</h4>
86
- <ol start="4" style='padding-left: 20px; margin: 0; color: #555;'>
87
- <li>Move leftward by 0.25.</li>
88
- <li>Move leftward by 0.25.</li>
89
- <li>Move forward by 0.25.</li>
90
- <li>Move forward by 0.25.</li>
91
- </ol>
92
- </div>
93
- """)
 
 
 
94
 
95
- # Middle Zone: Closed-Loop Environmental Feedback
96
- with gr.Column(scale=4, min_width=500):
97
- gr.HTML("<h2 style='text-align: center; color: #db83b5;'>Closed-Loop Environmental Feedback</h2>")
98
- with gr.Row():
99
- gr.Video(value=load_file_from_url(f"{BASE_URL}/AR/FTwan21_lora/5ZKStnWn8Zo/E014/A001/world_model_gen/bbox_gen_video_1.mp4"), label="First Person View", interactive=False)
100
- gr.Image(value=load_image_from_url(f"{BASE_URL}/scenes_glb/birdEye_5ZKStnWn8Zo.png"), label="Bird's Eye View", type="pil", interactive=False)
101
- # gr.Model3D(value=load_file_from_url(f"{BASE_URL}/scenes_glb/5ZKStnWn8Zo.glb"), label="3D Scene", interactive=False)
102
 
103
- # Right Zone: World Model's Generation
104
- with gr.Column(scale=3, min_width=400):
105
- gr.HTML("<h2 style='text-align: center;'>World Model's Generation</h2>")
106
- # Using the new video path provided by the user
107
- gr.Video(value=load_file_from_url(f"{BASE_URL}/AR/FTwan21_lora/5ZKStnWn8Zo/E014/A005/world_model_gen/obj_centered_gen_video_1.mp4"), label="Generated View", interactive=False)
108
 
109
 
110
  with gr.TabItem("📊 Leaderboard"):
 
61
 
62
  with gr.Tabs():
63
  with gr.TabItem("🧑‍🏫 Interactive Demo"):
64
+ with open("src/display/demo_new.html", "r", encoding="utf-8") as f:
65
+ html_content = f.read()
66
+ gr.HTML(html_content)
67
+ # with gr.Row():
68
+ # # Left Zone: Agent's View
69
+ # with gr.Column(scale=2, min_width=350):
70
+ # gr.HTML("<h2 style='text-align: center;'>Agent's View</h2>")
71
+ # # Mimicking the blue instruction box from the image
72
+ # gr.HTML("""
73
+ # <div style='background-color: #e6f3ff; border: 1px solid #b3d9ff; border-radius: 8px; padding: 15px; font-family: sans-serif;'>
74
+ # <div style='display: flex; align-items: center; margin-bottom: 10px;'>
75
+ # <span style='font-size: 24px; margin-right: 10px;'>🧠</span>
76
+ # <h3 style='margin: 0; color: #333;'>Instruction:</h3>
77
+ # </div>
78
+ # <p style='margin: 0; color: #555;'>Navigate to the Toaster in the room and be as close as possible to it.</p>
79
+ # </div>
80
+ # """)
81
+ # # Mimicking the grey planning box from the image
82
+ # gr.HTML("""
83
+ # <div style='background-color: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-top: 20px; font-family: sans-serif;'>
84
+ # <div style='display: flex; align-items: center; margin-bottom: 10px;'>
85
+ # <span style='font-size: 24px; margin-right: 10px;'>🦾</span>
86
+ # <h3 style='margin: 0; color: #333;'>Environment Step 4-7:</h3>
87
+ # </div>
88
+ # <h4 style='margin-top: 10px; margin-bottom: 5px; color: #444;'>Planning:</h4>
89
+ # <ol start="4" style='padding-left: 20px; margin: 0; color: #555;'>
90
+ # <li>Move leftward by 0.25.</li>
91
+ # <li>Move leftward by 0.25.</li>
92
+ # <li>Move forward by 0.25.</li>
93
+ # <li>Move forward by 0.25.</li>
94
+ # </ol>
95
+ # </div>
96
+ # """)
97
 
98
+ # # Middle Zone: Closed-Loop Environmental Feedback
99
+ # with gr.Column(scale=4, min_width=500):
100
+ # gr.HTML("<h2 style='text-align: center; color: #db83b5;'>Closed-Loop Environmental Feedback</h2>")
101
+ # with gr.Row():
102
+ # gr.Video(value=load_file_from_url(f"{BASE_URL}/AR/FTwan21_lora/5ZKStnWn8Zo/E014/A001/world_model_gen/bbox_gen_video_1.mp4"), label="First Person View", interactive=False)
103
+ # gr.Image(value=load_image_from_url(f"{BASE_URL}/scenes_glb/birdEye_5ZKStnWn8Zo.png"), label="Bird's Eye View", type="pil", interactive=False)
104
+ # # gr.Model3D(value=load_file_from_url(f"{BASE_URL}/scenes_glb/5ZKStnWn8Zo.glb"), label="3D Scene", interactive=False)
105
 
106
+ # # Right Zone: World Model's Generation
107
+ # with gr.Column(scale=3, min_width=400):
108
+ # gr.HTML("<h2 style='text-align: center;'>World Model's Generation</h2>")
109
+ # # Using the new video path provided by the user
110
+ # gr.Video(value=load_file_from_url(f"{BASE_URL}/AR/FTwan21_lora/5ZKStnWn8Zo/E014/A005/world_model_gen/obj_centered_gen_video_1.mp4"), label="Generated View", interactive=False)
111
 
112
 
113
  with gr.TabItem("📊 Leaderboard"):