Hugging Face's logo

Spaces:
Mudrock10
/
anycoder-44130152
Running

App Files Community
Mudrock10 commited on
Commit
19d0825
·
verified ·
1 Parent(s): bd2e9de

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +464 -385
index.html CHANGED
@@ -2,10 +2,12 @@
2
  <html lang="en">
3
 
4
  <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Video Extrapolation for Wide FOV Content</title>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
9
  <style>
10
  :root {
11
  --primary-color: #3b82f6;
@@ -28,7 +30,8 @@
28
  }
29
 
30
  body {
31
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
32
  line-height: 1.6;
33
  color: var(--text-color);
34
  background: var(--background-gradient);
@@ -42,7 +45,6 @@
42
  padding: 0 20px;
43
  }
44
 
45
- /* Header */
46
  header {
47
  background: rgba(255, 255, 255, 0.95);
48
  backdrop-filter: blur(10px);
@@ -87,7 +89,6 @@
87
  color: var(--primary-color);
88
  }
89
 
90
- /* Main Content */
91
  main {
92
  padding: 2rem 0;
93
  }
@@ -118,7 +119,7 @@
118
  }
119
 
120
  .section-title::after {
121
- content: '';
122
  position: absolute;
123
  bottom: -8px;
124
  left: 0;
@@ -129,7 +130,31 @@
129
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
130
  }
131
 
132
- /* Video Upload Section */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
133
  .upload-section {
134
  margin-bottom: 2.5rem;
135
  }
@@ -140,26 +165,31 @@
140
  padding: 3rem;
141
  text-align: center;
142
  transition: all 0.3s ease;
143
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
 
 
144
  position: relative;
145
  overflow: hidden;
 
146
  }
147
 
148
  .upload-container::before {
149
- content: '';
150
  position: absolute;
151
- top: 0;
152
- left: 0;
153
- right: 0;
154
- bottom: 0;
155
- background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
156
  z-index: 0;
157
  }
158
 
159
- .upload-container:hover {
160
  border-color: var(--primary-color);
161
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%);
 
 
162
  transform: scale(1.02);
 
163
  }
164
 
165
  .upload-icon {
@@ -171,15 +201,6 @@
171
  animation: float 3s ease-in-out infinite;
172
  }
173
 
174
- @keyframes float {
175
- 0%, 100% {
176
- transform: translateY(0);
177
- }
178
- 50% {
179
- transform: translateY(-10px);
180
- }
181
- }
182
-
183
  .upload-text {
184
  font-size: 1.2rem;
185
  color: var(--dark-color);
@@ -197,14 +218,15 @@
197
 
198
  .file-input {
199
  position: absolute;
 
200
  opacity: 0;
201
- width: 100%;
202
- height: 100%;
203
  cursor: pointer;
204
  }
205
 
206
  .file-input-label {
207
- display: inline-block;
 
 
208
  padding: 1rem 2rem;
209
  background: var(--primary-color);
210
  color: white;
@@ -219,13 +241,16 @@
219
  }
220
 
221
  .file-input-label::before {
222
- content: '';
223
  position: absolute;
224
  top: 0;
225
  left: -100%;
226
  width: 100%;
227
  height: 100%;
228
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
 
 
 
229
  transition: left 0.5s;
230
  }
231
 
@@ -239,6 +264,20 @@
239
  box-shadow: 0 8px 25px rgba(30, 64, 175, 0.4);
240
  }
241
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
242
  .video-preview {
243
  margin-top: 2.5rem;
244
  display: none;
@@ -249,35 +288,23 @@
249
  display: block;
250
  }
251
 
252
- @keyframes fadeIn {
253
- from {
254
- opacity: 0;
255
- transform: translateY(20px);
256
- }
257
- to {
258
- opacity: 1;
259
- transform: translateY(0);
260
- }
261
- }
262
-
263
  .video-container {
264
  position: relative;
265
  border-radius: 12px;
266
  overflow: hidden;
267
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
268
  background: var(--dark-color);
269
- position: relative;
270
  }
271
 
272
  .video-container::before {
273
- content: '';
274
  position: absolute;
275
- top: 0;
276
- left: 0;
277
- right: 0;
278
- bottom: 0;
279
- background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
280
  z-index: 1;
 
281
  }
282
 
283
  video {
@@ -287,14 +314,12 @@
287
  position: relative;
288
  z-index: 2;
289
  border-radius: 12px;
 
290
  }
291
 
292
  .video-overlay {
293
  position: absolute;
294
- top: 0;
295
- left: 0;
296
- right: 0;
297
- bottom: 0;
298
  display: flex;
299
  align-items: center;
300
  justify-content: center;
@@ -302,20 +327,21 @@
302
  z-index: 3;
303
  opacity: 0;
304
  transition: opacity 0.3s ease;
305
- border-radius: 12px;
306
  }
307
 
308
  .video-container:hover .video-overlay {
309
  opacity: 1;
310
  }
311
 
312
- .video-controls {
313
- margin-top: 1.5rem;
 
 
314
  display: flex;
315
- gap: 1.5rem;
316
- flex-wrap: wrap;
317
- justify-content: center;
318
  align-items: center;
 
 
319
  }
320
 
321
  .height-control {
@@ -327,6 +353,7 @@
327
  padding: 1rem 1.5rem;
328
  border-radius: 12px;
329
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 
330
  }
331
 
332
  .height-slider {
@@ -358,17 +385,90 @@
358
  }
359
 
360
  .height-value {
361
- min-width: 60px;
362
  text-align: center;
363
  font-weight: bold;
364
  color: var(--primary-color);
365
- font-size: 1.1rem;
366
  background: white;
367
  padding: 0.5rem 1rem;
368
  border-radius: 8px;
369
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
370
  }
371
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
372
  /* Processing Status */
373
  .processing-status {
374
  margin-top: 2rem;
@@ -385,17 +485,6 @@
385
  animation: slideIn 0.5s ease;
386
  }
387
 
388
- @keyframes slideIn {
389
- from {
390
- opacity: 0;
391
- transform: translateX(-20px);
392
- }
393
- to {
394
- opacity: 1;
395
- transform: translateX(0);
396
- }
397
- }
398
-
399
  .status-header {
400
  display: flex;
401
  align-items: center;
@@ -412,12 +501,12 @@
412
  .status-text {
413
  font-weight: 700;
414
  color: var(--processing-color);
415
- font-size: 1.2rem;
416
  }
417
 
418
  .status-steps {
419
  display: grid;
420
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
421
  gap: 1rem;
422
  }
423
 
@@ -426,37 +515,42 @@
426
  background: white;
427
  border-radius: 12px;
428
  display: flex;
429
- align-items: center;
430
- gap: 1rem;
431
  transition: all 0.3s ease;
432
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
433
  border: 2px solid transparent;
 
434
  }
435
 
436
- .status-step.completed {
437
- background: rgba(16, 185, 129, 0.1);
438
- color: var(--success-color);
439
- border-color: var(--success-color);
440
- }
441
-
442
- .status-step.active {
443
- background: rgba(139, 92, 246, 0.1);
444
- color: var(--processing-color);
445
- border-color: var(--processing-color);
446
- font-weight: 600;
447
- transform: scale(1.02);
448
  }
