Spaces:
Runtime error
Runtime error
| const videoGroups = { | |
| 'group1': [ | |
| { | |
| reference: 'videos/visualization_static/group1/object_0.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_0.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_0/animation_0.png', video: 'videos/visualization_ours/group1/object_0/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_0/animation_1.png', video: 'videos/visualization_ours/group1/object_0/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_0/animation_2.png', video: 'videos/visualization_ours/group1/object_0/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_1.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_1.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_1/animation_0.png', video: 'videos/visualization_ours/group1/object_1/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_1/animation_1.png', video: 'videos/visualization_ours/group1/object_1/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_1/animation_2.png', video: 'videos/visualization_ours/group1/object_1/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_2.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_2.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_2/animation_0.png', video: 'videos/visualization_ours/group1/object_2/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_3.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_3.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_3/animation_0.png', video: 'videos/visualization_ours/group1/object_3/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_4.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_4.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_4/animation_0.png', video: 'videos/visualization_ours/group1/object_4/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_4/animation_1.png', video: 'videos/visualization_ours/group1/object_4/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_4/animation_2.png', video: 'videos/visualization_ours/group1/object_4/animation_2.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_4/animation_3.png', video: 'videos/visualization_ours/group1/object_4/animation_3.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_4/animation_4.png', video: 'videos/visualization_ours/group1/object_4/animation_4.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_4/animation_5.png', video: 'videos/visualization_ours/group1/object_4/animation_5.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_4/animation_6.png', video: 'videos/visualization_ours/group1/object_4/animation_6.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_4/animation_7.png', video: 'videos/visualization_ours/group1/object_4/animation_7.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_5.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_5.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_5/animation_0.png', video: 'videos/visualization_ours/group1/object_5/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_6.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_6.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_6/animation_0.png', video: 'videos/visualization_ours/group1/object_6/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_6/animation_1.png', video: 'videos/visualization_ours/group1/object_6/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_6/animation_2.png', video: 'videos/visualization_ours/group1/object_6/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_7.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_7.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_7/animation_0.png', video: 'videos/visualization_ours/group1/object_7/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_7/animation_1.png', video: 'videos/visualization_ours/group1/object_7/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_8.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_8.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_8/animation_0.png', video: 'videos/visualization_ours/group1/object_8/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_9.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_9.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_9/animation_0.png', video: 'videos/visualization_ours/group1/object_9/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_10.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_10.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_10/animation_0.png', video: 'videos/visualization_ours/group1/object_10/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_10/animation_1.png', video: 'videos/visualization_ours/group1/object_10/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_10/animation_2.png', video: 'videos/visualization_ours/group1/object_10/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_11.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_11.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_11/animation_0.png', video: 'videos/visualization_ours/group1/object_11/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_11/animation_1.png', video: 'videos/visualization_ours/group1/object_11/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_11/animation_2.png', video: 'videos/visualization_ours/group1/object_11/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_12.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_12.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_12/animation_0.png', video: 'videos/visualization_ours/group1/object_12/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_12/animation_1.png', video: 'videos/visualization_ours/group1/object_12/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_13.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_13.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_13/animation_0.png', video: 'videos/visualization_ours/group1/object_13/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_13/animation_1.png', video: 'videos/visualization_ours/group1/object_13/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_14.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_14.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_14/animation_0.png', video: 'videos/visualization_ours/group1/object_14/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_15.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_15.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_15/animation_0.png', video: 'videos/visualization_ours/group1/object_15/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_15/animation_1.png', video: 'videos/visualization_ours/group1/object_15/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_16.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_16.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_16/animation_0.png', video: 'videos/visualization_ours/group1/object_16/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_17.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_17.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_17/animation_0.png', video: 'videos/visualization_ours/group1/object_17/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_17/animation_1.png', video: 'videos/visualization_ours/group1/object_17/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_18.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_18.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_18/animation_0.png', video: 'videos/visualization_ours/group1/object_18/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_18/animation_1.png', video: 'videos/visualization_ours/group1/object_18/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_19.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_19.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_19/animation_0.png', video: 'videos/visualization_ours/group1/object_19/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_20.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_20.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_20/animation_0.png', video: 'videos/visualization_ours/group1/object_20/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_21.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_21.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_21/animation_0.png', video: 'videos/visualization_ours/group1/object_21/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_21/animation_1.png', video: 'videos/visualization_ours/group1/object_21/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_22.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_22.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_22/animation_0.png', video: 'videos/visualization_ours/group1/object_22/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_23.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_23.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_23/animation_0.png', video: 'videos/visualization_ours/group1/object_23/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_24.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_24.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_24/animation_0.png', video: 'videos/visualization_ours/group1/object_24/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_24/animation_1.png', video: 'videos/visualization_ours/group1/object_24/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_24/animation_2.png', video: 'videos/visualization_ours/group1/object_24/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_25.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_25.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_25/animation_0.png', video: 'videos/visualization_ours/group1/object_25/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_25/animation_1.png', video: 'videos/visualization_ours/group1/object_25/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_26.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_26.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_26/animation_0.png', video: 'videos/visualization_ours/group1/object_26/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_26/animation_1.png', video: 'videos/visualization_ours/group1/object_26/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_27.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_27.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_27/animation_0.png', video: 'videos/visualization_ours/group1/object_27/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_28.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_28.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_28/animation_0.png', video: 'videos/visualization_ours/group1/object_28/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_29.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_29.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_29/animation_0.png', video: 'videos/visualization_ours/group1/object_29/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_30.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_30.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_30/animation_0.png', video: 'videos/visualization_ours/group1/object_30/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_30/animation_1.png', video: 'videos/visualization_ours/group1/object_30/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_31.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_31.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_31/animation_0.png', video: 'videos/visualization_ours/group1/object_31/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_31/animation_1.png', video: 'videos/visualization_ours/group1/object_31/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_32.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_32.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_32/animation_0.png', video: 'videos/visualization_ours/group1/object_32/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_32/animation_1.png', video: 'videos/visualization_ours/group1/object_32/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_33.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_33.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_33/animation_0.png', video: 'videos/visualization_ours/group1/object_33/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_33/animation_1.png', video: 'videos/visualization_ours/group1/object_33/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_34.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_34.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_34/animation_0.png', video: 'videos/visualization_ours/group1/object_34/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_35.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_35.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_35/animation_0.png', video: 'videos/visualization_ours/group1/object_35/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_35/animation_1.png', video: 'videos/visualization_ours/group1/object_35/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_36.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_36.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_36/animation_0.png', video: 'videos/visualization_ours/group1/object_36/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_36/animation_1.png', video: 'videos/visualization_ours/group1/object_36/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_36/animation_2.png', video: 'videos/visualization_ours/group1/object_36/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_37.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_37.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_37/animation_0.png', video: 'videos/visualization_ours/group1/object_37/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_37/animation_1.png', video: 'videos/visualization_ours/group1/object_37/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_37/animation_2.png', video: 'videos/visualization_ours/group1/object_37/animation_2.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_37/animation_3.png', video: 'videos/visualization_ours/group1/object_37/animation_3.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_37/animation_4.png', video: 'videos/visualization_ours/group1/object_37/animation_4.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_37/animation_5.png', video: 'videos/visualization_ours/group1/object_37/animation_5.mp4' }, | |
| { img: 'images/visualization_ours/group1/object_37/animation_6.png', video: 'videos/visualization_ours/group1/object_37/animation_6.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_38.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_38.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_38/animation_0.png', video: 'videos/visualization_ours/group1/object_38/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group1/object_39.mp4', | |
| referenceThumbnail: 'images/visualization_static/group1/object_39.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group1/object_39/animation_0.png', video: 'videos/visualization_ours/group1/object_39/animation_0.mp4' } | |
| ] | |
| }, | |
| ], | |
| 'group2': [ | |
| { | |
| reference: 'videos/visualization_static/group2/object_0.mp4', | |
| referenceThumbnail: 'images/visualization_static/group2/object_0.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group2/object_0/animation_0.png', video: 'videos/visualization_ours/group2/object_0/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_0/animation_1.png', video: 'videos/visualization_ours/group2/object_0/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_0/animation_2.png', video: 'videos/visualization_ours/group2/object_0/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group2/object_1.mp4', | |
| referenceThumbnail: 'images/visualization_static/group2/object_1.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group2/object_1/animation_0.png', video: 'videos/visualization_ours/group2/object_1/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_1/animation_1.png', video: 'videos/visualization_ours/group2/object_1/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_1/animation_2.png', video: 'videos/visualization_ours/group2/object_1/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group2/object_2.mp4', | |
| referenceThumbnail: 'images/visualization_static/group2/object_2.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group2/object_2/animation_0.png', video: 'videos/visualization_ours/group2/object_2/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_2/animation_1.png', video: 'videos/visualization_ours/group2/object_2/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_2/animation_2.png', video: 'videos/visualization_ours/group2/object_2/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group2/object_3.mp4', | |
| referenceThumbnail: 'images/visualization_static/group2/object_3.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group2/object_3/animation_0.png', video: 'videos/visualization_ours/group2/object_3/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group2/object_4.mp4', | |
| referenceThumbnail: 'images/visualization_static/group2/object_4.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group2/object_4/animation_0.png', video: 'videos/visualization_ours/group2/object_4/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_4/animation_1.png', video: 'videos/visualization_ours/group2/object_4/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_4/animation_2.png', video: 'videos/visualization_ours/group2/object_4/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group2/object_5.mp4', | |
| referenceThumbnail: 'images/visualization_static/group2/object_5.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group2/object_5/animation_0.png', video: 'videos/visualization_ours/group2/object_5/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group2/object_6.mp4', | |
| referenceThumbnail: 'images/visualization_static/group2/object_6.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group2/object_6/animation_0.png', video: 'videos/visualization_ours/group2/object_6/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_6/animation_1.png', video: 'videos/visualization_ours/group2/object_6/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group2/object_7.mp4', | |
| referenceThumbnail: 'images/visualization_static/group2/object_7.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group2/object_7/animation_0.png', video: 'videos/visualization_ours/group2/object_7/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_7/animation_1.png', video: 'videos/visualization_ours/group2/object_7/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group2/object_8.mp4', | |
| referenceThumbnail: 'images/visualization_static/group2/object_8.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group2/object_8/animation_0.png', video: 'videos/visualization_ours/group2/object_8/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_8/animation_1.png', video: 'videos/visualization_ours/group2/object_8/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group2/object_9.mp4', | |
| referenceThumbnail: 'images/visualization_static/group2/object_9.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group2/object_9/animation_0.png', video: 'videos/visualization_ours/group2/object_9/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_9/animation_1.png', video: 'videos/visualization_ours/group2/object_9/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group2/object_9/animation_2.png', video: 'videos/visualization_ours/group2/object_9/animation_2.mp4' } | |
| ] | |
| }, | |
| ], | |
| 'group3': [ | |
| { | |
| reference: 'videos/visualization_static/group3/object_0.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_0.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_0/animation_0.png', video: 'videos/visualization_ours/group3/object_0/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_0/animation_1.png', video: 'videos/visualization_ours/group3/object_0/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_0/animation_2.png', video: 'videos/visualization_ours/group3/object_0/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_1.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_1.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_1/animation_0.png', video: 'videos/visualization_ours/group3/object_1/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_1/animation_1.png', video: 'videos/visualization_ours/group3/object_1/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_1/animation_2.png', video: 'videos/visualization_ours/group3/object_1/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_2.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_2.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_2/animation_0.png', video: 'videos/visualization_ours/group3/object_2/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_2/animation_1.png', video: 'videos/visualization_ours/group3/object_2/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_3.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_3.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_3/animation_0.png', video: 'videos/visualization_ours/group3/object_3/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_3/animation_1.png', video: 'videos/visualization_ours/group3/object_3/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_4.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_4.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_4/animation_0.png', video: 'videos/visualization_ours/group3/object_4/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_4/animation_1.png', video: 'videos/visualization_ours/group3/object_4/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_4/animation_2.png', video: 'videos/visualization_ours/group3/object_4/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_5.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_5.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_5/animation_0.png', video: 'videos/visualization_ours/group3/object_5/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_5/animation_1.png', video: 'videos/visualization_ours/group3/object_5/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_5/animation_2.png', video: 'videos/visualization_ours/group3/object_5/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_6.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_6.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_6/animation_0.png', video: 'videos/visualization_ours/group3/object_6/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_7.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_7.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_7/animation_0.png', video: 'videos/visualization_ours/group3/object_7/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_8.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_8.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_8/animation_0.png', video: 'videos/visualization_ours/group3/object_8/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_9.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_9.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_9/animation_0.png', video: 'videos/visualization_ours/group3/object_9/animation_0.mp4' } | |
| ] | |
| }, | |
| ], | |
| 'group3': [ | |
| { | |
| reference: 'videos/visualization_static/group3/object_0.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_0.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_0/animation_0.png', video: 'videos/visualization_ours/group3/object_0/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_0/animation_1.png', video: 'videos/visualization_ours/group3/object_0/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_0/animation_2.png', video: 'videos/visualization_ours/group3/object_0/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_1.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_1.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_1/animation_0.png', video: 'videos/visualization_ours/group3/object_1/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_1/animation_1.png', video: 'videos/visualization_ours/group3/object_1/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_1/animation_2.png', video: 'videos/visualization_ours/group3/object_1/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_2.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_2.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_2/animation_0.png', video: 'videos/visualization_ours/group3/object_2/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_2/animation_1.png', video: 'videos/visualization_ours/group3/object_2/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_3.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_3.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_3/animation_0.png', video: 'videos/visualization_ours/group3/object_3/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_3/animation_1.png', video: 'videos/visualization_ours/group3/object_3/animation_1.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_4.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_4.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_4/animation_0.png', video: 'videos/visualization_ours/group3/object_4/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_4/animation_1.png', video: 'videos/visualization_ours/group3/object_4/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_4/animation_2.png', video: 'videos/visualization_ours/group3/object_4/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_5.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_5.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_5/animation_0.png', video: 'videos/visualization_ours/group3/object_5/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_5/animation_1.png', video: 'videos/visualization_ours/group3/object_5/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group3/object_5/animation_2.png', video: 'videos/visualization_ours/group3/object_5/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_6.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_6.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_6/animation_0.png', video: 'videos/visualization_ours/group3/object_6/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_7.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_7.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_7/animation_0.png', video: 'videos/visualization_ours/group3/object_7/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_8.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_8.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_8/animation_0.png', video: 'videos/visualization_ours/group3/object_8/animation_0.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group3/object_9.mp4', | |
| referenceThumbnail: 'images/visualization_static/group3/object_9.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group3/object_9/animation_0.png', video: 'videos/visualization_ours/group3/object_9/animation_0.mp4' } | |
| ] | |
| }, | |
| ], | |
| 'group4': [ | |
| { | |
| reference: 'videos/visualization_static/group4/object_0.mp4', | |
| referenceThumbnail: 'images/visualization_static/group4/object_0.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group4/object_0/animation_0.png', video: 'videos/visualization_ours/group4/object_0/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_0/animation_1.png', video: 'videos/visualization_ours/group4/object_0/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_0/animation_2.png', video: 'videos/visualization_ours/group4/object_0/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group4/object_1.mp4', | |
| referenceThumbnail: 'images/visualization_static/group4/object_1.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group4/object_1/animation_0.png', video: 'videos/visualization_ours/group4/object_1/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_1/animation_1.png', video: 'videos/visualization_ours/group4/object_1/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_1/animation_2.png', video: 'videos/visualization_ours/group4/object_1/animation_2.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_1/animation_3.png', video: 'videos/visualization_ours/group4/object_1/animation_3.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group4/object_2.mp4', | |
| referenceThumbnail: 'images/visualization_static/group4/object_2.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group4/object_2/animation_0.png', video: 'videos/visualization_ours/group4/object_2/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_2/animation_1.png', video: 'videos/visualization_ours/group4/object_2/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_2/animation_2.png', video: 'videos/visualization_ours/group4/object_2/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group4/object_3.mp4', | |
| referenceThumbnail: 'images/visualization_static/group4/object_3.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group4/object_3/animation_0.png', video: 'videos/visualization_ours/group4/object_3/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_3/animation_1.png', video: 'videos/visualization_ours/group4/object_3/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_3/animation_2.png', video: 'videos/visualization_ours/group4/object_3/animation_2.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group4/object_4.mp4', | |
| referenceThumbnail: 'images/visualization_static/group4/object_4.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group4/object_4/animation_0.png', video: 'videos/visualization_ours/group4/object_4/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_4/animation_1.png', video: 'videos/visualization_ours/group4/object_4/animation_1.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_4/animation_2.png', video: 'videos/visualization_ours/group4/object_4/animation_2.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_4/animation_3.png', video: 'videos/visualization_ours/group4/object_4/animation_3.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_4/animation_4.png', video: 'videos/visualization_ours/group4/object_4/animation_4.mp4' } | |
| ] | |
| }, | |
| { | |
| reference: 'videos/visualization_static/group4/object_5.mp4', | |
| referenceThumbnail: 'images/visualization_static/group4/object_5.png', | |
| animations: [ | |
| { img: 'images/visualization_ours/group4/object_5/animation_0.png', video: 'videos/visualization_ours/group4/object_5/animation_0.mp4' }, | |
| { img: 'images/visualization_ours/group4/object_5/animation_1.png', video: 'videos/visualization_ours/group4/object_5/animation_1.mp4' }, | |
| ] | |
| }, | |
| ] | |
| }; | |
| let currentGroupIndices = { | |
| 'group1': 0, | |
| 'group2': 0, | |
| 'group3': 0, | |
| 'group4': 0 | |
| }; | |
| const otherVideos = [ | |
| 'videos/ablation/combined_0.mp4', | |
| 'videos/ablation/combined_1.mp4', | |
| 'videos/ablation/combined_2.mp4', | |
| 'videos/ablation/combined_3.mp4', | |
| 'videos/ablation/combined_4.mp4', | |
| ]; | |
| let currentOtherVideoIndex = 0; | |
| // 加载视频组并更新缩略图 | |
| function loadGroup(groupName) { | |
| const groupIndex = currentGroupIndices[groupName]; | |
| const group = videoGroups[groupName][groupIndex]; | |
| const mainVideo = document.getElementById('main-video-' + groupName); | |
| const mainVideoSource = document.getElementById('main-video-source-' + groupName); | |
| const referenceThumbnail = document.getElementById('reference-thumbnail-' + groupName); | |
| const thumbnailsContainer = document.getElementById('thumbnails-' + groupName); | |
| mainVideoSource.src = group.animations[0].video; | |
| mainVideo.dataset.current = group.animations[0].video; | |
| mainVideo.load(); | |
| referenceThumbnail.src = group.referenceThumbnail; | |
| thumbnailsContainer.innerHTML = ''; | |
| group.animations.forEach(anim => { | |
| const img = document.createElement('img'); | |
| img.className = 'thumbnail'; | |
| img.src = anim.img; | |
| img.onclick = () => playAnimation(anim.video, groupName); | |
| thumbnailsContainer.appendChild(img); | |
| }); | |
| } | |
| // 播放动画视频 | |
| function playAnimation(videoSrc, groupName) { | |
| const mainVideo = document.getElementById('main-video-' + groupName); | |
| const mainVideoSource = document.getElementById('main-video-source-' + groupName); | |
| mainVideoSource.src = videoSrc; | |
| mainVideo.dataset.current = videoSrc; | |
| mainVideo.load(); // 重置和加载新的视频源 | |
| mainVideo.addEventListener('loadedmetadata', () => { | |
| mainVideo.play(); | |
| }, { once: true }); | |
| } | |
| // 播放参考视频 | |
| function playReference(groupName) { | |
| const mainVideo = document.getElementById('main-video-' + groupName); | |
| const mainVideoSource = document.getElementById('main-video-source-' + groupName); | |
| const groupIndex = currentGroupIndices[groupName]; | |
| const group = videoGroups[groupName][groupIndex]; | |
| mainVideoSource.src = group.reference; | |
| mainVideo.dataset.current = group.reference; | |
| mainVideo.load(); // 重置和加载新的视频源 | |
| mainVideo.addEventListener('loadedmetadata', () => { | |
| mainVideo.play(); | |
| }, { once: true }); | |
| } | |
| // 切换视频组 | |
| function switchGroup(direction, groupName) { | |
| currentGroupIndices[groupName] += direction; | |
| if (currentGroupIndices[groupName] < 0) { | |
| currentGroupIndices[groupName] = videoGroups[groupName].length - 1; | |
| } else if (currentGroupIndices[groupName] >= videoGroups[groupName].length) { | |
| currentGroupIndices[groupName] = 0; | |
| } | |
| loadGroup(groupName); | |
| } | |
| // 加载其他节的视频 | |
| function loadOtherVideo() { | |
| const otherVideo = document.getElementById('other-video'); | |
| const otherVideoSource = document.getElementById('other-video-source'); | |
| const videoSrc = otherVideos[currentOtherVideoIndex]; | |
| otherVideoSource.src = videoSrc; | |
| otherVideo.dataset.current = videoSrc; | |
| otherVideo.load(); | |
| otherVideo.addEventListener('loadedmetadata', () => { | |
| otherVideo.play(); | |
| }, { once: true }); | |
| } | |
| // 切换其他节的视频 | |
| function switchVideo(direction) { | |
| currentOtherVideoIndex += direction; | |
| if (currentOtherVideoIndex < 0) { | |
| currentOtherVideoIndex = otherVideos.length - 1; | |
| } else if (currentOtherVideoIndex >= otherVideos.length) { | |
| currentOtherVideoIndex = 0; | |
| } | |
| loadOtherVideo(); | |
| } | |
| // 在全屏切换时，保持视频的适当分辨率 | |
| document.addEventListener('fullscreenchange', () => { | |
| const videoWrappers = document.querySelectorAll('.video-wrapper-1-1 video, .video-wrapper-other video'); | |
| videoWrappers.forEach(mainVideo => { | |
| if (document.fullscreenElement) { | |
| mainVideo.style.width = "100%"; | |
| mainVideo.style.height = "100%"; | |
| } else { | |
| mainVideo.style.width = ""; | |
| mainVideo.style.height = ""; | |
| } | |
| }); | |
| }); | |
| // 检查 YouTube 视频加载状态 | |
| function checkYouTubeVideo() { | |
| return new Promise((resolve, reject) => { | |
| const youtubeIframe = document.querySelector('#youtube-video iframe'); | |
| if (youtubeIframe) { | |
| const timer = setTimeout(() => { | |
| reject(new Error('YouTube video load timeout')); | |
| }, 3000); // 3秒后检查 | |
| youtubeIframe.onload = () => { | |
| clearTimeout(timer); | |
| resolve('YouTube video loaded successfully'); | |
| }; | |
| youtubeIframe.onerror = () => { | |
| clearTimeout(timer); | |
| reject(new Error('YouTube video load error')); | |
| }; | |
| } else { | |
| reject(new Error('YouTube iframe not found')); | |
| } | |
| }); | |
| } | |
| // 初始化视频组 | |
| window.onload = () => { | |
| checkYouTubeVideo() | |
| .then(message => { | |
| console.log(message); | |
| }) | |
| .catch(error => { | |
| console.error(error); | |
| // 不显示错误信息，仅记录错误 | |
| }) | |
| .finally(() => { | |
| loadGroup('group1'); | |
| loadGroup('group2'); | |
| loadGroup('group3'); | |
| loadGroup('group4'); | |
| loadOtherVideo(); | |
| }); | |
| }; | |