Spaces:

Grets
/

AVIP

Running

App Files Files Community

Grets commited on Aug 29, 2025

Commit

f468dc6

verified ·

1 Parent(s): d0ca1f1

Update index.html

Browse files

Files changed (1) hide show

index.html +205 -99

index.html CHANGED Viewed

@@ -1,137 +1,213 @@
 <!doctype html>
-<html lang="de">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>AVIP – Benchmark</title>
-  <meta name="description" content="Do multimodal models actually use the sound in videos?" />
-  <!-- Social Cards (optional, ohne Bild) -->
   <meta property="og:title" content="AVIP Benchmark" />
-  <meta property="og:description" content="Do you hear it?" />
   <meta property="og:type" content="website" />
   <meta name="twitter:card" content="summary_large_image" />
   <style>
     :root{
-      --bg:#0b0b0c;--surface:#111216;--text:#e9e9ee;--muted:#9aa0a6;--accent:#6ee7ff;--ring:rgba(110,231,255,.35)
     }
-    @media (prefers-color-scheme: violet){
-      :root{--bg:#fafafa;--surface:#fff;--text:#101114;--muted:#5f6368;--accent:#0078ff;--ring:rgba(0,120,255,.2)}
     }
-    *{box-sizing:border-box}
-    html,body{height:100%}
     body{
-      margin:0;
-      font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
-      color:var(--text);
       background:
         radial-gradient(1200px 800px at 10% -5%, rgba(110,231,255,.08), transparent 40%),
         radial-gradient(900px 700px at 110% 10%, rgba(110,231,255,.06), transparent 40%),
         var(--bg);
     }
-    .site-header{
-      position:sticky;top:0;z-index:10;
-      display:flex;align-items:center;gap:1rem;justify-content:space-between;
-      padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.06);
       background:color-mix(in oklab, var(--surface), transparent 35%);
       backdrop-filter:saturate(1.2) blur(8px);
     }
-    .logo{font-weight:700;letter-spacing:.2px;text-decoration:none;color:var(--text)}
-    .logo span{color:var(--accent)}
-    .site-nav{display:flex;gap:.75rem}
-    .site-nav a{color:var(--text);text-decoration:none;padding:.4rem .6rem;border-radius:.5rem}
-    .site-nav a:hover{outline:2px solid var(--ring);outline-offset:2px}
-    .nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text);border-radius:.5rem;padding:.4rem .6rem}
     @media (max-width: 720px){
-      .nav-toggle{display:inline-block}
-      .site-nav{position:absolute;right:1rem;top:3.4rem;flex-direction:column;padding:.6rem;background:var(--surface);border:1px solid rgba(255,255,255,.1);border-radius:.6rem;display:none}
-      .site-nav.open{display:flex}
     }