449
 
450
  .status-step-icon {
451
- width: 32px;
452
- height: 32px;
453
  border-radius: 50%;
454
  display: flex;
455
  align-items: center;
456
  justify-content: center;
457
- font-size: 1rem;
458
- font-weight: bold;
459
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
460
  }
461
 
462
  .status-step.completed .status-step-icon {
@@ -464,18 +558,22 @@
464
  color: white;
465
  }
466
 
 
 
 
 
 
 
 
 
467
  .status-step.active .status-step-icon {
468
  background: var(--processing-color);
469
  color: white;
470
  animation: pulse 1.5s infinite;
471
  }
472
 
473
- .status-step-name {
474
- flex: 1;
475
- }
476
-
477
  .status-step-progress {
478
- font-size: 0.9rem;
479
  color: var(--text-color);
480
  opacity: 0.7;
481
  }
@@ -498,10 +596,12 @@
498
 
499
  .progress-bar {
500
  height: 100%;
501
- background: linear-gradient(90deg, var(--processing-color) 0%, var(--accent-color) 100%);
 
 
502
  border-radius: 12px;
503
  width: 0%;
504
- transition: width 0.5s ease;
505
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
506
  }
507
 
@@ -514,7 +614,7 @@
514
  opacity: 0.7;
515
  }
516
 
517
- /* Diagram Section */
518
  .diagram-container {
519
  margin: 3rem 0;
520
  position: relative;
@@ -522,7 +622,7 @@
522
 
523
  .diagram {
524
  display: grid;
525
- grid-template-columns: repeat(3, 1fr);
526
  grid-template-rows: auto 1fr auto;
527
  gap: 1.5rem;
528
  align-items: center;
@@ -558,13 +658,16 @@
558
  }
559
 
560
  .blend-label::after {
561
- content: '';
562
  position: absolute;
563
  top: 0;
564
  left: -100%;
565
  width: 100%;
566
  height: 100%;
567
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
 
 
 
568
  transition: left 0.8s;
569
  }
570
 
@@ -577,6 +680,7 @@
577
  flex-direction: column;
578
  align-items: center;
579
  gap: 0.75rem;
 
580
  }
581
 
582
  .frame {
@@ -596,17 +700,16 @@
596
  font-size: 1rem;
597
  text-align: center;
598
  padding: 1rem;
599
- position: relative;
600
  }
601
 
602
  .frame::before {
603
- content: '';
604
  position: absolute;
605
- top: 0;
606
- left: 0;
607
- right: 0;
608
- bottom: 0;
609
- background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, transparent 50%, rgba(0, 0, 0, 0.2) 100%);
610
  z-index: 1;
611
  }
612
 
@@ -616,34 +719,14 @@
616
  font-weight: 500;
617
  }
618
 
619
- .frame.processing {
620
- border-color: var(--processing-color);
621
- background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
622
- animation: shimmer 2s infinite;
623
- }
624
-
625
- @keyframes shimmer {
626
- 0% {
627
- background-position: -1000px 0;
628
- }
629
- 100% {
630
- background-position: 1000px 0;
631
- }
632
- }
633
-
634
- .frame.completed {
635
- border-color: var(--success-color);
636
- background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
637
- }
638
-
639
  .target-frame {
640
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
641
  transform: scale(1.15) rotateY(5deg);
642
  z-index: 20;
643
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
644
  grid-column: 2;
645
  grid-row: 2;
646
- border: 3px solid var(--success-color);
647
  }
648
 
649
  .top-blend {
@@ -711,18 +794,9 @@
711
  display: block;
712
  }
713
 
714
- @keyframes slideUp {
715
- from {
716
- opacity: 0;
717
- transform: translateY(30px);
718
- }
719
- to {
720
- opacity: 1;
721
- transform: translateY(0);
722
- }
723
- }
724
-
725
  .output-content {
 
 
726
  width: 100%;
727
  height: 100%;
728
  display: flex;
@@ -733,8 +807,6 @@
733
  font-size: 1.2rem;
734
  text-align: center;
735
  padding: 1.5rem;
736
- position: relative;
737
- z-index: 2;
738
  }
739
 
740
  .output-badge {
@@ -748,92 +820,80 @@
748
  animation: pulse 2s infinite;
749
  }
750
 
751
- /* Interactive Controls */
752
- .controls {
753
- display: flex;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
754
  flex-wrap: wrap;
755
  gap: 1.5rem;
756
- margin: 3rem 0;
757
- justify-content: center;
758
  }
759
 
760
- .control-btn {
761
- padding: 1rem 2rem;
762
- border: none;
763
- border-radius: 12px;
764
- font-weight: 600;
765
- cursor: pointer;
766
- transition: all 0.3s ease;
767
  display: flex;
768
- align-items: center;
769
- gap: 0.75rem;
770
- font-size: 1.1rem;
771
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
772
- position: relative;
773
- overflow: hidden;
774
- }
775
-
776
- .control-btn::before {
777
- content: '';
778
- position: absolute;
779
- top: 50%;
780
- left: 50%;
781
- width: 0;
782
- height: 0;
783
- background: rgba(255, 255, 255, 0.2);
784
- border-radius: 50%;
785
- transform: translate(-50%, -50%);
786
- transition: width 0.6s, height 0.6s;
787
  }
788
 
789
- .control-btn:active::before {
790
- width: 300px;
791
- height: 300px;
792
- }
793
-
794
- .control-btn.primary {
795
- background: var(--primary-color);
796
- color: white;
797
- box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
798
- }
799
-
800
- .control-btn.primary:hover:not(:disabled) {
801
- background: var(--secondary-color);
802
- transform: translateY(-3px);
803
- box-shadow: 0 8px 25px rgba(30, 64, 175, 0.5);
804
  }
805
 
806
- .control-btn.secondary {
807
- background: var(--light-color);
808
- color: var(--dark-color);
809
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
810
  }
811
 
812
- .control-btn.secondary:hover:not(:disabled) {
813
- background: var(--accent-color);
814
- color: white;
815
- transform: translateY(-3px);
816
- box-shadow: 0 8px 25px rgba(96, 165, 250, 0.4);
817
  }
818
 
819
- .control-btn:disabled {
820
- opacity: 0.6;
821
- cursor: not-allowed;
822
- transform: none !important;
823
  }
824
 
825
- /* Features Section */
826
  .features {
827
  display: grid;
828
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
829
- gap: 2rem;
830
- margin: 3rem 0;
831
  }
832
 
833
  .feature-card {
834
  background: white;
835
  border-radius: 16px;
836
- padding: 2rem;
837
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
838
  transition: all 0.3s ease;
839
  border: 1px solid rgba(0, 0, 0, 0.05);
@@ -842,7 +902,7 @@
842
  }
843
 
844
  .feature-card::before {
845
- content: '';
846
  position: absolute;
847
  top: 0;
848
  left: 0;
@@ -854,7 +914,7 @@
854
  }
