-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
752 lines (687 loc) · 33.3 KB
/
Copy pathindex.html
File metadata and controls
752 lines (687 loc) · 33.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>MSC</title>
<link rel="icon" type="image/png" href="https://img.icons8.com/papercut/480/fish.png">
<style>
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
color: #333;
}
body {
background-color: #f9f9f9;
line-height: 1.6;
padding: 20px;
}
h1,
h2,
h3 {
color: #2c3e50;
}
h1 span {
text-decoration: underline;
}
a {
color: #3498db;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Header */
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
font-size: 2.5rem;
}
.header p {
font-size: 1rem;
color: #7f8c8d;
}
/* Paragraph Styles */
.project p,
.header p,
footer p {
max-width: 80%;
margin: 0 auto; /* Align to the center */
text-align: justify; /* Justify text content */
}
/* Project Section */
.project {
margin-bottom: 40px;
}
.project h2 {
font-size: 1.75rem;
text-align: center;
margin-bottom: 10px;
}
.project .tags {
margin-top: 10px;
text-align: center;
}
.project .tags span {
display: inline-block;
background-color: #3498db;
color: #fff;
font-size: 0.8rem;
padding: 5px 10px;
margin-right: 5px;
border-radius: 5px;
}
/* Image Section */
.image-section {
text-align: center;
margin: 20px auto 40px;
max-width: 80%; /* Align with paragraphs */
}
.image-section img {
max-width: 100%;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: block; /* Ensure image is treated as a block element */
margin: 0 auto; /* Center the image */
}
.image-section .caption {
font-size: 0.9rem;
color: #7f8c8d;
margin-top: 8px;
text-align: center;
}
/* Footer */
footer {
text-align: center;
margin-top: 30px;
font-size: 0.9rem;
color: #7f8c8d;
}
footer a {
font-size: 0.9rem;
}
.key-term {
background-color: #f0f8ff; /* Light blue background */
color: #2c3e50; /* Dark text color */
font-weight: bold; /* Bold text */
padding: 0 4px; /* Add slight padding */
border-radius: 4px; /* Rounded edges */
}
.video-container {
display: flex;
justify-content: center;
align-items: center; /* Align vertically */
margin: 20px auto;
flex-direction: column; /* Stack video and caption vertically */
}
iframe {
width: 80%;
height: 500px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}
video {
width: 80%;
height: auto;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}
/* Style subtitles using the ::cue pseudo-element */
video::cue {
font-size: 14px; /* Set the font size for subtitles */
color: #333; /* Change subtitle text color */
background: rgba(
255,
255,
255,
0.7
); /* Adjust subtitle background */
padding: 2px 4px; /* Add some padding to subtitles */
border-radius: 4px; /* Optional: Make subtitle background rounded */
}
</style>
</head>
<body>
<div class="container">
<!-- Header Section -->
<div class="header">
<h1>
<img src="https://img.icons8.com/papercut/480/fish.png" alt="fish"
style="width: 45px; height: 45px; vertical-align: middle; margin-right: 8px;">
MSC: A Marine Wildlife Video Dataset with Grounded
Segmentation and Clip-Level Captioning
</h1>
<p style="text-align: center">
<a href="#">Quang-Trung Truong</a><sup>1</sup>,
<a href="#">Wong Yuk Kwan</a><sup>1</sup>,
<a href="#">Vo Hoang Kim Tuyen Dang</a><sup>2</sup>,
<a href="#">Rinaldi Gotama</a><sup>3</sup>,
<a href="#">Duc Thanh Nguyen</a><sup>4</sup>,
<a href="#">Sai-Kit Yeung</a><sup>1</sup>
</p>
<p style="text-align: center">
<sup>1</sup>HKUST, <sup>2</sup>HCMUS, <sup>3</sup>Indo Ocean Project, <sup>4</sup>Deakin University
</p>
<span class="key-term" style="
background: linear-gradient(to right, #6a11cb, #2575fc);
color: #fff;
font-weight: bold;
padding: 5px 10px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
display: inline-block;">
ACM International Conference on Multimedia (ACMMM Datasets) 2025
</span>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<div class="button-container">
<a href="https://quangtrungtruong.github.io/images/MSC.pdf" class="custom-button" target="_blank">
<i class="fas fa-file-alt"></i> Paper
</a>
<a href="link-to-code" class="custom-button disabled" tabindex="-1" aria-disabled="true">
<i class="fas fa-code"></i> Code
</a>
<a href="#dataset_download" class="custom-button" tabindex="-1" aria-disabled="true">
<i class="fas fa-database"></i> Dataset
</a>
</div>
<style>
.custom-button i {
margin-right: 8px; /* Add spacing between icon and text */
color: #fff; /* Set icon color to white */
}
.button-container {
text-align: center;
margin: 20px 0;
}
.custom-button {
display: inline-block;
background: linear-gradient(to right, #222831, #393E46);
color: #fff;
text-decoration: none;
padding: 8px 15px;
margin: 0 5px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.custom-button:hover {
background: linear-gradient(to right, #222831, #393E46);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}
.custom-button.disabled {
background-color: #ccc;
color: #666;
pointer-events: none; /* Disable click events */
cursor: not-allowed;
box-shadow: none;
}
</style>
<div class="project">
<h2>News</h2>
<div class="news-list-aligned">
<div class="news-item-aligned">
<span class="news-date-aligned"><i class="fas fa-calendar-alt"></i> 13 April, 2026</span>
<span class="news-desc-aligned"><i class="fas fa-microphone"></i> A small set of MSC released.</span>
</div>
</div>
<style>
.news-list-aligned {
max-width: 80%;
margin: 0 auto 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.news-item-aligned {
display: flex;
align-items: flex-start;
background: #f5f7fa;
border-radius: 8px;
border: 1px solid #e0e7ef;
padding: 10px 18px;
box-shadow: 0 1px 4px rgba(44,62,80,0.05);
}
.news-date-aligned {
min-width: 140px;
font-weight: bold;
color: #2575fc;
display: flex;
align-items: center;
gap: 6px;
font-size: 1rem;
}
.news-desc-aligned {
margin-left: 16px;
color: #2c3e50;
font-size: 1rem;
text-align: justify;
display: flex;
align-items: center;
gap: 8px;
}
</style>
</div>
<!-- Project 1 -->
<div class="project">
<h2>Abstract</h2>
<p>
Marine videos present significant challenges for video understanding due to the dynamics of marine objects
and the surrounding environment, camera motion, and the complexity of underwater scenes. Existing video
captioning datasets, typically focused on generic or human-centric domains, often fail to generalize to the
complexities of the marine environment and gain insights about marine life. To address these limitations, we
propose a two-stage marine object-oriented video captioning pipeline. We introduce a comprehensive video
understanding benchmark that leverages the triplets of video, text, and segmentation masks to facilitate
visual grounding and captioning, leading to improved marine video understanding and analysis, and marine
video generation. Additionally, we highlight the effectiveness of video splitting in order to detect salient
object transitions in scene changes, which significantly enrich the semantics of captioning content.
</p>
</div>
<div class="project">
<h2>Data Pipeline and Statistics</h2>
<div class="image-section">
<img src="MSC_files/MSC_Annotation.png" alt="MSC Annotation Generation"/>
<p class="caption">MSC Annotation Generation</p>
</div>
<div class="image-section">
<img src="MSC_files/MSC_Statistics.png" alt="MSC Overview of the MSC dataset"/>
<p class="caption">Overview of the MSC dataset</p>
</div>
<div class="image-section">
<div class="figure">
<div class="subfigure">
<canvas id="objectCounts"></canvas>
<div class="caption">(a)</div>
</div>
<div class="subfigure">
<canvas id="averageAreas"></canvas>
<div class="caption">(b)</div>
</div>
<div class="subfigure">
<canvas id="regionDistribution"></canvas>
<div class="caption">(c)</div>
</div>
</div>
<div class="caption">Dataset. (a) The number of instances per category. (b) The average area of category.
(c) Distribution of the number of instances by regions in the dataset.
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx1 = document.getElementById('objectCounts').getContext('2d');
const objectCountsChart = new Chart(ctx1, {
type: 'bar',
data: {
labels: ['Sea floor', 'Reefs', 'Fish', 'Wrecks', 'Divers', 'Plants'],
datasets: [{
label: 'Object count by category',
data: [6709, 2300, 2602, 232, 265, 151],
backgroundColor: 'rgba(255, 192, 203, 0.6)',
}]
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Object count by category'
}
}
}
}
});
const ctx2 = document.getElementById('averageAreas').getContext('2d');
const averageAreasChart = new Chart(ctx2, {
type: 'bar',
data: {
labels: ['Sea floor', 'Reefs', 'Fish', 'Wrecks', 'Divers', 'Plants'],
datasets: [{
label: 'Average Area by Category (#pixels)',
data: [478387, 1081263, 55430, 820193, 92684, 760952],
backgroundColor: 'rgba(0, 128, 128, 0.6)',
}]
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Average Area by Category (#pixels)'
}
}
}
}
});
const ctx3 = document.getElementById('regionDistribution').getContext('2d');
const regionDistributionChart = new Chart(ctx3, {
type: 'bar',
data: {
labels: ['Tulamben', 'Dublin', 'TelAviv', 'BigIsland', 'Lajolle', 'WestPalm', 'Egypt', 'HongKong'],
datasets: [
{
label: 'Sea floor',
data: [0.6747, 0.2258, 0.1758, 0.2487, 0.1314, 0.2282, 0, 0.2152],
backgroundColor: 'rgba(0, 0, 255, 0.4)',
},
{
label: 'Reefs',
data: [0.1282, 0.5596, 0.2454, 0.6632, 0.2857, 0.3693, 0.625, 0.6329],
backgroundColor: 'rgba(255, 0, 0, 0.4)',
},
{
label: 'Fish',
data: [0.1712, 0.1717, 0.4014, 0.0259, 0.5543, 0.2822, 0, 0.1519],
backgroundColor: 'rgba(0, 255, 0, 0.4)',
},
{
label: 'Wrecks',
data: [0.0037, 0, 0.0958, 0, 0, 0.0664, 0, 0],
backgroundColor: 'rgba(255, 165, 0, 0.4)',
},
{
label: 'Human divers',
data: [0.0121, 0.0350, 0.0597, 0.0104, 0.0286, 0.0539, 0, 0],
backgroundColor: 'rgba(128, 0, 128, 0.4)',
},
{
label: 'Aquatic plants',
data: [0.0101, 0.0079, 0.0220, 0.0518, 0, 0, 0.375, 0],
backgroundColor: 'rgba(165, 42, 42, 0.4)',
}
]
},
options: {
responsive: true,
indexAxis: 'y',
scales: {
x: {
stacked: true,
title: {
display: true,
text: 'Proportion'
}
},
y: {
stacked: true,
}
}
}
});
</script>
</div>
</div>
<div class="project">
<h2>Clip-level Captioning</h2>
<div class="slider-container">
<div class="slides">
<div class="slide">
<video controls>
<source src="videos/MVK2_TelAviv1_Oct2022_0050.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="slide">
<video controls>
<source src="videos/MVK2_TelAviv1_Oct2022_0034.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="slide">
<video controls>
<source src="videos/MVK2_TelAviv1_Oct2022_0027.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="slide">
<video controls>
<source src="videos/MVK2_HongKong7_Aug2023_0010.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="navigation">
<button class="nav-button" id="prev">Previous</button>
<button class="nav-button" id="next">Next</button>
</div>
</div>
<!-- Add this CSS to your existing <style> section -->
<style>
.slider-container {
width: 80%;
margin: 20px auto;
overflow: hidden;
position: relative;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: #fff;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
video {
width: 100%;
height: auto;
border: none;
}
.navigation {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
nav-button
</style>
<!-- Add this JavaScript before the closing </body> tag -->
<script>
const slides = document.querySelector('.slides');
const slide = document.querySelectorAll('.slide');
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');
const subtitleContainer = document.createElement('div'); // Create a container for subtitles
subtitleContainer.style.textAlign = 'center';
subtitleContainer.style.marginTop = '10px';
subtitleContainer.style.fontSize = '1rem';
subtitleContainer.style.color = '#333';
slides.parentElement.appendChild(subtitleContainer); // Append it below the slider
const subtitles = [
[
{
start: 0,
end: 2,
text: "A group of red reef fish with forked tails swim actively around a coral reef, mainly dominated by a yellow coloured coral. The vibrant reef teems with life, while the clear blue water reveals additional schools of smaller fish in the distance."
},
{
start: 2,
end: 6,
text: "Colorful fish swim around a large reef, dominated by a yellow coral. The fish display quick movements, and a group of red fish with forked tails can be swimming towards the bottom of the reef. The sandy sea floor is visible beneath the coral, scattered with small rocks."
},
{
start: 6,
end: 10,
text: "A red grouper with yellow fin tips swims calmly below a coral reef. The reef is dominated by a yellow coral and tiny bright blue fish can be seen swimming slowly above the grouper. The reef is upon a sandy seafloor with scattered rocks and pieces of coral."
},
{
start: 10,
end: 14,
text: "A red grouper can be seen hiding under a reef structure. As the camera moves a sandy seafloor dotted with rocks and large patches of coral structures is revealed, the camera focuses on a large coral structure. Bright orange fish can be seen swimming close by to the reef."
},
{
start: 14,
end: 18,
text: "Two tall coral reef structures are displayed, both with various coral species upon them and various small reef fish swimming around them. The sea floor is sandy and rocky with scattered coral debris. The sunlight from the surface creates bright blue coloured waters."
},
{
start: 18,
end: 22,
text: "A vibrant coral reef teems with small, colorful fish swimming around the coral structures. As the camera moves away from the reef the sea floor is revealed, consisting of sand and patches of rocks and coral debris. Colourful fish swim around in the bright blue waters."
},
{
start: 22,
end: 25,
text: "A bright blue sea is filled with brightly coloured fish swimming actively in its waters. The seafloor consists of light sand and patches of rocks and coral debris, the clear blue water stretches into the distance."
}
],
[
{
start: 0,
end: 1,
text: "A large, tall, vibrant coral reef teeming with life. A few small brightly coloured fish swim around the reef. There are various coral formations, including branching and brain corals, the structure is on a sandy seabed. There are two divers swimming behind the coral structure, one with yellow fins. The sandy sea floor provides a clear contrast to the colorful reef, with a serene, blue background. The video shows a vibrant coral reef with a diverse array of branching and brain corals, a few small brightly coloured fish swim around the reef. In the background, two human divers can be seen exploring, one with bright yellow fins."
},
{
start: 1,
end: 8,
text: "The video features a vibrant coral reef teeming with life. Various coral formations are visible, from branching structures to rounded mounds. Small fish dart around the reef, likely feeding or searching for shelter. The sandy seabed can be seen as well as the clear blue water in the background. The video showcases a vibrant coral reef with a diverse array of fish and corals. The background features a sandy sea floor and a coral reef in the foreground. The behavior of the fish appears to be active, as they are swimming around the reef. The sandy sea floor is visible in the background."
},
{
start: 8,
end: 12,
text: "Vibrant coral reefs dominate, teeming with life. Various fish species dart among the coral formations. A diver swims around the coral reef structure in the background. The video shows a vibrant coral reef with a a few colourful fish swimming around. The reef is covered in various types of coral. In the background, a human diver can be seen exploring the reef. The sea floor is visible in the distance."
},
{
start: 12,
end: 18,
text: "The images depict a vibrant coral reef teeming with life. The focal point is a large, textured reef formation, with various coral species of diverse colors. Numerous small, colorful fish swim around the reef. The background is a deep blue sea filled with colourful small reef fish. Trails of bubbles can be seen rising to the surface from divers. A bright coral reef is shown, covered in colourful corals. A few small fish swim around the reef. In the dark blue sea beside the reef, there are many brightly coloured reef fish swimming around. Trails of bubbles can be seen rising to the surface from nearby divers exploring."
},
{
start: 18,
end: 23,
text: "The video presents a vibrant coral reef teeming with life. Various fish of different sizes and colors swim around the coral, likely feeding or exploring the reef environment. In the background, a diver swims away from the reef, a trail of bubbles from their regulator. The video showcases a vibrant coral reef teeming with life. The colors are vibrant and their are various fish of different bright colours swimming around the reef. The reef is covered in various types of coral and sponges. The background is a deep blue and the sun is shining brightly. A diver with a trail of bubbles swims past in the background away from the reef."
},
{
start: 23,
end: 30,
text: "The scene presents a vibrant coral reef teeming with life. A large, diverse reef formation dominates the view with a smaller reef structure to its right. Numerous colorful fish, likely feeding or interacting, dart around the structure and groups of fish swim above the reed. A sandy seafloor and the vast blue water form the background. A healthy coral reef teems with life, including schools of colorful fish and coral. Groups of fish swim slowly above the reef in the bright blue ocean, the reef is upon a sandy seafloor with a smaller coral sructure to its right."
}
],
[
{
start: 0,
end: 7,
text: "A serene aquatic environment with a sandy seafloor. There are coral reefs scattered on the seafloor and in the centre features a small reef structure with a hole in the middle. A few fish swim in the distance. The clear, blue water creates a beautiful backdrop."
},
{
start: 7,
end: 11,
text: "The initial frames depict a tranquil marine scene. A reef on the left-hand side is featured alongside a few smaller reefs sparsely covering the sea floor. Fish are scattered across the sandy seafloor, and a white-coloured fish engages in foraging behaviour. A brown-coloured object in the centre appears to be floating through the water."
},
{
start: 11,
end: 20,
text: "A small dark-coloured fish appears to be foraging on the sandy seafloor, and a larger fish is swimming through the blue. Scattered coral reefs can be seen, but the seabed is mostly sand. A diver is visible swimming away in the background with a trail of bubbles leading to the surface, and a brown object is floating through the sunlit waters."
},
{
start: 20,
end: 30,
text: "The initial frames feature divers exploring a sandy sea floor dotted with coral formations. Two divers float above the seafloor together whilst another diver is swimming off towards a larger coral reef structure. The two divers are slowly moving, likely exploring the area. The clear, blue background suggests good visibility in the water."
}
],
[
{
start: 0,
end: 32,
text: "The video presents a structured, sunken metal frame, with 2 levels, heavily encrusted with marine life like corals, fan shaped corals and sponges. Fish of various species dart around the structure, possibly seeking shelter or feeding on the organisms. At the foot of the structure some old car tires can be seen. The background is a deep blue ocean, and the sea floor is visible, adding to the marine environment's allure. A large structured, sunken metal frame, with 2 levels, heavily encrusted with marine life like corals, fan shaped corals and sponges dominates the scene, attracting small fish darting between its beams. Fish appear to be feeding and exploring the nooks while corals and sponges grow along the metal, creating a thriving artificial reef. ON th efoot of the structure some car tires are lying on the ocean floor. The sea floor consists of sand and rocks scattered around the base, with occasional aquatic plants attached to the structure. Background: murky blue water, diffused light, sparse aquatic plants, no divers visible. The image shows a structured, sunken metal frame, with 2 levels, heavily encrusted with marine life like corals, fan shaped corals and sponges with a blue background. The structure is covered in coral and sponges, and there are schools of fish swimming around and through it.."
}
]
];
let currentIndex = 0;
function updateSlider() {
const offset = -currentIndex * 100;
slides.style.transform = `translateX(${offset}%)`;
// Clear existing subtitles
subtitleContainer.innerHTML = '';
// Add subtitles for the current video
const currentVideo = slide[currentIndex].querySelector('video');
const currentSubtitles = subtitles[currentIndex];
currentVideo.addEventListener('timeupdate', () => {
const currentTime = currentVideo.currentTime;
const currentSubtitle = currentSubtitles.find(sub => currentTime >= sub.start && currentTime <= sub.end);
subtitleContainer.textContent = currentSubtitle ? currentSubtitle.text : '';
});
}
nextButton.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % slide.length; // Loop to the first slide
updateSlider();
});
prevButton.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + slide.length) % slide.length; // Loop to the last slide
updateSlider();
});
// Initialize the first subtitles
updateSlider();
</script>
</div>
<div class="project" id="dataset_download">
<h2>Dataset</h2>
<p style="text-align: center">
If you would like to download the Marine Wildlife Video dataset, please fill out an agreement to the <a
target="_blank" href="https://forms.gle/7pHt9fcto8hHHu8k9">"MSC Marine Wildlife Video Dataset Terms of
Use"</a> to
get the download link.
</p>
</div>
<section id="BibTeX">
<h2 class="title" style="text-align:center;">Citation</h2>
<div class="citation-box">
<code id="bibtex-code">
@article{truong2025msc,
title = {MSC: A Marine Wildlife Video Dataset with Grounded Segmentation and Clip-Level Captioning},
author = {Truong, Quang-Trung and Wong, Yuk-Kwan and Dang, Vo Hoang Kim Tuyen and Gotama, Rinaldi and
Nguyen, Duc Thanh and Yeung, Sai-Kit},
journal = {arXiv preprint arXiv:2508.04549},
year = {2025}
}
</code>
<style>
#bibtex-code {
white-space: pre; /* Preserve spaces and line breaks */
font-family: 'Fira Mono', 'Consolas', monospace; /* Use a monospace font */
font-size: 1em;
}
.citation-box {
background: #e0e0e0;
color: #333;
padding: 10px 10px;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(34, 40, 49, 0.18);
margin: 20px auto;
max-width: 80%;
width: 80%;
font-size: 0.8rem;
/* border: 1.5px solid #2575fc; */ /* Remove or comment out this line */
position: relative;
overflow-x: auto;
}
</style>
</div>
</section>
</div>
</body>
</html>