|
|
import { ref, computed, reactive } from 'vue' |
|
|
import { parseCsvContent, processModelNames } from '@/utils/csvUtils.js' |
|
|
|
|
|
|
|
|
const globalState = reactive({ |
|
|
leaderboard: [], |
|
|
csvHeaders: [], |
|
|
loading: true, |
|
|
error: null, |
|
|
|
|
|
sortKey: '', |
|
|
sortDesc: true, |
|
|
visibleColumns: [], |
|
|
dataGroups: [], |
|
|
selectedDataName: '', |
|
|
selectedDataNameChart: '', |
|
|
modelTypeGroups: [], |
|
|
selectedModelType: [], |
|
|
DEFAULT_CSV_PATH: '/filtered.csv', |
|
|
|
|
|
DEFAULT_HIDDEN: new Set(['seq_len', 'uniform_entropy', 'entropy_gain', 'information_capacity', 'data_name', 'model_size (B)']) |
|
|
}) |
|
|
|
|
|
|
|
|
const modelTypeMapping = { |
|
|
'Qwen3': ['Qwen3'], |
|
|
'Qwen2.5': ['Qwen2.5'], |
|
|
'Qwen2': ['Qwen2'], |
|
|
'Qwen1.5': ['Qwen1.5'], |
|
|
'Llama-3': ['Llama-3.1', 'Llama-3.2'], |
|
|
'InternLM2.5': ['Internlm2.5'], |
|
|
'GLM-4': ['GLM-4', 'GLM-4'], |
|
|
'Seed-OSS': ['Seed-OSS'], |
|
|
'Gemma-3': ['Gemma-3'], |
|
|
'Hunyuan': ['Hunyuan'], |
|
|
'Qwen2 (MoE)': ['Qwen2 (MoE)'], |
|
|
'Qwen1.5 (MoE)': ['Qwen1.5 (MoE)'], |
|
|
'DeepSeek-V3.1': ['DeepSeek-V3.1-Base'], |
|
|
'DeepSeek-V2': ['DeepSeek-V2'], |
|
|
'GLM-4.5': ['GLM-4.5-Air-Base', 'GLM-4.5-Base'], |
|
|
'Llama-4': ['Llama-4'] |
|
|
} |
|
|
|
|
|
const MoEModelSeries = ['Qwen2', 'Qwen1.5'] |
|
|
|
|
|
const strtSymbolSeries = ['Qwen2 (MoE)', 'Qwen1.5 (MoE)', 'DeepSeek-V3.1', 'DeepSeek-V2', 'GLM-4.5', "Llama-4"] |
|
|
|
|
|
|
|
|
const autoShowSeries = ["*"] |
|
|
|
|
|
|
|
|
const headerDisplayMap = reactive({ |
|
|
'rank': 'Rank', |
|
|
'model_name': 'Model Name', |
|
|
'model_series': 'Model Series', |
|
|
'model_size (B)': 'Model Size (B)', |
|
|
'constant': 'Text Size', |
|
|
'conditional_entropy': 'Negative Log-Likelihood', |
|
|
'BF16_TFLOPs': 'FLOPs (G)', |
|
|
'ic': ' Information Capacity', |
|
|
'model_source': 'Tested by' |
|
|
}) |
|
|
|
|
|
|
|
|
const dataNameDisplayMap = reactive({ |
|
|
'data_part_0000': 'Mixed text', |
|
|
'eng_Latn_000_00027_long': 'FinePDFs-en', |
|
|
'IndustryCorpus_batch_aa_long': 'Ch-FineWeb-Edu', |
|
|
'CC-MAIN-2013-20_train-00000-of-00014_long': 'FineWeb-Edu', |
|
|
'NextCoderDataset_v1_long': 'NextCoder', |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const selectedMode = ref('Model') |
|
|
|
|
|
|
|
|
const selectableColumns = computed(() => { |
|
|
if (!globalState.csvHeaders || globalState.csvHeaders.length === 0) return [] |
|
|
return globalState.csvHeaders.filter(h => !globalState.DEFAULT_HIDDEN.has(h)) |
|
|
}) |
|
|
|
|
|
|
|
|
const modelTypeGroups = computed(() => { |
|
|
return Object.keys(modelTypeMapping) |
|
|
}) |
|
|
|
|
|
|
|
|
const sortedLeaderboard = computed(() => { |
|
|
if (!globalState.leaderboard || globalState.leaderboard.length === 0) return [] |
|
|
const key = globalState.sortKey |
|
|
const desc = !!globalState.sortDesc |
|
|
const arr = [...globalState.leaderboard] |
|
|
if (!key || key === '') return arr |
|
|
arr.sort((a, b) => { |
|
|
const va = a[key] |
|
|
const vb = b[key] |
|
|
|
|
|
if (va == null && vb == null) return 0 |
|
|
if (va == null) return 1 |
|
|
if (vb == null) return -1 |
|
|
const na = Number(va) |
|
|
const nb = Number(vb) |
|
|
if (Number.isFinite(na) && Number.isFinite(nb)) { |
|
|
return desc ? (nb - na) : (na - nb) |
|
|
} |
|
|
try { |
|
|
return desc ? String(vb).localeCompare(String(va)) : String(va).localeCompare(String(vb)) |
|
|
} catch (e) { |
|
|
return 0 |
|
|
} |
|
|
}) |
|
|
return arr |
|
|
}) |
|
|
|
|
|
|
|
|
const filteredLeaderboard = computed(() => { |
|
|
if (!globalState.leaderboard || globalState.leaderboard.length === 0) return [] |
|
|
|
|
|
let filtered = sortedLeaderboard.value |
|
|
|
|
|
|
|
|
if (globalState.selectedDataName && globalState.selectedDataName !== 'all') { |
|
|
filtered = filtered.filter(r => String(r['data_name'] ?? '') === String(globalState.selectedDataName)) |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const sel = globalState.selectedModelType |
|
|
if (Array.isArray(sel)) { |
|
|
if (sel.includes('__none__')) return [] |
|
|
if (sel.length > 0) { |
|
|
filtered = filtered.filter(r => sel.includes(String(r['model_type'] ?? ''))) |
|
|
} |
|
|
} |
|
|
|
|
|
return filtered.map((item, index) => ({ ...item, rank: index + 1 })) |
|
|
}) |
|
|
|
|
|
|
|
|
const modelSeriesICAvg = computed(() => { |
|
|
const rows = globalState.leaderboard || [] |
|
|
const selData = globalState.selectedDataName |
|
|
const selModelTypes = globalState.selectedModelType |
|
|
|
|
|
|
|
|
const out = [] |
|
|
const keys = Object.keys(modelTypeMapping) |
|
|
|
|
|
|
|
|
if (Array.isArray(selModelTypes) && selModelTypes.includes('__none__')) return [] |
|
|
|
|
|
for (const key of keys) { |
|
|
|
|
|
if (Array.isArray(selModelTypes) && selModelTypes.length > 0) { |
|
|
|
|
|
if (!selModelTypes.includes(key)) continue |
|
|
} |
|
|
|
|
|
const mappedSeries = new Set(modelTypeMapping[key] || []) |
|
|
|
|
|
mappedSeries.add(key) |
|
|
|
|
|
|
|
|
let sum = 0 |
|
|
let count = 0 |
|
|
let constant = 0 |
|
|
let modelSource = '' |
|
|
for (const r of rows) { |
|
|
|
|
|
if (selData && selData !== 'all') { |
|
|
if (String(r['data_name'] ?? '') !== String(selData)) continue |
|
|
} |
|
|
const seriesName = String(r['model_series'] ?? '').trim() |
|
|
if (!seriesName) continue |
|
|
if (!mappedSeries.has(seriesName)) continue |
|
|
const icRaw = r['ic'] |
|
|
const n = Number(icRaw) |
|
|
if (!Number.isFinite(n)) continue |
|
|
constant = Number(r['constant']) || 0 |
|
|
sum += n |
|
|
count += 1 |
|
|
modelSource = r['model_source'] |
|
|
} |
|
|
if (count === 0) continue |
|
|
const avg = sum / count |
|
|
out.push({ ModelSeries: key, IC: Number(avg.toFixed(4)), Constant: constant ,ModelSource: modelSource }) |
|
|
} |
|
|
|
|
|
|
|
|
const key = globalState.sortKey |
|
|
const desc = !!globalState.sortDesc |
|
|
if (key && key !== '') { |
|
|
out.sort((a, b) => { |
|
|
let va, vb |
|
|
if (key === 'ic') { |
|
|
va = a.IC |
|
|
vb = b.IC |
|
|
} else if (key === 'constant') { |
|
|
va = a.Constant |
|
|
vb = b.Constant |
|
|
} else { |
|
|
va = a[key] |
|
|
vb = b[key] |
|
|
} |
|
|
|
|
|
if (va == null && vb == null) return 0 |
|
|
if (va == null) return 1 |
|
|
if (vb == null) return -1 |
|
|
const na = Number(va) |
|
|
const nb = Number(vb) |
|
|
if (Number.isFinite(na) && Number.isFinite(nb)) { |
|
|
return desc ? (nb - na) : (na - nb) |
|
|
} |
|
|
try { |
|
|
return desc ? String(vb).localeCompare(String(va)) : String(va).localeCompare(String(vb)) |
|
|
} catch (e) { |
|
|
return 0 |
|
|
} |
|
|
}) |
|
|
} else { |
|
|
|
|
|
out.sort((a, b) => b.IC - a.IC) |
|
|
} |
|
|
return out |
|
|
}) |
|
|
|
|
|
|
|
|
function setSortKey(h) { |
|
|
if (!h) return |
|
|
if (globalState.sortKey !== h) { |
|
|
globalState.sortKey = h |
|
|
globalState.sortDesc = true |
|
|
return |
|
|
} |
|
|
|
|
|
globalState.sortDesc = !globalState.sortDesc |
|
|
} |
|
|
|
|
|
|
|
|
const displayedColumns = computed(() => { |
|
|
if (!globalState.csvHeaders || globalState.csvHeaders.length === 0) return [] |
|
|
|
|
|
console.log('csvHeaders:', globalState.csvHeaders) |
|
|
const all = globalState.csvHeaders |
|
|
return all.filter(h => globalState.visibleColumns.includes(h)) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
async function fetchAndLoadCsv(path = globalState.DEFAULT_CSV_PATH) { |
|
|
globalState.loading = true |
|
|
globalState.error = null |
|
|
|
|
|
try { |
|
|
const res = await fetch(path) |
|
|
if (!res.ok) throw new Error(`Failed to fetch CSV (${res.status})`) |
|
|
const txt = await res.text() |
|
|
const { headers, rows } = parseCsvContent(txt) |
|
|
processModelNames(rows) |
|
|
if (!headers || headers.length === 0) { globalState.leaderboard = []; globalState.loading = false; return } |
|
|
|
|
|
|
|
|
const scoreKey = headers.find(h => ['information_capacity', 'ic', 'score'].includes(h)) || headers.find(h => /capacity|score|ic/i.test(h)) || headers[0] |
|
|
|
|
|
const defaultKey = headers.length > 0 ? headers[headers.length - 1] : scoreKey |
|
|
globalState.sortKey = defaultKey || '' |
|
|
globalState.sortDesc = true |
|
|
|
|
|
|
|
|
|
|
|
for (const r of rows) { |
|
|
|
|
|
|
|
|
|
|
|
const seriesName = String(r['model_series'] ?? '').trim() |
|
|
|
|
|
if (!Object.values(modelTypeMapping).flat().includes(seriesName)) { |
|
|
modelTypeMapping[seriesName] = [seriesName] |
|
|
} |
|
|
|
|
|
|
|
|
const name = r['model_name'] || '' |
|
|
const sourceMatch = name.match(/\[\[(.+?)\]\]$/) |
|
|
if (sourceMatch) { |
|
|
r['model_source'] = sourceMatch[1] |
|
|
|
|
|
r['model_name'] = name.replace(/\[\[(.+?)\]\]$/, '').trim() |
|
|
} else { |
|
|
r['model_source'] = 'TeleAI' |
|
|
} |
|
|
|
|
|
|
|
|
for (const moePrefix of MoEModelSeries) { |
|
|
if (name.startsWith(moePrefix)) { |
|
|
|
|
|
const moeSuffixMatch = name.match(/-A(.+)B$/) |
|
|
if (moeSuffixMatch) { |
|
|
|
|
|
r['model_series'] = `${moePrefix} (MoE)` |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
let modelType = '' |
|
|
|
|
|
for (const [type, series] of Object.entries(modelTypeMapping)) { |
|
|
if (series.includes(r['model_series'])) { |
|
|
modelType = type |
|
|
break |
|
|
} |
|
|
} |
|
|
r['model_type'] = modelType |
|
|
|
|
|
|
|
|
r['model_series'] = modelType |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const preferred = ['model_name', 'model_series', 'model_size (B)', 'seq_len', 'uniform_entropy', 'constant', 'conditional_entropy', 'entropy_gain', 'BF16_TFLOPs', 'information_capacity', 'ic','model_source'] |
|
|
const ordered = [] |
|
|
for (const p of preferred) if (headers.includes(p) && !ordered.includes(p)) ordered.push(p) |
|
|
for (const h of headers) if (!ordered.includes(h)) ordered.push(h) |
|
|
globalState.csvHeaders = ['rank', ...ordered, 'model_source'] |
|
|
|
|
|
globalState.leaderboard = rows.map((r, idx) => { |
|
|
|
|
|
const modelType = r['model_type'] |
|
|
|
|
|
|
|
|
const originalTFLOPs = Number(r['BF16_TFLOPs']) || 0 |
|
|
const modifiedTFLOPs = (originalTFLOPs / 1024) * 1000 |
|
|
return { rank: idx + 1, model_type: modelType, ...r, BF16_TFLOPs: modifiedTFLOPs } |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const seen = new Set() |
|
|
const groups = [] |
|
|
for (const r of rows) { |
|
|
const dn = r['data_name'] |
|
|
if (dn == null) continue |
|
|
const s = String(dn) |
|
|
if (s.trim() === '') continue |
|
|
if (!seen.has(s)) { seen.add(s); groups.push(s) } |
|
|
} |
|
|
globalState.dataGroups = groups |
|
|
|
|
|
|
|
|
globalState.modelTypeGroups = Object.keys(modelTypeMapping) |
|
|
|
|
|
|
|
|
if (globalState.dataGroups.length > 0) { |
|
|
globalState.selectedDataName = globalState.dataGroups[0] |
|
|
globalState.selectedDataNameChart = globalState.dataGroups[0] |
|
|
} |
|
|
|
|
|
|
|
|
if (globalState.modelTypeGroups.length > 0) { |
|
|
globalState.selectedModelType = [...globalState.modelTypeGroups] |
|
|
} |
|
|
|
|
|
|
|
|
globalState.visibleColumns = ['rank', ...ordered.filter(h => !globalState.DEFAULT_HIDDEN.has(h)), 'model_source'] |
|
|
|
|
|
|
|
|
const numericFloatCols = new Set(['uniform_entropy', 'conditional_entropy', 'entropy_gain', 'information_capacity', 'ic', 'constant', 'BF16_TFLOPs']) |
|
|
const numericIntCols = new Set(['seq_len']) |
|
|
|
|
|
for (const row of globalState.leaderboard) { |
|
|
row._formatted = {} |
|
|
for (const h of ordered) { |
|
|
const raw = row[h] |
|
|
if (raw == null || raw === '') { row._formatted[h] = ''; continue } |
|
|
if (numericIntCols.has(h)) { |
|
|
const n = Number(raw) |
|
|
row._formatted[h] = Number.isFinite(n) ? String(Math.round(n)) : raw |
|
|
} else if (numericFloatCols.has(h)) { |
|
|
const n = Number(raw) |
|
|
if (h === 'ic') { |
|
|
row._formatted[h] = Number.isFinite(n) ? n.toFixed(4) : raw |
|
|
} |
|
|
else if (h === 'constant') { |
|
|
row._formatted[h] = Number.isFinite(n) ? n.toFixed(2) : raw |
|
|
} |
|
|
else { |
|
|
row._formatted[h] = Number.isFinite(n) ? n.toFixed(3) : raw |
|
|
} |
|
|
} else { |
|
|
row._formatted[h] = raw |
|
|
} |
|
|
} |
|
|
} |
|
|
} catch (e) { |
|
|
console.error(e) |
|
|
globalState.error = e && e.message ? e.message : String(e) |
|
|
} finally { |
|
|
globalState.loading = false |
|
|
} |
|
|
} |
|
|
|
|
|
function selectAll() { |
|
|
|
|
|
globalState.visibleColumns = [...selectableColumns.value] |
|
|
} |
|
|
|
|
|
function clearAll() { |
|
|
globalState.visibleColumns = [] |
|
|
} |
|
|
|
|
|
function selectAllModelTypes() { |
|
|
globalState.selectedModelType = [...modelTypeGroups.value] |
|
|
} |
|
|
|
|
|
function clearAllModelTypes() { |
|
|
|
|
|
globalState.selectedModelType = ['__none__'] |
|
|
} |
|
|
|
|
|
function formatCell(h, model) { |
|
|
if (!model) return '' |
|
|
if (model._formatted && model._formatted[h] !== undefined) return model._formatted[h] |
|
|
return model[h] |
|
|
} |
|
|
|
|
|
|
|
|
function init() { |
|
|
fetchAndLoadCsv() |
|
|
} |
|
|
|
|
|
export function useLeaderboardData() { |
|
|
return { |
|
|
|
|
|
leaderboard: computed(() => globalState.leaderboard), |
|
|
csvHeaders: computed(() => globalState.csvHeaders), |
|
|
loading: computed(() => globalState.loading), |
|
|
error: computed(() => globalState.error), |
|
|
visibleColumns: computed({ |
|
|
get: () => globalState.visibleColumns, |
|
|
set: (v) => globalState.visibleColumns = v |
|
|
}), |
|
|
selectedMode: computed({ |
|
|
get: () => selectedMode.value, |
|
|
set: (v) => selectedMode.value = v |
|
|
}), |
|
|
selectableColumns, |
|
|
autoShowSeries, |
|
|
strtSymbolSeries, |
|
|
headerDisplayMap: computed(() => headerDisplayMap), |
|
|
dataNameDisplayMap: computed(() => dataNameDisplayMap), |
|
|
dataGroups: computed(() => globalState.dataGroups), |
|
|
selectedDataName: computed({ |
|
|
get: () => globalState.selectedDataName, |
|
|
set: (v) => globalState.selectedDataName = v |
|
|
}), |
|
|
selectedDataNameChart: computed({ |
|
|
get: () => globalState.selectedDataNameChart, |
|
|
set: (v) => globalState.selectedDataNameChart = v |
|
|
}), |
|
|
modelTypeGroups: computed(() => globalState.modelTypeGroups), |
|
|
selectedModelType: computed({ |
|
|
get: () => globalState.selectedModelType, |
|
|
set: (v) => { |
|
|
|
|
|
if (Array.isArray(v) && v.some(x => x !== '__none__')) { |
|
|
globalState.selectedModelType = v.filter(x => x !== '__none__') |
|
|
} else { |
|
|
globalState.selectedModelType = v |
|
|
} |
|
|
} |
|
|
}), |
|
|
filteredLeaderboard, |
|
|
displayedColumns, |
|
|
modelSeriesICAvg, |
|
|
|
|
|
fetchAndLoadCsv, |
|
|
selectAll, |
|
|
clearAll, |
|
|
selectAllModelTypes, |
|
|
clearAllModelTypes, |
|
|
|
|
|
sortKey: computed(() => globalState.sortKey), |
|
|
sortDesc: computed(() => globalState.sortDesc), |
|
|
setSortKey, |
|
|
formatCell, |
|
|
init |
|
|
} |
|
|
} |