855
 
856
  .feature-card:hover {
857
- transform: translateY(-10px);
858
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
859
  }
860
 
@@ -863,78 +923,107 @@
863
  }
864
 
865
  .feature-icon {
866
- font-size: 2.5rem;
867
  color: var(--primary-color);
868
- margin-bottom: 1.5rem;
869
  position: relative;
870
  }
871
 
872
- .feature-icon::after {
873
- content: '';
874
- position: absolute;
875
- bottom: -10px;
876
- left: 50%;
877
- transform: translateX(-50%);
878
- width: 50px;
879
- height: 3px;
880
- background: var(--primary-color);
881
- border-radius: 2px;
882
- }
883
-
884
  .feature-title {
885
- font-size: 1.4rem;
886
- margin-bottom: 1rem;
887
  color: var(--dark-color);
888
  font-weight: 700;
889
  }
890
 
891
  .feature-description {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
892
  color: var(--text-color);
893
  opacity: 0.8;
894
- line-height: 1.8;
895
  }
896
 
897
- /* Info Cards */
898
- .info-card {
899
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
900
- border-left: 5px solid var(--primary-color);
901
- padding: 1.5rem;
902
- margin: 2rem 0;
903
- border-radius: 0 12px 12px 0;
904
- box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
905
- position: relative;
906
- overflow: hidden;
 
907
  }
908
 
909
- .info-card::before {
910
- content: '';
911
- position: absolute;
912
- top: 0;
913
- left: 0;
914
- right: 0;
915
- height: 3px;
916
- background: var(--primary-color);
917
- animation: shimmer 3s infinite;
 
918
  }
919
 
920
- /* Success Message */
921
- .success-message {
922
- display: none;
923
- padding: 1.5rem;
924
- background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
925
- border: 2px solid var(--success-color);
926
- border-radius: 16px;
927
- margin: 2rem 0;
928
- text-align: center;
929
- color: var(--success-color);
930
- font-weight: 600;
931
- font-size: 1.2rem;
932
- box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
933
- animation: bounceIn 0.5s ease;
934
  }
935
 
936
- .success-message.active {
937
- display: block;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
938
  }
939
 
940
  @keyframes bounceIn {
@@ -942,42 +1031,43 @@
942
  opacity: 0;
943
  transform: scale(0.3);
944
  }
 
945
  50% {
946
  opacity: 1;
947
  transform: scale(1.05);
948
  }
 
949
  70% {
950
  transform: scale(0.9);
951
  }
 
952
  100% {
953
  opacity: 1;
954
  transform: scale(1);
955
  }
956
  }
957
 
958
- /* Footer */
959
- footer {
960
- background: rgba(255, 255, 255, 0.95);
961
- padding: 3rem 0;
962
- margin-top: 3rem;
963
- text-align: center;
964
- border-top: 1px solid rgba(0, 0, 0, 0.05);
965
- }
966
 
967
- .footer-content {
968
- display: flex;
969
- flex-direction: column;
970
- gap: 1rem;
971
  }
972
 
973
- .footer-logo {
974
- font-size: 1.2rem;
975
- color: var(--text-color);
976
- opacity: 0.8;
977
  }
978
 
979
- /* Responsive */
980
  @media (max-width: 768px) {
 
 
 
 
981
  .diagram {
982
  grid-template-columns: 1fr;
983
  grid-template-rows: auto auto auto auto auto;
@@ -1008,69 +1098,13 @@
1008
  grid-row: 5;
1009
  }
1010
 
1011
- .controls {
1012
  flex-direction: column;
1013
  }
1014
 
1015
- .section {
1016
- padding: 2rem 1.5rem;
1017
- }
1018
-
1019
  .height-slider {
1020
  max-width: 100%;
1021
  }
1022
-
1023
- .feature-card {
1024
- padding: 1.5rem;
1025
- }
1026
- }
1027
-
1028
- /* Loading Spinner */
1029
- .spinner {
1030
- border: 4px solid rgba(0, 0, 0, 0.1);
1031
- border-left-color: var(--processing-color);
1032
- border-radius: 50%;
1033
- width: 50px;
1034
- height: 50px;
1035
- animation: spin 1s linear infinite;
1036
- margin: 2rem auto;
1037
- }
1038
-
1039
- /* Stats Display */
1040
- .stats-display {
1041
- display: flex;
1042
- justify-content: space-around;
1043
- margin: 2rem 0;
1044
- flex-wrap: wrap;
1045
- gap: 1.5rem;
1046
- }
1047
-
1048
- .stat-item {
1049
- background: white;
1050
- padding: 1.5rem;
1051
- border-radius: 12px;
1052
- box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
1053
- text-align: center;
1054
- flex: 1;
1055
- min-width: 150px;
1056
- transition: transform 0.3s ease;
1057
- }
1058
-
1059
- .stat-item:hover {
1060
- transform: translateY(-5px);
1061
- }
1062
-
1063
- .stat-value {
1064
- font-size: 2rem;
1065
- font-weight: 700;
1066
- color: var(--primary-color);
1067
- margin-bottom: 0.5rem;
1068
- }
1069
-
1070
- .stat-label {
1071
- color: var(--text-color);
1072
- opacity: 0.8;
1073
- font-size: 0.9rem;
1074
  }
1075
  </style>
1076
  </head>
@@ -1083,7 +1117,8 @@
1083
  Video Extrapolation Framework
1084
  </div>
1085
  <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">
1086
- <i class="fas fa-code"></i> Built with anycoder
 
1087
  </a>
1088
  </div>
1089
  </header>
@@ -1092,107 +1127,143 @@
1092
  <section class="section">
1093
  <h1 class="section-title">Wide FOV Video Extrapolation</h1>
1094
  <p class="info-card">
1095
- With the popularity of immersive display systems that fill the viewer's field of view (FOV) entirely, demand for
1096
- wide FOV content has increased. A video extrapolation technique based on reuse of existing videos is one of the most efficient ways to produce
1097
- wide FOV content.
1098
  </p>
1099
 
 
1100
  <div class="upload-section">
1101
  <h2 class="section-title">Upload Video</h2>
1102
- <div class="upload-container">
 
1103
  <div class="upload-icon">
1104
- <i class="fas fa-video"></i>
1105
  </div>
1106
- <p class="upload-text">Click to upload a video file or drag and drop</p>
 
 
1107
  <div class="file-input-wrapper">
1108
- <input type="file" id="videoFile" class="file-input" accept="video/*">
1109
  <label for="videoFile" class="file-input-label">
1110
- <i class="fas fa-upload"></i> Choose Video
 
1111
  </label>
1112
  </div>
1113
- <p class="info-card" style="margin-top: 1.5rem;">
1114
- Supported formats: MP4, AVI, MOV, WMV (Max file size: 100MB)
1115
  </p>
 
1116
  </div>
1117
 
 
1118
  <div class="video-preview" id="videoPreview">
1119
  <div class="video-container">
