File size: 14,488 Bytes
2837c05
66d9b20
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9184e45
66d9b20
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9184e45
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66d9b20
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23e4fa7
 
 
 
66d9b20
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23e4fa7
66d9b20
 
 
 
 
 
 
 
 
 
 
 
 
 
23e4fa7
66d9b20
23e4fa7
 
 
66d9b20
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0e47d41
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66d9b20
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2837c05
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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Official StreamAV-Bench leaderboard for streaming audio-video generation.">
    <meta name="theme-color" content="#f5f2ea">
    <meta property="og:title" content="StreamAV-Bench Leaderboard">
    <meta property="og:description" content="Metric-wise evaluation of streaming audio-video generation systems.">
    <meta property="og:type" content="website">
    <title>StreamAV-Bench Leaderboard</title>
    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%2318231f'/%3E%3Cpath d='M12 35h8l4-14 7 28 7-37 5 23h9' fill='none' stroke='%23fffef9' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script src="app.js" defer></script>
  </head>
  <body>
    <a class="skip-link" href="#leaderboard">Skip to leaderboard</a>

    <header class="site-header">
      <div class="shell header-inner">
        <a class="brand" href="https://liukqchoco.github.io/StreamAVBench/" target="_blank" rel="noopener noreferrer">
          <svg class="brand-mark" viewBox="0 0 42 42" role="img" aria-label="StreamAV-Bench">
            <rect x="1" y="1" width="40" height="40" rx="11" fill="currentColor"/>
            <path d="M9 23h4l2.6-7 4.2 14L24 11l3.4 12H33" fill="none" stroke="#fffdf7" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="33" cy="23" r="2.2" fill="#ef9b77"/>
          </svg>
          <span>
            <strong>StreamAV-Bench</strong>
            <small>Leaderboard</small>
          </span>
        </a>

        <nav aria-label="Primary navigation">
          <a href="#leaderboard">Results</a>
          <a href="#metrics">Metrics</a>
        </nav>
      </div>
    </header>

    <main>
      <section class="hero">
        <div class="hero-grid" aria-hidden="true"></div>
        <div class="hero-orb hero-orb-one" aria-hidden="true"></div>
        <div class="hero-orb hero-orb-two" aria-hidden="true"></div>
        <div class="shell hero-inner">
          <div class="hero-copy">
            <h1>StreamAV-Bench <em>Leaderboard</em></h1>
            <p class="hero-tagline" id="hero-tagline">Streaming systems, evaluated while they run.</p>
            <p class="hero-description" id="hero-description">
              Official metric-wise results for streaming audio-video generation across progressive and interactive evaluation tracks.
            </p>
            <div class="hero-actions">
              <a class="button button-primary" href="#leaderboard">
                Explore results <span aria-hidden="true"></span>
              </a>
            </div>
            <nav class="hero-resources" aria-label="Project resources">
              <a id="paper-link" class="hero-resource is-disabled" aria-disabled="true">
                <span class="hero-resource-icon"></span>
                <span><strong>Paper</strong><small data-link-status>Coming soon</small></span>
              </a>
              <a id="project-link" class="hero-resource" href="https://liukqchoco.github.io/StreamAVBench/" target="_blank" rel="noopener noreferrer">
                <span class="hero-resource-icon"></span>
                <span><strong>Project</strong><small data-link-status>Project page</small></span>
              </a>
              <a id="code-link" class="hero-resource" href="https://github.com/liukqchoco/StreamAVBench-Code" target="_blank" rel="noopener noreferrer">
                <span class="hero-resource-icon">&lt;/&gt;</span>
                <span><strong>Code</strong><small data-link-status>Code repository</small></span>
              </a>
              <a id="dataset-link" class="hero-resource is-disabled" aria-disabled="true">
                <span class="hero-resource-icon"></span>
                <span><strong>Dataset</strong><small data-link-status>Coming soon</small></span>
              </a>
            </nav>
          </div>

          <div class="stream-card">
            <div class="stream-card-header">
              <span>Evaluation signal</span>
              <i><b></b> 180-second rollout</i>
            </div>
            <div class="signal-group signal-progressive">
              <div class="signal-label">
                <strong>Progressive</strong>
                <small>one global prompt</small>
              </div>
              <div class="signal-track">
                <span style="--level: 82%"></span>
                <span style="--level: 76%"></span>
                <span style="--level: 70%"></span>
                <span style="--level: 66%"></span>
                <span style="--level: 59%"></span>
                <span style="--level: 54%"></span>
              </div>
              <div class="signal-times"><span>0</span><span>60</span><span>120</span><span>180s</span></div>
            </div>
            <div class="signal-divider"><span>committed history</span></div>
            <div class="signal-group signal-interactive">
              <div class="signal-label">
                <strong>Interactive</strong>
                <small>five runtime updates</small>
              </div>
              <div class="update-track">
                <span>P0</span><i></i><span>U1</span><i></i><span>U2</span><i></i><span>U3</span><i></i><span>U4</span><i></i><span>U5</span>
              </div>
              <div class="response-line">
                <b style="--delay: 18%"></b>
                <b style="--delay: 42%"></b>
                <b style="--delay: 31%"></b>
                <b style="--delay: 54%"></b>
                <b style="--delay: 38%"></b>
              </div>
            </div>
            <p class="stream-card-note"><span></span> Scores expose change over time—not only the final output.</p>
          </div>
        </div>
      </section>

      <section class="stat-band" aria-label="Benchmark statistics">
        <div class="shell stats">
          <div><strong id="stat-systems">13</strong><span>evaluated systems</span></div>
          <div><strong id="stat-metrics">32</strong><span>core metrics</span></div>
          <div><strong>2</strong><span>streaming tracks</span></div>
          <div><strong id="stat-scenarios">320</strong><span>verified scenarios</span></div>
          <div><strong id="stat-duration">180s</strong><span>continuous generation</span></div>
        </div>
      </section>

      <section class="section leaderboard-section" id="leaderboard">
        <div class="shell">
          <div class="section-heading results-heading">
            <p class="kicker">Official results</p>
            <h2>Compare systems by metric.</h2>
            <p class="section-intro">Choose a metric below to rank systems. Metrics use different scales and are therefore reported separately.</p>
          </div>

          <div class="explorer">
            <div class="track-switcher">
              <div class="track-tabs" id="track-tabs" role="tablist" aria-label="Evaluation views"></div>
              <p id="track-description">Quality, alignment, continuity, and efficiency metrics applied across both tracks.</p>
            </div>

            <div class="category-bar">
              <span>View</span>
              <div class="category-tabs" id="category-tabs" aria-label="Metric categories"></div>
            </div>

            <div class="table-panel">
              <div class="table-panel-header">
                <div>
                  <p class="table-kicker" id="table-kicker">Metric-wise ranking</p>
                  <h3 id="category-title">Quality &amp; Alignment</h3>
                  <p id="category-description">Perceptual quality and semantic or temporal correspondence between audio and video.</p>
                </div>
                <p class="ranking-label" id="ranking-label">Ranked by <strong>Visual Aesthetics</strong><span>Higher is better</span></p>
              </div>

              <div class="toolbar">
                <label class="search-control">
                  <span class="sr-only">Search systems</span>
                  <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5"></circle><path d="m16 16 4 4"></path></svg>
                  <input id="model-search" type="search" placeholder="Search systems..." autocomplete="off">
                </label>
                <label class="metric-select-control">
                  <span>Rank by</span>
                  <select id="metric-select" aria-label="Select the metric used to rank systems"></select>
                </label>
                <label>
                  <span>Paradigm</span>
                  <select id="paradigm-filter">
                    <option value="all">All paradigms</option>
                    <option value="Native joint">Native joint</option>
                    <option value="Cascaded">Cascaded</option>
                  </select>
                </label>
                <label>
                  <span>Source</span>
                  <select id="access-filter">
                    <option value="all">All sources</option>
                    <option value="Open">Open-source</option>
                    <option value="Web">Closed-source</option>
                  </select>
                </label>
                <button class="tool-button" id="reset-filters" type="button" title="Reset filters">
                  <span aria-hidden="true"></span> Reset
                </button>
                <button class="tool-button download-button" id="download-csv" type="button">
                  <span aria-hidden="true"></span> CSV
                </button>
              </div>

              <div class="data-error" id="data-error" role="alert" hidden>
                <strong>Leaderboard unavailable</strong>
                <p>The leaderboard data could not be loaded.</p>
              </div>

              <div class="table-scroll" tabindex="0" aria-label="Scrollable leaderboard table">
                <table id="leaderboard-table">
                  <caption class="sr-only">StreamAV-Bench system results</caption>
                </table>
              </div>

              <div class="table-footer">
                <p id="table-status" aria-live="polite">13 of 13 systems</p>
                <div class="legend" aria-label="Cell highlighting legend">
                  <span><i class="legend-best"></i> Best published value</span>
                  <span><i class="legend-second"></i> Second distinct value</span>
                  <span><b></b> Unavailable</span>
                </div>
              </div>
            </div>

            <div class="evidence-note">
              <span aria-hidden="true">i</span>
              <div id="context-copy">
                <p><strong>Reading the ranks.</strong> Click any metric header to rank by that metric. Published three-decimal ties use competition ranking (for example, 1, 1, 3). PVRL and PARL are conditional on successful target achievement and should be read with PVUAR and PAUAR.</p>
                <p>HDF is evaluated only when its required source state was established. NBC, FPS, and TTFC are unavailable for PixVerse R1, HappyOyster, and Odyssey-2 because their web interfaces do not expose the required traces.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="section metrics-section" id="metrics">
        <div class="shell">
          <div class="section-heading split-heading">
            <div>
              <p class="kicker">Metric guide</p>
              <h2>Know what each number measures.</h2>
            </div>
            <p class="section-intro">The cards update with the selected leaderboard category. Choose a card to rank the table by that metric.</p>
          </div>
          <div class="metric-guide" id="metric-guide"></div>
        </div>
      </section>

      <section class="section protocol-section">
        <div class="shell">
          <div class="section-heading">
            <p class="kicker">How to read StreamAV-Bench</p>
            <h2>Performance is a profile, not a single number.</h2>
          </div>
          <div class="protocol-grid">
            <article>
              <span>01</span>
              <h3>Choose the evaluation track</h3>
              <p>Use Progressive for fixed-prompt long-horizon behavior and Interactive for runtime response, retention, and reuse.</p>
            </article>
            <article>
              <span>02</span>
              <h3>Read score and drift together</h3>
              <p>High quality or fulfillment can coexist with temporal drift. Read absolute scores alongside their drift counterparts.</p>
            </article>
            <article>
              <span>03</span>
              <h3>Read success rate with latency</h3>
              <p>Low conditional latency does not guarantee reliable updates. Read response latency together with achievement rate.</p>
            </article>
          </div>
        </div>
      </section>

    </main>

    <footer>
      <div class="shell footer-inner">
        <div class="footer-brand">
          <svg class="brand-mark" viewBox="0 0 42 42" aria-hidden="true">
            <rect x="1" y="1" width="40" height="40" rx="11" fill="currentColor"/>
            <path d="M9 23h4l2.6-7 4.2 14L24 11l3.4 12H33" fill="none" stroke="#fffdf7" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="33" cy="23" r="2.2" fill="#ef9b77"/>
          </svg>
          <span><strong>StreamAV-Bench</strong><small>Persistent · responsive · synchronized</small></span>
        </div>
        <p>Official benchmark results. Scores are reproduced from the final paper tables.</p>
        <a href="#leaderboard">Back to results ↑</a>
      </div>
    </footer>

    <noscript>
      <div class="noscript">JavaScript is required to render and sort the leaderboard.</div>
    </noscript>
  </body>
</html>