Hugging Face's logo

Spaces:
fair-forward
/
languagebench
Running

App Files Community
1
David Pomerenke commited on
Commit
1983d1c
·
1 Parent(s): e6f1c56

Use Observable Plot

Browse files
Files changed (1) hide show
  1. index.html +21 -31
index.html CHANGED
@@ -3,8 +3,6 @@
3
 
4
  <head>
5
  <title>Language Bench</title>
6
- <!-- Load Plotly.js -->
7
- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
8
  <style>
9
  body {
10
  max-width: 1200px;
@@ -19,13 +17,14 @@
19
  <h1>Language Bench</h1>
20
  <div id="charts"></div>
21
 
22
- <script>
 
 
 
23
  async function init() {
24
- // Load the JSON data
25
  const response = await fetch('results.json');
26
  const results = await response.json();
27
 
28
- // Create charts for each language
29
  const languages = [...new Set(results.map(r => r.target_language))];
30
  const chartsDiv = document.getElementById('charts');
31
 
@@ -34,35 +33,26 @@
34
  h2.textContent = language;
35
  chartsDiv.appendChild(h2);
36
 
37
- const chartDiv = document.createElement('div');
38
- chartsDiv.appendChild(chartDiv);
39
-
40
  const languageData = results.filter(r => r.target_language === language);
41
 
42
- const trace = {
43
- x: languageData.map(r => r.model.split('/')[0]),
44
- y: languageData.map(r => r.bleu),
45
- type: 'bar'
46
- };
47
-
48
- const layout = {
49
- yaxis: {
50
- range: [0, 100],
51
- tickfont: { size: 10 }
52
- },
53
- xaxis: {
54
- tickfont: { size: 10 }
55
- },
56
- margin: { t: 20 },
57
  width: 400,
58
- height: 200
59
- };
60
-
61
- const config = {
62
- displayModeBar: false
63
- };
64
-
65
- Plotly.newPlot(chartDiv, [trace], layout, config);
 
 
 
 
 
 
 
66
  });
67
  }
68
 
 
3
 
4
  <head>
5
  <title>Language Bench</title>
 
 
6
  <style>
7
  body {
8
  max-width: 1200px;
 
17
  <h1>Language Bench</h1>
18
  <div id="charts"></div>
19
 
20
+ <script type="module">
21
+ // Import Plot using ESM
22
+ import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/[email protected]/+esm";
23
+
24
  async function init() {
 
25
  const response = await fetch('results.json');
26
  const results = await response.json();
27
 
 
28
  const languages = [...new Set(results.map(r => r.target_language))];
29
  const chartsDiv = document.getElementById('charts');
30
 
 
33
  h2.textContent = language;
34
  chartsDiv.appendChild(h2);
35
 
 
 
 
36
  const languageData = results.filter(r => r.target_language === language);
37
 
38
+ // Create plot using the more idiomatic Observable Plot approach
39
+ const plot = Plot.plot({
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  width: 400,
41
+ height: 200,
42
+ margin: 30,
43
+ y: {
44
+ domain: [0, 100],
45
+ label: "BLEU"
46
+ },
47
+ marks: [
48
+ Plot.barY(languageData, {
49
+ x: d => d.model.split('/')[0],
50
+ y: "bleu"
51
+ })
52
+ ]
53
+ });
54
+
55
+ chartsDiv.appendChild(plot);
56
  });
57
  }
58