1120
- <video id="previewVideo" controls style="width: 100%; max-height: 400px;">
1121
  Your browser does not support the video tag.
1122
  </video>
1123
  <div class="video-overlay">
1124
  <div style="text-align: center; color: white;">
1125
- <i class="fas fa-play-circle" style="font-size: 3rem; margin-bottom: 1rem;"></i>
1126
- <p>Hover to control playback</p>
1127
  </div>
1128
  </div>
1129
  </div>
 
 
 
 
 
1130
  <div class="height-control">
1131
- <label for="heightSlider">Custom Height:</label>
1132
- <input type="range" id="heightSlider" class="height-slider" min="200" max="800" value="400">
1133
  <span class="height-value" id="heightValue">400px</span>
1134
  </div>
 
1135
  <div class="video-controls">
1136
- <button class="control-btn primary" id="processBtn" onclick="processVideo()">
1137
- <i class="fas fa-play"></i> Process Video
 
1138
  </button>
1139
- <button class="control-btn secondary" id="resetBtn" onclick="resetUpload()">
1140
- <i class="fas fa-redo"></i> Reset
 
1141
  </button>
1142
  </div>
1143
  </div>
1144
  </div>
1145
 
 
1146
  <div class="processing-status" id="processingStatus">
1147
  <div class="status-header">
1148
  <i class="fas fa-spinner status-icon"></i>
1149
- <span class="status-text">Processing Video...</span>
1150
  </div>
1151
  <div class="status-steps">
1152
  <div class="status-step active" id="step1">
1153
- <div class="status-step-icon">1</div>
1154
- <div class="status-step-name">Initializing video analysis</div>
 
 
 
1155
  <div class="status-step-progress">0%</div>
1156
  </div>
 
1157
  <div class="status-step" id="step2">
1158
- <div class="status-step-icon">2</div>
1159
- <div class="status-step-name">Extracting 3D scene points</div>
 
 
 
1160
  <div class="status-step-progress">0%</div>
1161
  </div>
 
1162
  <div class="status-step" id="step3">
1163
- <div class="status-step-icon">3</div>
1164
- <div class="status-step-name">Matching viewpoints between frames</div>
 
 
 
1165
  <div class="status-step-progress">0%</div>
1166
  </div>
 
1167
  <div class="status-step" id="step4">
1168
- <div class="status-step-icon">4</div>
1169
- <div class="status-step-name">Applying blending algorithms</div>
 
 
 
1170
  <div class="status-step-progress">0%</div>
1171
  </div>
 
1172
  <div class="status-step" id="step5">
1173
- <div class="status-step-icon">5</div>
1174
- <div class="status-step-name">Generating wide FOV output</div>
 
 
 
1175
  <div class="status-step-progress">0%</div>
1176
  </div>
1177
  </div>
1178
  </div>
1179
 
1180
- <div class="progress-container active" id="progressContainer">
1181
  <div class="progress-bar" id="progressBar"></div>
1182
- <div class="progress-label">
1183
- <span>0%</span>
1184
- <span>100%</span>
1185
- </div>
1186
  </div>
1187
 
1188
  <div class="success-message" id="successMessage">
1189
- <i class="fas fa-check-circle"></i> Video processing completed successfully! Wide FOV content generated.
 
1190
  </div>
1191
 
1192
- <div class="stats-display" id="statsDisplay" style="display: none;">
1193
  <div class="stat-item">
1194
  <div class="stat-value" id="frameCount">0</div>
1195
- <div class="stat-label">Total Frames</div>
1196
  </div>
1197
  <div class="stat-item">
1198
  <div class="stat-value" id="processingTime">0s</div>
@@ -1204,6 +1275,7 @@
1204
  </div>
1205
  </div>
1206
 
 
1207
  <div class="diagram-container">
1208
  <div class="diagram">
1209
  <div class="blend-section top-blend">
@@ -1285,19 +1357,20 @@
1285
 
1286
  <div class="blend-arrow">
1287
  <div class="arrow"><i class="fas fa-arrow-down"></i></div>
1288
- <span style="margin: 0 1rem; font-weight: 700; font-size: 1.2rem;">Blend</span>
1289
  <div class="arrow"><i class="fas fa-arrow-down"></i></div>
1290
  </div>
1291
 
1292
  <div class="output-frame" id="outputFrame">
1293
  <div class="output-content">
1294
  <div class="output-badge">COMPLETE</div>
1295
- O<sub>target</sub> - Extrapolated Wide FOV Output
1296
  </div>
1297
  </div>
1298
  </div>
1299
  </section>
1300
 
 
1301
  <section class="section">
1302
  <h2 class="section-title">Key Features</h2>
1303
  <div class="features">
@@ -1306,8 +1379,10 @@
1306
  <i class="fas fa-cube"></i>
1307
  </div>
1308
  <h3 class="feature-title">3D Scene Understanding</h3>
1309
- <p>Utilizes three-dimensional scene points to match viewpoints between different frames, overcoming parallax
1310
- challenges with advanced computer vision algorithms.</p>
 
 
1311
  </div>
1312
 
1313
  <div class="feature-card">
@@ -1315,8 +1390,10 @@
1315
  <i class="fas fa-layer-group"></i>
1316
  </div>
1317
  <h3 class="feature-title">Multi-Frame Integration</h3>
1318
- <p>Integrates information from all frames in the input video into each frame for comprehensive scene
1319
- understanding and seamless transitions.</p>
 
 
1320
  </div>
1321
 
1322
  <div class="feature-card">
@@ -1324,10 +1401,12 @@
1324
  <i class="fas fa-magic"></i>
1325
  </div>
1326
  <h3 class="feature-title">Advanced Blending</h3>
1327
- <p>Intelligent blending algorithms create seamless extended views with natural transitions and realistic
1328
- perspective correction.</p>
 
 
1329
  </div>
1330
 
1331
  <div class="feature-card">
1332
  <div class="feature-icon">
1333
- <i class="fas fa
 
2
  <html lang="en">
3
 
4
  <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <title>Video Extrapolation for Wide FOV Content</title>
8
+ <!-- Font Awesome -->
9
+ <link rel="stylesheet"
10
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
11
  <style>
12
  :root {
13
  --primary-color: #3b82f6;
 
30
  }
31
 
32
  body {
33
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
34
+ sans-serif;
35
  line-height: 1.6;
36
  color: var(--text-color);
37
  background: var(--background-gradient);
 
45
  padding: 0 20px;
46
  }
47
 
 
48
  header {
49
  background: rgba(255, 255, 255, 0.95);
50
  backdrop-filter: blur(10px);
 
89
  color: var(--primary-color);
90
  }
91
 
 
92
  main {
93
  padding: 2rem 0;
94
  }
 
119
  }
120
 
121
  .section-title::after {
122
+ content: "";
123
  position: absolute;
124
  bottom: -8px;
125
  left: 0;
 
130
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
131
  }
132
 
