function createAudioHTML(path) { return ''; } function generateExampleRow(table_row, base_dir, dirs, filename, col_offset) { for (var i = 0; i < dirs.length; i++) { let cell = table_row.cells[col_offset + i]; let p = base_dir + '/' + dirs[i] + '/' + filename; if (p.endsWith('txt')) { var req = new XMLHttpRequest(); req.onreadystatechange = function() { if (this.readyState === this.DONE) { cell.innerHTML = '' + req.responseText + ''; } }; req.open('GET', p); req.send(null); } else { cell.innerHTML = cell.innerHTML + createAudioHTML(p); } } } function generateCVSS(tableId) { let table = document.getElementById(tableId); let base_dir = 'data/cvss_c_test' let dirs = ['source', 'hibiki', 'seamless']; let filenames = [ "cvss-fr2en-test-idx14345-20007437.wav", "cvss-fr2en-test-idx14410-20011543.wav", "cvss-fr2en-test-idx14603-20030929.wav", "cvss-fr2en-test-idx14695-20041791.wav", "cvss-fr2en-test-idx4562-19004869.wav", ]; for (var i = 0; i < filenames.length; i++) { generateExampleRow(table.rows[1 + i], base_dir, dirs, filenames[i], 0); } } function generateNTREX(tableId) { let table = document.getElementById(tableId); let base_dir = 'data/audio_ntrex_long' let dirs = ['source', 'hibiki', 'seamless']; let filenames = [ "10887_ea80c8e6-883d-4afe-841b-598ce7db3779.wav", "3120_a63eabfc-d5aa-4353-84d0-9c5c068a1b38.wav", "5196_ea80c8e6-883d-4afe-841b-598ce7db3779.wav", "6855_f3c3ea82-42ef-4c09-b4aa-544a4c95518b.wav", "9605_83f1360e-7775-4d36-89f6-60649041c935.wav" ]; for (var i = 0; i < filenames.length; i++) { generateExampleRow(table.rows[1 + i], base_dir, dirs, filenames[i], 0); } } function generateVoxPopuli(tableId) { let table = document.getElementById(tableId); let base_dir = 'data/voxpopuli' let dirs = ['source', 'hibiki_cfg=1', 'hibiki_cfg=3', 'hibiki_cfg=10', 'seamless']; let filenames = [ "20090422-0900-PLENARY-3_20090422-09:53:50_7.wav", "20090506-0900-PLENARY-12_20090506-17:43:49_4.wav", "20090914-0900-PLENARY-15_20090914-20:43:54_7.wav", "20090916-0900-PLENARY-4_20090916-10:55:02_12.wav", ]; for (var i = 0; i < filenames.length; i++) { generateExampleRow(table.rows[1 + i], base_dir, dirs, filenames[i], 0); } } generateNTREX('ntrex-table'); generateCVSS('cvss-table'); generateVoxPopuli('voxpopuli-table'); // Borrowed from https://nu-dialogue.github.io/j-moshi/ $(document).ready(function() { { const columns = ['Hibiki', 'Seamless']; const rows = [ ['data-stereo/hibiki1.wav', 'data-stereo/seamless1.wav'], ['data-stereo/hibiki2.wav', 'data-stereo/seamless2.wav'], ['data-stereo/hibiki3.wav', 'data-stereo/seamless3.wav'], ]; const table = $('#vis-table'); // Add header const thead = $(''); const headerRow = $(''); columns.forEach(header => { headerRow.append($('').text(header)); }); thead.append(headerRow); table.append(thead); // Add rows const tbody = $(''); rows.forEach((files, i) => { const row = $(''); files.forEach((files, j) => { // Add waveform cell const waveCell = $('');//.css('min-width', '200px'); const waveform = $('
').attr('id', `waveform-${i}-${j}`); waveCell.append(waveform); const playPauseButton = ` `; waveCell.append(playPauseButton); row.append(waveCell); }); tbody.append(row); }); table.append(tbody); // Create wavesurfer instances rows.forEach((files, i) => { files.forEach((file, j) => { const wavesurfer = WaveSurfer.create({ container: `#waveform-${i}-${j}`, url: file, splitChannels: [ { waveColor: '#2E7D9E', progressColor: '#173E4E', }, { waveColor: '#E57872', progressColor: '#2A0908', } ], barWidth: 2, height: 55, width: 700, }); $(`#play-pause-${i}-${j}`).click(() => { wavesurfer.playPause(); }); }); }); } { const columns = ['Real Human Interpretation', 'Hibiki', 'Seamless']; const dirs = [ "data/voxpopuli/gt_with_fr_background", "data/voxpopuli/hibiki_cfg=3_with_fr_background", "data/voxpopuli/seamless_with_fr_background", ]; const rows = [ "20090422-0900-PLENARY-3_20090422-09:53:50_7.wav", "20090506-0900-PLENARY-12_20090506-17:43:49_4.wav", "20090914-0900-PLENARY-15_20090914-20:43:54_7.wav", "20090916-0900-PLENARY-4_20090916-10:55:02_12.wav", ]; const table = $('#vis-table2'); // Add header const thead = $(''); const headerRow = $(''); columns.forEach(header => { headerRow.append($('').text(header)); }); thead.append(headerRow); table.append(thead); // Add rows const tbody = $(''); rows.forEach((file, i) => { const row = $(''); dirs.forEach((d, j) => { // Add waveform cell const waveCell = $('');//.css('min-width', '200px'); const waveform = $('
').attr('id', `waveform2-${i}-${j}`); waveCell.append(waveform); const playPauseButton = ` `; waveCell.append(playPauseButton); row.append(waveCell); }); tbody.append(row); }); table.append(tbody); // Create wavesurfer instances rows.forEach((file, i) => { dirs.forEach((dir, j) => { const wavesurfer = WaveSurfer.create({ container: `#waveform2-${i}-${j}`, url: dir + '/' + file, barWidth: 2, height: 55, }); $(`#play-pause-${i}-${j}`).click(() => { wavesurfer.playPause(); }); }); }); } });