-    .hero{text-align:center;padding:6rem 1rem 4rem;max-width:920px;margin:0 auto}
-    .hero h1{font-size:clamp(2rem,3.8vw,3rem);margin:0 0 .5rem}
-    .hero p{margin:0 0 1.5rem;color:var(--muted)}
-    .btn{display:inline-block;padding:.7rem 1rem;border-radius:.6rem;background:var(--accent);color:#06141b;text-decoration:none;font-weight:600}
-    .section{padding:3rem 1rem;max-width:1000px;margin:0 auto}
-    .features{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
-    .features li{background:color-mix(in oklab, var(--surface), transparent 10%);border:1px solid rgba(255,255,255,.08);border-radius:.8rem;padding:.9rem}
-    .table-wrap{overflow-x:auto;background:color-mix(in oklab, var(--surface), transparent 10%);border-radius:.8rem;border:1px solid rgba(255,255,255,.08)}
-    .table-wrap table{width:100%;border-collapse:collapse}
-    .table-wrap th,.table-wrap td{padding:.7rem .8rem;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
-    .table-wrap th{font-weight:600}
-    .muted{color:var(--muted)}
-    .site-footer{padding:2rem 1rem 4rem;text-align:center;color:var(--muted)}
-    code{background:rgba(127,127,127,.15);padding:.1rem .3rem;border-radius:.3rem}
   </style>
 </head>
 <body>
   <header class="site-header">
-    <a href="#" class="logo">AVIP<span>Benchmark</span></a>
     <button class="nav-toggle" aria-expanded="false" aria-controls="site-nav">☰</button>
-    <nav id="site-nav" class="site-nav" aria-label="Navigation">
       <a href="#home">Home</a>
-      <a href="#features">Features</a>
       <a href="#leaderboard">Leaderboard</a>
-    <!-- <a href="#podcast">Podcast</a>-->
-      <a href="#kontakt">Contact</a>
     </nav>
   </header>
-  <main>
-    <section id="home" class="hero">
-      <h1>Do you hear it?</h1>
-      <p>Do multimodal models actually use audio when interpreting videos?</p>
-      <a class="btn" href="#features">Let's find out</a>
     </section>
-    <section id="features" class="section">
-      <h2>Features?</h2>
       <ul class="features">
-        <li>Sauberes Grund-Layout (Header, Navigation, Footer)</li>
-        <li>Responsives Design &amp; Dark/Light via <code>prefers-color-scheme</code></li>
-        <li>Beispiel-Leaderboard (ohne Backend)</li>
-       <!-- <li>Podcast-Einbettung (HTML5-Audio)</li> <a -->
-        <li>Ohne Build-Schritt – einfach hochladen</li>
       </ul>
     </section>
-    <section id="leaderboard" class="section">
-      <h2>Leaderboard</h2>
-      <p class="muted">Performance and Accuracy of the tested models:</p>
       <div class="table-wrap">
-        <table>
           <thead>
-            <tr><th>Rank</th><th>Model</th><th>Accuracy</th><th>Performance</th><th>Last Update</th></tr>
           </thead>
-          <tbody id="leaderboard-body"><!-- JS rendert hier --></tbody>
         </table>
       </div>
-      <!-- Eingebettete Beispiel-Daten (funktioniert auch lokal ohne Server) -->
       <script id="leaderboard-data" type="application/json">{
         "rows": [
-          {"rank": 1, "name": "Qwen", "score": 98, "updated": "2025-08-01"},
-          {"rank": 2, "name": "Gemini Pro",   "score": 92, "updated": "2025-07-28"},
-          {"rank": 3, "name": "Gemini Flash w/o reasoning", "score": 89, "updated": "2025-07-20"},
-          {"rank": 3, "name": "Gemini Flash w reasoning", "score": 89, "updated": "2025-07-20"}
         ]
       }</script>
     </section>
-   <!-- <section id="podcast" class="section">
-      <h2>Podcast</h2>
-      <p class="muted">Datei einfügen: <code>assets/podcast.mp3</code> oder diesen Block löschen.</p>
-      <audio controls preload="none">
-        <source src="assets/podcast.mp3" type="audio/mpeg" />
-        Dein Browser unterstützt das Audio-Element nicht.
-      </audio>
-    </section> -->
     <section id="contact" class="section">
       <h2>Contact</h2>
-      <p>Questions? <a href="mailto: ">bramo.g@protonmail.com</a></p>
-      <p class="muted"> https://huggingface.co/Grets/AVIP </p>
     </section>
   </main>
@@ -140,7 +216,7 @@
   </footer>
   <script>
-    // Mobile-Navi
     const navToggle = document.querySelector('.nav-toggle');
     const nav = document.getElementById('site-nav');
     if (navToggle && nav) {
@@ -149,30 +225,60 @@
         navToggle.setAttribute('aria-expanded', String(open));
       });
     }
-    // Jahr im Footer
     const y = document.getElementById('year');
     if (y) y.textContent = new Date().getFullYear();
-    // Leaderboard-Rendering
-    (function renderLeaderboard(){
       const el = document.getElementById('leaderboard-body');
-      const dataEl = document.getElementById('leaderboard-data');
-      if (!el || !dataEl) return;
       try {
-        const data = JSON.parse(dataEl.textContent.trim());
-        const rows = Array.isArray(data.rows) ? data.rows : [];
-        rows.sort((a,b) => a.rank - b.rank);
-        el.innerHTML = rows.map(r => `
-          <tr>
-            <td>${r.rank}</td>
-            <td>${r.name}</td>
-            <td>${r.score}</td>
-            <td>${r.updated}</td>
-          </tr>`).join('');
-      } catch (e) {
-        el.innerHTML = '<tr><td colspan="4">Fehler beim Laden der Daten.</td></tr>';
       }
     })();
   </script>
 </body>
-</html>

 <!doctype html>
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AVIP – Audio–Vision Interaction Probe (Benchmark)</title>
+  <meta name="description" content="AVIP is a lightweight benchmark to check whether multimodal models truly use audio in videos." />
+  <!-- Social cards (add your own image at assets/cover.jpg) -->
   <meta property="og:title" content="AVIP Benchmark" />
+  <meta property="og:description" content="Do multimodal models actually use audio in videos?" />
   <meta property="og:type" content="website" />
+  <meta property="og:image" content="assets/cover.jpg" />
   <meta name="twitter:card" content="summary_large_image" />
+  <link rel="icon" href="assets/favicon.png" />
   <style>
+    /* =====================
+       THEME & BASICS
+       ===================== */
     :root{
+      --bg:#0b0b0c; --surface:#111216; --text:#e9e9ee; --muted:#9aa0a6; --accent:#6ee7ff; --ring:rgba(110,231,255,.35);
+      --card: color-mix(in oklab, var(--surface), transparent 8%);
+      --border: 1px solid rgba(255,255,255,.08);
     }
+    @media (prefers-color-scheme: light){
+      :root{ --bg:#fafafa; --surface:#ffffff; --text:#101114; --muted:#5f6368; --accent:#0078ff; --ring:rgba(0,120,255,.2);
+             --card: color-mix(in oklab, var(--surface), transparent 4%);
+             --border: 1px solid rgba(0,0,0,.08);
+      }
     }
+    *,*::before,*::after{ box-sizing:border-box }
+    html,body{ height:100% }
     body{
+      margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);
       background:
         radial-gradient(1200px 800px at 10% -5%, rgba(110,231,255,.08), transparent 40%),
         radial-gradient(900px 700px at 110% 10%, rgba(110,231,255,.06), transparent 40%),
         var(--bg);
     }
