|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
|
|
|
<head> |
|
|
<title>Language Bench</title> |
|
|
<style> |
|
|
body { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
font-family: sans-serif; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<h1>Language Bench</h1> |
|
|
<div id="charts"></div> |
|
|
|
|
|
<script type="module"> |
|
|
|
|
|
import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm"; |
|
|
|
|
|
async function init() { |
|
|
const response = await fetch('results.json'); |
|
|
const results = await response.json(); |
|
|
|
|
|
const languages = [...new Set(results.map(r => r.target_language))]; |
|
|
const chartsDiv = document.getElementById('charts'); |
|
|
|
|
|
languages.forEach(language => { |
|
|
const h2 = document.createElement('h2'); |
|
|
h2.textContent = language; |
|
|
chartsDiv.appendChild(h2); |
|
|
|
|
|
const languageData = results.filter(r => r.target_language === language); |
|
|
|
|
|
|
|
|
const plot = Plot.plot({ |
|
|
width: 400, |
|
|
height: 200, |
|
|
margin: 30, |
|
|
y: { |
|
|
domain: [0, 100], |
|
|
label: "BLEU" |
|
|
}, |
|
|
marks: [ |
|
|
Plot.barY(languageData, { |
|
|
x: d => d.model.split('/')[0], |
|
|
y: "bleu" |
|
|
}) |
|
|
] |
|
|
}); |
|
|
|
|
|
chartsDiv.appendChild(plot); |
|
|
}); |
|
|
} |
|
|
|
|
|
init(); |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
</html> |
