const DATA = {
  tasks:[
    {task:'Reconstruction', videos:[
      "assets/videos/reconstruction/000000_0.mp4",
      "assets/videos/reconstruction/001548_0.mp4",
      "assets/videos/reconstruction/001723_0.mp4",
      "assets/videos/reconstruction/1d2c5679-6798-56ac-8b31-16a8247c680c-1d2c5679-6798-56ac-8b31-16a8247c680c.mp4",
      "assets/videos/reconstruction/3bd24865-355d-53ae-8d3e-e5d36829c9cc-3bd24865-355d-53ae-8d3e-e5d36829c9cc.mp4",
      "assets/videos/reconstruction/3caeda97-b1a3-5933-b791-cf5911b1518e-3caeda97-b1a3-5933-b791-cf5911b1518e.mp4",
      "assets/videos/reconstruction/43d73511701f4b7aabe1931add01d187-43d73511701f4b7aabe1931add01d187.mp4",
      "assets/videos/reconstruction/4c0a808a-7172-5161-83ba-2ea6d92d8c86-4c0a808a-7172-5161-83ba-2ea6d92d8c86.mp4",
      "assets/videos/reconstruction/4c1ffbc1-e2f8-5383-88f0-7db29ce9df53-4c1ffbc1-e2f8-5383-88f0-7db29ce9df53.mp4",
      "assets/videos/reconstruction/6790311946d64f8f9176d9d6d41e16f7-6790311946d64f8f9176d9d6d41e16f7.mp4",
      "assets/videos/reconstruction/8fc69f27-a8e2-5dd7-82c7-299cd5687b7e-8fc69f27-a8e2-5dd7-82c7-299cd5687b7e.mp4",
      "assets/videos/reconstruction/Bird-BIRD-FlyLoop.mp4",
      "assets/videos/reconstruction/Coyote-Coyote-Die.mp4",
      "assets/videos/reconstruction/Cricket-Cricket-Attack4_mirror.mp4",
      "assets/videos/reconstruction/Jaguar-Jaguar-Attack1.mp4",
      "assets/videos/reconstruction/M003638_0.mp4",
      "assets/videos/reconstruction/M010546_0.mp4",
      "assets/videos/reconstruction/Parrot2-Parrot-Land_mirror.mp4",
      "assets/videos/reconstruction/Tricera-Tricera-Fall_mirror.mp4",
      "assets/videos/reconstruction/Tyranno-Tyranno-Run.mp4",
    ]},
    {task:'Motion Transfer', videos:[
      "assets/videos/transfer2/8e986d02-f8bd-54fd-898c-4797f39b08c7-56dadd3b-f23b-5a37-9f4e-4dc7e3d0c12b.mp4",
      "assets/videos/transfer2/8e986d02-f8bd-54fd-898c-4797f39b08c7-SPIDER-LandinHAir_mirror.mp4",
      "assets/videos/transfer2/Alligator-SPIDER-Attack1.mp4",
      "assets/videos/transfer2/Ant—56dadd3b-f23b-5a37-9f4e-4dc7e3d0c12b.mp4",
      "assets/videos/transfer2/Bear-HorseALL-Jumping_mirror.mp4",
      "assets/videos/transfer2/Bird-56dadd3b-f23b-5a37-9f4e-4dc7e3d0c12b.mp4",
      "assets/videos/transfer2/Bird-SPIDER-Attack1.mp4",
      "assets/videos/transfer2/BrownBear-56dadd3b-f23b-5a37-9f4e-4dc7e3d0c12b.mp4",
      "assets/videos/transfer2/Buffalo-04cabed5217a46f4aa75580b5643e740.mp4",
      "assets/videos/transfer2/Buffalo-BEAR-AngerySwat.mp4",
      "assets/videos/transfer2/Buffalo-BEAR-JumpBite_mirror.mp4",
      "assets/videos/transfer2/Buffalo-Dog-Back_Away.mp4",
      "assets/videos/transfer2/M012982_0-04cabed5217a46f4aa75580b5643e740.mp4",
      "assets/videos/transfer2/M012982_0-56dadd3b-f23b-5a37-9f4e-4dc7e3d0c12b.mp4",
      "assets/videos/transfer2/M012982_0-BEAR-JumpBite_mirror.mp4",
      "assets/videos/transfer2/M012982_0-Dog-Back_Away.mp4",
      "assets/videos/transfer2/M012982_0-HorseALL-Attack.mp4",
      "assets/videos/transfer2/M012982_0-HorseALL-Jumping_mirror.mp4",
      "assets/videos/transfer2/M012982_0-Scorpion-Attack_Retreat.mp4",
      "assets/videos/transfer2/M012982_0-SPIDER-LandinHAir_mirror.mp4",
      "assets/videos/transfer2/BEAR-RiseAttack_mirror_gt_form_BrownBear_to_Jaguar.mp4",
      "assets/videos/transfer2/Raindeer-Die_gt_form_Raindeer_to_3caeda97-b1a3-593.mp4"
    ]},
    {task:'Motion Generation', videos:[
      "assets/videos/generate/h264_000130_1.mp4",
      "assets/videos/generate/h264_000640_0.mp4",
      "assets/videos/generate/h264_000904_0.mp4",
      "assets/videos/generate/h264_00e6bbd9-ac53-5571-a3d9-c5d3bfdeee63-00e6bbd9-ac53-5571-a3d9-c5d3bfdeee63.mp4",
      "assets/videos/generate/h264_0f1d1f11a1644c75b1b53f004cf79dd3-0f1d1f11a1644c75b1b53f004cf79dd3.mp4",
      "assets/videos/generate/h264_156d311152924c5b82f6ff0d8cc9156c-156d311152924c5b82f6ff0d8cc9156c.mp4",
      "assets/videos/generate/h264_1b9e6848-95f6-5a6a-9656-32fb18622263-1b9e6848-95f6-5a6a-9656-32fb18622263.mp4",
      "assets/videos/generate/h264_3ad2c852-83d5-5aa4-a711-f1e161b20567-3ad2c852-83d5-5aa4-a711-f1e161b20567.mp4",
      "assets/videos/generate/h264_4e212cd4-16c8-562f-873d-0b62e7c50cc3-4e212cd4-16c8-562f-873d-0b62e7c50cc3.mp4",
      "assets/videos/generate/h264_883aedb737c44fa6956ac68c96c259f5-883aedb737c44fa6956ac68c96c259f5.mp4",
      "assets/videos/generate/h264_Bird-BIRD-FlyLoop.mp4",
      "assets/videos/generate/h264_Centipede-Centipede-Attack2.mp4",
      "assets/videos/generate/h264_Gazelle-Gazelle-Walk.mp4",
      "assets/videos/generate/h264_Goat-Goat-HeadButt.mp4",
      "assets/videos/generate/h264_Jaguar-Jaguar-Attack1.mp4",
      "assets/videos/generate/h264_Parrot-Parrot-Hover.mp4",
      "assets/videos/generate/h264_Raptor2-Raptor-Eat.mp4",

    ]},
    {task:'Motion Inbetweening', videos:[
      "assets/videos/inbetween/BrownBear-BEAR-Limping_mirror_concat_BEAR-RiseAttack_mirror_gt.mp4",
      "assets/videos/inbetween/Dog-2-DOG-ArmBite_concat_DOG-TurnRight_gt.mp4",
      "assets/videos/inbetween/Dog-2-DOG-Bark2_concat_DOG-TurnLeft_gt.mp4",
      "assets/videos/inbetween/Dog-Dog-Turn_Left_concat_Dog-Wag_mirror_gt.mp4",
      "assets/videos/inbetween/Eagle-Eagle-TakeOff_concat_Eagle-IdleNest_gt.mp4",
      "assets/videos/inbetween/FireAnt-Fire_ant-TurnRight_mirror_concat_Fire_ant-BackUp_gt.mp4",
      "assets/videos/inbetween/KingCobra-Cobra-Killed_mirror_concat_Cobra-IdleLoop_gt.mp4",
      "assets/videos/inbetween/Ostrich-Ostrich-Attack3_mirror_concat_Ostrich-Idle2_gt.mp4",
      "assets/videos/inbetween/Parrot-Parrot-Die2_concat_Parrot-Walk_mirror_gt.mp4",
      "assets/videos/inbetween/Raptor3-Raptor-LeftPuke_mirror_concat_Raptor-AttackRight_mirror_gt.mp4",
      "assets/videos/inbetween/Raptor3-Raptor-LeftPuke_mirror_concat_Raptor-run_gt.mp4",
      "assets/videos/inbetween/Scorpion-2-Scorpion-Walk_Forward_mirror_concat_Scorpion-Walk_and_Rise_mirror_gt.mp4",
      "assets/videos/inbetween/Skunk-Skunk-Spray_mirror_concat_Skunk-Idle3_gt.mp4",
      "assets/videos/inbetween/Spider-SPIDER-BackitUp_mirror_concat_SPIDER-Attack1_mirror_gt.mp4",
      "assets/videos/inbetween/Spider-SPIDER-RetreatSlow_concat_SPIDER-Attack5_gt.mp4",
      "assets/videos/inbetween/Trex-T-Rex-chase_bite_right_concat_T-Rex-turn_90_right_gt.mp4",
      "assets/videos/inbetween/Trex-T-Rex-chase_head_butt_left_mirror_concat_T-Rex-chase_roar_left_gt.mp4",
      "assets/videos/inbetween/Trex-T-Rex-Chase_Roar_concat_T-Rex-look_left_gt.mp4",
      "assets/videos/inbetween/Trex-T-Rex-look_left_concat_T-Rex-climb_up_gt.mp4",
      "assets/videos/inbetween/Trex-T-Rex-sprint_head_right_concat_T-Rex-run_to_stop_mirror_gt.mp4",
    ]},
    {task:'Moiton Denoise', videos:[
      "assets/videos/denoise/1850b9bc-911c-5a05-8341-c2885f3bd397-1850b9bc-911c-5a05-8341-c2885f3bd397_gt.mp4",
      "assets/videos/denoise/1a5f95d6-a053-5800-9ad2-12241be8dc38-1a5f95d6-a053-5800-9ad2-12241be8dc38_gt.mp4",
      "assets/videos/denoise/370baf13-e5c2-52a1-89f8-3fef154373b2-370baf13-e5c2-52a1-89f8-3fef154373b2_gt.mp4",
      "assets/videos/denoise/3e102b54-4579-5772-811d-3f25b0be05b9-3e102b54-4579-5772-811d-3f25b0be05b9_gt.mp4",
      "assets/videos/denoise/55f8b110-8edb-5534-b52e-da1144c75802-55f8b110-8edb-5534-b52e-da1144c75802_gt.mp4",
      "assets/videos/denoise/5abdf10bafe7427ab84aaf460fc913f9-5abdf10bafe7427ab84aaf460fc913f9_gt.mp4",
      "assets/videos/denoise/8ca90f1256234ec687000715e9dd9912-8ca90f1256234ec687000715e9dd9912_gt.mp4",
      "assets/videos/denoise/8fc69f27-a8e2-5dd7-82c7-299cd5687b7e-8fc69f27-a8e2-5dd7-82c7-299cd5687b7e_gt.mp4",
      "assets/videos/denoise/a06d60f0ab144adc982cdc94bf24e368-a06d60f0ab144adc982cdc94bf24e368_gt.mp4",
      "assets/videos/denoise/Buzzard-BUZZARD-Attack1_mirror_gt.mp4",
      "assets/videos/denoise/cf8cba56af2a4447ae3a9898d32b954a-cf8cba56af2a4447ae3a9898d32b954a_gt.mp4",
      "assets/videos/denoise/db584248a36a464d86b723f7a1279217-db584248a36a464d86b723f7a1279217_gt.mp4",
      "assets/videos/denoise/Raptor2-Raptor-Eat_gt.mp4",
      "assets/videos/denoise/Spider-SPIDER-walkloop_gt.mp4",
      "assets/videos/denoise/Trex-T-Rex-mama_cave_bite_out_gt.mp4",
    ]}
  ],
  comparisons:[
    {task:'Causal Motion Tokenizer', videos:[
      "assets/videos/comparisons/motion_stream/000000_0.mp4",
      "assets/videos/comparisons/motion_stream/001548_0.mp4",
      "assets/videos/comparisons/motion_stream/001723_0.mp4",
      "assets/videos/comparisons/motion_stream/1d2c5679-6798-56ac-8b31-16a8247c680c-1d2c5679-6798-56ac-8b31-16a8247c680c.mp4",
      "assets/videos/comparisons/motion_stream/3bd24865-355d-53ae-8d3e-e5d36829c9cc-3bd24865-355d-53ae-8d3e-e5d36829c9cc.mp4",
      "assets/videos/comparisons/motion_stream/3caeda97-b1a3-5933-b791-cf5911b1518e-3caeda97-b1a3-5933-b791-cf5911b1518e.mp4",
      "assets/videos/comparisons/motion_stream/4c0a808a-7172-5161-83ba-2ea6d92d8c86-4c0a808a-7172-5161-83ba-2ea6d92d8c86.mp4",
      "assets/videos/comparisons/motion_stream/4c1ffbc1-e2f8-5383-88f0-7db29ce9df53-4c1ffbc1-e2f8-5383-88f0-7db29ce9df53.mp4",
      "assets/videos/comparisons/motion_stream/6790311946d64f8f9176d9d6d41e16f7-6790311946d64f8f9176d9d6d41e16f7.mp4",
      "assets/videos/comparisons/motion_stream/8fc69f27-a8e2-5dd7-82c7-299cd5687b7e-8fc69f27-a8e2-5dd7-82c7-299cd5687b7e.mp4",
      "assets/videos/comparisons/motion_stream/Bird-BIRD-FlyLoop.mp4",
      "assets/videos/comparisons/motion_stream/Coyote-Coyote-Die.mp4",
      "assets/videos/comparisons/motion_stream/Cricket-Cricket-Attack4_mirror.mp4",
      "assets/videos/comparisons/motion_stream/Jaguar-Jaguar-Attack1.mp4",
      "assets/videos/comparisons/motion_stream/M003638_0.mp4",
      "assets/videos/comparisons/motion_stream/M010546_0.mp4",
      "assets/videos/comparisons/motion_stream/Parrot2-Parrot-Land_mirror.mp4",
      "assets/videos/comparisons/motion_stream/Tricera-Tricera-Fall_mirror.mp4",
      "assets/videos/comparisons/motion_stream/Tyranno-Tyranno-Run.mp4"
    ]},
    {task:'TM2T', videos:[
      "assets/videos/comparisons/tm2t/000000_0_video.mp4",
      "assets/videos/comparisons/tm2t/001548_0_video.mp4",
      "assets/videos/comparisons/tm2t/001723_0_video.mp4",
      "assets/videos/comparisons/tm2t/1d2c5679-6798-56ac-8b31-16a8247c680c-1d2c5679-6798-56ac-8b31-16a8247c680c_1d2c5679-6798-56ac-8b31-16a8247c680c-1d2c5679-6798-56ac-8b31-16a8247c680c.mp4",
      "assets/videos/comparisons/tm2t/3bd24865-355d-53ae-8d3e-e5d36829c9cc-3bd24865-355d-53ae-8d3e-e5d36829c9cc_3bd24865-355d-53ae-8d3e-e5d36829c9cc-3bd24865-355d-53ae-8d3e-e5d36829c9cc.mp4",
      "assets/videos/comparisons/tm2t/3caeda97-b1a3-5933-b791-cf5911b1518e-3caeda97-b1a3-5933-b791-cf5911b1518e_3caeda97-b1a3-5933-b791-cf5911b1518e-3caeda97-b1a3-5933-b791-cf5911b1518e.mp4",
      "assets/videos/comparisons/tm2t/4c0a808a-7172-5161-83ba-2ea6d92d8c86-4c0a808a-7172-5161-83ba-2ea6d92d8c86_4c0a808a-7172-5161-83ba-2ea6d92d8c86-4c0a808a-7172-5161-83ba-2ea6d92d8c86.mp4",
      "assets/videos/comparisons/tm2t/4c1ffbc1-e2f8-5383-88f0-7db29ce9df53-4c1ffbc1-e2f8-5383-88f0-7db29ce9df53_4c1ffbc1-e2f8-5383-88f0-7db29ce9df53-4c1ffbc1-e2f8-5383-88f0-7db29ce9df53.mp4",
      "assets/videos/comparisons/tm2t/6790311946d64f8f9176d9d6d41e16f7-6790311946d64f8f9176d9d6d41e16f7_6790311946d64f8f9176d9d6d41e16f7-6790311946d64f8f9176d9d6d41e16f7.mp4",
      "assets/videos/comparisons/tm2t/8fc69f27-a8e2-5dd7-82c7-299cd5687b7e-8fc69f27-a8e2-5dd7-82c7-299cd5687b7e_8fc69f27-a8e2-5dd7-82c7-299cd5687b7e-8fc69f27-a8e2-5dd7-82c7-299cd5687b7e.mp4",
      "assets/videos/comparisons/tm2t/Bird-BIRD-FlyLoop_Bird-BIRD-FlyLoop.mp4",
      "assets/videos/comparisons/tm2t/Coyote-Coyote-Die_Coyote-Coyote-Die.mp4",
      "assets/videos/comparisons/tm2t/Cricket-Cricket-Attack4_mirror_Cricket-Cricket-Attack4_mirror.mp4",
      "assets/videos/comparisons/tm2t/Jaguar-Jaguar-Attack1_Jaguar-Jaguar-Attack1.mp4",
      "assets/videos/comparisons/tm2t/M003638_0_video.mp4",
      "assets/videos/comparisons/tm2t/M010546_0_video.mp4",
      "assets/videos/comparisons/tm2t/Parrot2-Parrot-Land_mirror_Parrot2-Parrot-Land_mirror.mp4",
      "assets/videos/comparisons/tm2t/Tricera-Tricera-Fall_mirror_Tricera-Tricera-Fall_mirror.mp4",
      "assets/videos/comparisons/tm2t/Tyranno-Tyranno-Run_Tyranno-Tyranno-Run.mp4"
    ]},
    {task:'RVQVAE(zero pad)', videos:[
      "assets/videos/comparisons/conv_rvq6/000000_0_video.mp4",
      "assets/videos/comparisons/conv_rvq6/001548_0_video.mp4",
      "assets/videos/comparisons/conv_rvq6/001723_0_video.mp4",
      "assets/videos/comparisons/conv_rvq6/1d2c5679-6798-56ac-8b31-16a8247c680c-1d2c5679-6798-56ac-8b31-16a8247c680c_1d2c5679-6798-56ac-8b31-16a8247c680c-1d2c5679-6798-56ac-8b31-16a8247c680c.mp4",
      "assets/videos/comparisons/conv_rvq6/3bd24865-355d-53ae-8d3e-e5d36829c9cc-3bd24865-355d-53ae-8d3e-e5d36829c9cc_3bd24865-355d-53ae-8d3e-e5d36829c9cc-3bd24865-355d-53ae-8d3e-e5d36829c9cc.mp4",
      "assets/videos/comparisons/conv_rvq6/3caeda97-b1a3-5933-b791-cf5911b1518e-3caeda97-b1a3-5933-b791-cf5911b1518e_3caeda97-b1a3-5933-b791-cf5911b1518e-3caeda97-b1a3-5933-b791-cf5911b1518e.mp4",
      "assets/videos/comparisons/conv_rvq6/4c0a808a-7172-5161-83ba-2ea6d92d8c86-4c0a808a-7172-5161-83ba-2ea6d92d8c86_4c0a808a-7172-5161-83ba-2ea6d92d8c86-4c0a808a-7172-5161-83ba-2ea6d92d8c86.mp4",
      "assets/videos/comparisons/conv_rvq6/4c1ffbc1-e2f8-5383-88f0-7db29ce9df53-4c1ffbc1-e2f8-5383-88f0-7db29ce9df53_4c1ffbc1-e2f8-5383-88f0-7db29ce9df53-4c1ffbc1-e2f8-5383-88f0-7db29ce9df53.mp4",
      "assets/videos/comparisons/conv_rvq6/6790311946d64f8f9176d9d6d41e16f7-6790311946d64f8f9176d9d6d41e16f7_6790311946d64f8f9176d9d6d41e16f7-6790311946d64f8f9176d9d6d41e16f7.mp4",
      "assets/videos/comparisons/conv_rvq6/8fc69f27-a8e2-5dd7-82c7-299cd5687b7e-8fc69f27-a8e2-5dd7-82c7-299cd5687b7e_8fc69f27-a8e2-5dd7-82c7-299cd5687b7e-8fc69f27-a8e2-5dd7-82c7-299cd5687b7e.mp4",
      "assets/videos/comparisons/conv_rvq6/Bird-BIRD-FlyLoop_Bird-BIRD-FlyLoop.mp4",
      "assets/videos/comparisons/conv_rvq6/Coyote-Coyote-Die_Coyote-Coyote-Die.mp4",
      "assets/videos/comparisons/conv_rvq6/Cricket-Cricket-Attack4_mirror_Cricket-Cricket-Attack4_mirror.mp4",
      "assets/videos/comparisons/conv_rvq6/Jaguar-Jaguar-Attack1_Jaguar-Jaguar-Attack1.mp4",
      "assets/videos/comparisons/conv_rvq6/M003638_0_video.mp4",
      "assets/videos/comparisons/conv_rvq6/M010546_0_video.mp4",
      "assets/videos/comparisons/conv_rvq6/Parrot2-Parrot-Land_mirror_Parrot2-Parrot-Land_mirror.mp4",
      "assets/videos/comparisons/conv_rvq6/Tricera-Tricera-Fall_mirror_Tricera-Tricera-Fall_mirror.mp4",
      "assets/videos/comparisons/conv_rvq6/Tyranno-Tyranno-Run_Tyranno-Tyranno-Run.mp4"
    ]},
    {task:'Without Pretrained OwO', videos:[
      "assets/videos/comparisons/no_pretrain_graph/000000_0_video.mp4",
      "assets/videos/comparisons/no_pretrain_graph/001548_0_video.mp4",
      "assets/videos/comparisons/no_pretrain_graph/001723_0_video.mp4",
      "assets/videos/comparisons/no_pretrain_graph/1d2c5679-6798-56ac-8b31-16a8247c680c-1d2c5679-6798-56ac-8b31-16a8247c680c_1d2c5679-6798-56ac-8b31-16a8247c680c-1d2c5679-6798-56ac-8b31-16a8247c680c.mp4",
      "assets/videos/comparisons/no_pretrain_graph/3bd24865-355d-53ae-8d3e-e5d36829c9cc-3bd24865-355d-53ae-8d3e-e5d36829c9cc_3bd24865-355d-53ae-8d3e-e5d36829c9cc-3bd24865-355d-53ae-8d3e-e5d36829c9cc.mp4",
      "assets/videos/comparisons/no_pretrain_graph/3caeda97-b1a3-5933-b791-cf5911b1518e-3caeda97-b1a3-5933-b791-cf5911b1518e_3caeda97-b1a3-5933-b791-cf5911b1518e-3caeda97-b1a3-5933-b791-cf5911b1518e.mp4",
      "assets/videos/comparisons/no_pretrain_graph/4c0a808a-7172-5161-83ba-2ea6d92d8c86-4c0a808a-7172-5161-83ba-2ea6d92d8c86_4c0a808a-7172-5161-83ba-2ea6d92d8c86-4c0a808a-7172-5161-83ba-2ea6d92d8c86.mp4",
      "assets/videos/comparisons/no_pretrain_graph/4c1ffbc1-e2f8-5383-88f0-7db29ce9df53-4c1ffbc1-e2f8-5383-88f0-7db29ce9df53_4c1ffbc1-e2f8-5383-88f0-7db29ce9df53-4c1ffbc1-e2f8-5383-88f0-7db29ce9df53.mp4",
      "assets/videos/comparisons/no_pretrain_graph/6790311946d64f8f9176d9d6d41e16f7-6790311946d64f8f9176d9d6d41e16f7_6790311946d64f8f9176d9d6d41e16f7-6790311946d64f8f9176d9d6d41e16f7.mp4",
      "assets/videos/comparisons/no_pretrain_graph/8fc69f27-a8e2-5dd7-82c7-299cd5687b7e-8fc69f27-a8e2-5dd7-82c7-299cd5687b7e_8fc69f27-a8e2-5dd7-82c7-299cd5687b7e-8fc69f27-a8e2-5dd7-82c7-299cd5687b7e.mp4",
      "assets/videos/comparisons/no_pretrain_graph/Bird-BIRD-FlyLoop_Bird-BIRD-FlyLoop.mp4",
      "assets/videos/comparisons/no_pretrain_graph/Coyote-Coyote-Die_Coyote-Coyote-Die.mp4",
      "assets/videos/comparisons/no_pretrain_graph/Cricket-Cricket-Attack4_mirror_Cricket-Cricket-Attack4_mirror.mp4",
      "assets/videos/comparisons/no_pretrain_graph/Jaguar-Jaguar-Attack1_Jaguar-Jaguar-Attack1.mp4",
      "assets/videos/comparisons/no_pretrain_graph/M003638_0_video.mp4",
      "assets/videos/comparisons/no_pretrain_graph/M010546_0_video.mp4",
      "assets/videos/comparisons/no_pretrain_graph/Parrot2-Parrot-Land_mirror_Parrot2-Parrot-Land_mirror.mp4",
      "assets/videos/comparisons/no_pretrain_graph/Tricera-Tricera-Fall_mirror_Tricera-Tricera-Fall_mirror.mp4",
      "assets/videos/comparisons/no_pretrain_graph/Tyranno-Tyranno-Run_Tyranno-Tyranno-Run.mp4"
    ]}
  ]
};