133
+ .info-card {
134
+ background: linear-gradient(135deg,
135
+ rgba(255, 255, 255, 0.9) 0%,
136
+ rgba(255, 255, 255, 0.7) 100%);
137
+ border-left: 5px solid var(--primary-color);
138
+ padding: 1.5rem;
139
+ margin: 2rem 0;
140
+ border-radius: 0 12px 12px 0;
141
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
142
+ position: relative;
143
+ overflow: hidden;
144
+ }
145
+
146
+ .info-card::before {
147
+ content: "";
148
+ position: absolute;
149
+ top: 0;
150
+ left: 0;
151
+ right: 0;
152
+ height: 3px;
153
+ background: var(--primary-color);
154
+ animation: shimmer 3s infinite;
155
+ }
156
+
157
+ /* Upload Section */
158
  .upload-section {
159
  margin-bottom: 2.5rem;
160
  }
 
165
  padding: 3rem;
166
  text-align: center;
167
  transition: all 0.3s ease;
168
+ background: linear-gradient(135deg,
169
+ rgba(255, 255, 255, 0.3) 0%,
170
+ rgba(255, 255, 255, 0.1) 100%);
171
  position: relative;
172
  overflow: hidden;
173
+ cursor: pointer;
174
  }
175
 
176
  .upload-container::before {
177
+ content: "";
178
  position: absolute;
179
+ inset: 0;
180
+ background: linear-gradient(135deg,
181
+ rgba(102, 126, 234, 0.05) 0%,
182
+ rgba(118, 75, 162, 0.05) 100%);
 
183
  z-index: 0;
184
  }
185
 
186
+ .upload-container.dragover {
187
  border-color: var(--primary-color);
188
+ background: linear-gradient(135deg,
189
+ rgba(255, 255, 255, 0.6) 0%,
190
+ rgba(255, 255, 255, 0.3) 100%);
191
  transform: scale(1.02);
192
+ box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
193
  }
194
 
195
  .upload-icon {
 
201
  animation: float 3s ease-in-out infinite;
202
  }
203
 
 
 
 
 
 
 
 
 
 
204
  .upload-text {
205
  font-size: 1.2rem;
206
  color: var(--dark-color);
 
218
 
219
  .file-input {
220
  position: absolute;
221
+ inset: 0;
222
  opacity: 0;
 
 
223
  cursor: pointer;
224
  }
225
 
226
  .file-input-label {
227
+ display: inline-flex;
228
+ align-items: center;
229
+ gap: 0.6rem;
230
  padding: 1rem 2rem;
231
  background: var(--primary-color);
232
  color: white;
 
241
  }
242
 
243
  .file-input-label::before {
244
+ content: "";
245
  position: absolute;
246
  top: 0;
247
  left: -100%;
248
  width: 100%;
249
  height: 100%;
250
+ background: linear-gradient(90deg,
251
+ transparent,
252
+ rgba(255, 255, 255, 0.25),
253
+ transparent);
254
  transition: left 0.5s;
255
  }
256
 
 
264
  box-shadow: 0 8px 25px rgba(30, 64, 175, 0.4);
265
  }
266
 
267
+ .upload-hint {
268
+ font-size: 0.9rem;
269
+ opacity: 0.8;
270
+ margin-top: 0.75rem;
271
+ }
272
+
273
+ .upload-error {
274
+ margin-top: 1rem;
275
+ color: var(--error-color);
276
+ font-size: 0.95rem;
277
+ display: none;
278
+ }
279
+
280
+ /* Video preview */
281
  .video-preview {
282
  margin-top: 2.5rem;
283
  display: none;
 
288
  display: block;
289
  }
290
 
 
 
 
 
 
 
 
 
 
 
 
291
  .video-container {
292
  position: relative;
293
  border-radius: 12px;
294
  overflow: hidden;
295
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
296
  background: var(--dark-color);
 
297
  }
298
 
299
  .video-container::before {
300
+ content: "";
301
  position: absolute;
302
+ inset: 0;
303
+ background: linear-gradient(135deg,
304
+ rgba(0, 0, 0, 0.3) 0%,
305
+ rgba(0, 0, 0, 0.1) 100%);
 
306
  z-index: 1;
307
+ pointer-events: none;
308
  }
309
 
310
  video {
 
314
  position: relative;
315
  z-index: 2;
316
  border-radius: 12px;
317
+ background: black;
318
  }
319
 
320
  .video-overlay {
321
  position: absolute;
322
+ inset: 0;
 
 
 
323
  display: flex;
324
  align-items: center;
325
  justify-content: center;
 
327
  z-index: 3;
328
  opacity: 0;
329
  transition: opacity 0.3s ease;
330
+ pointer-events: none;
331
  }
332
 
333
  .video-container:hover .video-overlay {
334
  opacity: 1;
335
  }
336
 
337
+ .video-filename {
338
+ margin-top: 0.75rem;
339
+ font-size: 0.95rem;
340
+ color: var(--dark-color);
341
  display: flex;
 
 
 
342
  align-items: center;
343
+ gap: 0.5rem;
344
+ word-break: break-all;
345
  }
346
 
347
  .height-control {
 
353
  padding: 1rem 1.5rem;
354
  border-radius: 12px;
355
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
356
+ flex-wrap: wrap;
357
  }
358
 
359
  .height-slider {
 
385
  }
386
 
387
  .height-value {
388
+ min-width: 70px;
389
  text-align: center;
390
  font-weight: bold;
391
  color: var(--primary-color);
392
+ font-size: 1.05rem;
393
  background: white;
394
  padding: 0.5rem 1rem;
395
  border-radius: 8px;
396
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
397
  }
398
 
399
+ .video-controls {
400
+ margin-top: 1.5rem;
401
+ display: flex;
402
+ gap: 1.5rem;
403
+ flex-wrap: wrap;
404
+ justify-content: center;
405
+ align-items: center;
406
+ }
407
+
408
+ .control-btn {
409
+ padding: 1rem 2rem;
410
+ border: none;
411
+ border-radius: 12px;
412
+ font-weight: 600;
413
+ cursor: pointer;
414
+ transition: all 0.3s ease;
415
+ display: flex;
416
+ align-items: center;
417
+ gap: 0.75rem;
418
+ font-size: 1.05rem;
419
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
420
+ position: relative;
421
+ overflow: hidden;
422
+ }
423
+
424
+ .control-btn::before {
425
+ content: "";
426
+ position: absolute;
427
+ top: 50%;
428
+ left: 50%;
429
+ width: 0;
430
+ height: 0;
431
+ background: rgba(255, 255, 255, 0.25);
432
+ border-radius: 50%;
433
+ transform: translate(-50%, -50%);
434
+ transition: width 0.6s, height 0.6s;
435
+ }
436
+
437
+ .control-btn:active::before {
438
+ width: 260px;
439
+ height: 260px;
440
+ }
441
+
442
+ .control-btn.primary {
443
+ background: var(--primary-color);
444
+ color: white;
445
+ box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
446
+ }
447
+
448
+ .control-btn.primary:hover:not(:disabled) {
449
+ background: var(--secondary-color);
450
+ transform: translateY(-3px);
451
+ box-shadow: 0 8px 25px rgba(30, 64, 175, 0.5);
452
+ }
453
+
454
+ .control-btn.secondary {
455
+ background: var(--light-color);
456
+ color: var(--dark-color);
457
+ }
458
+
459
+ .control-btn.secondary:hover:not(:disabled) {
460
+ background: var(--accent-color);
461
+ color: white;
462
+ transform: translateY(-3px);
463
+ box-shadow: 0 8px 25px rgba(96, 165, 250, 0.4);
464
+ }
465
+
466
+ .control-btn:disabled {
467
+ opacity: 0.6;
468
+ cursor: not-allowed;
469
+ transform: none !important;
470
+ }
471
+
472
  /* Processing Status */
