Spaces:

ellamind
/

eval-suite-visualization

Running

App Files Files Community

maxidl commited on 14 days ago

Commit

33c9ddc

verified ·

1 Parent(s): c4a5bf1

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +928 -18

index.html CHANGED Viewed

@@ -1,19 +1,929 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Eval Suite Visualization</title>
+  <script src="https://cdn.plot.ly/plotly-2.35.2.min.js" charset="utf-8"></script>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      background: #f8f9fa;
+      color: #1a1a2e;
+      padding: 24px;
+    }
+    /* ── Page header ─────────────────────────────── */
+    .page-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 24px;
+    }
+    .page-header h1 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: #1a1a2e;
+    }
+    .btn {
+      padding: 8px 16px;
+      border: 1px solid #dee2e6;
+      border-radius: 6px;
+      background: #fff;
+      font-size: 0.875rem;
+      color: #495057;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+    .btn:hover { background: #e9ecef; }
+    .btn-primary {
+      background: #4361ee;
+      color: #fff;
+      border-color: #4361ee;
+    }
+    .btn-primary:hover { background: #3a56d4; }
+    .btn-sm {
+      padding: 4px 10px;
+      font-size: 0.75rem;
+    }
+    .btn-danger { color: #e63946; border-color: #e6394640; }
+    .btn-danger:hover { background: #e6394610; }
+    /* ── Panel ───────────────────────────────────── */
+    .panel {
+      background: #fff;
+      border: 1px solid #dee2e6;
+      border-radius: 8px;
+      margin-bottom: 20px;
+      overflow: hidden;
+    }
+    .panel-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      border-bottom: 1px solid #dee2e6;
+      background: #f8f9fa;
+    }
+    .panel-title {
+      flex: 1;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: #1a1a2e;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .panel-info {
+      font-size: 0.7rem;
+      color: #6c757d;
+      font-weight: 400;
+    }
+    .panel-controls {
+      padding: 16px;
+      border-bottom: 1px solid #dee2e6;
+    }
+    .panel-controls.collapsed { display: none; }
+    .controls-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      align-items: flex-end;
+    }
+    .controls-row + .controls-row { margin-top: 12px; }
+    .control-group {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .control-group label {
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: #6c757d;
+    }
+    select {
+      padding: 6px 10px;
+      border: 1px solid #dee2e6;
+      border-radius: 6px;
+      background: #fff;
+      font-size: 0.8rem;
+      color: #1a1a2e;
+      min-width: 160px;
+      cursor: pointer;
+    }
+    select:focus {
+      outline: none;
+      border-color: #4361ee;
+      box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
+    }
+    /* ── Models section ──────────────────────────── */
+    .models-section {
+      margin-top: 12px;
+    }
+    .models-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .models-header span {
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: #6c757d;
+    }
+    .checkbox-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px 16px;
+    }
+    .checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      cursor: pointer;
+      font-size: 0.8rem;
+    }
+    .checkbox-item input[type="checkbox"] {
+      width: 14px;
+      height: 14px;
+      cursor: pointer;
+      accent-color: #4361ee;
+    }
+    .model-separator {
+      width: 100%;
+      border-top: 1px solid #eee;
+      margin: 4px 0;
+    }
+    /* ── Chart ───────────────────────────────────── */
+    .panel-chart {
+      min-height: 100px;
+    }
+    .loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem 0;
+      color: #adb5bd;
+      font-size: 0.85rem;
+    }
+    /* ── Custom tooltip ──────────────────────────── */
+    .custom-tooltip {
+      position: fixed;
+      pointer-events: none;
+      background: rgba(0, 0, 0, 0.8);
+      color: #fff;
+      padding: 6px 10px;
+      border-radius: 4px;
+      font-size: 12px;
+      line-height: 1.4;
+      z-index: 9999;
+      display: none;
+      white-space: nowrap;
+    }
+    /* ── Add panel button ────────────────────────── */
+    .add-panel-row {
+      display: flex;
+      justify-content: center;
+      padding: 20px;
+    }
+    /* ── Init loading ────────────────────────────── */
+    #init-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 300px;
+      color: #6c757d;
+      font-size: 1rem;
+    }
+  </style>
+</head>
+<body>
+  <div class="page-header">
+    <h1>Eval Suite Visualization</h1>
+  </div>
+  <div id="init-loading">Initializing DuckDB...</div>
+  <div id="panels-container"></div>
+  <div class="custom-tooltip" id="custom-tooltip"></div>
+  <div class="add-panel-row" id="add-panel-row" style="display:none">
+    <button class="btn btn-primary" id="btn-add-panel">+ Add Panel</button>
+  </div>
+  <script type="module">
+    import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.29.0/+esm';
+    import jsyaml from 'https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/+esm';
+    // ── Globals ─────────────────────────────────────────────────
+    let db = null;
+    let conn = null;
+    let panelCounter = 0;
+    const panels = new Map();
+    // Fallback palette for models without a config color
+    const COLOR_PALETTE = [
+      '#4361ee', '#e63946', '#2a9d8f', '#e9c46a', '#f4a261',
+      '#264653', '#7209b7', '#06d6a0', '#ef476f', '#ff6b6b',
+      '#48bfe3', '#d4a017', '#b5838d', '#588157', '#9d4edd',
+      '#f77f00', '#3a86a7', '#8338ec', '#ff006e', '#fb5607',
+    ];
+    const PARQUET_URL = 'https://huggingface.co/datasets/ellamind/eval-scores/resolve/main/scores.parquet';
+    // Shared model info (loaded once)
+    let ALL_MODELS = [];     // [{model, model_display_name, is_checkpoint}]
+    let MODEL_COLORS = {};
+    let CONFIG = {};         // parsed config.yaml
+    // ── DuckDB init ─────────────────────────────────────────────
+    async function initDuckDB() {
+      const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
+      const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
+      const worker_url = URL.createObjectURL(
+        new Blob([`importScripts("${bundle.mainWorker}");`], { type: 'text/javascript' })
+      );
+      const worker = new Worker(worker_url);
+      const logger = new duckdb.ConsoleLogger();
+      db = new duckdb.AsyncDuckDB(logger, worker);
+      await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
+      URL.revokeObjectURL(worker_url);
+      conn = await db.connect();
+    }
+    async function loadParquet() {
+      const response = await fetch(PARQUET_URL);
+      const buffer = new Uint8Array(await response.arrayBuffer());
+      await db.registerFileBuffer('scores.parquet', buffer);
+      await conn.query(`CREATE VIEW scores AS SELECT * FROM 'scores.parquet'`);
+    }
+    // ── SQL helpers ─────────────────────────────────────────────
+    async function query(sql) {
+      const result = await conn.query(sql);
+      return result.toArray().map(row => row.toJSON());
+    }
+    function esc(s) { return s.replace(/'/g, "''"); }
+    function sqlIn(vals) { return vals.map(v => `'${esc(v)}'`).join(', '); }
+    // ── Shared helpers ──────────────────────────────────────────
+    function populateSelect(el, options, selected) {
+      el.innerHTML = '';
+      options.forEach(opt => {
+        const o = document.createElement('option');
+        if (typeof opt === 'object') { o.value = opt.value; o.textContent = opt.label; }
+        else { o.value = opt; o.textContent = opt; }
+        el.appendChild(o);
+      });
+      if (selected && options.some(o => (typeof o === 'object' ? o.value : o) === selected)) {
+        el.value = selected;
+      }
+    }
+    function formatTokens(value) {
+      if (value >= 1e12) return (value / 1e12).toFixed(1) + 'T';
+      if (value >= 1e9)  return (value / 1e9).toFixed(0) + 'B';
+      if (value >= 1e6)  return (value / 1e6).toFixed(0) + 'M';
+      if (value >= 1e3)  return (value / 1e3).toFixed(0) + 'K';
+      return value.toString();
+    }
+    function niceTicks(min, max, maxTicks = 8) {
+      if (min === max) return [min];
+      const range = max - min;
+      // Find a "nice" step size: 1, 2, 5 × 10^n
+      const rawStep = range / maxTicks;
+      const mag = Math.pow(10, Math.floor(Math.log10(rawStep)));
+      const normalized = rawStep / mag;
+      let step;
+      if (normalized <= 1.5) step = 1 * mag;
+      else if (normalized <= 3.5) step = 2 * mag;
+      else if (normalized <= 7.5) step = 5 * mag;
+      else step = 10 * mag;
+      const start = Math.ceil(min / step) * step;
+      const ticks = [];
+      for (let v = start; v <= max; v += step) {
+        ticks.push(Math.round(v));
+      }
+      // Always include min/max endpoints if not already close
+      if (ticks.length === 0 || ticks[0] - min > step * 0.3) ticks.unshift(Math.round(min));
+      if (max - ticks[ticks.length - 1] > step * 0.3) ticks.push(Math.round(max));
+      return ticks;
+    }
+    function movingAverage(values, w) {
+      if (w <= 1) return values;
+      return values.map((_, i) => {
+        const n = Math.min(i + 1, w);
+        let sum = 0;
+        for (let j = i - n + 1; j <= i; j++) sum += values[j];
+        return sum / n;
+      });
+    }
+    async function loadConfig() {
+      try {
+        const resp = await fetch('config.yaml');
+        if (resp.ok) {
+          CONFIG = jsyaml.load(await resp.text()) || {};
+        }
+      } catch (e) {
+        console.warn('Could not load config.yaml, using defaults:', e);
+      }
+    }
+    async function loadModels() {
+      ALL_MODELS = await query(`
+        SELECT DISTINCT model, model_display_name, is_checkpoint
+        FROM scores
+        ORDER BY is_checkpoint DESC, model_display_name
+      `);
+      // Assign colors: config overrides first, then fallback palette
+      const configColors = CONFIG.model_colors || {};
+      MODEL_COLORS = {};
+      let paletteIdx = 0;
+      ALL_MODELS.forEach(m => {
+        const name = m.model_display_name;
+        if (configColors[name]) {
+          MODEL_COLORS[name] = configColors[name];
+        } else {
+          MODEL_COLORS[name] = COLOR_PALETTE[paletteIdx % COLOR_PALETTE.length];
+          paletteIdx++;
+        }
+      });
+    }
+    // ── Panel class ─────────────────────────────────────────────
+    class Panel {
+      constructor(id) {
+        this.id = id;
+        this.el = {};
+        this.collapsed = false;
+        this.build();
+      }
+      build() {
+        const container = document.getElementById('panels-container');
+        const panel = document.createElement('div');
+        panel.className = 'panel';
+        panel.id = `panel-${this.id}`;
+        panel.innerHTML = `
+          <div class="panel-header">
+            <span class="panel-title" id="ptitle-${this.id}">New Panel</span>
+            <span class="panel-info" id="pinfo-${this.id}"></span>
+            <button class="btn btn-sm" id="ptoggle-${this.id}">Collapse</button>
+            <button class="btn btn-sm" id="pexport-png-${this.id}">PNG</button>
+            <button class="btn btn-sm" id="pexport-svg-${this.id}">SVG</button>
+            <button class="btn btn-sm btn-danger" id="premove-${this.id}">Remove</button>
+          </div>
+          <div class="panel-controls" id="pcontrols-${this.id}">
+            <div class="controls-row">
+              <div class="control-group">
+                <label>Eval Suite</label>
+                <select id="psuite-${this.id}"></select>
+              </div>
+              <div class="control-group">
+                <label>Group</label>
+                <select id="pgroup-${this.id}"></select>
+              </div>
+              <div class="control-group">
+                <label>Task</label>
+                <select id="ptask-${this.id}"></select>
+              </div>
+              <div class="control-group">
+                <label>Metric</label>
+                <select id="pmetric-${this.id}"></select>
+              </div>
+              <div class="control-group">
+                <label>Smoothing</label>
+                <select id="psmooth-${this.id}">
+                  <option value="1" selected>None</option>
+                  <option value="2">2</option>
+                  <option value="3">3</option>
+                  <option value="4">4</option>
+                  <option value="5">5</option>
+                </select>
+              </div>
+              <div class="control-group">
+                <label>Chart Type</label>
+                <select id="pchart-type-${this.id}">
+                  <option value="auto" selected>Auto</option>
+                  <option value="line">Line</option>
+                  <option value="bar">Bar</option>
+                </select>
+              </div>
+            </div>
+            <div class="models-section">
+              <div class="models-header">
+                <span>Models</span>
+                <button class="btn btn-sm" id="pmodels-all-${this.id}">All</button>
+                <button class="btn btn-sm" id="pmodels-none-${this.id}">None</button>
+                <button class="btn btn-sm" id="pmodels-ckpt-${this.id}">Checkpoints</button>
+                <button class="btn btn-sm" id="pmodels-base-${this.id}">Baselines</button>
+              </div>
+              <div class="checkbox-grid" id="pmodels-${this.id}"></div>
+            </div>
+          </div>
+          <div class="panel-chart" id="pchart-${this.id}"></div>
+        `;
+        container.appendChild(panel);
+        // Cache refs
+        this.el.panel       = panel;
+        this.el.title       = panel.querySelector(`#ptitle-${this.id}`);
+        this.el.info        = panel.querySelector(`#pinfo-${this.id}`);
+        this.el.controls    = panel.querySelector(`#pcontrols-${this.id}`);
+        this.el.suite       = panel.querySelector(`#psuite-${this.id}`);
+        this.el.group       = panel.querySelector(`#pgroup-${this.id}`);
+        this.el.task        = panel.querySelector(`#ptask-${this.id}`);
+        this.el.metric      = panel.querySelector(`#pmetric-${this.id}`);
+        this.el.smooth      = panel.querySelector(`#psmooth-${this.id}`);
+        this.el.chartType   = panel.querySelector(`#pchart-type-${this.id}`);
+        this.el.models      = panel.querySelector(`#pmodels-${this.id}`);
+        this.el.chart       = panel.querySelector(`#pchart-${this.id}`);
+        // Events
+        panel.querySelector(`#ptoggle-${this.id}`).addEventListener('click', () => this.toggleControls());
+        panel.querySelector(`#premove-${this.id}`).addEventListener('click', () => this.remove());
+        panel.querySelector(`#pexport-png-${this.id}`).addEventListener('click', () => this.export('png'));
+        panel.querySelector(`#pexport-svg-${this.id}`).addEventListener('click', () => this.export('svg'));
+        this.el.suite.addEventListener('change', () => this.onSuiteChange());
+        this.el.group.addEventListener('change', () => this.onGroupChange());
+        this.el.task.addEventListener('change', () => this.onTaskChange());
+        this.el.metric.addEventListener('change', () => this.renderChart());
+        this.el.smooth.addEventListener('change', () => this.renderChart());
+        this.el.chartType.addEventListener('change', () => this.renderChart());
+        panel.querySelector(`#pmodels-all-${this.id}`).addEventListener('click', () => this.setModels(true));
+        panel.querySelector(`#pmodels-none-${this.id}`).addEventListener('click', () => this.setModels(false));
+        panel.querySelector(`#pmodels-ckpt-${this.id}`).addEventListener('click', () => this.setModelsByType(true));
+        panel.querySelector(`#pmodels-base-${this.id}`).addEventListener('click', () => this.setModelsByType(false));
+        this.buildModelCheckboxes();
+      }
+      toggleControls() {
+        this.collapsed = !this.collapsed;
+        this.el.controls.classList.toggle('collapsed', this.collapsed);
+        this.el.panel.querySelector(`#ptoggle-${this.id}`).textContent =
+          this.collapsed ? 'Expand' : 'Collapse';
+      }
+      remove() {
+        this.el.panel.remove();
+        panels.delete(this.id);
+      }
+      buildModelCheckboxes() {
+        const container = this.el.models;
+        container.innerHTML = '';
+        let lastCkpt = null;
+        for (const m of ALL_MODELS) {
+          if (lastCkpt !== null && lastCkpt !== m.is_checkpoint) {
+            const sep = document.createElement('div');
+            sep.className = 'model-separator';
+            container.appendChild(sep);
+          }
+          lastCkpt = m.is_checkpoint;
+          const lbl = document.createElement('label');
+          lbl.className = 'checkbox-item';
+          const cb = document.createElement('input');
+          cb.type = 'checkbox';
+          cb.value = m.model_display_name;
+          cb.checked = true;
+          cb.dataset.isCheckpoint = m.is_checkpoint;
+          cb.addEventListener('change', () => this.renderChart());
+          const dot = document.createElement('span');
+          dot.style.cssText = `display:inline-block;width:9px;height:9px;border-radius:50%;background:${MODEL_COLORS[m.model_display_name]}`;
+          const name = document.createElement('span');
+          name.textContent = ' ' + m.model_display_name;
+          if (!m.is_checkpoint) {
+            name.style.fontStyle = 'italic';
+            name.title = 'Baseline';
+          }
+          lbl.append(cb, dot, name);
+          container.appendChild(lbl);
+        }
+      }
+      setModels(checked) {
+        this.el.models.querySelectorAll('input').forEach(cb => cb.checked = checked);
+        this.renderChart();
+      }
+      setModelsByType(isCheckpoint) {
+        this.el.models.querySelectorAll('input').forEach(cb => {
+          cb.checked = (cb.dataset.isCheckpoint === String(isCheckpoint));
+        });
+        this.renderChart();
+      }
+      getSelectedModels() {
+        return Array.from(this.el.models.querySelectorAll('input:checked')).map(cb => cb.value);
+      }
+      getSmoothing() {
+        return parseInt(this.el.smooth.value, 10) || 1;
+      }
+      getChartType() {
+        return this.el.chartType.value;
+      }
+      getSelectedTask() {
+        const v = this.el.task.value;
+        return v === '__group__' ? this.el.group.value : v;
+      }
+      // ── Populate cascades ──────────────────────────────────────
+      async populateSuites(defaults) {
+        const rows = await query(`
+          SELECT DISTINCT task AS value, task_display_name AS label
+          FROM scores
+          WHERE task_type = 'eval_suite' AND task != 'test_fix'
+          ORDER BY task
+        `);
+        populateSelect(this.el.suite, rows, defaults?.suite);
+        await this.onSuiteChange(defaults);
+      }
+      async onSuiteChange(defaults) {
+        const suite = this.el.suite.value;
+        if (!suite) return;
+        const rows = await query(`
+          SELECT DISTINCT task AS value, task_display_name AS label
+          FROM scores
+          WHERE parent_task = '${esc(suite)}'
+            AND task_type = 'task_group'
+          ORDER BY task
+        `);
+        const options = [
+          { value: suite, label: `${suite} (aggregate)` },
+          ...rows,
+        ];
+        populateSelect(this.el.group, options, defaults?.group);
+        await this.onGroupChange(defaults);
+      }
+      async onGroupChange(defaults) {
+        const group = this.el.group.value;
+        if (!group) return;
+        const rows = await query(`
+          SELECT DISTINCT task AS value, task_display_name AS label
+          FROM scores
+          WHERE parent_task = '${esc(group)}'
+            AND task_type = 'benchmark'
+          ORDER BY task
+        `);
+        if (rows.length === 0) {
+          populateSelect(this.el.task, [{ value: '__group__', label: '(aggregate)' }]);
+        } else {
+          populateSelect(this.el.task, [
+            { value: '__group__', label: `(aggregate: ${group})` },
+            ...rows,
+          ]);
+        }
+        if (defaults?.task) this.el.task.value = defaults.task;
+        await this.onTaskChange(defaults);
+      }
+      async onTaskChange(defaults) {
+        const task = this.getSelectedTask();
+        if (!task) return;
+        const rows = await query(`
+          SELECT DISTINCT metric FROM scores WHERE task = '${esc(task)}' ORDER BY metric
+        `);
+        const prev = defaults?.metric || this.el.metric.value;
+        populateSelect(this.el.metric, rows.map(r => r.metric), prev);
+        if (defaults?.chartType) this.el.chartType.value = defaults.chartType;
+        await this.renderChart();
+      }
+      // ── Chart rendering ────────────────────────────────────────
+      async renderChart() {
+        const task = this.getSelectedTask();
+        const metric = this.el.metric.value;
+        const models = this.getSelectedModels();
+        if (!task || !metric || models.length === 0) {
+          this.el.chart.innerHTML = '';
+          this.updateTitle(task, metric);
+          return;
+        }
+        const rows = await query(`
+          SELECT model_display_name, tokens_trained, score, score_stderr,
+                 is_checkpoint, higher_is_better
+          FROM scores
+          WHERE task = '${esc(task)}'
+            AND metric = '${esc(metric)}'
+            AND model_display_name IN (${sqlIn(models)})
+            AND tokens_trained IS NOT NULL
+          ORDER BY model_display_name, tokens_trained
+        `);
+        if (rows.length === 0) {
+          this.el.chart.innerHTML = '<div class="loading">No data for this selection</div>';
+          this.updateTitle(task, metric);
+          return;
+        }
+        // Determine chart type
+        const chartType = this.resolveChartType(rows);
+        const higherIsBetter = rows[0]?.higher_is_better;
+        if (chartType === 'bar') {
+          this.drawBarChart(rows, task, metric, higherIsBetter);
+        } else {
+          this.drawLineChart(rows, task, metric, higherIsBetter);
+        }
+        this.updateTitle(task, metric, higherIsBetter);
+      }
+      resolveChartType(rows) {
+        const pref = this.getChartType();
+        if (pref !== 'auto') return pref;
+        // Auto-detect: if every model has <= 1 unique tokens_trained, use bar
+        const byModel = {};
+        for (const r of rows) {
+          if (!byModel[r.model_display_name]) byModel[r.model_display_name] = new Set();
+          byModel[r.model_display_name].add(Number(r.tokens_trained));
+        }
+        const allSingle = Object.values(byModel).every(s => s.size <= 1);
+        return allSingle ? 'bar' : 'line';
+      }
+      formatChartTitle(task, metric, higherIsBetter) {
+        const arrow = higherIsBetter === true ? ' \u2191' : higherIsBetter === false ? ' \u2193' : '';
+        return `${task} \u2014 ${metric}${arrow}`;
+      }
+      updateTitle(task, metric, higherIsBetter) {
+        const w = this.getSmoothing();
+        const smooth = w > 1 ? ` (smooth=${w})` : '';
+        const arrow = higherIsBetter === true ? ' \u2191' : higherIsBetter === false ? ' \u2193' : '';
+        this.el.title.textContent = `${task || '...'} \u2014 ${metric || '...'}${arrow}${smooth}`;
+      }
+      cleanupTooltip() {
+        const tooltip = document.getElementById('custom-tooltip');
+        tooltip.style.display = 'none';
+        const chart = this.el.chart;
+        chart.removeAllListeners?.('plotly_hover');
+        chart.removeAllListeners?.('plotly_unhover');
+        if (this._tooltipMouseMove) {
+          chart.removeEventListener('mousemove', this._tooltipMouseMove);
+          this._tooltipMouseMove = null;
+        }
+        if (this._tooltipMouseLeave) {
+          chart.removeEventListener('mouseleave', this._tooltipMouseLeave);
+          this._tooltipMouseLeave = null;
+        }
+      }
+      drawLineChart(rows, task, metric, higherIsBetter) {
+        this.cleanupTooltip();
+        const w = this.getSmoothing();
+        // Group by model
+        const byModel = {};
+        for (const r of rows) {
+          const name = r.model_display_name;
+          if (!byModel[name]) byModel[name] = { points: [], isCheckpoint: r.is_checkpoint };
+          byModel[name].points.push({ x: Number(r.tokens_trained), y: r.score });
+        }
+        for (const d of Object.values(byModel)) d.points.sort((a, b) => a.x - b.x);
+        // X range for baselines
+        let xMin = Infinity, xMax = -Infinity;
+        for (const d of Object.values(byModel)) {
+          if (d.isCheckpoint) {
+            for (const p of d.points) {
+              xMin = Math.min(xMin, p.x);
+              xMax = Math.max(xMax, p.x);
+            }
+          }
+        }
+        if (!isFinite(xMin)) { xMin = 0; xMax = 1; }
+        const traces = [];
+        for (const [name, d] of Object.entries(byModel)) {
+          const color = MODEL_COLORS[name] || '#999';
+          if (d.isCheckpoint && d.points.length > 1) {
+            traces.push({
+              x: d.points.map(p => p.x),
+              y: movingAverage(d.points.map(p => p.y), w),
+              name, mode: 'lines+markers',
+              line: { color, width: 2 }, marker: { size: 5 },
+            });
+          } else {
+            const score = d.points[0]?.y;
+            if (score != null) {
+              traces.push({
+                x: [xMin, xMax], y: [score, score],
+                name, mode: 'lines',
+                line: { color, width: 2, dash: 'dash' },
+              });
+            }
+          }
+        }
+        // Compute nice tick values from data range
+        const tickVals = niceTicks(xMin, xMax);
+        Plotly.react(this.el.chart, traces, {
+          title: { text: this.formatChartTitle(task, metric, higherIsBetter), font: { size: 14, color: '#1a1a2e' } },
+          hoverlabel: { namelength: -1 },
+          xaxis: {
+            title: { text: 'Tokens Trained', font: { size: 12 } },
+            tickfont: { size: 10 }, tickvals: tickVals, ticktext: tickVals.map(formatTokens),
+            gridcolor: '#e9ecef', zeroline: false,
+          },
+          yaxis: {
+            title: { text: 'Score', font: { size: 12 } },
+            tickfont: { size: 10 }, gridcolor: '#e9ecef', zeroline: false, autorange: true,
+          },
+          legend: { orientation: 'h', yanchor: 'bottom', y: 1.05, x: 0, font: { size: 11 } },
+          margin: { t: 80, r: 20, b: 70, l: 50 },
+          plot_bgcolor: '#fff', paper_bgcolor: '#fff',
+          font: { family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
+          height: 500,
+        }, { responsive: true });
+      }
+      drawBarChart(rows, task, metric, higherIsBetter) {
+        this.cleanupTooltip();
+        // For bar chart, use latest checkpoint per model
+        const byModel = {};
+        for (const r of rows) {
+          const name = r.model_display_name;
+          const tokens = Number(r.tokens_trained);
+          if (!byModel[name] || tokens > byModel[name].tokens) {
+            byModel[name] = { score: r.score, tokens, isCheckpoint: r.is_checkpoint };
+          }
+        }
+        // Sort by score
+        const sorted = Object.entries(byModel)
+          .sort((a, b) => higherIsBetter !== false ? b[1].score - a[1].score : a[1].score - b[1].score);
+        const names = sorted.map(([n]) => n);
+        const scores = sorted.map(([, d]) => d.score);
+        const colors = sorted.map(([n]) => MODEL_COLORS[n] || '#999');
+        const tokens = sorted.map(([, d]) => formatTokens(d.tokens));
+        const hovertext = sorted.map(([n, d]) =>
+          `${n}<br>Score: ${d.score.toFixed(4)}<br>Tokens: ${formatTokens(d.tokens)}`
+        );
+        // Annotations for tokens trained at the start of each bar
+        const annotations = names.map((name, i) => ({
+          x: 0,
+          y: name,
+          text: 'tokens trained: ' + tokens[i],
+          xanchor: 'left',
+          yanchor: 'middle',
+          showarrow: false,
+          font: { size: 10, color: '#000' },
+          xshift: 4,
+        }));
+        Plotly.react(this.el.chart, [{
+          type: 'bar',
+          orientation: 'h',
+          y: names,
+          x: scores,
+          marker: { color: colors },
+          text: scores.map(s => s.toFixed(4)),
+          textposition: 'outside',
+          textfont: { size: 11 },
+          hoverinfo: 'none',
+          customdata: hovertext,
+        }], {
+          title: { text: this.formatChartTitle(task, metric, higherIsBetter), font: { size: 14, color: '#1a1a2e' } },
+          hovermode: 'closest',
+          annotations,
+          xaxis: {
+            title: { text: 'Score', font: { size: 12 } },
+            tickfont: { size: 10 }, gridcolor: '#e9ecef', zeroline: false,
+          },
+          yaxis: {
+            tickfont: { size: 11 }, automargin: true,
+            categoryorder: 'array', categoryarray: names.slice().reverse(),
+          },
+          margin: { t: 60, r: 80, b: 60, l: 10 },
+          plot_bgcolor: '#fff', paper_bgcolor: '#fff',
+          font: { family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
+          height: Math.max(300, names.length * 40 + 100),
+          showlegend: false,
+        }, { responsive: true });
+        // Custom cursor-following tooltip
+        const tooltip = document.getElementById('custom-tooltip');
+        const chart = this.el.chart;
+        chart.on('plotly_hover', (data) => {
+          const pt = data.points[0];
+          tooltip.innerHTML = pt.customdata;
+          tooltip.style.display = 'block';
+        });
+        chart.on('plotly_unhover', () => {
+          tooltip.style.display = 'none';
+        });
+        this._tooltipMouseMove = (e) => {
+          if (tooltip.style.display === 'block') {
+            tooltip.style.left = (e.clientX + 12) + 'px';
+            tooltip.style.top = (e.clientY - 10) + 'px';
+          }
+        };
+        this._tooltipMouseLeave = () => {
+          tooltip.style.display = 'none';
+        };
+        chart.addEventListener('mousemove', this._tooltipMouseMove);
+        chart.addEventListener('mouseleave', this._tooltipMouseLeave);
+      }
+      export(format) {
+        const task = this.getSelectedTask();
+        const metric = this.el.metric.value;
+        let filename = `${task}_${metric}`.replace(/[^a-zA-Z0-9_-]/g, '_');
+        Plotly.downloadImage(this.el.chart, { format, scale: 3, filename });
+      }
+    }
+    // ── Panel management ────────────────────────────────────────
+    async function addPanel(defaults) {
+      const id = panelCounter++;
+      const panel = new Panel(id);
+      panels.set(id, panel);
+      await panel.populateSuites(defaults);
+      return panel;
+    }
+    // ── Init ────────────────────────────────────────────────────
+    const elInitLoading = document.getElementById('init-loading');
+    const elAddPanelRow = document.getElementById('add-panel-row');
+    async function init() {
+      try {
+        elInitLoading.textContent = 'Loading config...';
+        await loadConfig();
+        elInitLoading.textContent = 'Initializing DuckDB...';
+        await initDuckDB();
+        elInitLoading.textContent = 'Loading data from HuggingFace...';
+        await loadParquet();
+        elInitLoading.textContent = 'Loading models...';
+        await loadModels();
+        elInitLoading.style.display = 'none';
+        elAddPanelRow.style.display = '';
+        // Create default panel: deu_base_easy, aggregate, bits_per_byte, bar chart
+        await addPanel({
+          suite: 'deu_base_easy',
+          metric: 'bits_per_byte',
+          chartType: 'bar',
+        });
+      } catch (err) {
+        elInitLoading.innerHTML = `<span style="color:#e63946">
+          Error: ${err.message}<br>
+          <small>Check browser console for details.</small>
+        </span>`;
+        console.error('Init failed:', err);
+      }
+    }
+    document.getElementById('btn-add-panel').addEventListener('click', () => addPanel());
+    init();
+  </script>
+</body>
 </html>