+    .site-header{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:1rem; justify-content:space-between;
+      padding:.8rem 1rem; border-bottom:var(--border);
       background:color-mix(in oklab, var(--surface), transparent 35%);
       backdrop-filter:saturate(1.2) blur(8px);
     }
+    .logo{ font-weight:800; letter-spacing:.2px; text-decoration:none; color:var(--text); display:flex; align-items:center; gap:.55rem }
+    .logo .dot{ width:.7rem; height:.7rem; border-radius:999px; background:var(--accent); box-shadow:0 0 16px var(--ring) }
+    .logo span{ color:var(--accent) }
+    .site-nav{ display:flex; gap:.75rem }
+    .site-nav a{ color:var(--text); text-decoration:none; padding:.4rem .6rem; border-radius:.5rem }
+    .site-nav a:hover{ outline:2px solid var(--ring); outline-offset:2px }
+    .nav-toggle{ display:none; background:transparent; border:1px solid rgba(255,255,255,.2); color:var(--text); border-radius:.5rem; padding:.4rem .6rem }
     @media (max-width: 720px){
+      .nav-toggle{ display:inline-block }
+      .site-nav{ position:absolute; right:1rem; top:3.4rem; flex-direction:column; padding:.6rem; background:var(--surface); border:var(--border); border-radius:.6rem; display:none }
+      .site-nav.open{ display:flex }
     }
