ui

app.py

@@ -661,6 +661,13 @@ with gr.Blocks(
         padding: 20px;
         box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     }
+    /* 移除 gr.Group 的默认灰色背景 */
+    .gr-form {
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+        padding: 0 !important;
+    }
     /* 固定3D可视化器尺寸 */
     #viz_container {
         height: 650px !important;
@@ -707,152 +714,115 @@ with gr.Blocks(
         height: 260px !important;
         max-height: 260px !important;
     }
-    /* 水平滚动的示例视频样式 */
-    .example-videos .gr-examples {
-        overflow: visible !important;
-    }
-    .example-videos .gr-examples .gr-table-wrapper {
-        overflow-x: auto !important;
-        overflow-y: hidden !important;
-        scrollbar-width: thin;
-        scrollbar-color: #667eea #f1f1f1;
-    }
-    .example-videos .gr-examples .gr-table-wrapper::-webkit-scrollbar {
-        height: 8px;
-    }
-    .example-videos .gr-examples .gr-table-wrapper::-webkit-scrollbar-track {
-        background: #f1f1f1;
-        border-radius: 4px;
-    }
-    .example-videos .gr-examples .gr-table-wrapper::-webkit-scrollbar-thumb {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 4px;
-    }
-    .example-videos .gr-examples .gr-table-wrapper::-webkit-scrollbar-thumb:hover {
-        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
-    }
-    .example-videos .gr-examples .gr-table {
-        display: flex !important;
-        flex-wrap: nowrap !important;
-        min-width: max-content !important;
-        gap: 10px !important;
-    }
-    .example-videos .gr-examples .gr-table tbody {
-        display: flex !important;
-        flex-direction: row !important;
-        flex-wrap: nowrap !important;
-        gap: 10px !important;
-    }
-    .example-videos .gr-examples .gr-table tbody tr {
-        display: flex !important;
-        flex-direction: column !important;
-        min-width: 120px !important;
-        max-width: 120px !important;
-        margin: 0 !important;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        transition: all 0.3s ease;
-        cursor: pointer;
-    }
-    .example-videos .gr-examples .gr-table tbody tr:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
-    }
-    .example-videos .gr-examples .gr-table tbody tr td {
-        text-align: center !important;
-        padding: 8px !important;
+    /* 强力移除examples的灰色背景 - 使用更通用的选择器 */
+    .horizontal-examples,
+    .horizontal-examples > *,
+    .horizontal-examples * {
+        background: transparent !important;
+        background-color: transparent !important;
         border: none !important;
     }
-    .example-videos .gr-examples .gr-table tbody tr td video {
-        border-radius: 6px !important;
-        width: 100% !important;
-        height: auto !important;
-    }
-    .example-videos .gr-examples .gr-table tbody tr td:last-child {
-        font-size: 12px !important;
-        font-weight: 500 !important;
-        color: #333 !important;
-        padding-top: 4px !important;
-    }
     
-    /* 新的水平滚动示例视频样式 */
-    .horizontal-examples .gr-examples {
-        overflow: visible !important;
+    /* Examples组件水平滚动样式 */
+    .horizontal-examples [data-testid="examples"] {
+        background: transparent !important;
+        background-color: transparent !important;
     }
-    .horizontal-examples .gr-examples .gr-table-wrapper {
+    
+    .horizontal-examples [data-testid="examples"] > div {
+        background: transparent !important;
+        background-color: transparent !important;
         overflow-x: auto !important;
         overflow-y: hidden !important;
         scrollbar-width: thin;
-        scrollbar-color: #667eea #f1f1f1;
-        padding: 10px 0;
-    }
-    .horizontal-examples .gr-examples .gr-table-wrapper::-webkit-scrollbar {
-        height: 8px;
-    }
-    .horizontal-examples .gr-examples .gr-table-wrapper::-webkit-scrollbar-track {
-        background: #f1f1f1;
-        border-radius: 4px;
-    }
-    .horizontal-examples .gr-examples .gr-table-wrapper::-webkit-scrollbar-thumb {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 4px;
-    }
-    .horizontal-examples .gr-examples .gr-table-wrapper::-webkit-scrollbar-thumb:hover {
-        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+        scrollbar-color: #667eea transparent;
+        padding: 0 !important;
+        margin-top: 10px;
+        border: none !important;
     }
-    .horizontal-examples .gr-examples .gr-table {
+    
+    .horizontal-examples [data-testid="examples"] table {
         display: flex !important;
         flex-wrap: nowrap !important;
         min-width: max-content !important;
         gap: 15px !important;
-        padding-bottom: 10px;
+        padding: 10px 0;
+        background: transparent !important;
+        border: none !important;
     }
-    .horizontal-examples .gr-examples .gr-table tbody {
+    
+    .horizontal-examples [data-testid="examples"] tbody {
         display: flex !important;
         flex-direction: row !important;
         flex-wrap: nowrap !important;
         gap: 15px !important;
+        background: transparent !important;
     }
-    .horizontal-examples .gr-examples .gr-table tbody tr {
+    
+    .horizontal-examples [data-testid="examples"] tr {
         display: flex !important;
         flex-direction: column !important;
         min-width: 160px !important;
         max-width: 160px !important;
         margin: 0 !important;
-        background: white;
+        background: white !important;
         border-radius: 12px;
         box-shadow: 0 3px 12px rgba(0,0,0,0.12);
         transition: all 0.3s ease;
         cursor: pointer;
         overflow: hidden;
+        border: none !important;
     }
-    .horizontal-examples .gr-examples .gr-table tbody tr:hover {
+    
+    .horizontal-examples [data-testid="examples"] tr:hover {
         transform: translateY(-4px);
         box-shadow: 0 8px 20px rgba(102, 126, 234, 0.25);
     }
-    .horizontal-examples .gr-examples .gr-table tbody tr td {
+    
+    .horizontal-examples [data-testid="examples"] td {
         text-align: center !important;
         padding: 0 !important;
         border: none !important;
+        background: transparent !important;
     }
-    .horizontal-examples .gr-examples .gr-table tbody tr td:first-child {
+    
+    .horizontal-examples [data-testid="examples"] td:first-child {
         padding: 0 !important;
+        background: transparent !important;
     }
-    .horizontal-examples .gr-examples .gr-table tbody tr td video {
+    
+    .horizontal-examples [data-testid="examples"] video {
         border-radius: 8px 8px 0 0 !important;
         width: 100% !important;
         height: 90px !important;
         object-fit: cover !important;
+        background: #f8f9fa !important;
     }
-    .horizontal-examples .gr-examples .gr-table tbody tr td:last-child {
+    
+    .horizontal-examples [data-testid="examples"] td:last-child {
         font-size: 11px !important;
         font-weight: 600 !important;
         color: #333 !important;
         padding: 8px 12px !important;
-        background: linear-gradient(135deg, #f8f9ff 0%, #e6f3ff 100%);
+        background: linear-gradient(135deg, #f8f9ff 0%, #e6f3ff 100%) !important;
         border-radius: 0 0 8px 8px;
     }
+    
+    /* 滚动条样式 */
+    .horizontal-examples [data-testid="examples"] > div::-webkit-scrollbar {
+        height: 8px;
+    }
+    .horizontal-examples [data-testid="examples"] > div::-webkit-scrollbar-track {
+        background: transparent;
+        border-radius: 4px;
+    }
+    .horizontal-examples [data-testid="examples"] > div::-webkit-scrollbar-thumb {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 4px;
+    }
+    .horizontal-examples [data-testid="examples"] > div::-webkit-scrollbar-thumb:hover {
+        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+    }
     """
 ) as demo:
     
@@ -891,39 +861,39 @@ with gr.Blocks(
                 )
                 
                 # Horizontal video examples with slider
-                gr.HTML("<div style='margin-top: 20px;'></div>")
-                gr.Markdown("**Examples:** (scroll horizontally to see all videos)")
+                gr.HTML("<div style='margin-top: 5px;'></div>")
                 
-                # Traditional examples but with horizontal scroll styling
-                with gr.Row(elem_classes=["horizontal-examples"]):
-                    gr.Examples(
-                        examples=[
-                            ["./examples/kiss.mp4"],
-                            ["./examples/backpack.mp4"],
-                            ["./examples/kitchen.mp4"],
-                            ["./examples/pillow.mp4"],
-                            ["./examples/handwave.mp4"],
-                            ["./examples/hockey.mp4"],
-                            ["./examples/drifting.mp4"],
-                            ["./examples/basketball.mp4"],
-                            ["./examples/ken_block_0.mp4"],
-                            ["./examples/ego_kc1.mp4"],
-                            ["./examples/vertical_place.mp4"],
-                            ["./examples/ego_teaser.mp4"],
-                            ["./examples/robot_unitree.mp4"],
-                            ["./examples/robot_3.mp4"],
-                            ["./examples/teleop2.mp4"],
-                            ["./examples/pusht.mp4"],
-                            ["./examples/cinema_0.mp4"],
-                            ["./examples/cinema_1.mp4"],
-                        ],
-                        inputs=[video_input],
-                        outputs=[video_input],
-                        fn=None,
-                        cache_examples=False,
-                        label="",
-                        examples_per_page=6  # Show 6 examples per page so they can wrap to multiple rows
-                    )
+            gr.Markdown("**Examples:** (scroll horizontally to see all videos)")
+            # Traditional examples but with horizontal scroll styling
+            with gr.Row(elem_classes=["horizontal-examples"]):
+                gr.Examples(
+                    examples=[
+                        ["./examples/kiss.mp4"],
+                        ["./examples/backpack.mp4"],
+                        ["./examples/kitchen.mp4"],
+                        ["./examples/pillow.mp4"],
+                        ["./examples/handwave.mp4"],
+                        ["./examples/hockey.mp4"],
+                        ["./examples/drifting.mp4"],
+                        ["./examples/basketball.mp4"],
+                        ["./examples/ken_block_0.mp4"],
+                        ["./examples/ego_kc1.mp4"],
+                        ["./examples/vertical_place.mp4"],
+                        ["./examples/ego_teaser.mp4"],
+                        ["./examples/robot_unitree.mp4"],
+                        ["./examples/robot_3.mp4"],
+                        ["./examples/teleop2.mp4"],
+                        ["./examples/pusht.mp4"],
+                        ["./examples/cinema_0.mp4"],
+                        ["./examples/cinema_1.mp4"],
+                    ],
+                    inputs=[video_input],
+                    outputs=[video_input],
+                    fn=None,
+                    cache_examples=False,
+                    label="",
+                    examples_per_page=6  # Show 6 examples per page so they can wrap to multiple rows
+                )
         
         with gr.Column(scale=2):
             # 3D Visualization - wider and taller to match left side