vggt_da

app.py

@@ -986,40 +986,39 @@ with gr.Blocks(
             with gr.Group():
                 gr.Markdown("### 📂 Select Video")
                 
+                # Define video_input here so it can be referenced in examples
                 video_input = gr.Video(
                     label="Upload Video or Select Example",
                     format="mp4",
                     height=250  # Matched height with 3D viz
                 )
                 
-                # Compact horizontal examples
-                gr.Markdown("**Examples:** (scroll horizontally)")
-                with gr.Group(elem_classes=["horizontal-examples"]):
-                    gr.Examples(
-                        examples=[
-                            ["examples/kiss.mp4"],
-                            ["examples/backpack.mp4"],
-                            ["examples/pillow.mp4"],
-                            ["examples/handwave.mp4"],
-                            ["examples/hockey.mp4"],
-                            ["examples/drifting.mp4"],
-                            ["examples/ken_block_0.mp4"],
-                            ["examples/kitchen.mp4"],
-                            ["examples/basketball.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,
-                        label="",
-                        examples_per_page=18
+                # Horizontal video examples with slider
+                gr.Markdown("**Examples:** (use slider to browse)")
+                
+                # Create a horizontal slider for examples
+                with gr.Row():
+                    example_slider = gr.Slider(
+                        minimum=0,
+                        maximum=17,  # 18 examples (0-17)
+                        step=1,
+                        value=0,
+                        label="Browse Examples",
+                        info="Slide to see different example videos"
+                    )
+                
+                # Example video display
+                with gr.Row():
+                    example_video = gr.Video(
+                        label="Preview Example Video (click to load)",
+                        height=150,
+                        interactive=False,
+                        show_label=True
                     )
+                
+                # Load example button
+                with gr.Row():
+                    load_example_btn = gr.Button("📥 Load This Example", variant="secondary", size="sm")
         
         with gr.Column(scale=1):
             # 3D Visualization - moved to top right for immediate visibility
@@ -1077,11 +1076,17 @@ with gr.Blocks(
 
     # Advanced Point Selection with SAM - Collapsed by default
     with gr.Accordion("🎯 Advanced: Manual Point Selection with SAM", open=False):
-        gr.Markdown("""
-        **Use SAM (Segment Anything Model) for precise object selection:**
-        - Click on target objects in the image for SAM-guided segmentation
-        - Positive points: include these areas | Negative points: exclude these areas  
-        - Get more accurate 3D tracking results with SAM's powerful segmentation
+        gr.HTML("""
+        <div style='margin-bottom: 15px;'>
+            <h4 style='color: #667eea; font-size: 16px; font-weight: bold; margin-bottom: 10px;'>
+                🔬 Use SAM (Segment Anything Model) for Precise Object Selection
+            </h4>
+            <ul style='color: #4a5568; font-size: 14px; line-height: 1.6; margin: 0; padding-left: 20px;'>
+                <li>Click on target objects in the image for SAM-guided segmentation</li>
+                <li>Positive points: include these areas | Negative points: exclude these areas</li>
+                <li>Get more accurate 3D tracking results with SAM's powerful segmentation</li>
+            </ul>
+        </div>
         """)
         
         with gr.Row():
@@ -1124,22 +1129,55 @@ with gr.Blocks(
     # Compact footer
     gr.HTML("""
     <div style='background: linear-gradient(135deg, #e8eaff 0%, #f0f2ff 100%); 
-                border-radius: 8px; padding: 12px; margin: 10px 0; 
-                box-shadow: 0 1px 4px rgba(102, 126, 234, 0.1);
+                border-radius: 8px; padding: 20px; 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='display: flex; justify-content: space-between; align-items: center; color: #4a5568;'>
-            <div style='display: flex; align-items: center; gap: 15px;'>
-                <a href="https://github.com/henry123-boy/SpaTrackerV2" target="_blank" 
-                   style='display: flex; align-items: center; gap: 5px; text-decoration: none; color: #4a5568; font-weight: 500;'>
-                    ⭐ Star on GitHub
-                </a>
-                <span style='color: #ccc;'>|</span>
+        <div style='text-align: center; margin-bottom: 15px;'>
+            <h3 style='color: #4a5568; margin: 0 0 10px 0; font-size: 18px; font-weight: 600;'>
+                ⭐ Love SpatialTracker? Give us a Star! ⭐
+            </h3>
+            <p style='color: #666; margin: 0 0 15px 0; font-size: 14px; line-height: 1.5;'>
+                Help us grow by starring our repository on GitHub! Your support means a lot to the community. 🚀
+            </p>
+            <a href="https://github.com/henry123-boy/SpaTrackerV2" target="_blank" 
+               style='display: inline-flex; align-items: center; gap: 8px; 
+                      background: rgba(102, 126, 234, 0.1); color: #4a5568; 
+                      padding: 10px 20px; border-radius: 25px; text-decoration: none; 
+                      font-weight: bold; font-size: 14px; border: 1px solid rgba(102, 126, 234, 0.2);
+                      transition: all 0.3s ease;'
+               onmouseover="this.style.background='rgba(102, 126, 234, 0.15)'; this.style.transform='translateY(-2px)'"
+               onmouseout="this.style.background='rgba(102, 126, 234, 0.1)'; this.style.transform='translateY(0)'">
+                <span style='font-size: 16px;'>⭐</span>
+                Star SpatialTracker V2 on GitHub
+            </a>
+        </div>
+        
+        <div style='background: linear-gradient(135deg, #fff8e1 0%, #fffbf0 100%); 
+                    border-radius: 8px; padding: 15px; border: 1px solid rgba(255, 193, 7, 0.2);'>
+            <div style='text-align: center;'>
+                <h4 style='color: #5d4037; margin: 0 0 8px 0; font-size: 16px; font-weight: 600;'>
+                    📚 Acknowledgments
+                </h4>
+                <p style='color: #5d4037; margin: 0 0 10px 0; font-size: 13px; line-height: 1.4;'>
+                    Our 3D visualizer is adapted from <strong>TAPIP3D</strong>. We thank the authors for their excellent work and contribution to the computer vision community!
+                </p>
                 <a href="https://github.com/zbw001/TAPIP3D" target="_blank" 
-                   style='display: flex; align-items: center; gap: 5px; text-decoration: none; color: #4a5568; font-size: 12px;'>
-                    📚 TAPIP3D Acknowledgments
+                   style='display: inline-flex; align-items: center; gap: 6px; 
+                          background: rgba(255, 193, 7, 0.15); color: #5d4037; 
+                          padding: 8px 16px; border-radius: 20px; text-decoration: none; 
+                          font-weight: 500; font-size: 13px; border: 1px solid rgba(255, 193, 7, 0.3);
+                          transition: all 0.3s ease;'
+                   onmouseover="this.style.background='rgba(255, 193, 7, 0.25)'"
+                   onmouseout="this.style.background='rgba(255, 193, 7, 0.15)'">
+                    📚 Visit TAPIP3D Repository
                 </a>
             </div>
-            <span style='font-size: 11px; color: #666;'>Powered by SpatialTracker V2</span>
+        </div>
+        
+        <div style='text-align: center; margin-top: 10px;'>
+            <span style='font-size: 12px; color: #888; font-style: italic;'>
+                Powered by SpatialTracker V2 | Built with ❤️ for the Computer Vision Community
+            </span>
         </div>
     </div>
     """)