+    .hero{ text-align:center; padding:4.5rem 1rem 2rem; max-width:1060px; margin:0 auto }
+    .hero h1{ font-size:clamp(2rem,3.6vw,3rem); margin:0 0 .5rem }
+    .hero p{ margin:0 0 1.5rem; color:var(--muted) }
+    .btn{ display:inline-block; padding:.72rem 1rem; border-radius:.6rem; background:var(--accent); color:#06141b; text-decoration:none; font-weight:700 }
+    .cover{ margin:1.2rem auto 0; max-width:980px; aspect-ratio: 16/9; border-radius:.8rem; overflow:hidden; border:var(--border); background:var(--card) }
+    .cover img{ width:100%; height:100%; object-fit:cover; display:block }
+    .section{ padding:2.6rem 1rem; max-width:1060px; margin:0 auto }
+    .section h2{ font-size:clamp(1.4rem,2.2vw,1.8rem); margin:0 0 .4rem }
+    .muted{ color:var(--muted) }
+    .features{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); margin:1rem 0 0 }
+    .card{ background:var(--card); border:var(--border); border-radius:.8rem; padding:1rem }
+    /* Leaderboard */
+    .table-wrap{ overflow-x:auto; background:var(--card); border-radius:.8rem; border:var(--border) }
+    table{ width:100%; border-collapse:collapse }
+    th,td{ padding:.7rem .8rem; border-bottom:1px solid rgba(255,255,255,.06); text-align:left }
+    th{ font-weight:700 }
+    .pill{ display:inline-block; padding:.2rem .5rem; border-radius:.5rem; background:rgba(110,231,255,.18); color:var(--text); font-size:.8rem }
+    /* Media showcase */
+    .media-grid{ display:grid; grid-template-columns:2fr 1fr; gap:1rem }
+    @media (max-width: 920px){ .media-grid{ grid-template-columns:1fr } }
+    figure{ margin:0 }
+    .media-card{ background:var(--card); border:var(--border); border-radius:.8rem; padding:.8rem }
+    video{ width:100%; max-height:520px; background:#000; border-radius:.6rem }
+    .toolbar{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0 }
+    .toolbar button{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.25); padding:.38rem .6rem; border-radius:.5rem; cursor:pointer }
+    .toolbar button[aria-pressed="true"]{ outline:2px solid var(--ring) }
+    /* Footer */
+    .site-footer{ padding:2rem 1rem 4rem; text-align:center; color:var(--muted) }
+    /* A11y: reduce motion */
+    @media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important } }
   </style>
 </head>
 <body>
+  <!--
+    ASSETS CHECKLIST (drop into your Space):
+    - assets/cover.jpg           (hero title image)
+    - assets/sample_AV.mp4       (example clip – audio+video)
+    - assets/sample_A.mp4        (audio-only version)
+    - assets/sample_V.mp4        (video-only version)
+    - assets/sample_poster.jpg   (poster frame for the video)
+    - assets/heatmap.png         (overall heatmap graphic)
+    - assets/confusion.png       (confusion matrix or similar)
+    - assets/favicon.png         (16–64px)
+  -->
   <header class="site-header">
+    <a href="#home" class="logo" aria-label="AVIP Benchmark home"><span class="dot" aria-hidden="true"></span> AVIP<span>Benchmark</span></a>
     <button class="nav-toggle" aria-expanded="false" aria-controls="site-nav">☰</button>
+    <nav id="site-nav" class="site-nav" aria-label="Main navigation">
       <a href="#home">Home</a>
+      <a href="#about">About</a>
       <a href="#leaderboard">Leaderboard</a>
+      <a href="#media">Examples</a>
+      <a href="#contact">Contact</a>
     </nav>
   </header>
+  <main id="home">
+    <section class="hero" aria-labelledby="tagline">
+      <h1 id="tagline">Do you hear it?</h1>
+      <p>AVIP probes whether multimodal models actually use <strong>audio</strong> when interpreting videos.</p>
+      <a class="btn" href="#media">See examples</a>
+      <div class="cover" aria-hidden="true">
+        <img src="assets/cover.jpg" alt="Stylized collage of waveforms and video frames" loading="lazy" />
+      </div>
     </section>
