html + js

helper.js

@@ -0,0 +1,205 @@
+const langFlags = {'fr': '🇫🇷', 'es': '🇪🇸', 'pt': '🇵🇹', 'de': '🇩🇪', 'it': '🇮🇹'};
+const langNames = {'fr': 'French', 'es': 'Spanish', 'pt': 'Portuguese', 'de': 'German', 'it': 'Italian'};
+
+const shortformFilenamesPerLang = {
+  'fr': ["30ef344ae8687926.mp3", "4539f03d07ce7fbf.mp3"],  // "6d6261093edc78c2.mp3", "6d6261093edc78c2.mp3"],
+  'es': ["5dc1d533e21f43b2.mp3", "963de6cbb0eaee36.mp3"],  // "a22a3eff8576211c.mp3", "ff65061e3b636834.mp3"],
+  'pt': ["1263b98457966b2a.mp3", "3a2a8fd3a3bd2feb.mp3"],  // "6cf8e09e87612d2f.mp3", "70a4955ff0149f5f.mp3"],
+  'de': ["2d05ea9d4a065778.mp3", "3f5d622c2955df4c.mp3"],  // "64fbd8fd8ecd4d63.mp3", "93cce2bd8093062f.mp3"],
+  'it': ["61fada964460ad67.mp3", "9c6657d3fe647ecb.mp3", "84fbf6f8271c43b4.mp3", "83fcc138b2a8df7f.mp3"],  // "a1fa8e69d4019e03.mp3", "f30cef780a80ca78.mp3"],
+};
+
+const longformFilenamesPerLang = {
+  'fr': ["ee67adf3f3768b1d_11labs.mp3", "f9fcfb48c566cfad_11labs.mp3"],
+  'es': ["02fc8ce1843e4638_11labs.mp3", "bb3e91e3f0488a24_11labs.mp3"],
+  'pt': ["73725fb3cf2cf669_cartesia.mp3 ", "7b42a118f93b1867_cartesia.mp3"],
+  'de': ["02df47e0d27a8b80_cartesia.mp3", "b0e7b4b91e9d91db_gradium.mp3"],
+};
+
+function createAudioHTML(path) {
+  return '<audio controls controlslist="nodownload" class="px-1"> <source src=' +
+      path +
+      ' type="audio/wav">Your browser does not support the audio element.</audio>';
+}
+
+function generateExampleRow(table_row, base_dir, lang, dirs, filename, row_idx, n_files_per_lang) {
+  // Put the flag and full language name in the first column
+  if (row_idx % n_files_per_lang === 0) {
+    table_row.cells[0].innerHTML = `
+      <div style="display: flex; align-items: center; justify-content: center; gap: 0.5em">
+        <span style="font-size: 1em;">${langNames[lang] || lang}</span>
+        <span style="font-size: 2em;">${langFlags[lang] || ''}</span>
+      </div>
+    `;
+    table_row.cells[0].setAttribute('rowspan', n_files_per_lang);
+    table_row.cells[0].style.verticalAlign = "middle";
+    // Remove the first cell from the next row because of row span
+    let nextRow = table_row.parentElement.rows[row_idx + 1];
+    if (nextRow) {
+      nextRow.deleteCell(0);
+    }
+  }
+
+  // because of rowspan, odd row indexes have no source language cell
+  let col_offset = (row_idx % n_files_per_lang === 0) ? 1 : 0;
+
+  for (var col_idx = 0; col_idx < dirs.length; col_idx++) {
+
+    let cell = table_row.cells[col_idx + col_offset];
+    let p = base_dir + '/' + lang + '/' + dirs[col_idx] + '/' + filename;
+
+    let container = cell.querySelector('div') || cell;
+
+    if (p.endsWith('txt')) {
+      var req = new XMLHttpRequest();
+      req.onreadystatechange = function() {
+        if (this.readyState === this.DONE) {
+          container.innerHTML += '<font size="-1">' + req.responseText + '</font>';
+        }
+      };
+      req.open('GET', p);
+      req.send(null);
+    } else {
+      // container.innerHTML += createAudioHTML(p);
+      container.innerHTML += `
+        <div style="display: flex; justify-content: center; align-items: center;">
+          ${createAudioHTML(p)}
+        </div>
+      `;
+    }
+  }
+}
+
+function generateSamplesTable(tableId, base_dir, fnames_per_lang, langs) {
+  let tbody = document.getElementById(tableId).querySelector('tbody');
+  let n_files_per_lang = fnames_per_lang[langs[0]].length;  // all langs must have the same number of samples
+  let dirs = ['source', 'hibiki-zero', 'seamless'];
+  for (var lang_idx = 0; lang_idx < langs.length; lang_idx++) {
+    let lang = langs[lang_idx];
+    let fnames = fnames_per_lang[lang];
+    for (var sample_idx = 0; sample_idx < fnames.length; sample_idx++) {
+      let row_idx = n_files_per_lang * lang_idx + sample_idx
+      generateExampleRow(tbody.rows[row_idx], base_dir, lang, dirs, fnames[sample_idx], row_idx, n_files_per_lang);
+    }
+  }
+}
+
+generateSamplesTable('shortform-table', 'data/europarl_st', shortformFilenamesPerLang, ['fr', 'es', 'pt', 'de'])
+generateSamplesTable('longform-table', 'data/audio_ntrex_4L', longformFilenamesPerLang, ['fr', 'es', 'pt', 'de'])
+generateSamplesTable('shortform-table-it', 'data/europarl_st', shortformFilenamesPerLang, ['it'])
+
+// Borrowed from https://nu-dialogue.github.io/j-moshi/
+$(document).ready(function () {
+
+    const columns = ['Hibiki-Zero', 'Seamless'];
+
+    const rowLangIds = ['fr', 'es', 'pt', 'de'];
+
+    const rows = [
+        [
+            'data-stereo/hibiki-zero_fr_3963c038b9f8d311_gradium.mp3',
+            'data-stereo/seamless_fr_3963c038b9f8d311_gradium.mp3'
+        ],
+        [
+            'data-stereo/hibiki-zero_es_949ebe18ff5f86ec_cartesia.mp3',
+            'data-stereo/seamless_es_949ebe18ff5f86ec_cartesia.mp3'
+        ],
+        [
+            'data-stereo/hibiki-zero_pt_4bb12dfdfd3877d8_11labs.mp3',
+            'data-stereo/seamless_pt_4bb12dfdfd3877d8_11labs.mp3'
+        ],
+        [
+            'data-stereo/hibiki-zero_de_3bf4c877f039e01a_11labs.mp3',
+            'data-stereo/seamless_de_3bf4c877f039e01a_11labs.mp3'
+        ],
+    ];
+
+    const table = $('#multistream-table');
+
+    /* ---------- Header ---------- */
+    const thead = $('<thead>');
+    const headerRow = $('<tr>');
+
+    headerRow.append($('<th>').text('Source language').css({'white-space': 'nowrap', 'text-align': 'center'}));
+
+
+    columns.forEach(header => {
+        headerRow.append($('<th style="text-align: center">').text(header));
+    });
+
+    thead.append(headerRow);
+    table.append(thead);
+
+    /* ---------- Body ---------- */
+    const tbody = $('<tbody>');
+
+    rows.forEach((files, i) => {
+        const row = $('<tr>');
+
+        // Language label cell with big flag
+        const langName = langNames[rowLangIds[i]]
+        const flag = langFlags[rowLangIds[i]] || '';
+        row.append(
+            $('<td>')
+                .css({
+                    'font-weight': 'bold',
+                    'white-space': 'nowrap',
+                    'vertical-align': 'middle'
+                })
+                .html(
+                  `<div style="display: flex; align-items: center; justify-content: center; gap: 0.5em">
+                    <span style="font-size: 1em;">${langName}</span>
+                    <span style="font-size: 2em;">${flag}</span>
+                  </div>`
+                )
+        );
+
+        files.forEach((file, j) => {
+            const waveCell = $('<td style="text-align: center; vertical-align: middle;">');
+            const waveform = $('<div>').attr('id', `waveform-${i}-${j}`);
+            waveCell.append(waveform);
+
+            const playPauseButton = `
+                <button class="btn btn-secondary mt-1" id="play-pause-${i}-${j}">
+                    <i class="bi bi-play-fill"></i> Play /
+                    <i class="bi bi-pause-fill"></i> Pause
+                </button>
+            `;
+            waveCell.append(playPauseButton);
+            row.append(waveCell);
+        });
+
+        tbody.append(row);
+    });
+
+    table.append(tbody);
+
+    /* ---------- WaveSurfer ---------- */
+    rows.forEach((files, i) => {
+        files.forEach((file, j) => {
+            const wavesurfer = WaveSurfer.create({
+                container: `#waveform-${i}-${j}`,
+                url: file,
+                splitChannels: [
+                    {
+                        waveColor: '#39f2aeff',
+                        progressColor: '#808080',
+                    },
+                    {
+                        waveColor: '#ffab40ff',
+                        progressColor: '#000000',
+                    }
+                ],
+                barWidth: 2,
+                height: 55,
+                width: 650,
+                normalize: true,
+            });
+
+            $(`#play-pause-${i}-${j}`).click(() => {
+                wavesurfer.playPause();
+            });
+        });
+    });
+
+});

