Spaces:
Running
Running
File size: 4,037 Bytes
16ddc25 | 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 | async function loadData() {
try {
const response = await fetch('data/metadata.json');
if (!response.ok) throw new Error('Failed to load data/metadata.json');
const data = await response.json();
if (!data.models || data.models.length === 0) throw new Error('No models in metadata.json');
displayResults(data.models);
} catch (error) {
console.error('Error loading data:', error);
document.getElementById('loading').innerHTML =
'<div class="error">Error loading data. Please make sure data/metadata.json exists.</div>';
}
}
function displayResults(models) {
models.sort((a, b) => a.wer - b.wer);
models.forEach((model, index) => { model.rank = index + 1; });
document.getElementById('total-models').textContent = models.length;
document.getElementById('best-wer').textContent = ((1 - models[0].wer) * 100).toFixed(1) + '%';
document.getElementById('total-sentences').textContent = models[0].n;
const tableBody = document.getElementById('table-body');
tableBody.innerHTML = '';
models.forEach(model => {
const row = document.createElement('tr');
row.className = model.rank === 1 ? 'best-model-row' : '';
const accuracy = Math.max(0, (1 - model.wer) * 100).toFixed(1);
const modelNameCell = model.url
? `<a href="${model.url}" target="_blank">${model.name}</a>`
: model.name;
const stressWer = model.stress_wer !== undefined ? model.stress_wer.toFixed(2) : 'N/A';
row.innerHTML = `
<td class="rank">${model.rank}</td>
<td class="model-name">${modelNameCell}</td>
<td class="metric">${accuracy}%</td>
<td class="metric">${model.wer.toFixed(2)}</td>
<td class="metric">${model.cer.toFixed(2)}</td>
<td class="metric">${stressWer}</td>
<td class="report-link"><a href="report.html?model=${model.id}">View Details</a></td>
`;
tableBody.appendChild(row);
});
displayScatterPlot(models);
}
function displayScatterPlot(models) {
const trace = {
x: models.map(m => m.wer),
y: models.map(m => m.cer),
text: models.map(m => m.name),
mode: 'markers+text',
type: 'scatter',
marker: {
color: models.map((m, i) => i === 0 ? '#22c55e' : '#3182ce'),
size: models.map((m, i) => i === 0 ? 20 : 15),
line: { color: models.map((m, i) => i === 0 ? '#16a34a' : '#2b6cb0'), width: 2 }
},
textposition: 'top center',
textfont: { size: 12, color: '#2d3748' },
hovertemplate: '<b>%{text}</b><br>WER: %{x:.2f}<br>CER: %{y:.2f}<br><extra></extra>'
};
const allWER = models.map(m => m.wer);
const allCER = models.map(m => m.cer);
const werRange = Math.max(...allWER) - Math.min(...allWER);
const cerRange = Math.max(...allCER) - Math.min(...allCER);
const layout = {
title: { text: 'G2P Model Performance: WER vs CER', font: { size: 20, color: '#2d3748' } },
xaxis: {
title: 'Word Error Rate (WER)', titlefont: { size: 14 },
range: [Math.max(0, Math.min(...allWER) - werRange * 0.3), Math.max(...allWER) + werRange * 0.3],
gridcolor: '#e2e8f0', zerolinecolor: '#cbd5e0'
},
yaxis: {
title: 'Character Error Rate (CER)', titlefont: { size: 14 },
range: [Math.max(0, Math.min(...allCER) - cerRange * 0.3), Math.max(...allCER) + cerRange * 0.3],
gridcolor: '#e2e8f0', zerolinecolor: '#cbd5e0'
},
plot_bgcolor: '#ffffff', paper_bgcolor: '#ffffff',
font: { family: 'Arial, sans-serif' },
hovermode: 'closest', margin: { t: 60, r: 40, b: 60, l: 60 }, showlegend: false
};
document.getElementById('loading').style.display = 'none';
Plotly.newPlot('scatter-plot', [trace], layout, { responsive: true, displaylogo: false });
}
document.addEventListener('DOMContentLoaded', loadData);
|