backend

app.py

@@ -485,6 +485,168 @@ with gr.Blocks(
         padding: 20px;
         box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     }
+    /* 固定视频上传组件高度 */
+    .gr-video {
+        height: 300px !important;
+        min-height: 300px !important;
+        max-height: 300px !important;
+    }
+    .gr-video video {
+        height: 260px !important;
+        max-height: 260px !important;
+        object-fit: contain !important;
+        background: #f8f9fa;
+    }
+    .gr-video .gr-video-player {
+        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;
+        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;
+    }
+    .horizontal-examples .gr-examples .gr-table-wrapper {
+        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%);
+    }
+    .horizontal-examples .gr-examples .gr-table {
+        display: flex !important;
+        flex-wrap: nowrap !important;
+        min-width: max-content !important;
+        gap: 15px !important;
+        padding-bottom: 10px;
+    }
+    .horizontal-examples .gr-examples .gr-table tbody {
+        display: flex !important;
+        flex-direction: row !important;
+        flex-wrap: nowrap !important;
+        gap: 15px !important;
+    }
+    .horizontal-examples .gr-examples .gr-table tbody tr {
+        display: flex !important;
+        flex-direction: column !important;
+        min-width: 160px !important;
+        max-width: 160px !important;
+        margin: 0 !important;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 3px 12px rgba(0,0,0,0.12);
+        transition: all 0.3s ease;
+        cursor: pointer;
+        overflow: hidden;
+    }
+    .horizontal-examples .gr-examples .gr-table tbody 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 {
+        text-align: center !important;
+        padding: 0 !important;
+        border: none !important;
+    }
+    .horizontal-examples .gr-examples .gr-table tbody tr td:first-child {
+        padding: 0 !important;
+    }
+    .horizontal-examples .gr-examples .gr-table tbody tr td video {
+        border-radius: 8px 8px 0 0 !important;
+        width: 100% !important;
+        height: 90px !important;
+        object-fit: cover !important;
+    }
+    .horizontal-examples .gr-examples .gr-table tbody tr 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%);
+        border-radius: 0 0 8px 8px;
+    }
     """
 ) as demo:
     
@@ -507,81 +669,92 @@ with gr.Blocks(
     
     # GitHub Star Reminder - Added back!
     gr.HTML("""
-    <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
-                border-radius: 15px; 
-                padding: 20px; 
-                margin: 20px 0; 
-                box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
-                border: 2px solid rgba(255,255,255,0.2);'>
-        <div style='text-align: center; color: white;'>
-            <h3 style='margin: 0 0 15px 0; font-size: 24px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);'>
+    <div style='background: linear-gradient(135deg, #e8eaff 0%, #f0f2ff 100%); 
+                border-radius: 10px; 
+                padding: 15px; 
+                margin: 15px 0; 
+                box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
+                border: 1px solid rgba(102, 126, 234, 0.15);'>
+        <div style='text-align: center; color: #4a5568;'>
+            <h3 style='margin: 0 0 10px 0; font-size: 18px; text-shadow: none; color: #2d3748;'>
                 ⭐ Love SpatialTracker? Give us a Star! ⭐
             </h3>
-            <p style='margin: 0 0 20px 0; font-size: 18px; opacity: 0.9;'>
-                Help us grow by starring our repository on GitHub! Your support means everything to us! 🚀
+            <p style='margin: 0 0 12px 0; font-size: 14px; opacity: 0.8; color: #4a5568;'>
+                Help us grow by starring our repository on GitHub! 🚀
             </p>
             <div style='display: flex; justify-content: center;'>
                 <a href="https://github.com/henry123-boy/SpaTrackerV2" 
                    target="_blank" 
                    style='display: inline-flex; 
                           align-items: center; 
-                          gap: 8px; 
-                          background: rgba(255,255,255,0.2); 
-                          color: white; 
-                          padding: 15px 30px; 
-                          border-radius: 25px; 
+                          gap: 6px; 
+                          background: rgba(102, 126, 234, 0.1); 
+                          color: #4a5568; 
+                          padding: 8px 16px; 
+                          border-radius: 20px; 
                           text-decoration: none; 
                           font-weight: bold; 
