Spaces:

fair-forward
/

evals-for-every-language

Running

App Files Files Community

David Pomerenke commited on Feb 16

Commit

698d104

1 Parent(s): 790c5f2

Basic Observable Framework setup

Browse files

Files changed (14) hide show

.gitignore +6 -0
index.html +0 -254
observablehq.config.js +38 -0
package-lock.json +0 -0
package.json +22 -0
results.json +0 -0
src/.gitignore +1 -0
src/chart.md +85 -0
src/components/timeline.js +16 -0
src/data/languagebench.json +62 -0
languagebench.py → src/data/languagebench.json.py +8 -8
src/index.md +111 -0
src/list.md +71 -0
src/observable.png +0 -0

.gitignore CHANGED Viewed

@@ -4,6 +4,12 @@ ScriptCodes.csv
 .cache
 .env
 # Python-generated files
 __pycache__/
 *.py[oc]

 .cache
 .env
+# Observable
+.DS_Store
+/dist/
+node_modules/
+yarn-error.log
 # Python-generated files
 __pycache__/
 *.py[oc]

index.html DELETED Viewed

@@ -1,254 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>AI Language Monitor</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        body {
-            margin: 0 auto;
-            padding: 20px;
-            font-family: sans-serif;
-        }
-        .language-header {
-            margin-bottom: 10px;
-        }
-        .speaker-count {
-            font-size: 0.8em;
-            color: #666;
-            font-weight: normal;
-            margin: 0;
-        }
-    </style>
-    <link rel="icon"
-        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 fill=%22black%22>🌍</text></svg>">
-</head>
-<body>
-    <nav>
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <!-- Mobile menu button -->
-            <div class="sm:hidden absolute left-4 top-4">
-                <button onclick="toggleMobileMenu()" class="text-gray-500 hover:text-gray-700 focus:outline-none">
-                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                    </svg>
-                </button>
-            </div>
-            <!-- Mobile menu (hidden by default) -->
-            <div id="mobileMenu" class="hidden sm:hidden absolute left-0 top-16 bg-white shadow-lg py-4 mx-4 rounded-lg border border-gray-200">
-                <div class="flex flex-col">
-                    <h3 class="px-6 py-2 text-gray-400 text-sm font-medium">Navigation</h3>
-                    <a href="#" onclick="showSection('coverage'); toggleMobileMenu()" class="nav-link px-6 py-3 text-gray-600 hover:bg-gray-50">
-                        Language Coverage
-                    </a>
-                    <a href="#" onclick="showSection('comparison'); toggleMobileMenu()" class="nav-link px-6 py-3 text-gray-600 hover:bg-gray-50">
-                        LLM Comparison
-                    </a>
-                    <a href="#" onclick="showSection('results'); toggleMobileMenu()" class="nav-link px-6 py-3 text-gray-600 hover:bg-gray-50">
-                        Results by Language
-                    </a>
-                </div>
-            </div>
-            <!-- Desktop menu -->
-            <div class="hidden sm:flex justify-center h-16 border-b border-gray-200">
-                <div class="flex">
-                    <div class="flex space-x-8">
-                        <a href="#" onclick="showSection('coverage')" class="nav-link active inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium text-gray-900">
-                            Language Coverage
-                        </a>
-                        <a href="#" onclick="showSection('comparison')" class="nav-link inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
-                            LLM Comparison
-                        </a>
-                        <a href="#" onclick="showSection('results')" class="nav-link inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
-                            Results by Language
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </nav>
-    <div class="p-6">
-        <section id="coverage" class="section">
-            <div id="summary-chart"></div>
-        </section>
-        <section id="comparison" class="section hidden">
-            <p class="text-gray-600">Coming soon...</p>
-            <!--
-            - Leaderboard
-                - Filters
-                    - commercial vs open source
-                - Eval results per task (across all languages)
-            - Timeline
-            -->
-        </section>
-        <section id="results" class="section hidden">
-            <div id="language-list"></div>
-            <!--
-            - Filters
-                - free-text search
-                - by continent, by language family
-                - sort by: population ><, performance ><, datasets ><
-            - Language list with details
-                - Eval results for each task and model
-                - Available datasets
-                - Form field to submit more datasets and custom models
-            -->
-        </section>
-    </div>
-    <script type="module">
-        // Import Plot using ESM
-        import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm";
-        function showSection(sectionId) {
-            // Update nav links
-            document.querySelectorAll('.nav-link').forEach(link => {
-                link.classList.remove('border-indigo-500', 'text-gray-900');
-                link.classList.add('border-transparent', 'text-gray-500');
-            });
-            const activeLink = document.querySelector(`[onclick="showSection('${sectionId}')"]`);
-            activeLink.classList.remove('border-transparent', 'text-gray-500');
-            activeLink.classList.add('border-indigo-500', 'text-gray-900');
-            // Show/hide sections
-            document.querySelectorAll('.section').forEach(section => {
-                section.classList.add('hidden');
-            });
-            document.getElementById(sectionId).classList.remove('hidden');
-        }
-        window.showSection = showSection;
-        function toggleMobileMenu() {
-            const mobileMenu = document.getElementById('mobileMenu');
-            mobileMenu.classList.toggle('hidden');
-        }
-        window.toggleMobileMenu = toggleMobileMenu;
-        async function init() {
-            const scoreKey = "bleu"
-            const scoreName = "BLEU Score"
-            const summaryChartDiv = document.getElementById('summary-chart');
-            const languageListDiv = document.getElementById('language-list');
-            const response = await fetch('results.json');
-            const data = await response.json();
-            // Format captions
-            const formatScore = (score) => score > 0 ? score.toFixed(2) : "No benchmark available!"
-            const formatTitle = d => (d.language_name + "\n" + parseInt(d.speakers / 1_000_00) / 10 + "M speakers\n" + scoreName + ": " + formatScore(d[scoreKey]))
-            // Create summary plot
-            const summaryPlot = Plot.plot({
-                width: summaryChartDiv.clientWidth,
-                height: 400,
-                marginBottom: 100,
-                x: { label: "Number of speakers", axis: null },
-                y: { label: `${scoreName} (average across models)` },
-                // color: { scheme: "BrBG" },
-                marks: [
-                    Plot.rectY(data, Plot.stackX({
-                        x: "speakers",
-                        order: scoreKey,
-                        reverse: true,
-                        y2: scoreKey, // y2 to avoid stacking by y
-                        title: formatTitle,
-                        tip: true,
-                        fill: d => d[scoreKey] > 0 ? "black" : "pink"
-                    })),
-                    Plot.rectY(data, Plot.pointerX(Plot.stackX({
-                        x: "speakers",
-                        order: scoreKey,
-                        reverse: true,
-                        y2: scoreKey, // y2 to avoid stacking by y
-                        fill: "grey",
-                    }))),
-                    Plot.text(data, Plot.stackX({
-                        x: "speakers",
-                        y2: scoreKey,
-                        order: scoreKey,
-                        reverse: true,
-                        text: "language_name",
-                        frameAnchor: "bottom",
-                        textAnchor: "end",
-                        dy: 10,
-                        rotate: 270,
-                        opacity: (d) => d.speakers > 50_000_000 ? 1 : 0,
-                    }))
-                ]
-            });
-            // Add summary plot to the coverage section
-            summaryChartDiv.appendChild(summaryPlot);
-            // Get unique languages with their speaker counts
-            const languageMap = new Map();
-            data.forEach(r => {
-                if (!languageMap.has(r.language_name)) {
-                    languageMap.set(r.language_name, r.speakers);
-                }
-            });
-            // Sort languages by speaker count (descending)
-            const languages = [...languageMap.entries()]
-                .sort((a, b) => b[1] - a[1])
-                .map(([lang]) => lang);
-            // Section for each language
-            languages.forEach(language => {
-                const headerDiv = document.createElement('div');
-                headerDiv.className = 'language-header';
-                const h2 = document.createElement('h2');
-                h2.textContent = language;
-                h2.style.marginBottom = '5px';
-                const speakerP = document.createElement('p');
-                speakerP.className = 'speaker-count';
-                const speakerCount = (languageMap.get(language) / 1_000_000).toFixed(1);
-                speakerP.textContent = `${speakerCount}M speakers`;
-                headerDiv.appendChild(h2);
-                headerDiv.appendChild(speakerP);
-                languageListDiv.appendChild(headerDiv);
-                const languageData = data.filter(r => r.language_name === language)[0]["scores"];
-                const descriptor = code => {
-                    let [org, model] = code.split("/")
-                    return model.split("-")[0]
-                }
-                // Plot for how well the models perform on this language
-                if (languageData && languageData.length > 1) {
-                    const plot = Plot.plot({
-                        width: 400,
-                        height: 200,
-                        margin: 30,
-                        y: {
-                            domain: [0, 1],
-                            label: scoreName
-                        },
-                        marks: [
-                            Plot.barY(languageData, {
-                                x: d => descriptor(d.model),
-                                y: scoreKey
-                            })
-                        ]
-                    });
-                    languageListDiv.appendChild(plot);
-                }
-            });
-        }
-        init();
-    </script>
-</body>
-</html>

