BrightVQ/index.html at main · bwchen05/BrightVQ · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="BrightRate: Quality Assessment for User-Generated HDR Videos">
  <meta property="og:title" content="BrightRate: Quality Assessment for User-Generated HDR Videos"/>
  <meta property="og:description" content="The first large-scale crowdsourced UGC-HDR video quality dataset with 5,992 videos and 211,848 subjective ratings."/>
  <meta property="og:url" content="URL_OF_WEBSITE"/>
  <meta property="og:image" content="static/images/data-distri.png" />
  <meta name="twitter:title" content="BrightRate: Quality Assessment for User-Generated HDR Videos">
  <meta name="twitter:description" content="BrightVQ is the largest HDR-UGC video dataset for perceptual quality assessment.">
  <meta name="twitter:image" content="static/images/data-distri.png">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="keywords" content="HDR, UGC, Video Quality, Dataset, MOS, VQA">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>BrightRate: Quality Assessment for User-Generated HDR Videos</title>
  <link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet">
  <link rel="stylesheet" href="static/css/bulma.min.css">
  <link rel="stylesheet" href="static/css/index.css">
  <!-- Bulma Carousel CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel/dist/css/bulma-carousel.min.css">
  <script defer src="static/js/fontawesome.all.min.js"></script>
</head>

<body>

  <section class="hero">
    <div class="hero-body">
      <div class="container is-max-desktop">
        <div class="columns is-centered">
          <div class="column has-text-centered">
            <h1 class="title is-1 publication-title">BrightRate: Quality Assessment for User-Generated HDR Videos</h1>
            <div class="is-size-5 publication-authors">
              <span class="author-block">Anonymous Authors</span>
            </div>
            <div class="is-size-5 publication-authors">
              <span class="author-block">† Institute-1</span>
            </div>
            <div class="is-size-5 publication-authors">
              <span class="author-block">‡ Institute-2</span>
            </div>
            <div class="is-size-5 publication-authors">
              <span class="author-block">* Project Lead</span>
            </div>
            <div class="publication-links">
              <span class="link-block">
                <a href="static/pdfs/BrightRate.pdf" target="_blank" class="external-link button is-normal is-rounded is-dark">
                  <span class="icon"><i class="fas fa-file-pdf"></i></span>
                  <span>Paper</span>
                </a>
              </span>
              <span class="link-block">
                <a href="static/pdfs/Supple.pdf" target="_blank" class="external-link button is-normal is-rounded is-dark">
                  <span class="icon"><i class="fas fa-file-pdf"></i></span>
                  <span>Supplementary</span>
                </a>
              </span>
              <span class="link-block">
                <a href="https://github.com/brightvqa/BrightVQ/" target="_blank" class="external-link button is-normal is-rounded is-dark">
                  <span class="icon"><i class="fab fa-github"></i></span>
                  <span>GitHub</span>
                </a>
              </span>
              <span class="link-block">
                <a href="https://arxiv.org/abs/XXXX.XXXXX" target="_blank" class="external-link button is-normal is-rounded is-dark">
                  <span class="icon"><i class="ai ai-arxiv"></i></span>
                  <span>arXiv</span>
                </a>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Main Dataset Figure -->
  <section class="section">
    <div class="container is-max-desktop">
      <div class="column">
        <img src="static/images/fig-1.png" alt="Overall Figure" style="width:100%;">
        <p class="has-text-centered">Content categories and challenging scenes in BrightVQA.</p>
      </div>
    </div>
  </section>