+    <section id="about" class="section">
+      <h2>What is AVIP?</h2>
+      <p class="muted">A tiny, controlled benchmark with triplet videos per clip: <span class="pill">A</span> audio-only, <span class="pill">V</span> video-only, and <span class="pill">AV</span> audio+video. Tasks: <em>object</em>, <em>material</em>, <em>outcome</em>. We check top‑1 predictions vs. ground truth and look for cross‑modal gains.</p>
       <ul class="features">
+        <li class="card">📦 <strong>Minimal, reproducible clips</strong><br/>Short single‑impact scenes recorded in a controlled setup.</li>
+        <li class="card">🔊 <strong>Modality toggles</strong><br/>Each clip exists as A, V, and AV to test true audio usage.</li>
+        <li class="card">📈 <strong>Simple metrics</strong><br/>Top‑1 accuracy per task and an <em>AV − max(A,V)</em> cross‑modal gain.</li>
+        <li class="card">🧪 <strong>Probe‑style prompts</strong><br/>Strict label sets &amp; JSON outputs to avoid prompt drift.</li>
       </ul>
+      <details class="card" style="margin-top:1rem">
+        <summary><strong>Method (short)</strong></summary>
+        <ol>
+          <li>For each clip, run models on A, V, and AV variants with the same instruction‑style prompt.</li>
+          <li>Decode model outputs into <code>{object, material, outcome}</code> and compare against labels.</li>
+          <li>Compute accuracy per task and cross‑modal gain per clip and on average.</li>
+        </ol>
+      </details>
     </section>
+    <section id="leaderboard" class="section" aria-labelledby="lb-title">
+      <h2 id="lb-title">Leaderboard</h2>
+      <p class="muted">Replace or augment these rows by uploading <code>metrics_by_engine.json</code> or editing the inline JSON below.</p>
       <div class="table-wrap">
+        <table aria-describedby="lb-title">
           <thead>
+            <tr>
+              <th scope="col">Rank</th>
+              <th scope="col">Model</th>
+              <th scope="col">Accuracy*</th>
+              <th scope="col">Updated</th>
+            </tr>
           </thead>
+          <tbody id="leaderboard-body"><!-- rendered by JS --></tbody>
         </table>
       </div>
+      <p class="muted" style="margin:.6rem 0 0">* Single summary score (demo). For papers, report per‑task accuracy and cross‑modal gain.</p>
       <script id="leaderboard-data" type="application/json">{
         "rows": [
+          {"rank": 1, "name": "Qwen2.5‑Omni 7B",          "score": 98, "updated": "2025-08-01"},
+          {"rank": 2, "name": "Gemini‑2.5 Pro (think)",   "score": 92, "updated": "2025-07-28"},
+          {"rank": 3, "name": "Gemini‑2.5 Flash (no think)", "score": 89, "updated": "2025-07-20"},
+          {"rank": 3, "name": "Gemini‑2.5 Flash (think)",   "score": 89, "updated": "2025-07-20"}
         ]
       }</script>
     </section>
