speedup.js

// ─── Speedup vs Baseline Column ──────────────────────────────────────────────
//
// Extracted module. Call initSpeedup(deps) from the main app once globals are
// ready.  Returns { prepare, headerHtml, cellHtml, metricCol, bestMetric }.
//
// The benchmark data is inherently paired: an external baseline model (e.g.
// meta-llama/Llama-3.2-1B-Instruct) and the optimized embedl variants of it
// (embedl/Llama-3.2-1B-Instruct-FlashHead, …) measured under identical
// conditions. This module pairs them up and renders their ratio for the
// active metric as an extra column right after that metric in the tables.

// eslint-disable-next-line no-unused-vars
function initSpeedup(deps) {

const {
    config, MODEL_COL, FAMILY_COL, isExternalModel,
} = deps;

const ENABLED = config.speedup_column !== false;
const LABEL   = config.speedup_label || "VS BASE";

// Two rows are comparable only when everything that defines the measurement
// matches: the model family, every filter column (type / batch / device) and
// every configured display column (res / fps / frames / ctx). Leaving the
// display columns out would happily pair a 1920x1080 run with a 854x480 one.
const KEY_COLS = [
    FAMILY_COL,
    ...config.filters.map(f => f.column),
    ...(config.display_columns || []).map(d => d.column),
].filter(Boolean);

function pairKey(row, cols) {
    return cols.map(c => String(row[c] ?? "")).join("\0");
}

/** Metric value as a usable positive number; undefined for OOM / not-measured / "N/A" / 0. */
function usable(val) {
    return typeof val === "number" && isFinite(val) && val > 0 ? val : undefined;
}

function formatRatio(ratio) {
    return ratio.toFixed(2) + "×";
}

// Per-table state, rebuilt by prepare() before each table is rendered.
let state = null;

// ─── Best metric ─────────────────────────────────────────────────────────────

/**
 * The metric whose optimized-vs-baseline improvement is largest across `rows`,
 * so the chart can lead with the model's strongest result (highest speedup,
 * biggest memory/latency reduction, …). Ratios are oriented so that > 1 always
 * means "better than baseline", making metrics directly comparable.
 * @param rows     all rows of the loaded family
 * @param metrics  candidate metric configs (usually the ones with data)
 * @returns the winning metric column, or null when nothing pairs
 */
function bestMetric(rows, metrics) {
    if (!ENABLED || !rows || !rows.length) return null;

    const baselines = {};
    rows.forEach(r => {
        if (!isExternalModel(r[MODEL_COL])) return;
        const k = pairKey(r, KEY_COLS);
        (baselines[k] = baselines[k] || []).push(r);
    });

    let best = null;
    (metrics || []).forEach(m => {
        const hib = m.higher_is_better !== false;
        let top;
        rows.forEach(r => {
            if (isExternalModel(r[MODEL_COL])) return;
            const cands = baselines[pairKey(r, KEY_COLS)];
            if (!cands || !cands.length) return;
            if (new Set(cands.map(c => c[MODEL_COL])).size > 1) return;
            const b = usable(cands[0][m.column]);
            const o = usable(r[m.column]);
            if (b === undefined || o === undefined) return;
            const ratio = hib ? o / b : b / o;
            if (!isFinite(ratio) || ratio <= 0) return;
            if (top === undefined || ratio > top) top = ratio;
        });
        if (top !== undefined && (!best || top > best.ratio)) {
            best = { column: m.column, ratio: top };
        }
    });
    return best ? best.column : null;
}

// ─── Pairing ─────────────────────────────────────────────────────────────────

/**
 * Compute the baseline pairing for one rendered table.
 * @param rows  the rows of this table (already filtered to one group_by value)
 * @param opts  { tableGroupCols, visibleMetrics, activeMetricCol }
 */
function prepare(rows, opts) {
    state = null;
    if (!ENABLED || !rows || !rows.length) return;

    const visibleMetrics = opts.visibleMetrics || [];
    const metricCfg = visibleMetrics.find(m => m.column === opts.activeMetricCol)
        || visibleMetrics[0];
    if (!metricCfg) return;

    const metricCol = metricCfg.column;
    const hib = metricCfg.higher_is_better !== false;
    const cols = [...new Set(KEY_COLS.concat(opts.tableGroupCols || []))];

    // Bucket the external (baseline) rows by comparison key.
    const baselines = {};
    rows.forEach(r => {
        if (!isExternalModel(r[MODEL_COL])) return;
        const k = pairKey(r, cols);
        (baselines[k] = baselines[k] || []).push(r);
    });

    const ratios  = new Map();  // optimized row -> ratio
    const isBase  = new Set();  // baseline rows that actually anchor a pair

    rows.forEach(r => {
        if (isExternalModel(r[MODEL_COL])) return;
        const cands = baselines[pairKey(r, cols)];
        if (!cands || !cands.length) return;
        // Ambiguous: several *different* baseline models match the same key.
        // Show nothing rather than an arbitrary ratio.
        if (new Set(cands.map(c => c[MODEL_COL])).size > 1) return;
        const base = cands[0];
        const b = usable(base[metricCol]);
        const o = usable(r[metricCol]);
        if (b === undefined || o === undefined) return;
        const ratio = hib ? o / b : b / o;
        if (!isFinite(ratio) || ratio <= 0) return;
        ratios.set(r, ratio);
        isBase.add(base);
    });

    if (!ratios.size) return;   // no real pair in this table -> no column
    state = { ratios, isBase, metricCfg };
}

// ─── Rendering ───────────────────────────────────────────────────────────────

/** Column key of the metric the ratio is based on, so the table can place the
 *  speedup column right next to it. Null when the column is not shown. */
function metricCol() {
    return state ? state.metricCfg.column : null;
}

function headerHtml() {
    if (!state) return "";
    const m = state.metricCfg;
    const tip = `Ratio of this model's ${m.label || m.column} against the original `
        + `(non-${config.optimized_org || "embedl"}) model measured under identical conditions. `
        + `Always oriented so that higher is better: 1.26× means 26% better than the baseline.`;
    return `<th class="metric-cell speedup-cell" data-tip="${tip.replace(/"/g, "&quot;")}">${LABEL}</th>`;
}

function cellHtml(row) {
    if (!state) return "";
    if (state.isBase.has(row)) {
        // The baseline is the reference point, so it is 1.00x by definition.
        // Spelling it out keeps "—" unambiguously meaning "no comparison".
        return `<td class="metric-cell speedup-cell"><span class="speedup-ref">1.00×</span></td>`;
    }
    const ratio = state.ratios.get(row);
    if (ratio === undefined) return `<td class="metric-cell speedup-cell">—</td>`;
    const down = ratio < 0.995 ? " is-down" : "";
    return `<td class="metric-cell speedup-cell">`
        + `<span class="speedup-val${down}">${formatRatio(ratio)}</span></td>`;
}

return { prepare, headerHtml, cellHtml, metricCol, bestMetric };

}