/* --- Modal --- */
const modal = document.getElementById('videoModal');
const modalVideo = document.getElementById('modalVideo');
const modalCaption = document.getElementById('modalCaption');
document.getElementById('modalClose').onclick = ()=>{ modal.setAttribute('aria-hidden','true'); modalVideo.pause(); modalVideo.src=''; };
modal.onclick = (e)=>{ if(e.target===modal) { modal.setAttribute('aria-hidden','true'); modalVideo.pause(); modalVideo.src=''; } };
window.onkeydown = (e)=>{ if(e.key==='Escape') { modal.setAttribute('aria-hidden','true'); modalVideo.pause(); modalVideo.src=''; } };
function openModal(src, caption){ modal.setAttribute('aria-hidden','false'); modalVideo.src=src; modalVideo.play().catch(()=>{}); modalCaption.innerText=caption; }

/* --- TASKS --- */
const taskTabs = document.getElementById('taskTabs');
const taskPanels = document.getElementById('taskPanels');

DATA.tasks.forEach((task, i) => {
  /* --- Tab button --- */
  const btn = document.createElement('button');
  btn.className = 'tab' + (i === 0 ? ' active' : '');
  btn.innerText = task.task;  
  btn.dataset.target = 'task_' + i;
  btn.onclick = () => {
    document.querySelectorAll('#taskTabs .tab').forEach(t => t.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('#taskPanels .panel').forEach(p => p.classList.remove('active'));
    const panel = document.getElementById(btn.dataset.target);
    panel.classList.add('active');

 
    const firstVideo = panel.querySelector('video.active');
    if (firstVideo) {
      firstVideo.play();
    }
  };
  taskTabs.appendChild(btn);

  /* --- Panel container --- */
  const panel = document.createElement('div');
  panel.className = 'panel' + (i === 0 ? ' active' : '');
  panel.id = 'task_' + i;

  const slider = document.createElement('div'); slider.className='slider';
  const prev = document.createElement('button'); prev.className='slide-btn prev'; prev.innerText='◀';
  const next = document.createElement('button'); next.className='slide-btn next'; next.innerText='▶';
  const slides = document.createElement('div'); slides.className='slides';

  task.videos.forEach((src,j)=>{
    const video = document.createElement('video');
    video.src = src;
    video.muted = true;
    video.autoplay = true;
    video.playsInline = true;
    video.setAttribute('controls','');
    if(j===0) video.classList.add('active');
    // video.onclick = ()=>openModal(v.file,v.caption);
    slides.appendChild(video);
  });

  let idx = 0;
  prev.onclick = ()=>{ idx=(idx-1+task.videos.length)%task.videos.length; updateSlides(); };
  next.onclick = ()=>{ idx=(idx+1)%task.videos.length; updateSlides(); };
  function updateSlides(){ 
    const videos = slides.querySelectorAll('video');

    videos.forEach((v, k) => {
      const isActive = k === idx;
      v.classList.toggle('active', isActive);

      if (isActive) {
        v.currentTime = 0;
        v.play();    
      } else {
        v.pause();  
      }
    });
  }

  slider.appendChild(prev);
  slider.appendChild(slides);
  slider.appendChild(next);
  panel.appendChild(slider);
  taskPanels.appendChild(panel);

  if (i === 0) {
    const firstVideo = panel.querySelector('video.active');
    if (firstVideo) firstVideo.play();
  }
});

/* --- COMPARISONS --- */
const comparisonTabs = document.getElementById('comparison-tabs');
const comparisonPanels = document.getElementById('comparisonPanels');

DATA.comparisons.forEach((comp,i)=>{
  const btn = document.createElement('button');
  btn.className = 'tab'+(i===0?' active':'');
  btn.innerText = comp.task;
  btn.dataset.target = comp.task.replace(/\s+/g,'_');
  btn.onclick = ()=>{
    comparisonTabs.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
    btn.classList.add('active');
    comparisonPanels.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
    document.getElementById(btn.dataset.target).classList.add('active');
    

    const panel = document.getElementById(btn.dataset.target);
    const firstVideo = panel.querySelector('video.active');
    if (firstVideo) {
      firstVideo.play();
    }
  };
  comparisonTabs.appendChild(btn);

  const panel = document.createElement('div');
  panel.className = 'panel'+(i===0?' active':'');
  panel.id = btn.dataset.target;

  const slider = document.createElement('div'); slider.className='slider';
  const prev = document.createElement('button'); prev.className='slide-btn prev'; prev.innerText='◀';
  const next = document.createElement('button'); next.className='slide-btn next'; next.innerText='▶';
  const slides = document.createElement('div'); slides.className='slides';

  comp.videos.forEach((v,j)=>{
    const video = document.createElement('video');
    video.src = v;
    video.setAttribute('controls','');
    if(j===0) video.classList.add('active');
    // video.onclick = ()=>openModal(v,v);
    slides.appendChild(video);
  });

  let idx=0;
  prev.onclick = ()=>{ idx=(idx-1+comp.videos.length)%comp.videos.length; update(); };
  next.onclick = ()=>{ idx=(idx+1)%comp.videos.length; update(); };
  function update(){ 
    const videos = slides.querySelectorAll('video');

    videos.forEach((v, k) => {
      const isActive = k === idx;
      v.classList.toggle('active', isActive);

      if (isActive) {
        v.currentTime = 0;
        v.play();   
      } else {
        v.pause();  
      }
    });
  }

  slider.appendChild(prev);
  slider.appendChild(slides);
  slider.appendChild(next);
  panel.appendChild(slider);
  comparisonPanels.appendChild(panel);


  if (i === 0) {
    const firstVideo = panel.querySelector('video.active');
    if (firstVideo) firstVideo.play();
  }
});
