Spaces:
Running
Running
File size: 5,663 Bytes
5054992 baa9131 5054992 baa9131 |
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 |
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);
|