<!-- Carousel Section -->
<section class="section">
  <div class="container is-max-desktop">
    <h2 class="title is-3">Distortions</h2>
    <div class="carousel carousel-animated carousel-animate-slide" data-autoplay="true">
      <div class="carousel-container">
        <div class="carousel-item is-active">
          <figure class="image">
            <img src="static/images/amt-interface.png" alt="AMT Study Interface">
            <figcaption class="has-text-centered mt-2"></figcaption>
          </figure>
        </div>
      </div>
      <div class="carousel-navigation is-overlay">
        <div class="carousel-nav-left">
          <button class="button is-text" aria-label="Previous slide">
            <span class="icon is-large">
              <i class="fas fa-chevron-left fa-lg" aria-hidden="true"></i>
            </span>
          </button>
        </div>
        <div class="carousel-nav-right">
          <button class="button is-text" aria-label="Next slide">
            <span class="icon is-large">
              <i class="fas fa-chevron-right fa-lg" aria-hidden="true"></i>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Add this script at the end of your body tag if not already present -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var carousels = bulmaCarousel.attach('.carousel', {
      slidesToScroll: 1,
      slidesToShow: 1,
      infinite: true,
      autoplay: true,
      autoplaySpeed: 5000,
      pauseOnHover: true
    });

    // Access instance
    var carousel = carousels[0];

    // Add event listeners if needed
    carousel.on('before:show', function() {
      console.log('Slide changing');
    });
  });
</script>

  <!-- Steps to Access Dataset -->
  <section class="section">
    <div class="container is-max-desktop">
      <h2 class="title is-3">How to Access the Dataset</h2>
      <ol>
        <li>Visit our <a href="https://github.com/brightvqa/BrightVQ/" target="_blank">GitHub repository</a> to access metadata files. (We recommend visiting the GitHub repository or Supplementary material for detailed instructions)</li>
        <li>Download video IDs from <code>BrightVQ.txt</code>.</li>
        <li>Use AWS CLI to download single videos (replace VIDEO_ID with the actual video ID):
          <pre><code>aws s3 cp s3://ugchdrmturk/videos/VIDEO_ID.mp4 ./BrightVQ_Videos/</code></pre>
        </li>
        <li>Use AWS CLI to download all videos:
          <pre><code>cat chug-video.txt | while read video; do
  aws s3 cp s3://ugchdrmturk/videos/${video}.mp4 ./BrightVQ_Videos/