observablehq.config.js ADDED Viewed

	@@ -0,0 +1,38 @@

+// See https://observablehq.com/framework/config for documentation.
+export default {
+  // The app’s title; used in the sidebar and webpage titles.
+  title: "AI Language Monitor",
+  // The pages and sections in the sidebar. If you don’t specify this option,
+  // all pages will be listed in alphabetical order. Listing pages explicitly
+  // lets you organize them into sections and have unlisted pages.
+  // pages: [
+  //   {
+  //     name: "Examples",
+  //     pages: [
+  //       {name: "Dashboard", path: "/example-dashboard"},
+  //       {name: "Report", path: "/example-report"}
+  //     ]
+  //   }
+  // ],
+  // Content to add to the head of the page, e.g. for a favicon:
+  head: '<link rel="icon" href="observable.png" type="image/png" sizes="32x32">',
+  // The path to the source root.
+  root: "src",
+  // Some additional configuration options and their defaults:
+  // theme: "default", // try "light", "dark", "slate", etc.
+  // header: "", // what to show in the header (HTML)
+  // footer: "Built with Observable.", // what to show in the footer (HTML)
+  // sidebar: true, // whether to show the sidebar
+  // toc: true, // whether to show the table of contents
+  // pager: true, // whether to show previous & next links in the footer
+  // output: "dist", // path to the output root for build
+  // search: true, // activate search
+  // linkify: true, // convert URLs in Markdown to links
+  // typographer: false, // smart quotes and other typographic improvements
+  // preserveExtension: false, // drop .html from URLs
+  // preserveIndex: false, // drop /index from URLs
+};

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,22 @@

