Upload 5 files

app.js

@@ -200,6 +200,33 @@ function filteredModels() {
     .sort((a, b) => compareScores(a, b, state.sortMetric, state.sortDirection));
 }
 
+function contextForCategory(categoryId) {
+  const ranking = `
+    <p><strong>Ranking.</strong> Ranks use published three-decimal scores; ties use competition ranking (for example, 1, 1, 3). Select a metric to show the best values first, or click its active table header to reverse the display order.</p>
+  `;
+  const notes = {
+    streaming: `
+      <p><strong>Availability.</strong> NBC, FPS, and TTFC are unavailable for PixVerse R1, HappyOyster, and Odyssey-2 because their web interfaces do not expose model-native boundaries or reliable generation-time traces.</p>
+    `,
+    adherence: `
+      <p><strong>Endpoint drift.</strong> VID and AID are absolute changes between the first and last 30-second intervals; lower values indicate better stability.</p>
+    `,
+    stability: `
+      <p><strong>Reading drift.</strong> The six drift metrics favor lower endpoint change, while subject and background consistency favor higher values.</p>
+    `,
+    response: `
+      <p><strong>Conditional latency.</strong> PVRL and PARL are measured only for achieved targets and should be read together with PVUAR and PAUAR.</p>
+    `,
+    state: `
+      <p><strong>Conditional coverage.</strong> HDF is evaluated only when the required source state was established.</p>
+    `,
+    adjusted: `
+      <p><strong>Diagnostic status.</strong> These four adjusted diagnostics are separate from the 32 core metrics. SA-PVRL and SA-PARL assign the 30-second cap to unachieved targets; CA-HDF-A and CA-HDF-L assign zero when the required source state was not established.</p>
+    `
+  };
+  return `${ranking}${notes[categoryId] || ""}`;
+}
+
 function renderTable() {
   const category = currentCategory();
   const metric = currentMetric();
@@ -207,6 +234,7 @@ function renderTable() {
   const rankMap = buildRankMap(state.sortMetric);
   const arrow = state.sortDirection === "desc" ? "↓" : "↑";
   const preferredDirection = metric.direction === "higher" ? "Higher is better" : "Lower is better";
+  const displayOrder = state.sortDirection === directionFor(metric) ? "Best to worst" : "Worst to best";
   const isDiagnostics = state.track === "diagnostics";
 
   elements.tablePanel.classList.toggle("is-diagnostics", isDiagnostics);
@@ -215,17 +243,9 @@ function renderTable() {
   elements.categoryDescription.textContent = category.description;
   elements.rankingLabel.innerHTML = `
     Ranked by <strong>${escapeHtml(metric.name)}</strong>
-    <span>${preferredDirection}</span>
+    <span>${preferredDirection} &middot; ${displayOrder}</span>
   `;
-  elements.contextCopy.innerHTML = isDiagnostics
-    ? `
-      <p><strong>Diagnostic status.</strong> These four adjusted diagnostics are reported separately from the 32 core metrics. They complement—rather than replace—PVRL, PARL, and HDF, and they are not combined into an overall score.</p>
-      <p>SA-PVRL and SA-PARL assign the 30-second cap to unachieved targets. CA-HDF-A and CA-HDF-L normalize conditional HDF to [0,1] and assign zero when the required source state was not established.</p>
-    `
-    : `
-      <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>
-    `;
+  elements.contextCopy.innerHTML = contextForCategory(category.id);
 
   const metricHeaders = category.metrics.map((metricKey) => {
     const item = state.data.metrics[metricKey];
@@ -233,9 +253,10 @@ function renderTable() {
     const ariaSort = active
       ? (state.sortDirection === "desc" ? "descending" : "ascending")
       : "none";
+    const title = active ? `Reverse ${item.name} order` : `Rank by ${item.name}`;
     return `
       <th scope="col" aria-sort="${ariaSort}" class="metric-column ${active ? "is-sorted" : ""}">
-        <button type="button" data-sort="${escapeHtml(metricKey)}" title="Sort by ${escapeHtml(item.name)}">
+        <button type="button" data-sort="${escapeHtml(metricKey)}" title="${escapeHtml(title)}">
           <span>${escapeHtml(item.abbr)}</span>
           <i aria-hidden="true">${active ? arrow : "↕"}</i>
           <small>${item.direction === "higher" ? "higher" : "lower"}</small>
@@ -359,8 +380,7 @@ function renderMetricGuide() {
         <h3>${escapeHtml(metric.name)}</h3>
         <p>${escapeHtml(metric.description)}</p>
         <dl>
-          <div><dt>Scale</dt><dd>${escapeHtml(metric.range)}${metric.unit ? ` · ${escapeHtml(metric.unit)}` : ""}</dd></div>
-          <div><dt>Evaluator</dt><dd>${escapeHtml(metric.evaluator)}</dd></div>
+          <div><dt>Reported as</dt><dd>${escapeHtml(metric.range)}${metric.unit ? ` · ${escapeHtml(metric.unit)}` : ""}</dd></div>
         </dl>
       </article>
     `;

data.json

@@ -129,7 +129,7 @@
       "abbr": "PQ",
       "name": "Production Quality",
       "direction": "higher",
-      "range": "Original evaluator scale",
+      "range": "Original score",
       "unit": "",
       "evaluator": "Audiobox Aesthetics",
       "description": "Perceptual and production fidelity of the generated audio."
@@ -228,7 +228,7 @@
       "abbr": "VA-D",
       "name": "Visual Aesthetics Drift",
       "direction": "lower",
-      "range": "VA units",
+      "range": "Absolute VA change",
       "unit": "",
       "evaluator": "LAION Aesthetic Predictor",
       "description": "Absolute change in visual aesthetics between the first and last intervals."
@@ -237,7 +237,7 @@
       "abbr": "VQ-D",
       "name": "Visual Quality Drift",
       "direction": "lower",
-      "range": "VQ units",
+      "range": "Absolute VQ change",
       "unit": "",
       "evaluator": "Gemini 3.1 Pro",
       "description": "Absolute change in visual quality between the first and last intervals."
@@ -246,7 +246,7 @@
       "abbr": "PQ-D",
       "name": "Production Quality Drift",
       "direction": "lower",
-      "range": "PQ units",
+      "range": "Absolute PQ change",
       "unit": "",
       "evaluator": "Audiobox Aesthetics",
       "description": "Absolute change in production quality between the first and last intervals."
@@ -255,7 +255,7 @@
       "abbr": "AQ-D",
       "name": "Audio Quality Drift",
       "direction": "lower",
-      "range": "AQ units",
+      "range": "Absolute AQ change",
       "unit": "",
       "evaluator": "Gemini 3.1 Pro",
       "description": "Absolute change in audio quality between the first and last intervals."
@@ -264,7 +264,7 @@
       "abbr": "SC",
       "name": "Subject Consistency",
       "direction": "higher",
-      "range": "Original evaluator scale",
+      "range": "Original score",
       "unit": "",
       "evaluator": "VBench-Long protocol",
       "description": "Temporal consistency of subject appearance over the generated sequence."
@@ -273,7 +273,7 @@
       "abbr": "BC",
       "name": "Background Consistency",
       "direction": "higher",
-      "range": "Original evaluator scale",
+      "range": "Original score",
       "unit": "",
       "evaluator": "VBench-Long protocol",
       "description": "Temporal consistency of background scenes over the generated sequence."
@@ -282,7 +282,7 @@
       "abbr": "AVAlign-D",
       "name": "Audio-Video Alignment Drift",
       "direction": "lower",
-      "range": "AVAlign units",
+      "range": "Absolute AVAlign change",
       "unit": "",
       "evaluator": "ImageBind",
       "description": "Absolute change in audio-video semantic correspondence between the first and last intervals."
@@ -291,7 +291,7 @@
       "abbr": "AVSync-D",
       "name": "Audio-Video Synchronization Drift",
       "direction": "lower",
-      "range": "AVSync units",
+      "range": "Absolute AVSync change",
       "unit": "s",
       "evaluator": "Synchformer",
       "description": "Absolute change in audio-video synchronization offset between the first and last intervals."
@@ -354,7 +354,7 @@
       "abbr": "PVRL",
       "name": "Prompt-Based Visual Response Latency",
       "direction": "lower",
-      "range": "Media time",
+      "range": "Media-time latency",
       "unit": "s",
       "evaluator": "Media-time measurement",
       "description": "Conditional latency to the first clear realization of an achieved visual target."
@@ -363,7 +363,7 @@
       "abbr": "PARL",
       "name": "Prompt-Based Audio Response Latency",
       "direction": "lower",
-      "range": "Media time",
+      "range": "Media-time latency",
       "unit": "s",
       "evaluator": "Media-time measurement",
       "description": "Conditional latency to the first clear realization of an achieved audio target."

index.html

@@ -237,6 +237,32 @@
         </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>

styles.css

@@ -1001,7 +1001,7 @@ thead th.metric-column {
   grid-column: 1 / -1;
   margin-top: 2px;
   color: var(--ink-soft);
-  font-size: 9px;
+  font-size: 10px;
   letter-spacing: 0.07em;
   text-transform: uppercase;
 }
@@ -1166,7 +1166,7 @@ thead .model-heading {
 .score-cell small {
   margin-left: 2px;
   color: var(--ink-soft);
-  font-size: 9px;
+  font-size: 10px;
 }
 
 .score-cell.is-sorted {
@@ -1315,7 +1315,7 @@ thead .model-heading {
 }
 
 .metric-card {
-  min-height: 270px;
+  min-height: 230px;
   padding: 22px;
   color: var(--ink);
   background: var(--white);
@@ -1338,7 +1338,7 @@ thead .model-heading {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  margin-bottom: 30px;
+  margin-bottom: 22px;
   padding: 0;
   background: transparent;
   border: 0;
@@ -1386,8 +1386,8 @@ thead .model-heading {
 }
 
 .metric-card > p {
-  min-height: 66px;
-  margin-bottom: 20px;
+  min-height: 58px;
+  margin-bottom: 16px;
   color: var(--ink-soft);
   font-size: 14px;
 }
@@ -1396,7 +1396,7 @@ thead .model-heading {
   display: grid;
   gap: 7px;
   margin: 0;
-  padding-top: 15px;
+  padding-top: 12px;
   border-top: 1px solid var(--line);
 }
 
@@ -1421,6 +1421,52 @@ thead .model-heading {
   text-align: right;
 }
 
+.protocol-section {
+  background: var(--paper-deep);
+}
+
+.protocol-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.protocol-grid article {
+  min-height: 280px;
+  padding: 28px;
+  background: var(--white);
+  border: 1px solid var(--line);
+  border-radius: 20px;
+}
+
+.protocol-grid article:nth-child(2) {
+  background: var(--green-soft);
+}
+
+.protocol-grid article:nth-child(3) {
+  background: var(--blue-soft);
+}
+
+.protocol-grid article > span {
+  display: block;
+  margin-bottom: 70px;
+  color: var(--coral);
+  font-family: var(--serif);
+  font-size: 24px;
+}
+
+.protocol-grid h3 {
+  margin-bottom: 10px;
+  font-size: 22px;
+  letter-spacing: -0.03em;
+}
+
+.protocol-grid p {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 15px;
+}
+
 .is-disabled {
   cursor: default;
   opacity: 0.56;
@@ -1574,6 +1620,18 @@ footer {
     grid-column: 1 / -1;
   }
 
+  .protocol-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .protocol-grid article {
+    min-height: 220px;
+  }
+
+  .protocol-grid article > span {
+    margin-bottom: 45px;
+  }
+
   .footer-inner {
     grid-template-columns: 1fr;
     justify-items: center;
@@ -1758,6 +1816,11 @@ footer {
     min-height: auto;
   }
 
+  .protocol-grid article {
+    min-height: 200px;
+    padding: 23px;
+  }
+
 }
 
 @media (prefers-reduced-motion: reduce) {