done
          </code></pre>
        </li>
        <li>To play videos directly, replace <code>VIDEO_ID</code> in this URL:<br>
          <a href="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/VIDEO_ID.mp4" target="_blank">https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/VIDEO_ID.mp4</a></li>
        Eg: <a href="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/9ae245a27cc5ea9d2f3fae9692250281.mp4" target="_blank">https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/9ae245a27cc5ea9d2f3fae9692250281.mp4</a>
      </ol>
    </div>
  </section>

  <!-- Dataset Abstract -->
  <section class="section">
    <div class="container is-max-desktop">
      <h2 class="title is-3">Abstract</h2>
      <div class="content has-text-justified">
        <p>
          High Dynamic Range (HDR) videos offer superior luminance and color fidelity as compared to Standard Dynamic Range (SDR) content. The rapid growth of User-Generated Content (UGC) on platforms such as YouTube, Instagram, and TikTok has brought a significant increase in the volumes of streamed and shared UGC videos. This newer category of videos brings new challenges to the development of effective No-Reference (NR) video quality assessment (VQA) models specialized to HDR UGC, because of the extreme variety and severities of distortions, arising from diverse capture, editing, and processing outcomes. Towards addressing this issue, we introduce BrightVQ, a sizeable new psychometric data resource. It is the first large-scale subjective video quality database dedicated to the quality modelling of HDR UGC videos. BrightVQ comprises 2,100 videos, on which we collected 73,794 perceptual quality ratings. Using this dataset, we also developed BrightRate, a novel video quality prediction model designed to capture both UGC-specific distortions coexisting with HDR-specific artifacts. Extensive experimental results demonstrate that BrightRate achieves state-of-the-art performance on both the new BrightVQ data resource and on other existing HDR databases.
        </p>
      </div>
    </div>
  </section>

  <!-- Sample Video Embeds -->
  <section class="section hero is-light">
    <div class="container is-max-desktop">
      <h2 class="title is-3">Sample Videos (Portraits)</h2>
      <div class="columns is-multiline">
        <!-- 18 Embedded Videos -->
        <div class="column is-one-third">
          <video width="100%" controls>
            <source src="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/9ae245a27cc5ea9d2f3fae9692250281.mp4" type="video/mp4">
          </video>
          <p>Indoor Scene</p>
        </div>
        <div class="column is-one-third">
          <video width="100%" controls>
            <source src="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/6ecb44305c0a4c421201b7bcfd369acb.mp4" type="video/mp4">
          </video>
          <p>Museum</p>
        </div>
        <div class="column is-one-third">
          <video width="100%" controls>
            <source src="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/3c3383f24edcecacbc34650e30aa2f64.mp4" type="video/mp4">
          </video>
          <p>Costumes</p>
        </div>
        <div class="column is-one-third">
          <video width="100%" controls>
            <source src="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/29111a67d169ffa7efafb7fdc95b0191.mp4" type="video/mp4">
          </video>
          <p>Kayaking</p>
        </div>
        <div class="column is-one-third">
          <video width="100%" controls>
            <source src="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/1332df49188edc90be56df16975925ae.mp4" type="video/mp4">
          </video>
          <p>City</p>
        </div>
        <div class="column is-one-third">
          <video width="100%" controls>
            <source src="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/7435fdf9b5cda9a4299a7be5707ff911.mp4" type="video/mp4">
          </video>
          <p>Mountains</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Sample Video Embeds -->
  <section class="section hero is-light">
    <div class="container is-max-desktop">
      <h2 class="title is-3">Sample Videos (Landscapes)</h2>
      <div class="columns is-multiline">
        <!-- 18 Embedded Videos -->
        <div class="column is-one-third">
          <video width="100%" controls>
            <source src="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/273a5d8a3b8c2d0eb4d4c8ff5fcfe360.mp4" type="video/mp4">
          </video>
          <p>Carousel</p>
        </div>
        <div class="column is-one-third">
          <video width="100%" controls>
            <source src="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/482dc1789b58cd2a353408602e9cd903.mp4" type="video/mp4">
          </video>
          <p>Nature</p>
        </div>
        <div class="column is-one-third">
          <video width="100%" controls>
            <source src="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/711db6f2e68898d8ff6c3755959b4b58.mp4" type="video/mp4">
          </video>
          <p>Sunset</p>
        </div>
        <div class="column is-one-third">
          <video width="100%" controls>
            <source src="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/872987b2f1fb9ae521bb530cc81431bc.mp4" type="video/mp4">
          </video>
          <p>Screen</p>
        </div>
        <div class="column is-one-third">
          <video width="100%" controls>
            <source src="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/422c625efdcdb6df6da4ec26d5d52ddd.mp4" type="video/mp4">
          </video>
          <p>Light Show</p>
        </div>
        <div class="column is-one-third">
          <video width="100%" controls>
            <source src="https://ugchdrmturk.s3.us-east-2.amazonaws.com/videos/049e611e4432f4aabdd5f54f22d1f358.mp4" type="video/mp4">
          </video>
          <p>Birds</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Paper poster -->
  <section class="hero is-small is-light">
    <div class="hero-body">
      <div class="container">
        <h2 class="title">Paper</h2>
        <iframe src="static/pdfs/BrightRate.pdf" width="100%" height="550"></iframe>
      </div>
    </div>
  </section>

  <!-- BibTex citation -->
  <section class="section" id="BibTeX">
    <div class="container is-max-desktop content">
      <h2 class="title">BibTeX</h2>
      <pre><code>BibTex Code Here</code></pre>
    </div>
  </section>

  <footer class="footer">
    <div class="container">
      <div class="columns is-centered">
        <div class="column is-8">
          <div class="content">
            <p>
              This page was built using the <a href="https://github.com/eliahuhorwitz/Academic-project-page-template" target="_blank">Academic Project Page Template</a> which was adopted from the <a href="https://nerfies.github.io" target="_blank">Nerfies</a> project page.
              You are free to borrow the source code of this website, we just ask that you link back to this page in the footer. <br>
              This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
            </p>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <!-- Bulma Carousel JS -->
  <script src="https://cdn.jsdelivr.net/npm/bulma-carousel/dist/js/bulma-carousel.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      bulmaCarousel.attach('.carousel', {
        slidesToScroll: 1,
        slidesToShow: 1,
        autoplay: true,
      });
    });
  </script>
</body>
</html>