Spaces:
Running
Running
| <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 Plot using ESM | |
| import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/[email protected]/+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); | |
| // Create plot using the more idiomatic Observable Plot approach | |
| 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> |