-                          font-size: 18px;
-                          backdrop-filter: blur(10px);
-                          border: 1px solid rgba(255,255,255,0.3);
+                          font-size: 14px;
+                          backdrop-filter: blur(5px);
+                          border: 1px solid rgba(102, 126, 234, 0.2);
                           transition: all 0.3s ease;'
-                   onmouseover="this.style.background='rgba(255,255,255,0.3)'; this.style.transform='translateY(-2px)'"
-                   onmouseout="this.style.background='rgba(255,255,255,0.2)'; this.style.transform='translateY(0)'">
-                    <span style='font-size: 22px;'>⭐</span>
+                   onmouseover="this.style.background='rgba(102, 126, 234, 0.15)'; this.style.transform='translateY(-1px)'"
+                   onmouseout="this.style.background='rgba(102, 126, 234, 0.1)'; this.style.transform='translateY(0)'">
+                    <span style='font-size: 16px;'>⭐</span>
                     Star on GitHub
                 </a>
             </div>
-            <p style='margin: 15px 0 0 0; font-size: 14px; opacity: 0.8;'>
-                🎉 Thank you for being part of our community! 🎉
-            </p>
         </div>
     </div>
     """)
     
     # Example videos section - moved to top
-    with gr.Group():
+    with gr.Group(elem_classes=["example-videos"]):
         gr.Markdown("### 📂 Example Videos")
         gr.Markdown("Try these example videos to get started quickly:")
         
+        # Custom horizontal scrolling video gallery
+        gr.HTML("""
+        <div style='background-color: #f8f9ff; border-radius: 8px; padding: 10px; margin: 10px 0; border-left: 4px solid #667eea;'>
+            <p style='margin: 0; font-size: 13px; color: #666; display: flex; align-items: center; gap: 8px;'>
+                <span style='font-size: 16px;'>💡</span>
+                <strong>Tip:</strong> Scroll horizontally below to see all example videos
+            </p>
+        </div>
+        """)
+        
         # Define video_input here so it can be referenced in examples
         video_input = gr.Video(
             label="Upload Video or Select Example",
-            format="mp4"
+            format="mp4",
+            height=300
         )
         
-        gr.Examples(
-            examples=[
-                ["examples/kiss.mp4"],
-                ["examples/backpack.mp4"],
-                ["examples/kitchen.mp4"],
-                ["examples/pillow.mp4"],
-                ["examples/hockey.mp4"],
-                ["examples/drifting.mp4"],
-                ["examples/ball.mp4"],
-                ["examples/ken_block_0.mp4"],
-                ["examples/ego_kc1.mp4"],
-                ["examples/vertical_place.mp4"],
-                ["examples/ego_teaser.mp4"],
-                ["examples/robot_unitree.mp4"],
-                ["examples/droid_robot.mp4"],
-                ["examples/robot_2.mp4"],
-                ["examples/cinema_0.mp4"],
-                ["examples/cinema_1.mp4"],
-            ],
-            inputs=video_input,
-            label="Click on any example to load it"
-        )
+        # Create a horizontal scrolling container for the examples
+        with gr.Group(elem_classes=["horizontal-examples"]):
+            gr.Examples(
+                examples=[
+                    ["examples/kiss.mp4"],
+                    ["examples/backpack.mp4"],
+                    ["examples/kitchen.mp4"],
+                    ["examples/pillow.mp4"],
+                    ["examples/hockey.mp4"],
+                    ["examples/drifting.mp4"],
+                    ["examples/ball.mp4"],
+                    ["examples/ken_block_0.mp4"],
+                    ["examples/ego_kc1.mp4"],
+                    ["examples/vertical_place.mp4"],
+                    ["examples/ego_teaser.mp4"],
+                    ["examples/robot_unitree.mp4"],
+                    ["examples/droid_robot.mp4"],
+                    ["examples/robot_2.mp4"],
+                    ["examples/cinema_0.mp4"],
+                    ["examples/cinema_1.mp4"],
+                ],
+                inputs=video_input,
+                label="🎬 Click on any example to load it",
+                examples_per_page=16  # Show all examples on one page
+            )
     
     with gr.Row():
         with gr.Column(scale=1):
@@ -614,7 +787,8 @@ with gr.Blocks(
                 gr.Markdown("### 🎬 Tracking Results")
                 tracking_result_video = gr.Video(
                     label="Tracking Result Video",
-                    interactive=False
+                    interactive=False,
+                    height=300
                 )
                 
             # 3D Visualization