Hugging Face's logo

Spaces:
Yuxihenry
/
SpatialTrackerV2
Running on Zero

App Files Community
6
xiaoyuxi commited on
Commit
a2d92a0
·
1 Parent(s): 1b4cfe7

vggt_da

Browse files
Files changed (2) hide show
  1. _viz/viz_template.html +25 -26
  2. app.py +2 -1
_viz/viz_template.html CHANGED
@@ -81,6 +81,7 @@
81
  display: flex;
82
  gap: 8px;
83
  align-items: center;
 
84
  pointer-events: auto;
85
  box-shadow: 0 4px 10px var(--shadow);
86
  backdrop-filter: blur(4px);
@@ -88,7 +89,7 @@
88
  }
89
 
90
  #timeline {
91
- width: 200px;
92
  height: 4px;
93
  background: rgba(255, 255, 255, 0.1);
94
  border-radius: 2px;
@@ -249,8 +250,8 @@
249
  }
250
 
251
  .settings-group h3 {
252
- margin: 0 0 4px 0;
253
- font-size: 7px;
254
  font-weight: 500;
255
  color: var(--text-secondary);
256
  }
@@ -262,8 +263,8 @@
262
  }
263
 
264
  .slider-container label {
265
- min-width: 40px;
266
- font-size: 7px;
267
  }
268
 
269
  input[type="range"] {
@@ -337,7 +338,7 @@
337
  }
338
 
339
  .checkbox-container label {
340
- font-size: 7px;
341
  cursor: pointer;
342
  }
343
 
@@ -376,8 +377,8 @@
376
  }
377
 
378
  #loading-text {
379
- margin-top: 8px;
380
- font-size: 9px;
381
  color: var(--text);
382
  font-weight: 500;
383
  }
@@ -441,7 +442,7 @@
441
  }
442
 
443
  h2 {
444
- font-size: 0.6rem;
445
  font-weight: 600;
446
  margin-top: 0;
447
  margin-bottom: 12px;
@@ -453,7 +454,7 @@
453
  }
454
 
455
  .drag-handle {
456
- font-size: 7px;
457
  margin-right: 4px;
458
  opacity: 0.6;
459
  }
@@ -473,7 +474,7 @@
473
  color: var(--primary);
474
  border: 1px solid rgba(155, 89, 182, 0.2);
475
  font-weight: 600;
476
- font-size: 6px;
477
  padding: 4px 6px;
478
  transition: all 0.2s;
479
  }
@@ -484,6 +485,14 @@
484
  transform: translateY(-2px);
485
  box-shadow: 0 4px 8px rgba(155, 89, 182, 0.3);
486
  }
 
 
 
 
 
 
 
 
487
 
488
  #settings-panel.visible {
489
  display: block;
@@ -515,7 +524,7 @@
515
  transform: translateX(-50%);
516
  background: var(--primary);
517
  color: white;
518
- font-size: 6px;
519
  padding: 2px 4px;
520
  border-radius: 2px;
521
  opacity: 0;
@@ -534,31 +543,23 @@
534
  display: flex;
535
  margin-top: 8px;
536
  }
537
-
538
- #reset-view-btn, #reset-settings-btn {
539
  background: var(--primary-light);
540
  color: var(--primary);
541
  border: 1px solid rgba(155, 89, 182, 0.2);
542
  font-weight: 600;
543
- font-size: 6px;
544
  padding: 4px 6px;
545
  transition: all 0.2s;
546
  }
547
 
548
- #reset-view-btn:hover, #reset-settings-btn:hover {
549
  background: var(--primary);
550
  color: white;
551
  transform: translateY(-2px);
552
  box-shadow: 0 4px 8px rgba(155, 89, 182, 0.3);
553
  }
554
-
555
- #show-settings-btn {
556
- position: absolute;
557
- top: 16px;
558
- right: 16px;
559
- z-index: 15;
560
- display: none;
561
- }
562
  </style>
563
  </head>
564
  <body>
@@ -961,8 +962,6 @@
961
  if (this.ui.frustumSize) {
962
  this.ui.frustumSize.addEventListener('input', () => this.updateFrustumDimensions());
963
  }
964
-
965
- this.makeElementDraggable(this.ui.settingsPanel);
966
 