+{
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf src/.observablehq/cache",
+    "build": "observable build",
+    "dev": "observable preview",
+    "deploy": "observable deploy",
+    "observable": "observable"
+  },
+  "dependencies": {
+    "@observablehq/framework": "^1.13.2",
+    "d3-dsv": "^3.0.1",
+    "d3-time-format": "^4.1.0"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.5"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

results.json DELETED Viewed

The diff for this file is too large to render. See raw diff

src/.gitignore ADDED Viewed

	@@ -0,0 +1 @@


1	+ /.observablehq/cache/

src/chart.md ADDED Viewed

	@@ -0,0 +1,85 @@

+---
+theme: dashboard
+title: AI Language Monitor
+toc: false
+head: <link rel="icon"
+  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 fill=%22black%22>🌍</text></svg>">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+  <!--<link rel="stylesheet" href="styles.css">-->
+  <script src="https://cdn.tailwindcss.com"></script>
+---
+# AI Language Monitor
+```js
+const data = FileAttachment("data/languagebench.json").json();
+```
+```js
+const scoreKey = "bleu"
+const scoreName = "BLEU Score"
+// Format captions
+const formatScore = (score) => score > 0 ? score.toFixed(2) : "No benchmark available!"
+const formatTitle = d => (d.language_name + "\n" + parseInt(d.speakers / 1_000_00) / 10 + "M speakers\n" + scoreName + ": " + formatScore(d[scoreKey]))
+// Create summary plot
+const chart = Plot.plot({
+    width: 600,
+    height: 400,
+    marginBottom: 100,
+    x: { label: "Number of speakers", axis: null },
+    y: { label: `${scoreName} (average across models)` },
+    // color: { scheme: "BrBG" },
+    marks: [
+        Plot.rectY(data, Plot.stackX({
+            x: "speakers",
+            order: scoreKey,
+            reverse: true,
+            y2: scoreKey, // y2 to avoid stacking by y
+            title: formatTitle,
+            tip: true,
+            fill: d => d[scoreKey] > 0 ? "black" : "pink"
+        })),
+        Plot.rectY(data, Plot.pointerX(Plot.stackX({
+            x: "speakers",
+            order: scoreKey,
+            reverse: true,
+            y2: scoreKey, // y2 to avoid stacking by y
+            fill: "grey",
+        }))),
+        Plot.text(data, Plot.stackX({
+            x: "speakers",
+            y2: scoreKey,
+            order: scoreKey,
+            reverse: true,
+            text: "language_name",
+            frameAnchor: "bottom",
+            textAnchor: "end",
+            dy: 10,
+            rotate: 270,
+            opacity: (d) => d.speakers > 50_000_000 ? 1 : 0,
+        }))
+    ]
+});
+display(chart);
+```
+<style>
+    body {
+        margin: 0 auto;
+        padding: 20px;
+        font-family: sans-serif;
+    }
+    .language-header {
+        margin-bottom: 10px;
+    }
+    .speaker-count {
+        font-size: 0.8em;
+        color: #666;
+        font-weight: normal;
+        margin: 0;
+    }
+</style>

src/components/timeline.js ADDED Viewed

	@@ -0,0 +1,16 @@

+import * as Plot from "npm:@observablehq/plot";
+export function timeline(events, {width, height} = {}) {
+  return Plot.plot({
+    width,
+    height,
+    marginTop: 30,
+    x: {nice: true, label: null, tickFormat: ""},
+    y: {axis: null},
+    marks: [
+      Plot.ruleX(events, {x: "year", y: "y", markerEnd: "dot", strokeWidth: 2.5}),
+      Plot.ruleY([0]),
+      Plot.text(events, {x: "year", y: "y", text: "name", lineAnchor: "bottom", dy: -10, lineWidth: 10, fontSize: 12})
+    ]
+  });
+}

src/data/languagebench.json ADDED Viewed

	@@ -0,0 +1,62 @@

+[
+  {
+    "language_name": "English",
+    "language_code": "eng",
+    "speakers": 1132366680.0,
+    "scores": [
+      {
+        "model": "anthropic/claude-3.5-haiku",
+        "bleu": 0.4114123099745433
+      }
+    ],
+    "bleu": 0.4114123099745433
+  },
+  {
+    "language_name": "Mandarin Chinese",
+    "language_code": "cmn",
+    "speakers": 1074000000.0,
+    "scores": [
+      {
+        "model": "anthropic/claude-3.5-haiku",
+        "bleu": 0.22799274850984375
+      }
+    ],
+    "bleu": 0.22799274850984375
+  },
+  {
+    "language_name": "Spanish",
+    "language_code": "spa",
+    "speakers": 485000000.0,
+    "scores": [
+      {
+        "model": "anthropic/claude-3.5-haiku",
+        "bleu": 0.27814703404841756
+      }
+    ],
+    "bleu": 0.27814703404841756
+  },
+  {
+    "language_name": "Hindi",
+    "language_code": "hin",
+    "speakers": 341000000.0,
+    "scores": [
+      {
+        "model": "anthropic/claude-3.5-haiku",
+        "bleu": 0.2607691459848629
+      }
+    ],
+    "bleu": 0.2607691459848629
+  },
+  {
+    "language_name": "Bengali",
+    "language_code": "ben",
+    "speakers": 300000000.0,
+    "scores": [
+      {
+        "model": "anthropic/claude-3.5-haiku",
+        "bleu": 0.2504671437388243
+      }
+    ],
+    "bleu": 0.2504671437388243
+  }
+]

languagebench.py → src/data/languagebench.json.py RENAMED Viewed

@@ -15,14 +15,14 @@ from transformers import NllbTokenizer
 # config
 models = [
-    "openai/gpt-4o",
-    "anthropic/claude-3.5-sonnet",
-    "meta-llama/llama-3.1-405b-instruct",  # lots of slow repetitions for LRLs
-    "mistralai/mistral-large",
     # "google/gemini-flash-1.5",  # very fast
-    "qwen/qwen-2.5-72b-instruct",  # somewhat slow
 ]
-fast_model = "anthropic/claude-3.5-sonnet"
 n_sentences = 30
 # setup
@@ -160,7 +160,7 @@ def load_sentences(language):
 # evaluation!
 async def main():
     results = []
-    for language in languages.itertuples():
         name = (
             language.language_name
             if not pd.isna(language.language_name)
@@ -220,7 +220,7 @@ async def main():
                 # "bert_score": mean([s["bert_score"] for s in scores]),
             }
         )
