static/js/index.js

window.HELP_IMPROVE_VIDEOJS = false;

var INTERP_BASE = "./static/interpolation/stacked";
var NUM_INTERP_FRAMES = 240;

var interp_images = [];
function preloadInterpolationImages() {
  for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
    var path = INTERP_BASE + '/' + String(i).padStart(6, '0') + '.jpg';
    interp_images[i] = new Image();
    interp_images[i].src = path;
  }
}

function setInterpolationImage(i) {
  var image = interp_images[i];
  image.ondragstart = function() { return false; };
  image.oncontextmenu = function() { return false; };
  $('#interpolation-image-wrapper').empty().append(image);
}


$(document).ready(function() {
    // Check for click events on the navbar burger icon
    $(".navbar-burger").click(function() {
      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      $(".navbar-burger").toggleClass("is-active");
      $(".navbar-menu").toggleClass("is-active");

    });

    var options = {
			slidesToScroll: 1,
			slidesToShow: 3,
			loop: true,
			infinite: true,
			autoplay: false,
			autoplaySpeed: 3000,
    }

		// Initialize all div with carousel class
    var carousels = bulmaCarousel.attach('.carousel', options);

    // Loop on each carousel initialized
    for(var i = 0; i < carousels.length; i++) {
    	// Add listener to  event
    	carousels[i].on('before:show', state => {
    		console.log(state);
    	});
    }

    // Access to bulmaCarousel instance of an element
    var element = document.querySelector('#my-element');
    if (element && element.bulmaCarousel) {
    	// bulmaCarousel instance is available as element.bulmaCarousel
    	element.bulmaCarousel.on('before-show', function(state) {
    		console.log(state);
    	});
    }

    /*var player = document.getElementById('interpolation-video');
    player.addEventListener('loadedmetadata', function() {
      $('#interpolation-slider').on('input', function(event) {
        console.log(this.value, player.duration);
        player.currentTime = player.duration / 100 * this.value;
      })
    }, false);*/
    preloadInterpolationImages();

    $('#interpolation-slider').on('input', function(event) {
      setInterpolationImage(this.value);
    });
    setInterpolationImage(0);
    $('#interpolation-slider').prop('max', NUM_INTERP_FRAMES - 1);

    bulmaSlider.attach();

    // Lazy-load the large FLEURS results iframe when the details is opened
    const fleurs = document.getElementById('fleurs-details');
    if (fleurs) {
      fleurs.addEventListener('toggle', function() {
        if (this.open) {
          const iframe = this.querySelector('iframe[data-src]');
          if (iframe && !iframe.src) {
            iframe.src = iframe.dataset.src;
          }
        }
      });
    }

})

// Render audio samples from assets/samples.json
async function renderSamples() {
  const rootMulti = document.getElementById('samples-multilingual-root');
  const rootEn = document.getElementById('samples-english-root');
  if (!rootMulti && !rootEn) return;
  try {
    const res = await fetch('assets/samples.json', { cache: 'no-cache' });
    if (!res.ok) throw new Error('Failed to load samples.json');
    const data = await res.json();
    if (!Array.isArray(data.samples)) throw new Error('Invalid samples.json');

    if (rootMulti) rootMulti.innerHTML = '';
    if (rootEn) rootEn.innerHTML = '';

    for (const s of data.samples) {
      const isEnglish = [s.noisy, s.miipher, s.restored, s.sidon, s.gt]
        .filter(Boolean)
        .some(p => typeof p === 'string' && p.startsWith('english_demo/'));
      const container = isEnglish ? rootEn : rootMulti;
      if (!container) continue;
      const title = s.title || s.id || 'Sample';
      const cols = [];
      if (isEnglish) {
        if (s.gt) cols.push({ label: 'Noisy', src: s.gt, mel: s.gt_mel });
        if (s.miipher) cols.push({ label: 'Miipher', src: s.miipher, mel: s.miipher_mel });
        if (s.restored || s.sidon) cols.push({ label: 'Sidon', src: s.restored || s.sidon, mel: s.restored_mel || s.sidon_mel });
      } else {
        if (s.noisy) cols.push({ label: 'Noisy', src: s.noisy, mel: s.noisy_mel });
        if (s.miipher) cols.push({ label: 'Miipher-2', src: s.miipher, mel: s.miipher_mel });
        if (s.restored || s.sidon) cols.push({ label: 'Sidon Restored', src: s.restored || s.sidon, mel: s.restored_mel || s.sidon_mel });
        if (s.gt) cols.push({ label: 'Ground Truth', src: s.gt, mel: s.gt_mel });
      }

      if (cols.length === 0) continue;

      const card = document.createElement('div');
      card.className = 'box sample-card';
      const colsHtml = cols.map(c => `
          <div class="column">
            <div class="subtitle is-6">${c.label}</div>
            <audio controls preload="none" class="is-fullwidth">
              <source src="${c.src}" />
              Your browser does not support the audio element.
            </audio>
            ${c.mel ? `<div class="spectrogram-pair"><img class="spectrogram" src="${c.mel}" alt="${c.label} mel-spectrogram"></div>` : ''}
          </div>`).join('');

      card.innerHTML = `
        <h3 class="title is-5">${title}</h3>
        <div class="columns is-variable is-5">${colsHtml}
        </div>`;

      container.appendChild(card);
    }
  } catch (e) {
    if (rootMulti) rootMulti.innerHTML = `<article class="message is-warning"><div class="message-body">Could not load samples: ${e.message}. Ensure assets/samples.json exists.</div></article>`;
    if (rootEn) rootEn.innerHTML = '';
  }
}

// Kick off rendering after DOM and scripts are ready
document.addEventListener('DOMContentLoaded', renderSamples);