967
  if (this.ui.hideSettingsBtn && this.ui.showSettingsBtn && this.ui.settingsPanel) {
968
  this.ui.hideSettingsBtn.addEventListener('click', () => {
 
81
  display: flex;
82
  gap: 8px;
83
  align-items: center;
84
+ justify-content: space-between;
85
  pointer-events: auto;
86
  box-shadow: 0 4px 10px var(--shadow);
87
  backdrop-filter: blur(4px);
 
89
  }
90
 
91
  #timeline {
92
+ width: 150px;
93
  height: 4px;
94
  background: rgba(255, 255, 255, 0.1);
95
  border-radius: 2px;
 
250
  }
251
 
252
  .settings-group h3 {
253
+ margin: 0 0 6px 0;
254
+ font-size: 10px;
255
  font-weight: 500;
256
  color: var(--text-secondary);
257
  }
 
263
  }
264
 
265
  .slider-container label {
266
+ min-width: 60px;
267
+ font-size: 10px;
268
  }
269
 
270
  input[type="range"] {
 
338
  }
339
 
340
  .checkbox-container label {
341
+ font-size: 10px;
342
  cursor: pointer;
343
  }
344
 
 
377
  }
378
 
379
  #loading-text {
380
+ margin-top: 16px;
381
+ font-size: 18px;
382
  color: var(--text);
383
  font-weight: 500;
384
  }
 
442
  }
443
 
444
  h2 {
445
+ font-size: 0.9rem;
446
  font-weight: 600;
447
  margin-top: 0;
448
  margin-bottom: 12px;
 
454
  }
455
 
456
  .drag-handle {
457
+ font-size: 10px;
458
  margin-right: 4px;
459
  opacity: 0.6;
460
  }
 
474
  color: var(--primary);
475
  border: 1px solid rgba(155, 89, 182, 0.2);
476
  font-weight: 600;
477
+ font-size: 9px;
478
  padding: 4px 6px;
479
  transition: all 0.2s;
480
  }
 
485
  transform: translateY(-2px);
486
  box-shadow: 0 4px 8px rgba(155, 89, 182, 0.3);
487
  }
488
+
489
+ #show-settings-btn {
490
+ position: absolute;
491
+ top: 16px;
492
+ right: 16px;
493
+ z-index: 15;
494
+ display: none;
495
+ }
496
 
497
  #settings-panel.visible {
498
  display: block;
 
524
  transform: translateX(-50%);
525
  background: var(--primary);
526
  color: white;
527
+ font-size: 9px;
528
  padding: 2px 4px;
529
  border-radius: 2px;
530
  opacity: 0;
 
543
  display: flex;
544
  margin-top: 8px;
545
  }
546
+
547
+ #reset-settings-btn {
548
  background: var(--primary-light);
549
  color: var(--primary);
550
  border: 1px solid rgba(155, 89, 182, 0.2);
551
  font-weight: 600;
552
+ font-size: 9px;
553
  padding: 4px 6px;
554
  transition: all 0.2s;
555
  }
556
 
557
+ #reset-settings-btn:hover {
558
  background: var(--primary);
559
  color: white;
560
  transform: translateY(-2px);
561
  box-shadow: 0 4px 8px rgba(155, 89, 182, 0.3);
562
  }
 
 
 
 
 
 
 
 
563
  </style>
564
  </head>
565
  <body>
 
962
  if (this.ui.frustumSize) {
963
  this.ui.frustumSize.addEventListener('input', () => this.updateFrustumDimensions());
964
  }
 
 
965
 
966
  if (this.ui.hideSettingsBtn && this.ui.showSettingsBtn && this.ui.settingsPanel) {
967
  this.ui.hideSettingsBtn.addEventListener('click', () => {
app.py CHANGED
@@ -891,6 +891,7 @@ with gr.Blocks(
891
  )
892
 
893
  # Horizontal video examples with slider
 
894
  gr.Markdown("**Examples:** (scroll horizontally to see all videos)")
895
 
896
  # Traditional examples but with horizontal scroll styling
@@ -975,7 +976,7 @@ with gr.Blocks(
975
  label="VO Points", info="Motion accuracy"
976
  )
977
  fps = gr.Slider(
978
- minimum=1, maximum=30, step=1, value=3,
979
  label="FPS", info="Processing speed"
980
  )
981
 
 
891
  )
892
 
893
  # Horizontal video examples with slider
894
+ gr.HTML("<div style='margin-top: 20px;'></div>")
895
  gr.Markdown("**Examples:** (scroll horizontally to see all videos)")
896
 
897
  # Traditional examples but with horizontal scroll styling
 
976
  label="VO Points", info="Motion accuracy"
977
  )
978
  fps = gr.Slider(
979
+ minimum=1, maximum=20, step=1, value=3,
980
  label="FPS", info="Processing speed"
981
  )
982