-        with open("results.json", "w") as f:
             json.dump(results, f, indent=2, ensure_ascii=False)

 # config
 models = [
+    "openai/gpt-4o-mini",
+    "anthropic/claude-3.5-haiku",
+    # "meta-llama/llama-3.1-405b-instruct",  # lots of slow repetitions for LRLs
+    # "mistralai/mistral-large",
     # "google/gemini-flash-1.5",  # very fast
+    # "qwen/qwen-2.5-72b-instruct",  # somewhat slow
 ]
+fast_model = "anthropic/claude-3.5-haiku"
 n_sentences = 30
 # setup
 # evaluation!
 async def main():
     results = []
+    for language in list(languages.itertuples())[:5]:
         name = (
             language.language_name
             if not pd.isna(language.language_name)
                 # "bert_score": mean([s["bert_score"] for s in scores]),
             }
         )
+        with open("src/data/languagebench.json", "w") as f:
             json.dump(results, f, indent=2, ensure_ascii=False)

src/index.md ADDED Viewed

	@@ -0,0 +1,111 @@

+---
+toc: false
+---
+<div class="hero">
+  <h1>AI Language Monitor</h1>
+  <h2>Welcome to your new app! Edit&nbsp;<code style="font-size: 90%;">src/index.md</code> to change this page.</h2>
+  <a href="https://observablehq.com/framework/getting-started">Get started<span style="display: inline-block; margin-left: 0.25rem;">↗︎</span></a>
+</div>
+<div class="grid grid-cols-2" style="grid-auto-rows: 504px;">
+  <div class="card">${
+    resize((width) => Plot.plot({
+      title: "Your awesomeness over time 🚀",
+      subtitle: "Up and to the right!",
+      width,
+      y: {grid: true, label: "Awesomeness"},
+      marks: [
+        Plot.ruleY([0]),
+        Plot.lineY(aapl, {x: "Date", y: "Close", tip: true})
+      ]
+    }))
+  }</div>
+  <div class="card">${
+    resize((width) => Plot.plot({
+      title: "How big are penguins, anyway? 🐧",
+      width,
+      grid: true,
+      x: {label: "Body mass (g)"},
+      y: {label: "Flipper length (mm)"},
+      color: {legend: true},
+      marks: [
+        Plot.linearRegressionY(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species"}),
+        Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species", tip: true})
+      ]
+    }))
+  }</div>
+</div>
+---
+## Next steps
+Here are some ideas of things you could try…
+<div class="grid grid-cols-4">
+  <div class="card">
+    Chart your own data using <a href="https://observablehq.com/framework/lib/plot"><code>Plot</code></a> and <a href="https://observablehq.com/framework/files"><code>FileAttachment</code></a>. Make it responsive using <a href="https://observablehq.com/framework/javascript#resize(render)"><code>resize</code></a>.
+  </div>
+  <div class="card">
+    Create a <a href="https://observablehq.com/framework/project-structure">new page</a> by adding a Markdown file (<code>whatever.md</code>) to the <code>src</code> folder.
+  </div>
+  <div class="card">
+    Add a drop-down menu using <a href="https://observablehq.com/framework/inputs/select"><code>Inputs.select</code></a> and use it to filter the data shown in a chart.
+  </div>
+  <div class="card">
+    Write a <a href="https://observablehq.com/framework/loaders">data loader</a> that queries a local database or API, generating a data snapshot on build.
+  </div>
+  <div class="card">
+    Import a <a href="https://observablehq.com/framework/imports">recommended library</a> from npm, such as <a href="https://observablehq.com/framework/lib/leaflet">Leaflet</a>, <a href="https://observablehq.com/framework/lib/dot">GraphViz</a>, <a href="https://observablehq.com/framework/lib/tex">TeX</a>, or <a href="https://observablehq.com/framework/lib/duckdb">DuckDB</a>.
+  </div>
+  <div class="card">
+    Ask for help, or share your work or ideas, on our <a href="https://github.com/observablehq/framework/discussions">GitHub discussions</a>.
+  </div>
+  <div class="card">
+    Visit <a href="https://github.com/observablehq/framework">Framework on GitHub</a> and give us a star. Or file an issue if you’ve found a bug!
+  </div>
+</div>
+<style>
+.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: var(--sans-serif);
+  margin: 4rem 0 8rem;
+  text-wrap: balance;
+  text-align: center;
+}
+.hero h1 {
+  margin: 1rem 0;
+  padding: 1rem 0;
+  max-width: none;
+  font-size: 14vw;
+  font-weight: 900;
+  line-height: 1;
+  background: linear-gradient(30deg, var(--theme-foreground-focus), currentColor);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.hero h2 {
+  margin: 0;
+  max-width: 34em;
+  font-size: 20px;
+  font-style: initial;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--theme-foreground-muted);
+}
+@media (min-width: 640px) {
+  .hero h1 {
+    font-size: 90px;
+  }
+}
+</style>