473
  .processing-status {
474
  margin-top: 2rem;
 
485
  animation: slideIn 0.5s ease;
486
  }
487
 
 
 
 
 
 
 
 
 
 
 
 
488
  .status-header {
489
  display: flex;
490
  align-items: center;
 
501
  .status-text {
502
  font-weight: 700;
503
  color: var(--processing-color);
504
+ font-size: 1.15rem;
505
  }
506
 
507
  .status-steps {
508
  display: grid;
509
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
510
  gap: 1rem;
511
  }
512
 
 
515
  background: white;
516
  border-radius: 12px;
517
  display: flex;
518
+ flex-direction: column;
519
+ gap: 0.35rem;
520
  transition: all 0.3s ease;
521
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
522
  border: 2px solid transparent;
523
+ font-size: 0.95rem;
524
  }
525
 
526
+ .status-step-header {
527
+ display: flex;
528
+ align-items: center;
529
+ gap: 0.75rem;
 
 
 
 
 
 
 
 
530
  }
531
 
532
  .status-step-icon {
533
+ width: 30px;
534
+ height: 30px;
535
  border-radius: 50%;
536
  display: flex;
537
  align-items: center;
538
  justify-content: center;
539
+ font-size: 0.9rem;
540
+ font-weight: 700;
541
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
542
+ background: var(--light-color);
543
+ color: var(--dark-color);
544
+ }
545
+
546
+ .status-step-message {
547
+ opacity: 0.8;
548
+ }
549
+
550
+ .status-step.completed {
551
+ background: rgba(16, 185, 129, 0.08);
552
+ color: var(--success-color);
553
+ border-color: var(--success-color);
554
  }
555
 
556
  .status-step.completed .status-step-icon {
 
558
  color: white;
559
  }
560
 
561
+ .status-step.active {
562
+ background: rgba(139, 92, 246, 0.08);
563
+ color: var(--processing-color);
564
+ border-color: var(--processing-color);
565
+ font-weight: 600;
566
+ transform: scale(1.02);
567
+ }
568
+
569
  .status-step.active .status-step-icon {
570
  background: var(--processing-color);
571
  color: white;
572
  animation: pulse 1.5s infinite;
573
  }
574
 
 
 
 
 
575
  .status-step-progress {
576
+ font-size: 0.85rem;
577
  color: var(--text-color);
578
  opacity: 0.7;
579
  }
 
596
 
597
  .progress-bar {
598
  height: 100%;
599
+ background: linear-gradient(90deg,
600
+ var(--processing-color) 0%,
601
+ var(--accent-color) 100%);
602
  border-radius: 12px;
603
  width: 0%;
604
+ transition: width 0.35s ease;
605
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
606
  }
607
 
 
614
  opacity: 0.7;
615
  }
616
 
617
+ /* Diagram (unchanged except for minor clean-up) */
618
  .diagram-container {
619
  margin: 3rem 0;
620
  position: relative;
 
622
 
623
  .diagram {
624
  display: grid;
625
+ grid-template-columns: repeat(3, minmax(0, 1fr));
626
  grid-template-rows: auto 1fr auto;
627
  gap: 1.5rem;
628
  align-items: center;
 
658
  }
659
 
660
  .blend-label::after {
661
+ content: "";
662
  position: absolute;
663
  top: 0;
664
  left: -100%;
665
  width: 100%;
666
  height: 100%;
667
+ background: linear-gradient(90deg,
668
+ transparent,
669
+ rgba(255, 255, 255, 0.25),
670
+ transparent);
671
  transition: left 0.8s;
672
  }
673
 
 
680
  flex-direction: column;
681
  align-items: center;
682
  gap: 0.75rem;
683
+ width: 100%;
684
  }
685
 
686
  .frame {
 
700
  font-size: 1rem;
701
  text-align: center;
702
  padding: 1rem;
 
703
  }
704
 
705
  .frame::before {
706
+ content: "";
707
  position: absolute;
708
+ inset: 0;
709
+ background: linear-gradient(135deg,
710
+ rgba(0, 0, 0, 0.25) 0%,
711
+ transparent 50%,
712
+ rgba(0, 0, 0, 0.25) 100%);
713
  z-index: 1;
714
  }
715
 
 
719
  font-weight: 500;
720
  }
721
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
722
  .target-frame {
723
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
724
  transform: scale(1.15) rotateY(5deg);
725
  z-index: 20;
726
+ border: 3px solid var(--success-color);
727
  grid-column: 2;
728
  grid-row: 2;
729
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
730
  }
731
 
732
  .top-blend {
 
794
  display: block;
795
  }
796
 
 
 
 
 
 
 
 
 
 
 
 
797
  .output-content {
798
+ position: relative;
799
+ z-index: 2;
800
  width: 100%;
801
  height: 100%;
802
  display: flex;
 
807
  font-size: 1.2rem;
808
  text-align: center;
809
  padding: 1.5rem;
 
 
810
  }
811
 
812
  .output-badge {
 
820
  animation: pulse 2s infinite;
821
  }
822
 
823
+ /* Stats & Success */
824
+ .success-message {
825
+ display: none;
826
+ padding: 1.5rem;
827
+ background: linear-gradient(135deg,
828
+ rgba(16, 185, 129, 0.1) 0%,
829
+ rgba(16, 185, 129, 0.05) 100%);
830
+ border: 2px solid var(--success-color);
831
+ border-radius: 16px;
832
+ margin: 2rem 0;
833
+ text-align: center;
834
+ color: var(--success-color);
835
+ font-weight: 600;
836
+ font-size: 1.1rem;
837
+ box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
838
+ animation: bounceIn 0.5s ease;
839
+ }
840
+
841
+ .success-message.active {
842
+ display: block;
843
+ }
844
+
845
+ .stats-display {
846
+ display: none;
847
+ justify-content: space-around;
848
+ margin: 2rem 0;
849
  flex-wrap: wrap;
850
  gap: 1.5rem;
 
 
851
  }
852
 
853
+ .stats-display.active {
 
 
 
 
 
 
854
  display: flex;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
855
  }
856
 
857
+ .stat-item {
858
+ background: white;
859
+ padding: 1.5rem;
860
+ border-radius: 12px;
861
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
862
+ text-align: center;
863
+ flex: 1;
864
+ min-width: 150px;
865
+ transition: transform 0.3s ease;
 
 
 
 
 
 
866
  }
867
 