+    <section id="media" class="section" aria-labelledby="ex-title">
+      <h2 id="ex-title">Example clip</h2>
+      <div class="media-grid">
+        <figure class="media-card">
+          <video id="sampleVideo" controls preload="metadata" playsinline poster="assets/sample_poster.jpg">
+            <source src="assets/sample_AV.mp4" type="video/mp4" />
+            Your browser doesn’t support HTML5 video.
+          </video>
+          <div class="toolbar" role="toolbar" aria-label="Version selector">
+            <button type="button" class="ver" data-src="assets/sample_A.mp4" aria-pressed="false" aria-label="Audio only (A)">A</button>
+            <button type="button" class="ver" data-src="assets/sample_V.mp4" aria-pressed="false" aria-label="Video only (V)">V</button>
+            <button type="button" class="ver" data-src="assets/sample_AV.mp4" aria-pressed="true" aria-label="Audio + Video (AV)">AV</button>
+            <span class="muted" id="verStatus" aria-live="polite" style="margin-left:.4rem">Now showing: AV</span>
+          </div>
+          <figcaption class="muted">Task labels (demo): <strong>object</strong>=<code>paperbox</code>, <strong>material</strong>=<code>cardboard</code>, <strong>outcome</strong>=<code>bounce</code></figcaption>
+        </figure>
+        <div class="media-card">
+          <figure>
+            <img src="assets/heatmap.png" alt="Overall performance heatmap (placeholder)" loading="lazy" style="width:100%; border-radius:.6rem" />
+            <figcaption class="muted">Overall heatmap (example). Replace with your exported figure.</figcaption>
+          </figure>
+          <figure style="margin-top:.8rem">
+            <img src="assets/confusion.png" alt="Confusion matrix (placeholder)" loading="lazy" style="width:100%; border-radius:.6rem" />
+            <figcaption class="muted">Confusion matrix (example).</figcaption>
+          </figure>
+        </div>
+      </div>
+    </section>
     <section id="contact" class="section">
       <h2>Contact</h2>
+      <p>Questions? <a href="mailto:bramo.g@protonmail.com">bramo.g@protonmail.com</a></p>
+      <p class="muted"><a href="https://huggingface.co/Grets/AVIP">huggingface.co/Grets/AVIP</a></p>
     </section>
   </main>
   </footer>
   <script>
+    // Mobile nav toggle
     const navToggle = document.querySelector('.nav-toggle');
     const nav = document.getElementById('site-nav');
     if (navToggle && nav) {
         navToggle.setAttribute('aria-expanded', String(open));
       });
     }
+    // Year in footer
     const y = document.getElementById('year');
     if (y) y.textContent = new Date().getFullYear();
+    // Leaderboard: try to fetch metrics_by_engine.json if present; else fall back to inline JSON
+    (async function renderLeaderboard(){
       const el = document.getElementById('leaderboard-body');
+      const inline = document.getElementById('leaderboard-data');
+      if (!el) return;
+      let rows;
       try {
+        const res = await fetch('metrics_by_engine.json', {cache:'no-store'});
+        if (res.ok) {
+          const metrics = await res.json();
+          // Expecting the AV summary per engine; create a toy score = avg of task accuracies if you provide them.
+          // This block is intentionally lightweight – adapt to your file format as needed.
+          if (metrics && metrics.leaderboard) {
+            rows = metrics.leaderboard;
+          }
+        }
+      } catch(e){ /* ignore and use inline */ }
+      if (!rows) {
+        try { rows = JSON.parse(inline.textContent.trim()).rows; } catch(e){ rows = []; }
       }
+      rows.sort((a,b) => a.rank - b.rank);
+      el.innerHTML = rows.map(r => `
+        <tr>
+          <td>${r.rank}</td>
+          <td>${r.name}</td>
+          <td>${r.score}</td>
+          <td>${r.updated}</td>
+        </tr>`).join('');
     })();
+    // Example video version toggles
+    const video = document.getElementById('sampleVideo');
+    const verButtons = document.querySelectorAll('.ver');
+    const verStatus = document.getElementById('verStatus');
+    verButtons.forEach(btn => {
+      btn.addEventListener('click', () => {
+        verButtons.forEach(b => b.setAttribute('aria-pressed','false'));
+        btn.setAttribute('aria-pressed','true');
+        const src = btn.getAttribute('data-src');
+        const label = btn.textContent.trim();
+        if (src && video) {
+          const wasPlaying = !video.paused && !video.ended;
+          video.pause();
+          video.querySelector('source').src = src;
+          video.load();
+          if (wasPlaying) video.play().catch(()=>{});
+          if (verStatus) verStatus.textContent = `Now showing: ${label}`;
+        }
+      });
+    });
   </script>
 </body>
+</html>