src/list.md ADDED Viewed

	@@ -0,0 +1,71 @@

+---
+theme: dashboard
+title: List
+toc: false
+head: <link rel="icon"
+  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 fill=%22black%22>🌍</text></svg>">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+  <!--<link rel="stylesheet" href="styles.css">-->
+  <script src="https://cdn.tailwindcss.com"></script>
+---
+# AI Language Monitor
+```js
+const data = FileAttachment("data/languagebench.json").json();
+```
+```js
+const scoreKey = "bleu"
+const scoreName = "BLEU Score"
+// Get unique languages with their speaker counts
+const languageMap = new Map();
+data.forEach(r => {
+    if (!languageMap.has(r.language_name)) {
+        languageMap.set(r.language_name, r.speakers);
+    }
+});
+// Sort languages by speaker count (descending)
+const languages = [...languageMap.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([lang]) => lang);
+// Section for each language
+languages.forEach(language => {
+    display(html`<h2 class="language-header">${language}</h2>`)
+    const speakerCount = (languageMap.get(language) / 1_000_000).toFixed(1);
+    display(html`${speakerCount}M speakers`);
+    const languageData = data.filter(r => r.language_name === language)[0]["scores"];
+    console.log(languageData)
+    const descriptor = code => {
+        let [org, model] = code.split("/")
+        return model.split("-")[0]
+    }
+    // Plot for how well the models perform on this language
+    if (languageData && languageData.length >= 1) {
+        console.log("yes")
+        const chart = Plot.plot({
+            width: 400,
+            height: 200,
+            margin: 30,
+            y: {
+                domain: [0, 1],
+                label: scoreName
+            },
+            marks: [
+                Plot.barY(languageData, {
+                    x: d => descriptor(d.model),
+                    y: scoreKey
+                })
+            ]
+        });
+        display(chart)
+    }
+});
+```

src/observable.png ADDED Viewed