868
+ .stat-item:hover {
869
+ transform: translateY(-5px);
 
 
870
  }
871
 
872
+ .stat-value {
873
+ font-size: 1.9rem;
874
+ font-weight: 700;
875
+ color: var(--primary-color);
876
+ margin-bottom: 0.4rem;
877
  }
878
 
879
+ .stat-label {
880
+ color: var(--text-color);
881
+ opacity: 0.8;
882
+ font-size: 0.9rem;
883
  }
884
 
885
+ /* Features (kept short) */
886
  .features {
887
  display: grid;
888
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
889
+ gap: 1.75rem;
890
+ margin-top: 2rem;
891
  }
892
 
893
  .feature-card {
894
  background: white;
895
  border-radius: 16px;
896
+ padding: 1.75rem;
897
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
898
  transition: all 0.3s ease;
899
  border: 1px solid rgba(0, 0, 0, 0.05);
 
902
  }
903
 
904
  .feature-card::before {
905
+ content: "";
906
  position: absolute;
907
  top: 0;
908
  left: 0;
 
914
  }
915
 
916
  .feature-card:hover {
917
+ transform: translateY(-8px);
918
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
919
  }
920
 
 
923
  }
924
 
925
  .feature-icon {
926
+ font-size: 2.3rem;
927
  color: var(--primary-color);
928
+ margin-bottom: 1.3rem;
929
  position: relative;
930
  }
931
 
 
 
 
 
 
 
 
 
 
 
 
 
932
  .feature-title {
933
+ font-size: 1.3rem;
934
+ margin-bottom: 0.7rem;
935
  color: var(--dark-color);
936
  font-weight: 700;
937
  }
938
 
939
  .feature-description {
940
+ color: var(--text-color);
941
+ opacity: 0.85;
942
+ line-height: 1.7;
943
+ font-size: 0.98rem;
944
+ }
945
+
946
+ footer {
947
+ background: rgba(255, 255, 255, 0.95);
948
+ padding: 2.5rem 0;
949
+ margin-top: 3rem;
950
+ text-align: center;
951
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
952
+ }
953
+
954
+ .footer-content {
955
+ display: flex;
956
+ flex-direction: column;
957
+ gap: 1rem;
958
+ }
959
+
960
+ .footer-logo {
961
+ font-size: 1.1rem;
962
  color: var(--text-color);
963
  opacity: 0.8;
 
964
  }
965
 
966
+ /* Animations & media queries */
967
+ @keyframes float {
968
+
969
+ 0%,
970
+ 100% {
971
+ transform: translateY(0);
972
+ }
973
+
974
+ 50% {
975
+ transform: translateY(-10px);
976
+ }
977
  }
978
 
979
+ @keyframes fadeIn {
980
+ from {
981
+ opacity: 0;
982
+ transform: translateY(20px);
983
+ }
984
+
985
+ to {
986
+ opacity: 1;
987
+ transform: translateY(0);
988
+ }
989
  }
990
 
991
+ @keyframes slideIn {
992
+ from {
993
+ opacity: 0;
994
+ transform: translateX(-20px);
995
+ }
996
+
997
+ to {
998
+ opacity: 1;
999
+ transform: translateX(0);
1000
+ }
 
 
 
 
1001
  }
1002
 
1003
+ @keyframes slideUp {
1004
+ from {
1005
+ opacity: 0;
1006
+ transform: translateY(30px);
1007
+ }
1008
+
1009
+ to {
1010
+ opacity: 1;
1011
+ transform: translateY(0);
1012
+ }
1013
+ }
1014
+
1015
+ @keyframes pulse {
1016
+ 0% {
1017
+ transform: scale(1);
1018
+ }
1019
+
1020
+ 50% {
1021
+ transform: scale(1.08);
1022
+ }
1023
+
1024
+ 100% {
1025
+ transform: scale(1);
1026
+ }
1027
  }
1028
 
1029
  @keyframes bounceIn {
 
1031
  opacity: 0;
1032
  transform: scale(0.3);
1033
  }
1034
+
1035
  50% {
1036
  opacity: 1;
1037
  transform: scale(1.05);
1038
  }
1039
+
1040
  70% {
1041
  transform: scale(0.9);
1042
  }
1043
+
1044
  100% {
1045
  opacity: 1;
1046
  transform: scale(1);
1047
  }
1048
  }
1049
 
1050
+ @keyframes shimmer {
1051
+ 0% {
1052
+ transform: translateX(-100%);
1053
+ }
 
 
 
 
1054
 
1055
+ 100% {
1056
+ transform: translateX(100%);
1057
+ }
 
1058
  }
1059
 
1060
+ @keyframes spin {
1061
+ to {
1062
+ transform: rotate(360deg);
1063
+ }
1064
  }