index.html

@@ -1,19 +1,273 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+  <head>
+    <title>Hibiki</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://unpkg.com/wavesurfer.js@7"></script>
+    <script src="helper.js" defer></script>
+    <!-- <script>
+        window.addEventListener('DOMContentLoaded', () => {
+            const disclaimer = document.getElementById('browser-disclaimer');
+            if (!disclaimer) return;
+            const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+            if (isChrome) {
+                disclaimer.style.display = 'none';
+            }
+        });
+    </script> -->
+    <style>
+      h1, h2, h3, h4, h5, h6, body, b, strong {color: #595959}
+      .container {max-width: 1620px}
+      .no-hover:hover td {box-shadow: none !important}
+      .centered-video {
+        display: block;
+        margin: 0 auto;
+        max-width: 90%;
+        min-width: 400px;
+      }
+      .video-legend {
+        margin-top: 6px;
+        font-size: 1em;
+        color: #555;
+        text-align: center;
+      }
+    </style>
+  </head>
+
+  <body>
+
+    <!-- DISCLAIMER -->
+    <div id="browser-disclaimer" style="
+        background-color: rgb(221, 255, 243);
+        color: #333;
+        padding: 10px 20px;
+        text-align: center;
+        font-family: sans-serif;
+        font-size: 14px;
+    ">
+        For faster loading of audio samples, we recommend using <strong>Google Chrome</strong>.
+    </div>
+
+    <!-- HEADER -->
+    <div class="container pt-5 mt-5 shadow p-5 mb-5 bg-white rounded">
+      <div class="text-center">
+        <h1>Simultaneous Speech-to-Speech Translation Without Aligned Data</h1>
+        <p class="lead">
+          [...]
+        </p>
+        <p class="fst-italic mb-0">
+          Anonymous Authors
+        </p>
+        <p><b>Anonymous Institution</b></p>
+      </div>
+
+      <p>
+        <b>Abstract.</b>
+        Simultaneous speech translation requires translating source speech into a target language in real-time while handling non-monotonic word dependencies.
+        Traditional approaches rely on supervised training with word-level aligned data, which is difficult to collect at scale and thus depends on synthetic alignments using language-specific heuristics that are suboptimal.
+        We propose <i>Hibiki-Zero</i>, which eliminates the need for word-level alignments entirely.
+        This fundamentally simplifies the training pipeline and enables seamless scaling to diverse languages with varying grammatical structures, removing the bottleneck of designing language-specific alignment heuristics.
+        We first train on sentence-level aligned data to learn speech translation at high latency, then apply a novel reinforcement learning strategy using GRPO to optimize latency while preserving translation quality.
+        Hibiki-Zero achieves state-of-the-art performance in translation accuracy, latency, voice transfer, and naturalness across five X-to-English tasks.
+        Moreover, we demonstrate that our model can be adapted to support a new input language with less than 1000h of speech data.
+        We provide examples as well as models and we release a benchmark containing 15h of multilingual data for speech translation evaluation.
+      </p>
+
+    </div>
+
+    <!-- IN THE WILD -->
+    <div class="container shadow p-5 mb-5 bg-white rounded">
+      <h3>In the Wild Examples 🇫🇷🇪🇸🇵🇹🇩🇪</h3>
+      <p class="mb-0">
+      </p>
+      <div class="container pt-3 table-responsive">
+        <table class="table table-hover" width="100%">
+          <tr class="no-hover">
+            <!-- FR video -->
+            <td>
+              <video class="embed-responsive-item centered-video" controls>
+                <source src="videos/clip_fr_translated.mp4" type="video/mp4">
+                Your browser does not support HTML video.
+              </video>
+              <div class="video-legend">
+                Source: 
+                <a href="https://www.youtube.com/watch?v=3nox96KbhV0" target="_blank">
+                  The legendary Paris 2024 Olympic Games of Léon Marchand.
+                </a>
+                - <i>Eurosport France</i>
+              </div>
+            </td>
+            <!-- DE video -->
+            <td>
+              <video class="embed-responsive-item centered-video" controls>
+                <source src="videos/clip_de_translated.mp4" type="video/mp4">
+                Your browser does not support HTML video.
+              </video>
+              <div class="video-legend">
+              Source: 
+              <a href="https://www.youtube.com/watch?v=4kFw5gi9JKI" target="_blank">
+                Biathlon 2025: Franziska Preuß wins her first World Championship.
+              </a>
+              - <i>Eurosport Germany</i>
+            </div>
+            </td>
+          </tr>
+          <tr class="no-hover">
+            <!-- ES video -->
+            <td>
+              <video class="embed-responsive-item centered-video" controls>
+                <source src="videos/clip_es_translated.mp4" type="video/mp4">
+                Your browser does not support HTML video.
+              </video>
+              <div class="video-legend">
+                Source: 
+                <a href="https://www.youtube.com/watch?v=O0M-o7CnmUE" target="_blank">
+                  Australian Open 2026 Final: Carlos Alcaraz vs. Novak Djokovic.
+                </a>
+                - <i>Eurosport España</i>
+              </div>
+            </td>
+            <!-- PT video -->
+            <td>
+              <video class="embed-responsive-item centered-video" controls>
+                <source src="videos/clip_pt_translated.mp4" type="video/mp4">
+                Your browser does not support HTML video.
+              </video>
+              <div class="video-legend">
+                Source: 
+                <a href="https://www.facebook.com/share/v/1HAYhUFVm3/" target="_blank">
+                  Iuri Leitao and Rui Oliveira win gold for Portugal at the Paris 2024 Olympics.
+                </a>
+                - <i>Facebook</i>
+              </div>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+
+    <!-- MULTISTREAM -->
+    <div class="container shadow p-5 mb-5 bg-white rounded">
+      <h3>Multistream Visualization</h3>
+      <p class="mb-0">
+      The source audios (from our long-form evaluation dataset Audio-NTREX-4L) and translated versions are on different channels.
+      The volume of the sources are reduced so that it's easier to hear the translations.
+      </p>
+      <div class="container pt-3 table-responsive">
+        <table class="table" id="multistream-table"></table>
+      </div>
+    </div>
+
+    <!-- SHORTFORM -->
+    <div class="container shadow p-5 mb-5 bg-white rounded">
+      <h3>Short-form Simultaneous Translations</h3>
+      <p class="mb-0"> The source audios come from our Europarl-ST evaluation data. </p>
+      <div class="container pt-3 table-responsive">
+        <table class="table" id="shortform-table">
+          <thead>
+            <tr>
+              <th style="text-align: center; min-width: 150px;">Source language</th>
+              <th style="text-align: center;min-width: 200px;">Source</th>
+              <th style="text-align: center;">Hibiki-Zero</th>
+              <th style="text-align: center">Seamless</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- fr -->
+            <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <!-- <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <tr> <td></td> <td></td> <td></td> <td></td></tr> -->
+            <!-- es -->
+            <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <!-- <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <tr> <td></td> <td></td> <td></td> <td></td></tr> -->
+            <!-- pt -->
+            <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <!-- <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <tr> <td></td> <td></td> <td></td> <td></td></tr> -->
+            <!-- de -->
+            <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <!-- <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <tr> <td></td> <td></td> <td></td> <td></td></tr> -->
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- LONGFORM -->
+    <div class="container shadow p-5 mb-5 bg-white rounded">
+      <h3>Long-form Simultaneous Translations</h3>
+      <p class="mb-0"> The source audios come from taken from our Audio-NTREX-4L evaluation dataset.</p>
+      <div class="container pt-3 table-responsive">
+        <table class="table" id="longform-table">
+          <thead>
+            <tr>
+              <th style="text-align: center; min-width: 150px;">Source language</th>
+              <th style="text-align: center;min-width: 200px;">Source</th>
+              <th style="text-align: center;">Hibiki-Zero</th>
+              <th style="text-align: center;">Seamless</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- fr -->
+            <tr> <td></td> <td></td> <td></td> <td></td> </tr>  
+            <tr> <td></td> <td></td> <td></td> <td></td> </tr>
+            <!-- es -->
+            <tr> <td></td> <td></td> <td></td> <td></td> </tr>
+            <tr> <td></td> <td></td> <td></td> <td></td> </tr>
+            <!-- pt -->
+            <tr> <td></td> <td></td> <td></td> <td></td> </tr>
+            <tr> <td></td> <td></td> <td></td> <td></td> </tr>
+            <!-- de -->
+            <tr> <td></td> <td></td> <td></td> <td></td> </tr>
+            <tr> <td></td> <td></td> <td></td> <td></td> </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- SHORTFORM ITALIAN -->
+    <div class="container shadow p-5 mb-5 bg-white rounded">
+      <h3>Short-form Simultaneous Translations from Italian</h3>
+      <p class="mb-0"> The source audios come from our Europarl-ST evaluation data. Hibiki-Zero-IT denotes our model adapted for translation from Italian with less than 1000 hours of Italian-to-English data. </p>
+      <div class="container pt-3 table-responsive">
+        <table class="table" id="shortform-table-it">
+          <thead>
+            <tr>
+              <th style="text-align: center; min-width: 150px;">Source language</th>
+              <th style="text-align: center;min-width: 200px;">Source</th>
+              <th style="text-align: center;">Hibiki-Zero-IT</th>
+              <th style="text-align: center">Seamless</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- it -->
+            <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <tr> <td></td> <td></td> <td></td> <td></td></tr>
+            <tr> <td></td> <td></td> <td></td> <td></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- TAIL -->
+    <div class="container p-5 mb-5 bg-white rounded">
+      <p class="mb-0">
+        This page was adapted from the <a href="https://google-research.github.io/seanet/soundstorm/examples">SoundStorm project page</a>.
+      </p>
+    </div>
+
+  </body>
 </html>