1065
 
 
1066
  @media (max-width: 768px) {
1067
+ .section {
1068
+ padding: 2rem 1.5rem;
1069
+ }
1070
+
1071
  .diagram {
1072
  grid-template-columns: 1fr;
1073
  grid-template-rows: auto auto auto auto auto;
 
1098
  grid-row: 5;
1099
  }
1100
 
1101
+ .video-controls {
1102
  flex-direction: column;
1103
  }
1104
 
 
 
 
 
1105
  .height-slider {
1106
  max-width: 100%;
1107
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1108
  }
1109
  </style>
1110
  </head>
 
1117
  Video Extrapolation Framework
1118
  </div>
1119
  <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">
1120
+ <i class="fas fa-code"></i>
1121
+ Built with anycoder
1122
  </a>
1123
  </div>
1124
  </header>
 
1127
  <section class="section">
1128
  <h1 class="section-title">Wide FOV Video Extrapolation</h1>
1129
  <p class="info-card">
1130
+ With the popularity of immersive display systems that fill the viewer's field of view (FOV) entirely, demand
1131
+ for wide FOV content has increased. A video extrapolation technique based on reuse of existing videos is one of
1132
+ the most efficient ways to produce wide FOV content.
1133
  </p>
1134
 
1135
+ <!-- Upload Section -->
1136
  <div class="upload-section">
1137
  <h2 class="section-title">Upload Video</h2>
1138
+
1139
+ <div class="upload-container" id="uploadZone">
1140
  <div class="upload-icon">
1141
+ <i class="fas fa-cloud-upload-alt"></i>
1142
  </div>
1143
+ <p class="upload-text">
1144
+ Drag &amp; drop a video file here, or click to browse
1145
+ </p>
1146
  <div class="file-input-wrapper">
1147
+ <input type="file" id="videoFile" class="file-input" accept="video/*" />
1148
  <label for="videoFile" class="file-input-label">
1149
+ <i class="fas fa-folder-open"></i>
1150
+ <span>Select Video</span>
1151
  </label>
1152
  </div>
1153
+ <p class="upload-hint">
1154
+ Supported formats: MP4, WebM, Ogg, MOV (browser-supported only, max size: 100&nbsp;MB)
1155
  </p>
1156
+ <div class="upload-error" id="uploadError"></div>
1157
  </div>
1158
 
1159
+ <!-- Preview -->
1160
  <div class="video-preview" id="videoPreview">
1161
  <div class="video-container">
1162
+ <video id="previewVideo" controls playsinline>
1163
  Your browser does not support the video tag.
1164
  </video>
1165
  <div class="video-overlay">
1166
  <div style="text-align: center; color: white;">
1167
+ <i class="fas fa-play-circle" style="font-size: 3rem; margin-bottom: 0.5rem;"></i>
1168
+ <p>Hover to reveal overlay, use native controls to play</p>
1169
  </div>
1170
  </div>
1171
  </div>
1172
+ <div class="video-filename" id="videoFilename" style="display:none;">
1173
+ <i class="fas fa-file-video"></i>
1174
+ <span></span>
1175
+ </div>
1176
+
1177
  <div class="height-control">
1178
+ <label for="heightSlider">Preview Height</label>
1179
+ <input type="range" id="heightSlider" class="height-slider" min="200" max="800" value="400" />
1180
  <span class="height-value" id="heightValue">400px</span>
1181
  </div>
1182
+
1183
  <div class="video-controls">
1184
+ <button class="control-btn primary" id="processBtn">
1185
+ <i class="fas fa-play"></i>
1186
+ <span>Process Video</span>
1187
  </button>
1188
+ <button class="control-btn secondary" id="resetBtn">
1189
+ <i class="fas fa-redo"></i>
1190
+ <span>Reset</span>
1191
  </button>
1192
  </div>
1193
  </div>
1194
  </div>
1195
 
1196
+ <!-- Processing status -->
1197
  <div class="processing-status" id="processingStatus">
1198
  <div class="status-header">
1199
  <i class="fas fa-spinner status-icon"></i>
1200
+ <span class="status-text" id="statusMainText">Processing Video...</span>
1201
  </div>
1202
  <div class="status-steps">
1203
  <div class="status-step active" id="step1">
1204
+ <div class="status-step-header">
1205
+ <div class="status-step-icon">1</div>
1206
+ <div class="status-step-title">Initializing analysis</div>
1207
+ </div>
1208
+ <div class="status-step-message">Preparing frames and metadata.</div>
1209
  <div class="status-step-progress">0%</div>
1210
  </div>
1211
+
1212
  <div class="status-step" id="step2">
1213
+ <div class="status-step-header">
1214
+ <div class="status-step-icon">2</div>
1215
+ <div class="status-step-title">Extracting 3D scene points</div>
1216
+ </div>
1217
+ <div class="status-step-message">Estimating structure from motion.</div>
1218
  <div class="status-step-progress">0%</div>
1219
  </div>
1220
+
1221
  <div class="status-step" id="step3">
1222
+ <div class="status-step-header">
1223
+ <div class="status-step-icon">3</div>
1224
+ <div class="status-step-title">Matching viewpoints</div>
1225
+ </div>
1226
+ <div class="status-step-message">Aligning multiple camera poses.</div>
1227
  <div class="status-step-progress">0%</div>
1228
  </div>
1229
+
1230
  <div class="status-step" id="step4">
1231
+ <div class="status-step-header">
1232
+ <div class="status-step-icon">4</div>
1233
+ <div class="status-step-title">Applying blending algorithms</div>
1234
+ </div>
1235
+ <div class="status-step-message">Synthesizing extended views.</div>
1236
  <div class="status-step-progress">0%</div>
1237
  </div>
1238
+
1239
  <div class="status-step" id="step5">
1240
+ <div class="status-step-header">
1241
+ <div class="status-step-icon">5</div>
1242
+ <div class="status-step-title">Generating wide FOV output</div>
1243
+ </div>
1244
+ <div class="status-step-message">Final reconstruction and export.</div>
1245
  <div class="status-step-progress">0%</div>
1246
  </div>
1247
  </div>
1248
  </div>
1249
 
1250
+ <div class="progress-container" id="progressContainer">
1251
  <div class="progress-bar" id="progressBar"></div>
1252
+ </div>
1253
+ <div class="progress-label" id="progressLabel" style="display:none;">
1254
+ <span id="progressPercentText">0%</span>
1255
+ <span>100%</span>
1256
  </div>
1257
 
1258
  <div class="success-message" id="successMessage">
1259
+ <i class="fas fa-check-circle"></i>
1260
+ <span>Video processing completed successfully. Wide FOV content simulated.</span>
1261
  </div>
1262
 
1263
+ <div class="stats-display" id="statsDisplay">
1264
  <div class="stat-item">
1265
  <div class="stat-value" id="frameCount">0</div>
1266
+ <div class="stat-label">Estimated Frames</div>
1267
  </div>
1268
  <div class="stat-item">
1269
  <div class="stat-value" id="processingTime">0s</div>
 
1275
  </div>
1276
  </div>
1277
 
1278
+ <!-- Diagram & output -->
1279
  <div class="diagram-container">
1280
  <div class="diagram">
1281
  <div class="blend-section top-blend">
 
1357
 
1358
  <div class="blend-arrow">
1359
  <div class="arrow"><i class="fas fa-arrow-down"></i></div>
1360
+ <span style="margin: 0 1rem; font-weight: 700; font-size: 1.15rem;">Blend</span>
1361
  <div class="arrow"><i class="fas fa-arrow-down"></i></div>
1362
  </div>
1363
 
1364
  <div class="output-frame" id="outputFrame">
1365
  <div class="output-content">
1366
  <div class="output-badge">COMPLETE</div>
1367
+ O<sub>target</sub> – Extrapolated Wide FOV Output (Demo)
1368
  </div>
1369
  </div>
1370
  </div>
1371
  </section>
1372
 
1373
+ <!-- Features -->
1374
  <section class="section">
1375
  <h2 class="section-title">Key Features</h2>
1376
  <div class="features">
 
1379
  <i class="fas fa-cube"></i>
1380
  </div>
1381
  <h3 class="feature-title">3D Scene Understanding</h3>
1382
+ <p class="feature-description">
1383
+ Utilizes three-dimensional scene points to match viewpoints between different frames, overcoming parallax
1384
+ challenges with advanced computer vision algorithms.
1385
+ </p>
1386
  </div>
1387
 
1388
  <div class="feature-card">
 
1390
  <i class="fas fa-layer-group"></i>
1391
  </div>
1392
  <h3 class="feature-title">Multi-Frame Integration</h3>
1393
+ <p class="feature-description">
1394
+ Integrates information from all frames in the input video into each frame for comprehensive scene
1395
+ understanding and seamless transitions.
1396
+ </p>
1397
  </div>
1398
 
1399
  <div class="feature-card">
 
1401
  <i class="fas fa-magic"></i>
1402
  </div>
1403
  <h3 class="feature-title">Advanced Blending</h3>
1404
+ <p class="feature-description">
1405
+ Intelligent blending algorithms create seamless extended views with natural transitions and realistic
1406
+ perspective correction.
1407
+ </p>
1408
  </div>
1409
 
1410
  <div class="feature-card">
1411
  <div class="feature-icon">
1412
+ <i class="fas fa-tachometer